--- name: AMQ Work Navigator description: A readable work list with inline context and safe commands. colors: page: "#f5f6f8" surface: "#fff" subtle: "#eef1f5" ink: "#18212f" muted: "#566273" divider: "#d8dee7" control: "#7c8797" accent: "#254edb" selected: "#eaf0ff" warning: "#825400" warning-bg: "#fff4d6" error: "#b42318" page-dark: "#14171c" surface-dark: "#1d222a" subtle-dark: "#272e39" ink-dark: "#f1f4f8" muted-dark: "#b2bdcb" divider-dark: "#394250" control-dark: "#7f8da1" accent-dark: "#a8c0ff" selected-dark: "#253451" warning-dark: "#ffd17d" warning-bg-dark: "#382d18" error-dark: "#ffb4ac" typography: headline: fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif" fontSize: "1.75rem" fontWeight: 650 lineHeight: 1.2143 letterSpacing: "-.02em" headline-compact: fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif" fontSize: "1.5rem" fontWeight: 650 lineHeight: 1.25 letterSpacing: "-.02em" title: fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif" fontSize: "1.125rem" fontWeight: 600 lineHeight: 1.4445 body: fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif" fontSize: "1rem" fontWeight: 400 lineHeight: 1.5 metadata: fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif" fontSize: ".875rem" fontWeight: 400 lineHeight: 1.4286 control: fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif" fontSize: ".9375rem" fontWeight: 600 lineHeight: 1.3334 code: fontFamily: "ui-monospace, \"SF Mono\", Menlo, Consolas, monospace" fontSize: ".875rem" lineHeight: 1.5 rounded: control: ".5rem" list: ".75rem" spacing: tight: ".25rem" small: ".5rem" related: ".75rem" base: "1rem" row-y: "1.25rem" section: "1.5rem" workspace: "2rem" view: "3rem" components: button: backgroundColor: "{colors.surface}" textColor: "{colors.accent}" typography: "{typography.control}" rounded: "{rounded.control}" padding: ".625rem .875rem" height: "2.75rem" button-hover: backgroundColor: "{colors.selected}" button-active: backgroundColor: "{colors.subtle}" button-disabled: backgroundColor: "{colors.subtle}" textColor: "{colors.muted}" button-failed: textColor: "{colors.error}" search: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.control}" padding: ".625rem .75rem" height: "2.75rem" navigation: textColor: "{colors.muted}" rounded: "{rounded.control}" padding: ".6875rem .875rem" height: "2.75rem" navigation-selected: backgroundColor: "{colors.selected}" textColor: "{colors.accent}" work-list: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.list}" disclosure-content: backgroundColor: "{colors.subtle}" textColor: "{colors.ink}" rounded: "{rounded.control}" padding: "1rem" coverage: backgroundColor: "{colors.warning-bg}" textColor: "{colors.warning}" rounded: "{rounded.control}" padding: ".875rem 1rem" command: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.code}" rounded: "{rounded.control}" padding: ".75rem" --- # Design System: AMQ Work Navigator ## Overview **Creative North Star: "The Work Navigator"** The Work Navigator uses a cool neutral canvas, a clear list surface, and restrained cobalt selection. A system sans supports reading; monospace identifies commands and references. Fine dividers and generous rows keep separate records easy to scan. Inline disclosures reveal context in place. Suggestion quotes preserve line breaks and tabs; other control characters appear as escapes. Color supports written state: warnings explain missing coverage, and errors identify failed operations. Local font stacks and CSS carry the system without external assets. **Key Characteristics:** - One reading lane with a secondary navigation rail; Flow and Floor use the full window, as a lifecycle board and as a grid of agent stations. - Readable titles, body text, and metadata at distinct sizes. - Flat surfaces, fine dividers, and restrained cobalt selection. - Native inline disclosures and visible keyboard focus. - Separate destinations for Suggestions and History. - Stage marks that fill as work advances: an empty circle for Backlog, a quarter, half, and three quarters for Ready, In progress, and In review, a full disc for Shipped, and a square for Blocked. - Station plates that state each agent seat's state as a glyph and a word, repeated by a 6px state bar. ## Colors ### Primary Cobalt (`accent`) identifies links, actions, focus, and the selected destination. The pale selection tone (`selected`) fills active navigation, button hover, and text selection. ### Secondary Warning ink and its pale background (`warning`, `warning-bg`) identify incomplete coverage and old observations. Error ink (`error`) marks failed copy and refresh states. These states also use words. ### Neutral The cool page (`page`) holds a light list surface (`surface`); inset context uses `subtle`. Primary and secondary text use `ink` and `muted`. Fine separators use `divider`; input and button borders use the stronger `control` tone. Dark siblings map the same roles to charcoal surfaces and lighter ink. Appearance offers System, Light, and Dark; System follows the browser preference. **The Written State Rule.** State is stated in words; color reinforces the words. ## Typography **Body Font:** system-ui with local platform fallbacks. **Label/Mono Font:** ui-monospace with SF Mono, Menlo, and Consolas fallbacks. The type is plain and readable. View headings lead; record titles support scanning; body text explains the reason; metadata supplies context. There is no display type role or condensed label face. ### Hierarchy - Headline: view names; the compact headline applies at 959px and below. - Title: record titles and section headings. - Body: reasons and descriptions, with a repeated maximum line length of 66ch. - Metadata: ownership, age, source observations, and field labels. - Control: buttons and disclosure labels; navigation has the same size and weight with a slightly taller line height. - Code: command fields and references. Times use tabular numerals. **The Reading Size Rule.** Compact layouts reflow rows and controls without reducing body or metadata type. ## Layout The shell is centered and bounded at 75rem, with 2rem side gutters on wide screens. A two-column workspace uses an 11rem navigation rail and a 2rem gap. The main column is one reading lane. A view heading and search wrap when space runs out. Search is bounded at 20rem on wide screens. At 959px and below, gutters become 1rem, navigation moves above the content, secondary destinations and Appearance use More, and search fills its row. Snapshot age remains visible at compact widths. At 600px and below, work rows become one column; copy actions keep their natural width. Metadata wraps and definition lists stack. Work rows use 1.25rem by 1.5rem padding on wide screens and 1rem on small screens. Shared spacing steps are in the frontmatter. Flow and Floor are the exceptions to the reading lane. With script, both views release the shell to the window width (2rem gutters, at most 120rem) and the navigation becomes one top row of tabs. On Flow, six stage columns share the width; at 1279px and below the board has three columns; at 600px and below the stages stack as sections under their headings. On Floor, sessions flow side by side, each holding its station plates at 16.5rem; a session wraps its plates, and at 600px and below the plates and sessions become one column. Without script, both render inside the normal shell. Without script, all views remain readable in document order. With script, one destination is shown at a time. Print shows all views and removes navigation and controls. ## Elevation & Depth Depth comes from tone and borders. Work and source lists have a 1px divider border. Rows share one list container and are separated by 1px rules. Disclosed context uses a subtle inset surface. No shadows are defined. **The Flat Surface Rule.** Use surface tones and fine dividers for grouping; the system has no shadows. ## Shapes Controls and inset context have gently rounded corners (`control`); list containers have a larger radius (`list`). Inputs and buttons use a 1px control border. Focus uses a 3px accent outline with a 3px offset. Controls have a minimum height of 2.75rem; compact coverage summaries retain their native disclosure shape. ## Components ### Buttons Outlined surface buttons use accent text. Hover uses the selected tone, active uses the subtle tone, and disabled uses muted text. Copy success changes the label to Copied; failure uses error ink and opens the selectable command. There is no green success fill. Button and navigation color changes take 150ms ease-out only when reduced motion is not requested. ### Inputs / Fields Search has a visible label, surface fill, control border, and full-size body type. Commands use a readonly, resizable monospace textarea with a minimum height of 4.5rem. Both retain visible focus. ### Navigation Primary destinations are Flow (the default), Floor, Next, Work, Backlog, and Requests. Suggestions, History, Sources, Agents, and Appearance sit under More. The current destination uses accent ink on the selected tone. Links have a minimum height of 2.75rem. More is a native disclosure on compact layouts. ### Cards / Containers A shared list surface groups work records; each row holds a title, reason, metadata, copy action, and Details. Secondary source and agent lists use the same surface and divider treatment. Empty states remain inside the list surface; search-empty feedback sits outside it. ### Flow Board Each stage column has a 3px top rule in its stage tone (control for Backlog, ink for Ready, accent for In progress and In review, warning for Blocked, muted for Shipped), its stage mark, its word, and its count. Cards are flat list-surface tiles with a 1px divider border and the control radius: flags, a title clamped to two lines, then owner, time in stage, and the PR number with its CI word. A card that needs you has an accent border. Flags are a glyph and a word: ◆ Needs you in accent ink, ✉ Reply due in muted ink. CI is a small shape and a word: a filled disc for CI green, an error-ink diamond for CI red, a ring for CI running, a dash for no CI. The Needs you strip sits above the board on the selected tone. A card is a native disclosure: with script, its body opens as a side sheet fixed to the right edge (34rem, full height, a 1px control rule on its left, no shadow), Esc or Close returns focus to the card, and opening one sheet closes the others. The sheet slides 1.5rem in 150ms only when reduced motion is not requested. Without script, the body opens in place under the card. ### Station Plate The Floor shows one plate per agent seat with recent evidence, grouped under its session name and seat count. A plate is a flat tile with a 1px divider border, the control radius, and a 6px state bar on its left edge. From the top: the state glyph and word at title size and weight in the state ink, the handle and its harness, the state's reason, then Now (the most advanced owned card, clamped to two lines, with its stage and the count of the rest), Says or Status (the agent's own words in quotation marks, never styled as fact), Limit (warning ink, only when an account limit was read before later activity on the seat or its account), and Inbox; a divider rule separates the wake and last activity at the foot. The six states and their tones: ■ Limit reached in warning ink on the warning background, ▲ Stalled in error ink on the error background, ● Working in accent, ○ Idle in ink, – Off in muted ink with a control bar, and ? Unknown in muted ink with a dashed bar. The headline repeats the state counts with the same glyphs and ink; dormant mailboxes fold into one disclosure. A plate is a native disclosure with the same side sheet as a Flow card: state and reason, wake, inbox, last activity and its source, account limit, spend, quoted self-reports, owned work, and the message command. The board never claims a process is running or has stopped; state words name the evidence. ### Inline Disclosure Details keep source evidence and selectable commands in the reading flow. The detail body uses subtle fill and 1rem padding. Coverage is a compact warning disclosure above work lists, with its missing scope and source link inside. Header feedback keeps refresh errors and a pending Update snapshot action close to the snapshot time. ### Suggestion Review Suggestions use the shared white list surface and fine dividers. Each entry shows its state, quoted source span, and proposed interpretations; line breaks and tabs remain in the quote, while other control characters appear as escapes. Native Details reveals the source message, exact span, and available terminal commands. Suggestions remain a separate review surface, outside task counts. ## Do's and Don'ts ### Do: - Do keep command text selectable and show a written copy result. - Do use inline disclosure for evidence and secondary context. - Do preserve readable type when the layout becomes one column. ### Don't: - Don't use color alone to identify status. - Don't add flight-strip cells or condensed micro-labels. Cards appear only on the owner-ratified Flow board, where each stage column is a short sorted list, and plates only on the owner-ratified Floor; other views stay as reading rows. - Don't hide the keyboard focus outline.