Design system

Foundations

Every token in tokens.css: its light and dark value, its role, and its name before the 2.0.0 token rename. The 105 tokens come from tokens.json in @filipgutica/design-system 1.0.16, so this page always matches the package.

A project sets only the identity inputs. Every other token is core and stays as it is.

Identity inputs

Identity

The four lines a theme sets on :root: the hue for light and dark, from its file in tokens/themes/, and the two font stacks. Every other token follows from them.

TokenLightDarkRole
--color-projectFormerly --project
#4b45d1
#a5a1ff
The project hue; --color-accent follows it
--color-project-darkFormerly --project-dark
#a5a1ff
Same as light
The $ prompt on the command plate
--font-uiFormerly --font-sans
"IBM Plex Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif
Same as light
Prose, h3 and below, application section headings, labels, and controls
--font-mono
"IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace
Same as light
Identity, documentation and product page titles and section headings, navigation rails, metadata, captions, code, identifiers, and keys

Surfaces, text, and lines

Neutral paper in light and graphite in dark. Contrast, not colour, separates regions.

TokenLightDarkRole
--color-bgFormerly --bg
#f4f5f6
#0d1012
Page canvas
--color-surfaceFormerly --surface
#e9ebed
#13171a
Wells: code, screenshots, figures
--color-surface-raisedFormerly --surface-raised
#fbfbfc
#181d21
Panels and floating layers
--color-surface-mutedFormerly --surface-hover
#e2e5e8
#20262b
Neutral badges, slider and progress tracks, and radio card hover
--color-wellFormerly --field
#e2e5e8
color-mix(in srgb, #0d1012 87.5%, black)
The well: segmented and switch tracks, pressed buttons, selected radio cards, and disabled fields
--color-field-bgFormerly --field-bg
#fbfbfc
color-mix(in srgb, #0d1012 87.5%, black)
Field fill: --color-surface-raised in light, the sunk --color-well well in dark. It stays the same on focus
--color-field-edgeFormerly --field-edge
#d3d8dd
#262d33
Field border at rest: --color-border-subtle in both themes. Focus turns it --color-accent
--shadow-fieldFormerly --field-shadow
none
inset 1.2px 1.2px 3.6px rgb(0 0 0 / 55%), inset -1.2px -1.2px 3.6px rgb(255 255 255 / 5%)
Fields at rest: none in light, where the white fill and edge carry the shape; --shadow-sink in dark. Disabled fields drop it
--color-control-thumbFormerly --control-thumb
#fbfbfc
color-mix(in srgb, #181d21 88%, white)
Secondary buttons and segmented thumbs
--color-nav-currentFormerly --nav-current
color-mix(in srgb, #4b45d1 14%, #fbfbfc)
color-mix(in srgb, #a5a1ff 20%, transparent)
Current navigation row and selected tab, with --shadow-nav-current
--color-nav-current-textFormerly --nav-current-text
#4b45d1
#a5a1ff
Text on the current row and selected tab: the first of --color-accent, --color-text, black, and white that reaches 4.5:1 on the tinted fill
--color-segmented-current-textFormerly --segmented-current-text
#4b45d1
#a5a1ff
The selected segmented label: the first of --color-accent, --color-text, black, and white that reaches 4.5:1 on the thumb (3:1 for an icon)
--color-row-hoverFormerly --row-hover
#e2e5e8
#20262b
Hover on navigation rows, tabs, ghost buttons, and listbox options
--color-row-selectedFormerly --row-selected
#fbfbfc
#181d21
Checked option in a select picker
--color-border-subtleFormerly --border-subtle
#d3d8dd
#262d33
Figures and dividers
--color-borderFormerly --border
#6d747b
#78818a
Unchecked checkbox and radio edges; the off switch track mixes it into --color-well
--color-textFormerly --text
#101315
#e6e9eb
Essential labels and instructions
--color-mutedFormerly --text-muted
#50575e
#9aa3ab
Secondary information and metadata
--color-overlayFormerly --overlay
rgb(0 0 0 / 42%)
rgb(0 0 0 / 62%)
Backdrop behind dialogs and drawers

Accent and links

The hue fills the one primary action and marks selection and focus. Links keep their own colour.

TokenLightDarkRole
--color-accentFormerly --accent
#4b45d1
#a5a1ff
Primary action fill, marks, current items, checked controls; 4.5:1 where it colors text
--color-accent-textFormerly --accent-text
#f4f5f6
#0d1012
Primary button label
--color-accent-hoverFormerly --accent-hover
#101315
#e6e9eb
Accent hover; no core component reads it
--color-button-hoverFormerly --button-hover
color-mix(in srgb, #4b45d1 85%, #101315)
color-mix(in srgb, #a5a1ff 85%, #e6e9eb)
Primary button hover
--color-linkFormerly --link
#0b5f7c
#67c1df
Links
--color-focusFormerly --focus
#4b45d1
#a5a1ff
The one focus ring on every role but fields: the accent
--focus-width
2px
Same as light
One ring for every role but fields: buttons, quiet actions, links, tabs, and navigation rows. --color-focus is the accent, at 3:1 or more on every surface. It has no glow and sits over the control's own raise or sink shadow. Pointer hover never draws focus.
--focus-offset
3px
Same as light
The gap between a control and its ring

Status

Only for state, always with a text or icon label. Each has a soft surface for alerts and badges.

TokenLightDarkRole
--color-successFormerly --success
#157249
#4cc38a
Success state: icons, and the success alert and badge. Always with a text label
--color-warningFormerly --warning
#86532e
#e2a54b
Warning state: icons, and the warning alert and badge. Always with a text label
--color-errorFormerly --danger
#bd342b
#f0776c
Errors and destructive actions: invalid field edges, field error text, the danger button label, and error icons
--color-infoFormerly --info
#175cd3
#84adff
Information state: icons, and the info alert and badge
--color-success-surfaceFormerly --success-soft
#d9e5e1
#172d25
Alert text on its tint
--color-warning-surfaceFormerly --warning-soft
#e7e2de
#2f281b
Alert text on its tint
--color-error-surfaceFormerly --danger-soft
#efe4e4
#312020
Alert text on its tint
--color-info-surfaceFormerly --info-soft
#d9e3f2
#202938
Alert text on its tint
--color-status-ink
black
#e6e9eb
What a status label mixes with: black in light, so it keeps its contrast whatever a theme's text, and --color-text in dark

Code

Source code wells and their restrained syntax colours.

TokenLightDarkRole
--color-codeFormerly --code-bg
#e9ebed
#13171a
Source code well
--color-code-textFormerly --code-text
#101315
#e6e9eb
Plain text in source code wells
--color-syntax-keywordFormerly --code-key
#715b42
#d8c2a5
Keywords in source code
--color-syntax-stringFormerly --code-string
#346347
#a8bd9c
Strings in source code
--color-syntax-numberFormerly --code-number
#86532e
#d5b98c
Numbers in source code
--color-syntax-commentFormerly --code-comment
#626772
#a0a6b1
Comments in source code

Type

Sizes in rem, so text follows the reader’s font size. The identity inputs name the families.

TokenLightDarkRole
--text-xs
0.75rem
Same as light
Badges, navigation group labels, and code block headers
--text-sm
0.8125rem
Same as light
Secondary text and figure captions
--text-md
0.875rem
Same as light
Controls and dense application content
--text-lg
1rem
Same as light
Subheadings (h3 and below) and large controls
--text-xl
1.25rem
Same as light
Documentation section heading, in mono
--text-2xl
1.5rem
Same as light
Largest application title
--text-3xl
2.75rem
Same as light
Documentation title, in mono
--text-reading
1rem
Same as light
Paragraphs and article text, with --leading and --measure
--text-display
3.5rem
Same as light
Product page and tool home title, in mono
--text-display-sm
2.125rem
Same as light
The display title on phones
--leading-tight
1.25
Same as light
Headings, from the tokens.css base
--leading
1.6
Same as light
Body and reading text
--weight-regular
400
Same as light
Body text, labels, and rows that are not current
--weight-medium
500
Same as light
The current destination
--weight-semibold
600
Same as light
Headings, from the tokens.css base
--tracking-tight
-0.03em
Same as light
Headings, from the tokens.css base
--text-code
0.84375rem
Same as light
Inline code, source code, and command plates

Space

A 4px rhythm: small gaps inside a group, larger gaps between groups.

TokenLightDarkRole
--space-1
0.25rem
Same as light
The smallest rhythm step: an icon and its label, and inner insets
--space-2
0.5rem
Same as light
Gaps inside a group, such as between controls
--space-3
0.75rem
Same as light
Gaps between related rows and fields
--space-4
1rem
Same as light
Side gutter on phones
--space-5
1.25rem
Same as light
A rhythm step between group and section gaps
--space-6
1.5rem
Same as light
Side gutter
--space-8
2rem
Same as light
Documentation section gap on phones
--space-12
3rem
Same as light
Documentation section gap
--space-16
4rem
Same as light
Product section separation at tablet width
--space-20
5rem
Same as light
A large rhythm step for page regions
--space-24
6rem
Same as light
Product section separation

Size

Control heights, the reading measure, and page widths.

TokenLightDarkRole
--control-sm
2rem
Same as light
Small control height: compact buttons and inline actions
--control-md
2.25rem
Same as light
Default control height on fine pointers
--control-lg
2.75rem
Same as light
Touch controls
--row
2.25rem
Same as light
Navigation and list rows
--measure
68ch
Same as light
Bounds reading text
--page-max
960px
Same as light
Documentation frame
--page-wide
1120px
Same as light
Product page frame
--sidebar
224px
Same as light
This page's sidebar

Shape

One radius per role, from inline code to floating panels.

TokenLightDarkRole
--radius-inlineFormerly --radius-sm
6px
Same as light
Places and picked rows: navigation rows, tabs, list rows, breadcrumb links, checkboxes, and keyboard keys
--radius-controlFormerly --radius-md
999px
Same as light
Pills that act, or set a value in place with every option shown: buttons other than the labelled contents trigger, quiet actions other than the project-menu trigger, segmented controls, and their thumbs
--radius-panelFormerly --radius-lg
16px
Same as light
Containers: wells, plates, panels, radio cards, alerts, and floating layers
--radius-field
10px
Same as light
Typed fields, controls whose label wraps, and one-line controls that are not actions: inputs, selects, textareas, toggle cards, pager links, the project-menu trigger, the labelled contents trigger and its no-JavaScript summary, and the skip link
--radius-pill
999px
Same as light
Small state marks: status badges, switch tracks, slider and progress tracks, and score pips

Elevation

One shadow per depth tier. Pages write no shadow of their own.

TokenLightDarkRole
--shadow-raise
0 1px 2px rgb(16 24 40 / 12%), 0 0 0 1px rgb(16 24 40 / 6%)
inset 0 1px 0 rgb(255 255 255 / 7%), 0 1px 2px rgb(0 0 0 / 45%)
Idle controls: buttons, unselected radio cards, switch knobs, and segmented thumbs
--shadow-surface
0 1px 2px rgb(16 24 40 / 6%), 0 0 0 1px rgb(16 24 40 / 6%)
0 0 0 1px rgb(255 255 255 / 6%)
Containers: panels, cards, source code, command plates, and terminal captures
--shadow-sink
inset 1.2px 1.2px 3.6px rgb(130 142 158 / 35%), inset -1.2px -1.2px 3.6px rgb(255 255 255 / 80%)
inset 1.2px 1.2px 3.6px rgb(0 0 0 / 55%), inset -1.2px -1.2px 3.6px rgb(255 255 255 / 5%)
Wells: tracks, pressed buttons, selected radio cards, and dark fields
--shadow-dialogFormerly --shadow-popover
0 8px 24px rgb(16 16 24 / 12%), 0 0 0 1px #d3d8dd
0 8px 24px rgb(0 0 0 / 45%), 0 0 0 1px #262d33
Menus, popovers, pickers, and dialogs
--shadow-nav-current
0 1px 3px rgb(130 142 158 / 40%)
0 1px 2px rgb(0 0 0 / 25%)
The lift under the current navigation row and the selected tab
--shadow-field-focusFormerly --field-shadow-focus
inset 0 0 0 2px color-mix(in srgb, #4b45d1 18%, transparent)
inset 0 0 0 2px color-mix(in srgb, #a5a1ff 18%, transparent)
A focused field's 2px inset line: the accent at 18%, inside its --color-accent edge
--shadow-field-focus-invalidFormerly --field-shadow-focus-invalid
inset 0 0 0 2px color-mix(in srgb, #bd342b 18%, transparent)
inset 0 0 0 2px color-mix(in srgb, #f0776c 18%, transparent)
A focused invalid field's inset line: --color-error at 18%, inside its --color-error edge

Motion

Short durations for hover and press, a longer one for menus and panels.

TokenLightDarkRole
--duration-fast
120ms
Same as light
Hover and press
--duration
180ms
Same as light
Menus, panels, and the switch knob
--ease-out
cubic-bezier(0.2, 0.8, 0.2, 1)
Same as light
Animate opacity or transform only where it explains a state change

Terminal plates

Derived from the hue: the tinted command plate and the neutral terminal capture of the terminal folio identity. A project without plates leaves them unused.

TokenLightDarkRole
--color-command-bgFormerly --command-bg
color-mix(in srgb, #4b45d1 25%, #101010)
color-mix(in srgb, #a5a1ff 16%, black)
Command plate, tinted with the hue, in both themes
--color-command-borderFormerly --command-border
transparent
color-mix(in srgb, #a5a1ff 28%, black)
Command plate edge; transparent in light
--color-terminalFormerly --terminal
#0a0c0e
Same as light
Terminal capture plate, in both themes
--color-terminal-textFormerly --terminal-text
#e6e9eb
Same as light
Command text
--color-terminal-borderFormerly --terminal-border
#2a3036
Same as light
Terminal plate edge
--color-terminal-captionFormerly --terminal-caption
#13171a
Same as light
Status-line caption under a terminal capture
--color-terminal-caption-textFormerly --terminal-caption-text
#c9d0d6
Same as light
The status-line caption under a terminal capture
--shadow-nav-current-darkFormerly --terminal-shadow-nav-current
0 1px 2px rgb(0 0 0 / 25%)
Same as light
The selected tab's lift in a terminal capture header, which stays dark in both appearances