Ask for a role, never a hex.

Page background: Paper (light), Void (dark).

Cards, fields, tables: Sheet (light), Deck (dark).

Raised panels and placeholders; on dark also menus and skeleton blocks: Tray (light), Plate (dark).

Rails, hover and selected rows in menus and tables, disabled fills; on light also skeleton blocks: Shelf (light), Rail (dark).

Hairlines: card borders, table rows, dividers, tab list rule. Decorative only; never the only edge of a control.

Borders that must be seen: field outlines, the ghost button, checkbox and radio rings, switch track, dashed placeholders. At least 3.57:1 on light surfaces 0 to 2 and 3.44:1 on dark surfaces 0 to 2 (3:1 floor for control borders); on Rail it drops to 3.11:1, so controls do not sit on Rail.

Headings, labels, primary text, icons, button text on quiet and ghost: Ink (light), Frost (dark). Lowest across surface-0 to surface-3: 14.00:1 light, 14.30:1 dark.

Body copy on surface-0 to surface-3: Slate (light), Mist (dark). Lowest: 8.61:1 light, 10.54:1 dark.

Captions, metadata, placeholders, Courier labels and disabled text on surface-0 to surface-3: Ash (light), Fog (dark). Lowest: 4.83:1 light, 5.56:1 dark.

Laser as a line or mark: path lines, the 8 and the dot, the inner focus ring, link underlines, the active tab bar, italic display emphasis at 24px or larger. Not small text (rule 1).

The main button and the New badge. One main button per view.

Text and icons on accent-fill: white 6.12:1 (light), Frost 5.45:1 (dark).

The main button while pressed, with a dark inset and a light edge. accent-ink on it 9.18:1 light, 8.17:1 dark.

The quiet (second) button and the Live badge.

Text on accent-quiet: white 9.18:1 (light), Frost 8.17:1 (dark).

The quiet button while pressed. quiet-ink on it 11.76:1 light, 10.46:1 dark.

The outcome as a shape: the mark's end node, the bulb, the one lit chart series, the sweep head, the first item in a plan. On light, give it an Ink outline.

Strokes and glyphs drawn on a lit fill (the bulb filament, a number on an Ember chip). 5.96:1 on Ember.

Lit words: units, lit figures, the lit label in a chart. Burnt on light (lowest 4.57:1), Amber on dark (lowest 7.85:1). Never Ember as text.

The soft glow under a Laser line: Scanner, 16 to 18px wide, blurred 5 to 6px, at 90%. Dark grounds only. In the light theme use it only inside a well; light never glows on paper.

The partner of every Laser line and the outer focus ring: Ink (light), Frost (dark). Carries the shape for red-blind viewers: Laser on Void falls to 2.33:1 in a protanopia simulation, Frost on Void stays 17.53:1.

The dark well that anything giving off light sits in on a light page: the mark at hero size, the trace, the sweep track, hero bands, the Map cover band.

Error borders (2px). Always with an icon and the word Error in text-1; the red never carries the message alone. Among status messages only errors are red.

The success border (status only), always with its icon and word in a badge. 3.03:1 light, 3.03:1 dark at the lowest on its tint and surface-0 to surface-2.

The success word and icon (status only): Moss deep on light, Moss on dark. Lowest 4.54:1 light, 4.52:1 dark, on its tint and surface-0 to surface-3.

The success fill (status only), behind success-text and inside the success border.

The info border (status only), always with its icon and word in a badge. 3.03:1 light, 3.03:1 dark at the lowest on its tint and surface-0 to surface-2.

The info word and icon (status only): Tide deep on light, Tide on dark. Lowest 4.51:1 light, 4.53:1 dark, on its tint and surface-0 to surface-3.

The info fill (status only), behind info-text and inside the info border.

The warning border (status only), always with its icon and word in a badge. 3.03:1 light, 3.00:1 dark at the lowest on its tint and surface-0 to surface-2.

The warning word and icon (status only): Brass deep on light, Brass on dark. Lowest 4.56:1 light, 4.51:1 dark, on its tint and surface-0 to surface-3.

The warning fill (status only), behind warning-text and inside the warning border.

Toasts and tooltips: Ink on light pages, Plate on dark pages (with an edge border).

Text on inverse-surface: white on Ink 18.20:1, Frost on Plate 15.82:1.

Secondary text and the close icon on inverse-surface: 11.94:1 on Ink, 11.66:1 on Plate.

Backdrop behind a dialog: Void at 55% (light), 72% (dark).

Context series in charts (everything that is not the one lit series): Ash on light (6.27:1 on Sheet), a deeper Fog on dark (3.29:1 on Deck), so the Ember series is the brightest thing in the chart.

1px edge on dark social tiles, share images, carousels and quote cards: Frost at 35% on Void. It keeps a Void tile visible in a dark feed (2.78:1 against a typical dark feed).

Zero: reset a margin or gap.

4px, the base step.

8px: icon gaps, chip padding.

12px: control gaps, alert and toast gaps.

16px: alert padding, menu padding.

24px: card padding, grid gutter.

32px: section padding inside cards.

48px: between page sections on phones.

64px: board and hero padding.

96px: between page sections on desktop.

Checkbox corners.

Tooltips, menu items, small chips.

Buttons, fields, alerts, toasts, menus, tables, swatches.

Cards, dialogs, panels, the PDF cover art.

Badges, chips, the sweep track, the eyebrow tick.

Smallest lift: the switch thumb.

Raised cards.

Menus and toasts.

Dialogs, above the scrim.

The soft Scanner glow around the one focal element on dark. Empty in the light theme (a zero shadow, so it can be listed beside another): light never glows on paper; put the element in a well instead.

Hairlines, cards, menus, tables, the toast and tooltip edge.

Fields, the ghost button, checkbox and radio rings, the switch track, error borders, each ring of the focus ring.

The active tab bar, the AccentHeadline underline, the eyebrow tick.

Large phone. Reference value: media queries use the literal.

Tablet. The grid collapses to 6 columns.

Laptop.

Desktop.

Columns in .g8n-grid; it collapses to 6 on tablet and 2 on phone.

24px gap in .g8n-grid; matches space-5.

Ideal reading width for body copy.

Maximum width of .g8n-container.

Stacking base.

Cards lifted off the page.

The sticky site header.

Menus and selects.

The scrim behind a dialog.

Dialogs.

Toasts.

Tooltips, always on top.

Body copy; italic display emphasis.

Headlines, labels, buttons, the wordmark, Courier labels and numbers.

72px: big stat and quote hero.

48px: page H1 and slide titles.

36px.

28px.

22px: dialog titles.

18px: lead.

16px: body.

14px: buttons, fields, secondary text.

12px: eyebrows, Courier labels, captions.

11px: badges, the smallest text in the system (bold capitals only).

Big numerals and the hero.

Headlines.

UI text and labels.

Long-form reading.

Georgia headlines.

Default tracking.

Courier New labels and numbers.

Badge capitals.

Uppercase Verdana eyebrows.

The G8N•AI wordmark.

Button press: a 1px drop and the inset appear.

Hover: the edge fades in.

Menus, dialogs and toasts opening and closing; tab and accordion changes.

Sweep B and the Frost-only sweep, back and forth (alternate).

Sweep A, the plain ambient sweep, back and forth.

The signal trace loop: red pulses in, one Ember pulse with a Frost core out, the bulb lights.

The one easing for UI: settled, never springy, no bounce.

The sweeps, so the head slows at each end.