Design systemDraft

Rail

The rail is the place switcher from 720 px up: a 72 px column of icons with their labels, the current place filled, and the Needs you count on Now. Under 720 the phone shell takes over. Drawn on the boards "Needs you (home)", "Agents and their computers", "Planner", "Add your phone" and "Layout".

Anatomy#

1. Column. Width 72, full height, display: flex column, items centred, padding 12 top and bottom, gap 2, right border 1 px --rule, background --bg.
2. Home mark. 40 by 40 hit area, radius 10, mark drawn at 22, margin 10 below. The mark's wire is --mark-wire; its dot is --mark-dot, and --beacon-dot while anything needs you.
3. Place button. 60 by 50, radius 10, column, centred, gap 4 (the board draws 3): icon 20 on the 16 grid, then the label at meta size (12/16), 400.
4. Count badge. On Now only. Absolute, top 4, right 8 (board: 3 and 8). Min width 18, height 18, radius 9, padding 0 5, fill --beacon-dot, text --beacon-badge-ink 12/16 600. Caps at "99+". Hidden at 0.
5. Order, top group: Now, Chat, Agents, Projects, Planner, Memory, Vault.
6. Modules group (later). Under Vault, after a 1 px --rule hairline with 8 above and below: up to 3 pinned modules, same place button (ADR 0033, proposed; not drawn yet).
7. Bottom group (pushed down with margin-top: auto, gap 2): Devices, Settings, then the person avatar (circle, 32, initial at 13/600 on --hover), 8 above it.

Sizes#

One size. The rail never collapses to icons only and never widens to text rows. It shows at every width from 720; list and detail sit to its right (see phone-shell for the breakpoints).

States#

• The badge is the only colour in the rail. No bone on the current place, no left bar, no pill.
• Needs you empty: no badge, and the home mark's dot returns to --mark-dot.
• Offline: the rail does not change; the offline pill says so (see states).

Keyboard and touch#

• ⌘1 to ⌘9 open the places in rail order: Now 1, Chat 2, Agents 3, Projects 4, Planner 5, Memory 6, Vault 7, Devices 8, Settings 9. Modules take no number.
• Tab reaches each place in order; Enter or Space opens it.
• On touch (an iPad at 720 and up) each button is 60 by 50, over the 44 minimum.
• The avatar opens the account menu (name, the box address, sign out); proposed, not drawn.

Motion#

Hover and current fills change over --motion-tap (120 ms) with --ease. Nothing slides between places. The badge count changes in place, no bounce. Reduced motion: no transition.

Copy#

• Labels exactly: Now, Chat, Agents, Projects, Planner, Memory, Vault, Devices, Settings.
• The rail says "Chat"; the phone's page label says "Chats". Both are right for their shape.
• Never: Home, Inbox, Dashboard, Sessions, Threads, or any caps label.

Accessibility#

• nav with aria-label="Vyre"; the mark is a link with aria-label="Vyre home" to Now.
• Each place is a link with its visible label as the name. Now with a count reads "Now, 5 need you" (aria-label); the badge itself is aria-hidden.
• --label on --bg passes 4.5:1 at 12 px in both themes; the badge ink on --beacon-dot passes 4.5:1 at 12/600.
• The avatar has aria-label="Account" and the person's name as its title.

Gaps#

Deck (main)

• The rail is 216 px with text rows 34 tall at 14 px, not the 72 px icon rail.
• Order is Now, Projects, Memory, Agents, Chat, Vault, Settings; Planner and Devices are missing.
• The count is violet mono 11 px text, not the 18 px badge; no 99+ cap.
• Brand sits in the top bar (.brand, 216 wide) instead of the mark at the top of the rail.
• Uses raw --r-2 radius and the old --beacon-wash elsewhere in the shell.
• No ⌘1 to ⌘9 place keys.

App (work/mobile)

• No rail at 720 and up; tablets get the phone tab bar.