# Designing for US, HERE and NOW

This is the contract for anyone designing or building for our surfaces — a person, or an agent working for one. If
you were sent a link to ui.hereandmore.com, start here. Everything below is held by tests in the library; what the
gallery shows is what these rules produce, on both grounds (paper and night), still and moving, narrow and wide.

## The three surfaces

- **HERE** is universal and naturally coloured. There is no brand colour and no colour scheme: the paper is a quiet
  near-white, pills and bands are ink, and colour speaks only for state — `ok`, `warn`, `bad`.
- **NOW** is the working surface, in the quiet register: `data-us-register="quiet"` on its root. System sans, the
  serif only where a surface speaks (a scene's title, one question, a welcome, an empty place), no ornament.
- **US** is the social surface: the same system, friendlier — faces, presence, the people you share with.

## The rules the tests hold

These were learned in use; each one has a test in the library or in NOW that fails when it is broken.

1. **Colour is a meaning, never a hue.** A success is `ok`, a failure `bad`, a caution `warn` — their ink
   (`--us-ok`), their wash (`--us-ok-wash`), their line. Blue, purple and every other decorative hue are the neutral
   ink and tint. White words on an ink are `on-ink`, so they turn with the ink at night.
2. **Every duration is a token, every loop is stilled.** `--us-press` 120 · `--us-micro` 160 · `--us-dur` 180 ·
   `--us-meso` 280 · `--us-rise` 280 · `--us-slow` 420 · `--us-macro` 600. A loop is listed once in the sheet's law
   of stillness and stops under `prefers-reduced-motion` and `data-motion="off"`. No literal durations.
3. **A card in a card has no shadow of its own.** Set in a card (or in the pilot), a budget, a kernel, a next-act is
   a tint with no shadow. Nested shadows are sliced by the parent and read as clutter.
4. **What a scroll row clips, it makes room for.** A row that scrolls pads by the ring or shadow it would cut and
   takes the room back outside with a negative margin, so nothing moves. A pill row seats what is on in a shadow its
   3 px can hold; focus stays inside the pill.
5. **In NOW, `<main>` is the scroll area and already pads 56 px for the fixed bar.** A sticky strip inside it is
   `top-0`; several strips are ONE sticky block. Never `top-14`, never an offset that guesses a height.
6. **A page keeps its gutter.** `p-4 lg:p-6` on the page's root; nothing runs to the scroll area's edge.
7. **Presence is true or nothing.** Draw someone as here only when the server says so; until it has answered, draw
   nothing — not known is not away.
8. **People are never ranked by how they are drawn.** Nobody is bigger, higher or brighter for who they are. In a
   scircle the standings are marks: a PRIME keeps a keel (a thin ring), a guardian wears a watch (a dot going round),
   a PRIME guardian a seal (a diamond), a member is plain, a guest sits at the rim in a dashed bubble of their own.
9. **A branch is a fork within one circle.** Some of those inside step out into a bud joined by a neck; the merge
   glides them back. Two circles never merge.
10. **The serif is the voice, the sans the hands.** Names of pages, cards and sheets are in the sans, semibold.

## Using it

- **Components** come from the shadcn registry, namespace `@us`. In your `components.json`:
  `"registries": { "@us": "https://ui.hereandmore.com/r/{name}.json" }`, then `npx shadcn@latest add @us/<name>`.
  Import the tokens (`@us/us-tokens`) and the sheet (`@us/us-ui-css`) first.
- **Tokens** are CSS custom properties in https://ui.hereandmore.com/us.css (and a Tailwind bridge in
  https://ui.hereandmore.com/tailwind.css).
- **An agent** can browse and install through MCP:
  `{ "mcpServers": { "us-ui": { "command": "npx", "args": ["-y", "@here/us-ui-mcp"] } } }`.
- **Check your work** against the gallery: every piece in every state, paper and night, still and moving, narrow.

## The system: the nine laws

1. **The world is the ground.** A photograph, a scene, a map, a capture — that is the page. The
   interface floats over it as *paper* or *dark glass*, never as a box drawn beside it. Where there is
   no imagery, the ground is warm paper, and the interface still floats (shadow), never outlines (line).
   Hairlines exist only *inside* a surface, to separate rows.
2. **One question at a time.** The Wellim card: a kicker, one serif question, one sentence of help, one
   control, one black pill, a row of progress dashes. A surface asks, then waits. Nothing competes.
3. **The serif is the voice; the sans is the hands and the names.** The serif is kept for what a surface
   *says* — a scene's title, the one question, a welcome, an empty place; the names of pages, cards and
   sheets are in the sans, semibold, so a working surface does not declaim on every page. Display in a warm serif (Young Serif, then
   Instrument Serif) at 28 / 36 / 48 / 64, with the emphasised word in italic. Everything a person
   operates in a rounded humanist sans (Open Runde, then the system) at 15, never below 12.
4. **Numbers are large and honest.** Time and measurement read at a glance — 15:30, 1,200, 90 — set in
   the serif or in tabular figures, each with its unit beside it, each trace on its own scale.
5. **Time is a control on every surface.** A scrub with named stops (now · a week · winter · summer),
   a readout, and *return to now*. Looking ahead never moves the present.
6. **Evidence wears a frame.** A capture, a frame from a video, a source — always with its time and
   where it came from, shown inside a frame with corner brackets. A card never states more than was seen.
7. **Every place has a number.** Stations, steps, days: 01 · 02 · 03. The sequence is the pathway;
   moving never loses the controls; transitions keep orientation.
8. **Black is the accent; HERE has no brand colour.** HERE is universal and naturally coloured: the paper
   is a quiet near-white, pills and bands are ink, and colour otherwise speaks only for state — ok, warn,
   bad. Over a photograph the one warm light is the world's own: the sun, the live thing, the now.
9. **Motion has weight.** Things rise (8px, 280ms) and materialise (blur → sharp); pressables answer
   under the finger (scale .96, 120ms); nothing bounces, nothing is decorative, nothing over 300ms. The one
   exception is people moving in a circle: a scircle's arrival lands with the system spring and glides at `--us-macro`
   (600ms) — LNK asked for character there (2026-09-23) — and still motion stills it like everything else.

### The materials

| material | where | how |
|---|---|---|
| paper | the page, cards on it | `--us-ground` under `--us-surface`; lifted by `--us-shadow-1/2/3`, radius 22–28, no border |
| glass | a note floating over imagery or a map | `--us-glass` + blur 28 + the inner highlight `--us-glass-hl` |
| dark glass | controls over a photograph, the live instrument | `--us-glass-dark`, white ink, inner highlight |
| ink | the primary pill, the lockup band, the composer's send | `--us-ink` with `--us-on-ink` |
| night | the cinema ground when a surface wears it | `data-theme="dark"`, an explicit act |

### What is deliberately not in the system

Boxes drawn with borders around content · more than one question on a card · type under 12 px ·
a second accent · springs on binary states · fake units · a photograph we do not own.

### Motion and glass: the contract

A Scene is the world and one question at its foot, and a cut between scenes runs through `cut(update)` at `--us-macro` with a materialise. Places have depth: a canvas node carries `z`, a compare pane a `ground` under one clock, a stations rail a `reached` station that makes it a pathway, and a frame a `shutter` that blinks once at capture. Time is a control: a Scrub publishes where it stands as `--us-t`, a Compare's grounds darken with it, a Storyboard's progress line is scrubbed by its own scroll; nothing time-driven plays by itself. The proof scene reports long frames in a rise and blurred surfaces in view as numbers, measured where it runs.

Every duration is a token: `press` 120 · `micro` 160 · `dur` 180 · `meso` 280 · `rise` 280 · `slow` 420 · `macro` 600 for the world itself; the loops too: `pulse` 1600 · `tick` 1200 · `turn` 800 · `blink` 1000. The named motions live once as keyframes and every piece reuses them: *rise* (8 px), *materialise* (blur 12 → sharp, with a rise), *settle* (the spring), *fade*, *live*. Under `prefers-reduced-motion`, or when the surface says `data-motion="off"`, every duration is 1 ms and every loop is stilled by one law at the end of the sheet, which the motion test holds to the sheet. Glass has two weights — `--us-glass-blur-thin` 12 for chips and hands over imagery, `--us-glass-blur-thick` 28 for sheets and cards — one saturation, and a depth 0–3 (`data-depth`, `.us-depth-N`) bound to the shadow scale. Things arrive in order: rows rise `--us-step` 20 ms apart, eight at most, and let go after so a hover stays the hover's. A thing keeps its place when it opens: `move(update)` runs a change through the browser's view transition where it has one and the surface moves; the Deck's tabs, a named Card and the open Sheet carry their names. Glass knows its ground: the Cover samples its photograph once loaded and its note wears light or dark ink accordingly (`groundOf`, `sampleGround`); the contrast test holds the ink on glass over black and on dark glass over white to AA.

### The head of a page

Every page opens the same way: the Head — a kicker saying where this sits, the name in the serif voice with the emphasised word in italic, one sentence saying what the page is for, the actions at the far edge on a desk and under the words on a phone, and the pathway below (a stations rail, a tab list). A person always knows where they are and what they can do here. `@us/head`.

### The edge and the name

A bar never draws a line under itself: `.us-edge` thins its ground toward the foot and softens what scrolls beneath through two masked blurs (harvested from rit3zh's progressive blur, `docs/inspiration/rit3zh.md` P1). A page's name is on the screen once: the page's Head (h1) says whether it is on screen (`data-us-head` on the root), and a bar's `.us-bar-title` takes the name only when the head has gone under it (P2).

### A finger's reach

What is drawn small is drawn small on purpose; on a touch screen its reach is not. Every pressable the sheet draws under 44 px carries an invisible halo reaching 44 × 44 around its centre on a coarse pointer, never smaller than itself. The drawing does not change; the touch test measures the sheet so a new small control cannot forget it.

### Proof

The system is held by gates, not by eye: the contrast test (every ink on every ground it declares, AA), the motion test (every duration a token, every loop under the one law, both stills alike), the adopter gate (every served item lints under an adopter's rules), the accessibility gate (every piece rendered in a representative state under axe-core's WCAG A/AA and best-practice rules; a nameless button proves the gate executes), the foundation tests (the switch snaps, the pill has five meanings, the card floats without a line, the type keeps the serif for the voice and nothing under 12 px), and the registry tests with their mutants. A piece that cannot pass them is not in the system.

### The next level

Motion, glass and what comes after — measured, sequenced, not yet built — are in [the next level](https://ui.hereandmore.com/guide.md).

### The working set

Laws 10–14 — who drives, a rank that says why, ask or find, a proposal is a card, a place holds its pieces — are in [the working set](https://ui.hereandmore.com/guide.md).

## Working with the mind: laws 10–14

10. **The hand is visible.** Who drives is shown at all times and never springs back: you, together,
    or the mind. The mind's presence on a surface has a name and a place; it never acts from nowhere.
    → `Wheel`; (canvas) `Hand`.
11. **A rank says why.** Anything ordered for a person shows its number, its reasons and their weight,
    and the person can pin, mute or turn a knob. A rank with no reason is a guess wearing a number.
    → `Ranked`, `rank()`, `Facets`.
12. **Ask or find is one field.** Search that finds nothing becomes a question; a miss is never a dead
    end. `>` names an act, `@` a person, `#` a room; the kinds are grouped, the count is announced.
    → `Palette`, `parsePrefix()`.
13. **A proposal is a card, never an act.** The next thing is proposed with its evidence, its cost and
    what it weighed; one black press does it; "not this" is as easy. Nothing happens until the press.
    A declared act that spends or cannot be undone is an `Approval`, held; a suggestion is a `NextAct`.
    → `NextAct`; `Suggest` for a completion inside a field — Tab takes it, Escape waves it away, and it
    is never the value until it is taken.
14. **A place holds its pieces.** A canvas is a place with numbered lanes, and the mind's hand on it is
    named and stands on what it is working; a deck remembers what is open and who opened it; a person is
    a card with the line between you drawn; discovery is a grid where nothing is here without a reason.
    → `Canvas` (`layout()`, `bounds()` pure), `Deck`, `Split`, `PersonCard`, `Explore`.

### What is deliberately not in the working set

An agent acting on a page it is not shown on · a ranked list without reasons · a search that ends in
"no results" · a suggestion that writes itself into the field · a percent for the mind's progress
(`Steps` and `Thinking` say what it does and for how long) · a fourth position on the wheel.

### Pieces

| piece | what it holds | install |
|---|---|---|
| Wheel | who drives: you · together · the mind; the meaning of each, said before it is taken | `@us/wheel` |
| Palette | ask or find: grouped hits with reasons, ↑↓ ↵ esc, a miss becomes a question | `@us/palette` |
| Ranked | numbered rows, reasons with weights, knobs, pin and mute; `rank()` is pure and tested | `@us/ranked` |
| Facets | refinement as chips with counts, "and N more", one press clears | `@us/facets` |
| NextAct | the next thing proposed: because · with · when · costs · also considered | `@us/next-act` |
| Suggest | a ghost completion after the caret; Tab takes it | `@us/suggest` |
| Hand | a hand on a thing, visible: who holds it · what they are doing · since when; the mind's wears the accent, yours is quiet, a still hand keeps its name (law 10) | `@us/hand` |
| Pilot | the rail: who drives · doing · next · spent · the ask — the same on every surface | `@us/pilot` |
| Change | a proposed change to a record: every field, before → after, where the new value comes from; a refused field listed, an unknown before said; apply or not now (law 13) | `@us/change` |
| Memory | what is remembered, said plainly: each fact with who · via · when · weight; forgettable only by a hold, where the surface can (laws 10, 13) | `@us/memory` |
| Kernel | the agent's own identity card: who it is · for whom · model and host when known · what it costs, always said · what it may touch, each grant with its scope, withheld ones listed | `@us/kernel` |
| Canvas | numbered lanes, edges, minimap, pan · zoom · fit, the mind's hand named on its node | `@us/canvas` |
| Deck | what is open: pinned first, the mind's marked, a waiting dot; Alt+arrows reorder | `@us/deck` |
| Split | two panes and a separator that is a control | `@us/split` |
| PersonCard | the line drawn as touches, the last one named, the next thing offered | `@us/person-card` |
| Explore | discovery as a grid; every card says why it is here | `@us/explore` |
| Quiet | the quiet sentence: a corner that is looking, empty, refused or unreached says so in one line, never a spinner (law 10: an honest wait says it is waiting) | `@us/quiet` |

## The tokens

Every value is a CSS custom property from `https://ui.hereandmore.com/us.css`; night redefines the colours under `[data-theme="dark"]`. Use the token, never its value.

### Colour

| token | paper |
|---|---|
| `--us-ground` | `#f2f2ef` |
| `--us-surface` | `#fcfcfa` |
| `--us-surface-2` | `#f6f6f3` |
| `--us-sunk` | `#ecece9` |
| `--us-line` | `#d9d9d4` |
| `--us-line-2` | `#c8c8c2` |
| `--us-ink` | `#0f0f0f` |
| `--us-ink-2` | `#68665f` |
| `--us-ink-3` | `#85827a` |
| `--us-accent` | `#2e2d2a` |
| `--us-accent-2` | `#1c1b19` |
| `--us-accent-ink` | `#3a3934` |
| `--us-accent-wash` | `#ededea` |
| `--us-accent-line` | `#d6d6d1` |
| `--us-on-accent` | `#fcfcfa` |
| `--us-on-ink` | `#fcfcfa` |
| `--us-ok` | `#2f5f48` |
| `--us-ok-wash` | `#edf2ee` |
| `--us-bad` | `#b91c1c` |
| `--us-bad-wash` | `#f6ecea` |
| `--us-focus` | `rgba(15,15,15,.55)` |
| `--us-veil` | `rgba(242,242,239,.92)` |
| `--us-sig-invert` | `invert(1)` |
| `--us-scrim` | `linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.79) 8.1%, rgba(0,0,0,0.761) …` |
| `--us-spine` | `18px minmax(0,1fr) 74px 58px 28px auto` |
| `--us-gut` | `20px` |
| `--us-measure` | `58ch` |
| `--us-focus` | `560px` |
| `--us-stage` | `760px` |
| `--us-sat` | `env(safe-area-inset-top,0px)` |
| `--us-sar` | `env(safe-area-inset-right,0px)` |
| `--us-sab` | `env(safe-area-inset-bottom,0px)` |
| `--us-sal` | `env(safe-area-inset-left,0px)` |
| `--us-d-sm` | `28px` |
| `--us-d-md` | `36px` |
| `--us-d-lg` | `48px` |
| `--us-d-xl` | `64px` |

### Type and size

| token | paper |
|---|---|
| `--us-warn` | `#9a4a07` |
| `--us-warn-wash` | `#fdf3e3` |
| `--us-tint` | `rgba(15,15,15,.045)` |
| `--us-tint-2` | `rgba(15,15,15,.08)` |
| `--us-h-xs` | `32px` |
| `--us-h-sm` | `40px` |
| `--us-h-md` | `46px` |
| `--us-h-lg` | `54px` |
| `--us-sans` | `'Open Runde', -apple-system, BlinkMacSystemFont, 'SF Pro Rounded', 'SF Pro Text', Int…` |
| `--us-serif` | `'Young Serif', 'Instrument Serif', 'Iowan Old Style', Georgia, serif` |
| `--us-mono` | `'SF Mono', ui-monospace, Menlo, Consolas, monospace` |
| `--us-t-label` | `12px` |
| `--us-t-small` | `13px` |
| `--us-t-body` | `15px` |
| `--us-t-lead` | `17px` |
| `--us-t-title` | `22px` |
| `--us-t-display` | `28px` |
| `--us-t-hero` | `36px` |
| `--us-w-regular` | `400` |
| `--us-w-medium` | `500` |
| `--us-w-semibold` | `600` |
| `--us-tracking` | `-0.1px` |
| `--us-tr-display` | `-.02em` |
| `--us-tr-kicker` | `.14em` |

### Space

| token | paper |
|---|---|
| `--us-sp-1` | `4px` |
| `--us-sp-2` | `8px` |
| `--us-sp-3` | `12px` |
| `--us-sp-4` | `16px` |
| `--us-sp-5` | `20px` |
| `--us-sp-6` | `24px` |
| `--us-sp-7` | `32px` |
| `--us-sp-8` | `40px` |
| `--us-sp-9` | `56px` |

### Radius

| token | paper |
|---|---|
| `--us-r-xs` | `8px` |
| `--us-r-sm` | `12px` |
| `--us-r-md` | `16px` |
| `--us-r-lg` | `22px` |
| `--us-r-xl` | `28px` |
| `--us-r-pill` | `999px` |

### Depth, glass and focus

| token | paper |
|---|---|
| `--us-glass` | `rgba(255,255,255,.6)` |
| `--us-glass-line` | `rgba(13,13,13,.08)` |
| `--us-shadow-1` | `0 1px 2px -1px rgba(15,15,15,.07), 0 2px 16px rgba(15,15,15,.035)` |
| `--us-shadow-2` | `0 1px 3px -1px rgba(15,15,15,.08), 0 4px 10px -3px rgba(15,15,15,.06), 0 10px 24px -6…` |
| `--us-shadow-3` | `0 2px 5px -1.5px rgba(15,15,15,.10), 0 6px 14px -2.5px rgba(15,15,15,.08), 0 14px 33p…` |
| `--us-glass-hl` | `inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 .5px rgba(255,255,255,.35)` |
| `--us-glass-dark` | `rgba(13,13,13,.58)` |
| `--us-on-glass-dark` | `#ffffff` |
| `--us-shadow-ring` | `inset 0 0 0 1px rgba(15,15,15,.08), inset 0 0 0 1.5px rgba(255,255,255,.5)` |
| `--us-glass-blur-thin` | `12px` |
| `--us-glass-blur-thick` | `28px` |
| `--us-glass-sat` | `1.6` |
| `--us-veil-blur` | `6px` |
| `--us-ring` | `0 0 0 2px var(--us-surface), 0 0 0 4px var(--us-focus)` |

### Motion

| token | paper |
|---|---|
| `--us-eo` | `cubic-bezier(.23,1,.32,1)` |
| `--us-eio` | `cubic-bezier(.77,0,.175,1)` |
| `--us-spring` | `cubic-bezier(.34,1.4,.5,1)` |
| `--us-press` | `120ms` |
| `--us-micro` | `160ms` |
| `--us-dur` | `180ms` |
| `--us-meso` | `280ms` |
| `--us-rise` | `280ms` |
| `--us-slow` | `420ms` |
| `--us-macro` | `600ms` |
| `--us-pulse` | `1600ms` |
| `--us-tick` | `1200ms` |
| `--us-turn` | `800ms` |
| `--us-blink` | `1000ms` |
| `--us-step` | `20ms` |

## The components (59)

### Foundation

- **Tokens** — The token contract: one vocabulary, two measured grounds (paper, night). Import first.
  `npx shadcn@latest add @us/us-tokens` · https://ui.hereandmore.com/r/us-tokens.json
- **Component sheet** — The plain-CSS component sheet every US UI component is styled by. Names no colour of its own.
  `npx shadcn@latest add @us/us-ui-css` · https://ui.hereandmore.com/r/us-ui-css.json
- **cx** — Join class names. No dependency.
  `npx shadcn@latest add @us/cx` · https://ui.hereandmore.com/r/cx.json
- **motion** — Still (the person's preference or the surface's word), move (a change during which a named thing keeps its place), a transition name, and the ground of a colour — with a sample of a loaded photograph.
  `npx shadcn@latest add @us/motion` · https://ui.hereandmore.com/r/motion.json
- **Type** — Kicker, Caption, Title, Voice (the serif sentence), Say and Num.
  `npx shadcn@latest add @us/type` · https://ui.hereandmore.com/r/type.json
- **Icon** — Our own icons: 44 drawn from primitives on a 24 grid, currentColor, each with a content hash and an authorship manifest.
  `npx shadcn@latest add @us/icon` · https://ui.hereandmore.com/r/icon.json

### Action

- **Button** — A pressable with press feedback on every one; primary, secondary, accent, ghost, bad; four heights; loading.
  `npx shadcn@latest add @us/button` · https://ui.hereandmore.com/r/button.json
- **Hold to Confirm** — Press and hold — pointer or keyboard — fills a ring; release early cancels, hold to the end fires once.
  `npx shadcn@latest add @us/hold-to-confirm` · https://ui.hereandmore.com/r/hold-to-confirm.json

### Form

- **Field** — Label, control, hint and an error with the required shape: what happened, what it cost, what to do.
  `npx shadcn@latest add @us/field` · https://ui.hereandmore.com/r/field.json
- **Switch** — A binary state that snaps, never springs.
  `npx shadcn@latest add @us/switch` · https://ui.hereandmore.com/r/switch.json

### Surface

- **Card** — A surface with a hairline; raised, flat, sunk or glass.
  `npx shadcn@latest add @us/card` · https://ui.hereandmore.com/r/card.json
- **Question** — One question at a time: a band, a kicker, a serif question, one sentence, one control, one pill, a row of dashes.
  `npx shadcn@latest add @us/question` · https://ui.hereandmore.com/r/question.json
- **Cover** — The world is the ground: a photograph or a drawn field carries the page; the words sit on its scrim; a glass note floats beside the actions.
  `npx shadcn@latest add @us/cover` · https://ui.hereandmore.com/r/cover.json
- **Scene** — A scene: the world as the ground and one question at its foot — Cover and Question, fused. A cut from one scene to the next is a crossfade at the world's own pace that materialises, never a hard cut.
  `npx shadcn@latest add @us/scene` · https://ui.hereandmore.com/r/scene.json
- **Head** — The head of a page: kicker · name · one sentence, the actions at the far edge, the pathway below. One shape for every page, so a person always knows where they are and what they can do here.
  `npx shadcn@latest add @us/head` · https://ui.hereandmore.com/r/head.json

### State

- **Pill** — A small state read at a glance — five meanings and no more; can be live.
  `npx shadcn@latest add @us/pill` · https://ui.hereandmore.com/r/pill.json
- **Skeleton · Empty** — A placeholder that holds the box, and an absence that is said in the serif voice, never styled away.
  `npx shadcn@latest add @us/state` · https://ui.hereandmore.com/r/state.json
- **Quiet** — The quiet sentence: a corner of a surface that is looking, empty, refused or unreached says so in one line of the quiet ink — never a spinner, never a card.
  `npx shadcn@latest add @us/quiet` · https://ui.hereandmore.com/r/quiet.json

### Navigation

- **Tabs** — Roving tabindex tabs: arrows move, Home/End jump, selection follows focus.
  `npx shadcn@latest add @us/tabs` · https://ui.hereandmore.com/r/tabs.json
- **LinkCard** — A way somewhere as one card: a tile whose corner nests in the card's, the place's name and a line, a round way on.
  `npx shadcn@latest add @us/link-card` · https://ui.hereandmore.com/r/link-card.json

### Overlay

- **Sheet** — A modal on the native dialog; rises from the foot on a phone; a decision cannot be dismissed by the veil.
  `npx shadcn@latest add @us/sheet` · https://ui.hereandmore.com/r/sheet.json

### People

- **Said** — Someone's words as a bubble — the point in full ink — with the face, the name and the role beneath its tail.
  `npx shadcn@latest add @us/said` · https://ui.hereandmore.com/r/said.json
- **Scircle** — A scircle and who is in it now: the anchor and everyone inside share one gooey halo; someone coming in glides onto the ring and joins it, someone leaving drifts out and pinches off. One is a bubble, three a cluster, more a wreath, and it breathes. The five standings are marks, never size: a PRIME's keel, a guardian's watch (a dot), a PRIME guardian's keel and seal (a diamond), a member plain, a guest in a bubble of their own; ScircleKey names them.
  `npx shadcn@latest add @us/scircle` · https://ui.hereandmore.com/r/scircle.json
- **Faces** — The people you share with — a stack for a row, a bar for the top of a surface (the US bar).
  `npx shadcn@latest add @us/faces` · https://ui.hereandmore.com/r/faces.json
- **PersonCard** — A person as a card: face and name, where they are, the line between you drawn as touches over time, the last touch named, and what the mind suggests next — one press, never taken for you.
  `npx shadcn@latest add @us/person-card` · https://ui.hereandmore.com/r/person-card.json

### Feedback

- **Copy** — A value and a small Copy pill: it copies, says Copied in place, and says so when the browser refuses.
  `npx shadcn@latest add @us/copy` · https://ui.hereandmore.com/r/copy.json
- **Toast** — Feedback ranked by lifetime: a failure lingers 9 s with a verb, success leaves in 4.5 s.
  `npx shadcn@latest add @us/toast` · https://ui.hereandmore.com/r/toast.json
- **Banner** — Feedback that lasts as long as the condition does.
  `npx shadcn@latest add @us/banner` · https://ui.hereandmore.com/r/banner.json

### Data

- **Stat tile** — A number that matters, with its unit beside it and never fused to it.
  `npx shadcn@latest add @us/stat-tile` · https://ui.hereandmore.com/r/stat-tile.json
- **Row** — One row on the spine: glyph · name+spec · time · value · unit · actions.
  `npx shadcn@latest add @us/row` · https://ui.hereandmore.com/r/row.json

### Places

- **Glyph** — The seven places of a world — wonder, attention, market, making, routing, evidence, treasury — one stable mark each, in currentColor.
  `npx shadcn@latest add @us/glyph` · https://ui.hereandmore.com/r/glyph.json
- **Stations** — A numbered rail: every app has a stable place and the number carries the sequence; it lies down as a row on a phone.
  `npx shadcn@latest add @us/stations` · https://ui.hereandmore.com/r/stations.json

### Evidence

- **Source** — A provenance card: the verdict, what a source claims, what was actually observed, and what stays unverified. It never states more than was seen.
  `npx shadcn@latest add @us/source` · https://ui.hereandmore.com/r/source.json
- **Storyboard** — A source as its frames in order — a listbox strip where every frame keeps its time and its provenance.
  `npx shadcn@latest add @us/storyboard` · https://ui.hereandmore.com/r/storyboard.json
- **Log** — What happened, when: receipts newest first, announced politely, never rewritten.
  `npx shadcn@latest add @us/log` · https://ui.hereandmore.com/r/log.json
- **Frame** — Evidence wears a frame: corner brackets, the time it was seen, where it came from; live when it is recording.
  `npx shadcn@latest add @us/frame` · https://ui.hereandmore.com/r/frame.json

### Time

- **Scrub** — Time, scrubbed: a native range with a readout and marks; looking ahead never moves the present, and return-to-now is one press away.
  `npx shadcn@latest add @us/scrub` · https://ui.hereandmore.com/r/scrub.json
- **Compare** — Two places, one clock: a shared control above two panes that can never disagree about the moment they show.
  `npx shadcn@latest add @us/compare` · https://ui.hereandmore.com/r/compare.json

### Agent

- **Steps** — What an agent is doing, numbered, one state each — pending, running, done, refused, skipped — never a fake percent.
  `npx shadcn@latest add @us/steps` · https://ui.hereandmore.com/r/steps.json
- **Thinking** — Three dots and an honest clock: who is thinking, for how long, on what.
  `npx shadcn@latest add @us/thinking` · https://ui.hereandmore.com/r/thinking.json
- **Kernel** — The agent's own identity card: who it is, what it is for, whom it works for, its model and host when known, what it costs (always said), what it has spent, and what it may touch — each grant with its scope, a withheld one listed rather than hidden, revocable from the card.
  `npx shadcn@latest add @us/kernel` · https://ui.hereandmore.com/r/kernel.json
- **Change** — A proposed change to a record, as a card: who proposes it, to what, and every field it would touch — what it holds now, what it would hold, where the new value comes from — before anyone applies it. A field the proposer may not change is listed with the reason; a before it does not know is said as unknown.
  `npx shadcn@latest add @us/change` · https://ui.hereandmore.com/r/change.json
- **Memory** — What is remembered, said plainly: each fact with who said it, where it came from when nobody typed it, when, and how much it weighs — never a hidden profile. A fact can be forgotten where the surface allows it, and forgetting is held, never tapped, because it cannot be undone.
  `npx shadcn@latest add @us/memory` · https://ui.hereandmore.com/r/memory.json
- **Approval** — A declared act awaiting a person: who proposes it, what it does, what it costs, what it rests on; irreversible acts are held.
  `npx shadcn@latest add @us/approval` · https://ui.hereandmore.com/r/approval.json
- **Composer** — The ask bar: a field that grows, tools to its left, chips beneath, one black send.
  `npx shadcn@latest add @us/composer` · https://ui.hereandmore.com/r/composer.json
- **Budget** — Spent against granted. Meters always; refuses only when the grant is metered.
  `npx shadcn@latest add @us/budget` · https://ui.hereandmore.com/r/budget.json
- **Stream** — Words as they arrive, with a caret while more is coming; announced in additions.
  `npx shadcn@latest add @us/stream` · https://ui.hereandmore.com/r/stream.json

### Working

- **Wheel** — Who drives — you, together, the mind — three positions that never spring back, each saying what it means before it is taken.
  `npx shadcn@latest add @us/wheel` · https://ui.hereandmore.com/r/wheel.json
- **Palette** — Ask or find in one field: hits grouped by kind with their reasons, ↑↓ ↵ esc, > @ # prefixes; a query that finds nothing becomes a question.
  `npx shadcn@latest add @us/palette` · https://ui.hereandmore.com/r/palette.json
- **Ranked** — A ranked list that says why: numbered rows, reasons with their weight, knobs the person can turn, pin and mute; rank() is pure and tested.
  `npx shadcn@latest add @us/ranked` · https://ui.hereandmore.com/r/ranked.json
- **Facets** — Refinement as chips in named groups: each says how many it leaves, the set says what is left, one press clears.
  `npx shadcn@latest add @us/facets` · https://ui.hereandmore.com/r/facets.json
- **NextAct** — The next thing, proposed: because · with · when · costs · also considered. One black press does it; nothing happens until it.
  `npx shadcn@latest add @us/next-act` · https://ui.hereandmore.com/r/next-act.json
- **Suggest** — A field with the mind's completion as a ghost after the caret: Tab takes it, Escape waves it away; never the value until taken.
  `npx shadcn@latest add @us/suggest` · https://ui.hereandmore.com/r/suggest.json
- **Canvas** — A place with numbered lanes: pan, zoom, fit; every node reachable by Tab, moved by arrows, opened by Enter; edges as soft cubics; a minimap; the mind's hand named and placed, its pieces marked. layout() and bounds() are pure and tested.
  `npx shadcn@latest add @us/canvas` · https://ui.hereandmore.com/r/canvas.json
- **Deck** — A deck of what is open: pinned first, the mind's tabs marked, one waiting dot; arrows move between, Alt+arrows move a tab, Delete closes, middle-click closes.
  `npx shadcn@latest add @us/deck` · https://ui.hereandmore.com/r/deck.json
- **Split** — Two panes and a separator that is a control: drag it or arrow it, Home and End to the edges; the panes stack on a phone.
  `npx shadcn@latest add @us/split` · https://ui.hereandmore.com/r/split.json
- **Explore** — Discovery as a grid of cards that say their kind, their time and why they are here, and open with one press; a card with no reason says so.
  `npx shadcn@latest add @us/explore` · https://ui.hereandmore.com/r/explore.json
- **Pilot** — The pilot rail, the same on every surface: who drives at the top and never out of sight; what the mind is doing, numbered; the next things it proposes, each a card; what it has spent against the grant; the ask bar at the foot.
  `npx shadcn@latest add @us/pilot` · https://ui.hereandmore.com/r/pilot.json
- **Hand** — A hand on a thing, visible: who holds it, what they are doing, since when. The canvas's mark for the mind's hand, for any row, field or card — a colleague's hand and the mind's read the same everywhere; it pulses while it moves, goes still when it stops, and never hides.
  `npx shadcn@latest add @us/hand` · https://ui.hereandmore.com/r/hand.json