Functional Product UI

/* Synthesized from Trova family: Functional Product UI (functional-product-ui) */
/* Evidence base: 21 curated reference(s) · Primary contrast 18.2:1 */
:root {
  /* Surface & Polarity (Daylight-paper dominant) */
  --surface-ground: #f4f5f8;
  --surface-elevated: #353a44;
  --text-primary: #090a0c;
  --accent-primary: #27272a;
  --border-hairline: color-mix(in srgb, #090a0c 16%, transparent);

  /* Typography (Loadable open-source stack mapped from observed specimens) */
  --font-display: "Inter", system-ui, sans-serif;
  --font-body: "Geist", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Structural Geometry */
  --radius-surface: 0px;
  --measure-body: 62ch;
}

# Functional Product UI — style sheet

> Task-focused interfaces with neutral surfaces, explicit labels, grouped controls, persistent context and restrained state colors. Use for configuration, booking, analytics and export flows; judge the interface rather than the content shown inside it.

Derived from 21 curated reference(s) in the `functional-product-ui` family. Counts are how many references use a value, so a value used once is a lead, not a rule. Paste this into DESIGN.md as a starting system, then verify against the images.

## Type

- Inter — 9/21
- Geist — 4/21
- Berkeley Mono — 3/21
- GDS Transport — 3/21
- Geist Mono — 3/21
- JetBrains Mono — 3/21
- system-ui — 3/21
- -apple-system — 1/21
- Assistant — 1/21
- untitledSans — 1/21

## Color

- `#090a0c` dark neutral — 19/21
- `#f4f5f8` light neutral — 19/21
- `#27272a` dark neutral — 6/21
- `#353a44` dark neutral — 4/21
- `#6b7280` mid neutral — 4/21
- `#1a65a6` chromatic — 3/21
- `#0f7a52` chromatic — 3/21
- `#5e6ad2` chromatic — 3/21
- `#0070f3` chromatic — 3/21
- `#ff6363` chromatic — 3/21

Readable pairs from these swatches, most-used first (WCAG AA body text needs 4.5:1):
- `#090a0c` / `#f4f5f8` — 18.2:1
- `#27272a` / `#f4f5f8` — 13.7:1
- `#353a44` / `#f4f5f8` — 10.5:1
- `#090a0c` / `#ff6363` — 6.8:1

## Moves

### component pattern

- Triage action bar pins four single-keystroke verbs (Accept [1], Duplicate [2], Snooze [H], Decline [⌫]) directly above the issue description so the cursor never travels to a corner. — 113-linear-triage-inbox-split-inspector
- 640px centered command palette anchored 18vh from the top viewport edge so result rows expand downward without shifting the input field's vertical coordinates. — 114-linear-command-menu-k-filtered-state
- Selecting an action morphs the command palette in place: the parent issue ID collapses into a 12px breadcrumb chip above the input while the list swaps to cycle capacity bars. — 115-linear-sub-menu-assignee-cycle-picker
- Inline answer card splits 50/50 horizontally between the raw expression ('140 USD in JPY') and the resolved value ('¥21,490'), with a one-key copy action pinned in the footer bar. — 116-raycast-root-launcher-calculator-bar
- Instead of opening a multi-field modal, query parameters render as inline pill slots inside the search input itself; pressing Tab jumps between {repo} and {query} tokens in a single line. — 117-raycast-parameterized-quicklink-inline-slots
- Build phases (Running Build, Generating Static Pages, Finalizing) collapse into 40px accordion rows with right-aligned duration counters ('14.2s'), auto-expanding only the step that emitted a warning or error. — 119-vercel-deployment-build-logs-check-summary
- Floating 40px pill toolbar docks at bottom-center over any preview URL; clicking 'Comment' turns the cursor into a crosshair that binds a thread directly to the target DOM node's CSS selector. — 120-vercel-preview-toolbar-visual-comment-pin
- High-consequence confirmation modal replaces generic 'Are you sure?' text with a side-by-side comparison card of Current Production vs Target Rollback (commit SHA, age, author, and route count). — 121-vercel-production-promote-instant-rollback-dialog
- [model draft] The preview sits in a fake browser chrome with a desktop/mobile switch and a country picker below, so it reads as the page your customer will see. — 100-stripe-checkout-preview-with-options
- [model draft] Two cards, each a picture, a tag (No code · Low code / More code), a name and two bullets; the selected card has a violet ring, and there is one 'View demo' button for both. — 99-stripe-integration-chooser
- [model draft] Three fields only (name, email, what to discuss), 'Add guests' as a quiet link, then Back and Confirm side by side. The terms line sits above the button, not in a checkbox. — 98-cal-com-booking-details-form
- [model draft] The first free day is already selected and its slots already listed; available days are filled and unavailable ones are bare numbers. The visitor can choose a time immediately. — 97-cal-com-pick-a-date-and-time
- [model draft] The period menu lists named ranges (Today, Last 7 days, Month to date, Last 12 months, All time) with a single-letter shortcut on each row, and custom range last. — 96-plausible-period-picker
- [model draft] Export is one modal: a checkerboard preview of the exact output on the left, three toggles on the right (background, dark mode, embed scene), then three destinations (PNG, SVG, clipboard) as equal buttons. — 93-excalidraw-export-image-dialog
- [model draft] The final submission section follows the answer lists and explains the commitment before its button. Keep editing links visually subordinate to the one final submission action. — 101-gov-uk-check-answers-before-submitting
- [model draft] The example separates a problem heading from two underlined error links inside one prominent boundary. Make the list an index of corrections, not just a notice that submission failed. — 102-gov-uk-error-summary-with-recovery-links
- [model draft] Completed is plain text while Incomplete appears on a tinted background. Both states are written out, so the difference survives loss of color. — 103-gov-uk-task-list-with-explicit-completion-states
- [model draft] Radius choices are illustrated with corner shapes, while scale choices use percentages. Give each setting a representation that matches what changes rather than forcing every option into identical text labels. — 104-radix-themes-controls-beside-component-specimens
- [model draft] The chart's period options sit in its own header, separate from the page's example navigation. Place a control near the region it affects so scope is visible before interaction; the screenshot does not verify the data behavior. — 105-shadcn-ui-dashboard-navigation-and-reporting-regions
- [model draft] Quickstart choices pair a framework icon with its name in a repeated grid. Preserve readable names so recognition does not depend on familiarity with the icons. — 108-resend-documentation-with-three-levels-of-navigation

### grid/layout

- Two-pane master-detail split (320px queue list on the left, fluid issue document on the right) separated by a 1px solid rgba(255,255,255,0.07) hairline with zero outer card margins. — 113-linear-triage-inbox-split-inspector
- Each assignee row pairs a 20px avatar, full name, and active workload count in a single 36px-tall row — density tuned so 10 teammates fit without scrolling. — 115-linear-sub-menu-assignee-cycle-picker
- Persistent 32px bottom status bar anchors the context menu ('Actions ⌘K') on the right and the active extension icon on the left, keeping the main list free of per-row button clutter. — 116-raycast-root-launcher-calculator-bar
- 35/65 split view: a compact 260px item list on the left drives a rich right-hand pane split vertically into a rendered Markdown preview (top 60%) and a key-value metadata table (bottom 40%). — 118-raycast-split-preview-metadata-table
- [model draft] A narrow column of toggles grouped under headers (payment setup, customer details, advanced options) beside a browser-framed live checkout page. — 100-stripe-checkout-preview-with-options
- [model draft] The left column keeps the meeting's facts and adds the chosen slot (Tuesday, 13 October, 10:30–10:45). The right column swaps the calendar for the form, so the commitment stays in view while you fill it in. — 98-cal-com-booking-details-form
- [model draft] Three columns in one card: who and what (host, meeting name, length, location, time zone), the month grid, then the chosen day's slots. Date and time are one decision, not two pages. — 97-cal-com-pick-a-date-and-time
- [model draft] The menu drops over the graph's right edge and leaves the KPIs visible, so you can see what will change as you choose. — 96-plausible-period-picker
- [model draft] The canvas dims behind the dialog but stays visible, so the export plainly reads as a copy of what was drawn, not a new place to work. — 93-excalidraw-export-image-dialog
- [model draft] The example groups personal and application details into separate summary lists. Each row places a label, its answer and a Change link on the same line; use this alignment to make corrections local to the answer. — 101-gov-uk-check-answers-before-submitting
- [model draft] The documentation recommends both an error summary and messages next to the affected answers. Use the summary for orientation and the local message while editing; the standalone capture shows only the summary. — 102-gov-uk-error-summary-with-recovery-links
- [model draft] The example uses ruled rows with the task link at the left and completion status at the right. Repeated alignment makes unfinished work easy to scan without a separate progress dashboard. — 103-gov-uk-task-list-with-explicit-completion-states
- [model draft] The captured playground gives component specimens the broad left region and theme settings a narrow right panel. This separates the object being evaluated from the controls used to configure it. — 104-radix-themes-controls-beside-component-specimens
- [model draft] Inside the dashboard example, a narrow navigation column sits beside a broad report region. Four summary cards share a row, while a larger visitor chart spans the area beneath them. — 105-shadcn-ui-dashboard-navigation-and-reporting-regions
- [model draft] The captured page has global documentation sections across the top, grouped document links on the left, the article in the center and an On this page list on the right. Each region answers a different navigation question. — 108-resend-documentation-with-three-levels-of-navigation

### copywriting

- Every comment card auto-captures the viewport dimensions and browser engine ('1440×900 · Chrome 130') as a muted footer line so reviewers never have to ask 'what screen size are you on?'. — 120-vercel-preview-toolbar-visual-comment-pin
- [model draft] The cards sort by effort, not by feature: 'Launch payments out-of-the-box' against 'Build a custom flow with UI components'. — 99-stripe-integration-chooser
- [model draft] A 12h/24h switch and a time-zone menu sit in the panels they affect, not in settings. — 97-cal-com-pick-a-date-and-time
- [model draft] An unanswered optional field is shown as Not provided instead of an empty cell. State absence explicitly when people must distinguish skipped information from a rendering failure. — 101-gov-uk-check-answers-before-submitting
- [model draft] One error asks for a missing name; the other states a date constraint. Write the correction or valid condition in the error itself instead of exposing a technical validation code. — 102-gov-uk-error-summary-with-recovery-links
- [model draft] Only the financial-history task has a supporting hint, placed directly below its link. Add context where a task needs it instead of giving every row an equally long description. — 103-gov-uk-task-list-with-explicit-completion-states
- [model draft] Each metric combines a value, a change indicator and a short interpretation. Explain the direction of a change in words when the number alone cannot tell the reader why it matters. — 105-shadcn-ui-dashboard-navigation-and-reporting-regions
- [model draft] The introduction presents prerequisites before the framework quickstarts. State what readers need before asking them to choose implementation instructions. — 108-resend-documentation-with-three-levels-of-navigation

### motion/interaction

- Each result row right-aligns its two-key chord badge (e.g. G then I) in 11px tabular monospace; typing filters the list in <16ms with zero skeleton flash. — 114-linear-command-menu-k-filtered-state
- Unfilled parameter pills pulse with a 1px rgba(255,99,99,0.45) border when Enter is pressed early, teaching required arguments without an error banner. — 117-raycast-parameterized-quicklink-inline-slots
- [model draft] Each toggle (promotion codes, tax, shipping address) changes the preview at once. The configurator teaches the product by showing every option's effect. — 100-stripe-checkout-preview-with-options
- [model draft] Each toggle repaints the preview immediately (the checkerboard shows transparency once background is off), so no option needs explaining. — 93-excalidraw-export-image-dialog

### color

- The primary confirm button stays neutral white-on-black unless an alias conflict exists; red (#e00000) is reserved strictly for destructive data loss, keeping zero-downtime rollbacks calm. — 121-vercel-production-promote-instant-rollback-dialog
- [model draft] The selected accent and gray swatches have visible rings, and the appearance control also uses text labels. Show selected state with shape or borders as well as the chosen color. — 104-radix-themes-controls-beside-component-specimens

### typography

- Metadata keys sit flush-left in 12px muted sans (#8e8e93) while values sit flush-right in 12px tabular monospace or colored status pills. — 118-raycast-split-preview-metadata-table
- Log timestamps use 12px Geist Mono with `font-variant-numeric: tabular-nums` in a fixed 96px gutter so multi-line stack traces stay strictly left-aligned. — 119-vercel-deployment-build-logs-check-summary

## References

- 113-linear-triage-inbox-split-inspector — Linear — Triage Inbox & Split Inspector (exemplar)
- 100-stripe-checkout-preview-with-options — Stripe — Checkout preview with options
- 99-stripe-integration-chooser — Stripe — integration chooser
- 98-cal-com-booking-details-form — Cal.com — booking details form
- 97-cal-com-pick-a-date-and-time — Cal.com — pick a date and time
- 96-plausible-period-picker — Plausible — period picker
- 93-excalidraw-export-image-dialog — Excalidraw — export image dialog
- 101-gov-uk-check-answers-before-submitting — GOV.UK — check answers before submitting
- 102-gov-uk-error-summary-with-recovery-links — GOV.UK — error summary with recovery links
- 103-gov-uk-task-list-with-explicit-completion-states — GOV.UK — task list with explicit completion states
- 104-radix-themes-controls-beside-component-specimens — Radix Themes — controls beside component specimens
- 105-shadcn-ui-dashboard-navigation-and-reporting-regions — shadcn/ui — dashboard navigation and reporting regions
- 108-resend-documentation-with-three-levels-of-navigation — Resend — documentation with three levels of navigation
- 114-linear-command-menu-k-filtered-state — Linear — Command Menu (⌘K) Filtered State
- 115-linear-sub-menu-assignee-cycle-picker — Linear — Sub-menu Assignee & Cycle Picker
- 116-raycast-root-launcher-calculator-bar — Raycast — Root Launcher & Calculator Bar
- 117-raycast-parameterized-quicklink-inline-slots — Raycast — Parameterized Quicklink Inline Slots
- 118-raycast-split-preview-metadata-table — Raycast — Split Preview & Metadata Table
- 119-vercel-deployment-build-logs-check-summary — Vercel — Deployment Build Logs & Check Summary
- 120-vercel-preview-toolbar-visual-comment-pin — Vercel — Preview Toolbar & Visual Comment Pin
- 121-vercel-production-promote-instant-rollback-dialog — Vercel — Production Promote & Instant Rollback Dialog