Design systemDraft

Layout and navigation

One tree, three shapes. Layout reads the window, never the platform: an iPad and a narrow desktop window follow the same rules, and a phone turned sideways stays a phone. The one query, in CSS: (max-width: 719px), (max-height: 500px) and (pointer: coarse). Components also check their own container, so the composer and cards fit inside a split pane.

Breakpoints#

The list hides before the detail drops under 480. Settings content caps at 720.

Panel width, one named exception (30 Sep, artifacts team's AR3 ask). panel:<name> (ADR 0033's slot grammar) stays fixed at 340 by default - todos, changed files, a teammate's thread, every ordinary use. An artifact panel showing a page or a deck (the two kinds that genuinely don't fit at 340: a rendered HTML page, a slide) may offer one widen control that steps the panel to 50% of the window's width and back, never a freeform drag-resize and never a remembered arbitrary width. Every other artifact kind (doc, report, diagram, dashboard) and every other panel use stays at 340 - this is a control on the artifact panel's own chrome (next to the version bar), not a general capability every panel:<name> gains. On the phone the panel is already a full-screen sheet, so the control doesn't apply there.

Desktop and tablet#

• Rail: 72 px of icons with 12 px labels. Order: Now, Chat, Agents, Projects, Planner, Memory, Vault; at the bottom Devices, Settings and the person's avatar. Now carries the violet count. A "Modules" section may sit under Vault with at most three pinned views (ADR 0033); everything else is reached through ⌘K.
• Top bar: 56 tall. Page title left, the ⌘K command bar in the middle ("Jump to anything, or ask juno"), the page's one primary action and its key on the right. Pages do not repeat a big title under it.
• Two shells only: list and detail (Now, Agents, Projects, Planner, Memory, Vault, Devices, Settings) and the workspace (Chat: session list, transcript, side panel, terminal). A third shape needs a design review.
• Sheets open from the right over the list (create flows) or centred (confirmations). Menus are popovers.

Phone#

• Phone shell: a 48 px header with the mark, the page labels Now, Chats and Agents (22/28, the current one in --text), and the avatar, which opens the Places sheet (Projects, Planner, Memory, Vault, Devices, Settings; long-press a tile to pin it as a fourth page).
• Pages swipe as a CSS scroll-snap strip (native snapping on the scrolling thread): a swipe commits past a third of the width or at 500 pt/s. Lists scroll vertically inside each page.
• The floating Lumen sits 12 from each side above the safe area, 56 tall: "Ask juno, find, or run". Tap or drag up for Find; hold the mic to dictate (the words land in the field, never sent on their own). A pushed chat hides it and shows its composer.
• Pushed screens slide in from the right with a back chevron and the edge swipe.
• The app opens on the page it was on, except that it opens on Now whenever something needs you.
• One fixed shell at 100dvh; only inner lists scroll, with overscroll contained. The keyboard moves the composer by transform through a visualViewport inset, so nothing jumps.

The Mac Lumen#

capsule-mac: a native Swift panel, 680 wide, opened with Control twice. It carries the same Needs rows (cut to one detail line), the ask field ("Ask juno, @ to target, or run"), streaming replies and key hints, from the same tokens. Touch ID covers sends for 30 minutes. The menu-bar mark's dot turns violet while something needs you.

Where each place lives#

Keys (desktop)#

Buttons show their key inside them; a list shows a one-line key hint.