Design tokens
Components read these CSS variables. Use them in your own styles so custom UI matches: color: var(--ai-muted), not a color of your own. Theme variables are set by AITheme or themeToCSS; set the rest on a wrapper element.
The same list, with every component's props, ships in the package as @stackunseen/ui/manifest.json for tools and coding agents.
Color
Set by the theme from three brand seeds; contrast is checked for both modes.
| Variable | For | Light | Dark |
|---|---|---|---|
--ai-canvas | Page background behind panels. | #fafafa | #09090b |
--ai-surface | Panels, cards, menus and dialogs. | #ffffff | #18181b |
--ai-surface-subtle | Quiet fills: hover rows, code, chips, user bubbles. | #f4f4f5 | #27272a |
--ai-text | Body text. | #18181b | #fafafa |
--ai-muted | Secondary text: meta lines, captions, placeholders. | #52525b | #a1a1aa |
--ai-border | Dividers and panel outlines. | #e4e4e7 | #2e2e33 |
--ai-control-border | Outlines of inputs, selects and checkboxes; 3:1 against the surface. | #71717a | #7c7c85 |
--ai-primary | Primary buttons and the strongest emphasis. | #171717 | #fafafa |
--ai-primary-hover | Primary buttons on hover. | #0f0f0f | #ffffff |
--ai-primary-foreground | Text and icons on a primary fill. | #ffffff | #0b1220 |
--ai-primary-soft | Selected and active fills: chosen chips, current rows. | #f2f2f2 | #242424 |
--ai-primary-text | Primary-coloured text, readable on the surface and on the soft fill. | #171717 | #fafafa |
--ai-secondary | Secondary brand fill. | #7c3aed | #7c3aed |
--ai-secondary-hover | Secondary fill on hover. | #732be1 | #732be1 |
--ai-secondary-foreground | Text on a secondary fill. | #ffffff | #ffffff |
--ai-secondary-soft | Soft secondary fill. | #f2ecff | #251e3c |
--ai-secondary-text | Secondary-coloured text. | #7c3aed | #a76fff |
--ai-accent | Accent fill for highlights such as the Persona orb. | #0f766e | #0f766e |
--ai-accent-foreground | Text on an accent fill. | #ffffff | #ffffff |
--ai-success | Success text and icons: Complete, Passed, Connected. | #166534 | #86efac |
--ai-success-soft | Success badge fill. | #dcfce7 | #052e16 |
--ai-warning | Warning text: Needs review, Unconfirmed, Cannot be undone. | #92400e | #fcd34d |
--ai-warning-soft | Warning badge fill. | #fef3c7 | #451a03 |
--ai-danger | Errors and destructive actions. | #991b1b | #fca5a5 |
--ai-danger-soft | Error badge fill and removed diff lines. | #fee2e2 | #450a0a |
--ai-focus | Keyboard focus rings; 3:1 against the surfaces. | #171717 | #fafafa |
--ai-field-background | Fill of text fields: the surface, or the subtle surface when fields are tinted. | — | — |
--ai-matrix-flip | Matrix fill level at which cell text switches to the primary foreground; computed by the theme. | — | — |
Shape
Corners and border width, set by the theme.
| Variable | For | Default |
|---|---|---|
--ai-radius | Corners of panels, menus and dialogs. | 12px |
--ai-control-radius | Corners of inputs and selects. | 10px |
--ai-button-radius | Corners of buttons; follows the control radius unless set. | — |
--ai-composer-radius | Corners of the message composer. | 16px |
--ai-radius-card | Corners of Card and Stat surfaces. | 16px |
--ai-radius-pill | Corners of chips and segmented controls. | 999px |
--ai-radius-tag | Corners of tag labels. | 999px |
--ai-border-width | Width of borders and dividers. | 1px |
Spacing
Gaps and padding; compact density tightens them.
| Variable | For | Default |
|---|---|---|
--ai-control-heighttheme | Height of buttons, inputs and menu rows; 32px when compact. | 36px |
--ai-gaptheme | Space between blocks inside a component. | 12px |
--ai-field-gaptheme | Space between a label, its control and its help text. | 8px |
--ai-panel-paddingtheme | Inner padding of panels and cards. | 16px |
--ai-row-gap | Space between rows in page-level layouts. | 16px |
--ai-activity-gap | Space between lines of an assistant's activity (tool calls, reasoning). | 10px |
Elevation
Shadows under floating surfaces.
| Variable | For | Default |
|---|---|---|
--ai-shadow-popovertheme | Shadow under menus, popovers and floating buttons. | 0 4px 16px rgb(0 0 0 / 0.1 |
--ai-shadow-dialogtheme | Shadow under dialogs and sheets. | 0 12px 40px rgb(0 0 0 / 0.16 |
--ai-shadow-panel | Optional shadow on raised panels; none unless a host sets it. | none |
Type
Typeface and sizes. Unset, components inherit the page font.
| Variable | For | Default |
|---|---|---|
--ai-font-family | Interface typeface; inherits the page font when unset. | ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif |
--ai-font-mono | Monospace typeface for code, paths and identifiers. | ui-monospace, SFMono-Regular, Consolas, monospace |
--ai-font-numeric | Typeface for figures: Stat values, durations, counts and deltas; the monospace face when unset. | — |
--ai-font-size | Body text size of the interface. | 14px |
--ai-font-size-message | Conversation text in the chat message variant, as in ChatGPT. | 16px |
--ai-font-size-heading | Component titles. | 16px |
--ai-font-size-meta | Meta lines: times, sizes, counts. | 13px |
--ai-font-size-caption | Captions, badges and small buttons. | 12px |
--ai-disabled-opacity | Opacity of disabled controls. | 0.5 |
Motion
Transition timing. Reduced motion in the theme turns transitions off.
| Variable | For | Default |
|---|---|---|
--ai-ease | Easing curve of transitions. | cubic-bezier(0.2, 0, 0, 1 |
--ai-duration-fast | Short transitions: hover, open and close. | 120ms |
--ai-duration-base | Longer transitions such as progress. | 200ms |
Component settings
Set these on a wrapper to adjust one component.
| Variable | For | Default |
|---|---|---|
--ai-chat-height | Height of Chat; set 100% to fill a parent. | 520px |
--ai-message-padding | Inner padding of the panel message variant. | 6px |
--ai-launcher-z | Stacking level of the ChatLauncher bubble and panel. | 40 |
--ai-list-inset | Left inset of compact ThreadList rows and labels, to line up with a host's navigation. | 8px |
--ai-navigation-height | Maximum height of the ThreadList scroll area; none lets it grow. | 360px |
--ai-navigation-gutter | Scrollbar room of the ThreadList; auto when the list grows inside another scroller. | stable |
--ai-workspace-padding | WorkspaceShell outer padding. | — |
--ai-workspace-gap | Space between WorkspaceShell panes. | — |
--ai-workspace-navigation-width | Width of the WorkspaceShell navigation pane. | 224px |
--ai-workspace-inspector-width | Width of the WorkspaceShell inspector pane. | 288px |
--ai-workspace-pane-padding | Inner padding of scrolling WorkspaceShell panes; 0 when their content scrolls itself. | 4px |
--ai-workspace-pane-gutter | Scrollbar room of WorkspaceShell panes; auto when their content scrolls itself. | stable |
--ai-waterfall-figures | Width of the figures column (duration, tokens, cost) in the ExecutionTimeline waterfall; 300px by default. | 300px |
--ai-sidecar-width | Width of the Sidecar panel. | 400px |
--ai-sidecar-inset | Distance of the Sidecar from the viewport edge. | 16px |
--ai-sidecar-inset-top | Top offset of the Sidecar, below a fixed header. | — |
--ai-sidecar-inset-bottom | Bottom offset of the Sidecar. | — |
--ai-sidecar-sheet-height | Height of the Sidecar as a bottom sheet on small screens. | 46vh |
--ai-chip-height | Height of Chip. | 28px |
--ai-chip-padding-inline | Side padding of Chip. | 10px |
--ai-chip-font-size | Text size of Chip. | 13px |
--ai-chip-active-background | Fill of a selected Chip. | — |
--ai-chip-active-color | Text of a selected Chip. | — |
--ai-stepper-segment-height | Height of Stepper progress segments. | 8px |
--ai-stepper-segment-gap | Space between Stepper segments. | 6px |
--ai-persona-size | Diameter of the Persona orb. | 64px |
--ai-preview-height | Height of WebPreview frames. | 360px |
--ai-matrix-cell-width | Width of Matrix cells. | 44px |
--ai-matrix-cell-height | Height of Matrix cells. | 36px |
--ai-matrix-header-height | Height of the Matrix column header row. | 96px |
--ai-matrix-end-padding | Space after the last Matrix column. | — |
--ai-matrix-max-level | Highest Matrix level, for the fill scale. | 1 |
--ai-dot-ring-size | Width and height of the DotRing figure. | 200px |
--ai-dot-bars-height | Height of the DotBars columns. | 72px |
--ai-dot-size | Diameter of each DotBars dot. | 5px |
--ai-week-strip-height | Height of the WeekStrip columns. | 56px |
--ai-heat-key-size | Width and height of a HeatKeys cell. | 32px |
--ai-sparkline-width | Width of the Sparkline figure. | 100% |
--ai-sparkline-height | Height of the Sparkline figure. | 32px |
--ai-tracker-height | Height of the Tracker blocks. | 28px |
--ai-donut-size | Width and height of the DonutChart ring. | 140px |
--ai-tone-pad-width | Width of the TonePad, including its axis labels. | 320px |