Profile test
Every token the site defines, in the three tiers it is organised in. Primitives are raw values with no meaning attached. Semantics are the roles components reach for, each pointing at a primitive. Applied is the thin layer on top, in document/tokens.css.
Flip the theme switcher to check both palettes, and resize the window to watch the fluid scales move. A token whose value reads unset is defined nowhere the bundle can see.
Primitives
Raw values, no meaning attached. Nothing in a component should name one of these directly.
Colour
Source: profile/primitives/colors.css. Eleven rungs per ramp, lightness steps shared across every ramp; chroma peaks where each hue can hold it in sRGB, which is why yellow tops out lighter than red.
Ink is the exception, and is listed last for it. Its steps are compressed into the dark half of the range, so its rungs mean something different from everyone else's and it carries its own descriptions.
Black and white
| Token | Swatch | Description |
|---|---|---|
--color-black |
Pure black. No role maps to it. | |
--color-white |
Pure white. Carries text on solid fills. |
Neutral
Warm, hue 95. Surfaces and borders.
| Token | Swatch | Description |
|---|---|---|
--color-neutral-50 |
Lightest tint. Callout and alert backgrounds. | |
--color-neutral-100 |
Tint. Subtle page and surface fills. | |
--color-neutral-200 |
Tint. Surfaces and the lightest borders. | |
--color-neutral-300 |
Light. Borders and hover surfaces. | |
--color-neutral-400 |
Mid-light. Borders that need to be seen. | |
--color-neutral-500 |
Peak chroma. The hue at full strength. | |
--color-neutral-600 |
Mid-dark. Hover state for the solid. | |
--color-neutral-700 |
Dark. Text on a light background. | |
--color-neutral-800 |
Darker. Dark theme surfaces in the colour families. | |
--color-neutral-900 |
Near-black. Light theme text, and dark theme subtle fills. | |
--color-neutral-950 |
Darkest. Dark theme backgrounds in the colour families. |
Slate
Cool, hue 255. Text, and the light theme surfaces.
| Token | Swatch | Description |
|---|---|---|
--color-slate-50 |
Lightest tint. Callout and alert backgrounds. | |
--color-slate-100 |
Tint. Subtle page and surface fills. | |
--color-slate-200 |
Tint. Surfaces and the lightest borders. | |
--color-slate-300 |
Light. Borders and hover surfaces. | |
--color-slate-400 |
Mid-light. Borders that need to be seen. | |
--color-slate-500 |
Peak chroma. The hue at full strength. | |
--color-slate-600 |
Mid-dark. Hover state for the solid. | |
--color-slate-700 |
Dark. Text on a light background. | |
--color-slate-800 |
Darker. Dark theme surfaces in the colour families. | |
--color-slate-900 |
Near-black. Light theme text, and dark theme subtle fills. | |
--color-slate-950 |
Darkest. Dark theme backgrounds in the colour families. |
Blue
Hue 255. Links and primary actions.
| Token | Swatch | Description |
|---|---|---|
--color-blue-50 |
Lightest tint. Callout and alert backgrounds. | |
--color-blue-100 |
Tint. Subtle page and surface fills. | |
--color-blue-200 |
Tint. Surfaces and the lightest borders. | |
--color-blue-300 |
Light. Borders and hover surfaces. | |
--color-blue-400 |
Mid-light. Borders that need to be seen. | |
--color-blue-500 |
Peak chroma. The hue at full strength. | |
--color-blue-600 |
Mid-dark. Hover state for the solid. | |
--color-blue-700 |
Dark. Text on a light background. | |
--color-blue-800 |
Darker. Dark theme surfaces in the colour families. | |
--color-blue-900 |
Near-black. Light theme text, and dark theme subtle fills. | |
--color-blue-950 |
Darkest. Dark theme backgrounds in the colour families. |
Green
Hue 150. Success.
| Token | Swatch | Description |
|---|---|---|
--color-green-50 |
Lightest tint. Callout and alert backgrounds. | |
--color-green-100 |
Tint. Subtle page and surface fills. | |
--color-green-200 |
Tint. Surfaces and the lightest borders. | |
--color-green-300 |
Light. Borders and hover surfaces. | |
--color-green-400 |
Mid-light. Borders that need to be seen. | |
--color-green-500 |
Peak chroma. The hue at full strength. | |
--color-green-600 |
Mid-dark. Hover state for the solid. | |
--color-green-700 |
Dark. Text on a light background. | |
--color-green-800 |
Darker. Dark theme surfaces in the colour families. | |
--color-green-900 |
Near-black. Light theme text, and dark theme subtle fills. | |
--color-green-950 |
Darkest. Dark theme backgrounds in the colour families. |
Yellow
Hue 95. Warnings. Chroma peaks at 300 to 400, not 500.
| Token | Swatch | Description |
|---|---|---|
--color-yellow-50 |
Lightest tint. Callout and alert backgrounds. | |
--color-yellow-100 |
Tint. Subtle page and surface fills. | |
--color-yellow-200 |
Tint. Surfaces and the lightest borders. | |
--color-yellow-300 |
Light. Borders and hover surfaces. | |
--color-yellow-400 |
Mid-light. Borders that need to be seen. | |
--color-yellow-500 |
Peak chroma. The hue at full strength. | |
--color-yellow-600 |
Mid-dark. Hover state for the solid. | |
--color-yellow-700 |
Dark. Text on a light background. | |
--color-yellow-800 |
Darker. Dark theme surfaces in the colour families. | |
--color-yellow-900 |
Near-black. Light theme text, and dark theme subtle fills. | |
--color-yellow-950 |
Darkest. Dark theme backgrounds in the colour families. |
Red
Hue 30. Errors.
| Token | Swatch | Description |
|---|---|---|
--color-red-50 |
Lightest tint. Callout and alert backgrounds. | |
--color-red-100 |
Tint. Subtle page and surface fills. | |
--color-red-200 |
Tint. Surfaces and the lightest borders. | |
--color-red-300 |
Light. Borders and hover surfaces. | |
--color-red-400 |
Mid-light. Borders that need to be seen. | |
--color-red-500 |
Peak chroma. The hue at full strength. | |
--color-red-600 |
Mid-dark. Hover state for the solid. | |
--color-red-700 |
Dark. Text on a light background. | |
--color-red-800 |
Darker. Dark theme surfaces in the colour families. | |
--color-red-900 |
Near-black. Light theme text, and dark theme subtle fills. | |
--color-red-950 |
Darkest. Dark theme backgrounds in the colour families. |
Ink
Cool, hue 255. The dark theme's neutral family, and the only ramp that sets its own lightness steps. Slate's hue and chroma with the range compressed into the dark half, modelled on GitHub's dark dimmed, which is soft by spread rather than by tint. Flip to the dark theme to see these doing their job.
| Token | Swatch | Description |
|---|---|---|
--color-ink-50 |
Lightest. Body text. | |
--color-ink-100 |
Solid fills. Buttons and badges. | |
--color-ink-200 |
That fill under the pointer. | |
--color-ink-300 |
Held in reserve. | |
--color-ink-400 |
Muted text. Captions and metadata. | |
--color-ink-500 |
Held in reserve. | |
--color-ink-600 |
Pressed surfaces, and borders under the pointer. | |
--color-ink-700 |
Surfaces under the pointer, and borders. | |
--color-ink-800 |
Raised surfaces, and the dividers you barely notice. | |
--color-ink-900 |
One step off the page. | |
--color-ink-950 |
The page itself, and text sitting on a solid fill. |
Type
Source: profile/primitives/typography.css.
Families
| Token | Value | Sample |
|---|---|---|
--font-family-sans | Baseline sets the table | |
--font-family-mono | Baseline sets the table |
Fixed scale
The rem scale. For anything that should not move with the viewport.
| Token | Value | Sample |
|---|---|---|
--font-size--2 | Baseline sets the table | |
--font-size--1 | Baseline sets the table | |
--font-size-0 | Baseline sets the table | |
--font-size-1 | Baseline sets the table | |
--font-size-2 | Baseline sets the table | |
--font-size-3 | Baseline sets the table | |
--font-size-4 | Baseline sets the table | |
--font-size-5 | Baseline sets the table |
Fluid scale
The Utopia scale, interpolating between 320px and 1280px at 14px to 16px, ratio 1.125. These are what the size roles read, so this is the set to watch while resizing.
| Token | Value | Sample |
|---|---|---|
--font-size-fluid--2 | Baseline sets the table | |
--font-size-fluid--1 | Baseline sets the table | |
--font-size-fluid-0 | Baseline sets the table | |
--font-size-fluid-1 | Baseline sets the table | |
--font-size-fluid-2 | Baseline sets the table | |
--font-size-fluid-3 | Baseline sets the table | |
--font-size-fluid-4 | Baseline sets the table | |
--font-size-fluid-5 | Baseline sets the table |
Weights
| Token | Value | Sample |
|---|---|---|
--font-weight-light | Baseline sets the table | |
--font-weight-normal | Baseline sets the table | |
--font-weight-medium | Baseline sets the table | |
--font-weight-semibold | Baseline sets the table | |
--font-weight-bold | Baseline sets the table |
Weight has no semantic layer on purpose: the primitives are already the application keywords, so a role would only rename them.
Line height
| Token | Value | Sample |
|---|---|---|
--line-height-flush | Baseline sets the table, and this line wraps so the leading is visible rather than theoretical. | |
--line-height-tight | Baseline sets the table, and this line wraps so the leading is visible rather than theoretical. | |
--line-height-normal | Baseline sets the table, and this line wraps so the leading is visible rather than theoretical. | |
--line-height-loose | Baseline sets the table, and this line wraps so the leading is visible rather than theoretical. |
Tracking
| Token | Value | Sample |
|---|---|---|
--letter-spacing-tight | Baseline sets the table | |
--letter-spacing-normal | Baseline sets the table | |
--letter-spacing-loose | Baseline sets the table | |
--letter-spacing-wide | Baseline sets the table | |
--letter-spacing-wider | Baseline sets the table |
Space
Source: profile/primitives/spacing.css.
Named edges
Two values outside the rhythm. --space-void is a deliberate absence rather than a forgotten zero; --space-hairline is one device pixel and does not scale with rem.
| Token | Value | Size |
|---|---|---|
--space-void | ||
--space-hairline |
The rhythm
Fixed rem steps, numbered by their 4px multiple.
| Token | Value | Size |
|---|---|---|
--space-1 | ||
--space-2 | ||
--space-3 | ||
--space-4 | ||
--space-5 | ||
--space-6 | ||
--space-7 | ||
--space-8 | ||
--space-12 | ||
--space-16 | ||
--space-32 |
Fluid steps
| Token | Value | Size |
|---|---|---|
--space-fluid-1 | ||
--space-fluid-2 | ||
--space-fluid-3 | ||
--space-fluid-4 | ||
--space-fluid-5 | ||
--space-fluid-6 | ||
--space-fluid-7 | ||
--space-fluid-8 | ||
--space-fluid-9 |
Fluid pairs
One-up pairs interpolate between two adjacent steps as the viewport grows. The custom pairs jump further.
| Token | Value | Size |
|---|---|---|
--space-fluid-1-2 | ||
--space-fluid-2-3 | ||
--space-fluid-3-4 | ||
--space-fluid-4-5 | ||
--space-fluid-5-6 | ||
--space-fluid-6-7 | ||
--space-fluid-7-8 | ||
--space-fluid-8-9 | ||
--space-fluid-4-6 | ||
--space-fluid-4-7 | ||
--space-fluid-4-8 |
Semantics
The roles components actually name. Each points at a primitive, so swapping a theme swaps the mapping and never the role.
Colour
Source: profile/semantic/colors.css. Thirteen roles, repeated across five families. The role says what a thing is for; the family says which register it speaks in.
Neutral
The default register. Page chrome, body text, dividers.
| Token | Swatch | Description |
|---|---|---|
--color-background |
The page itself. | |
--color-background-subtle |
A quieter background, one step off the page. | |
--color-surface |
A raised thing sitting on the page. | |
--color-surface-hover |
That surface under the pointer. | |
--color-surface-active |
That surface while pressed. | |
--color-border-subtle |
A divider you should barely notice. | |
--color-border |
A border that defines an edge. | |
--color-border-hover |
That border under the pointer. | |
--color-solid |
A filled, saturated block. Buttons and badges. | |
--color-solid-hover |
That fill under the pointer. | |
--color-on-solid |
Text and icons sitting on the solid fill. | |
--color-text-muted |
Secondary text. Captions, metadata. | |
--color-text |
Body text. |
Accent
Blue. Links, primary actions, the info alert.
| Token | Swatch | Description |
|---|---|---|
--color-accent-background |
The page itself. | |
--color-accent-background-subtle |
A quieter background, one step off the page. | |
--color-accent-surface |
A raised thing sitting on the page. | |
--color-accent-surface-hover |
That surface under the pointer. | |
--color-accent-surface-active |
That surface while pressed. | |
--color-accent-border-subtle |
A divider you should barely notice. | |
--color-accent-border |
A border that defines an edge. | |
--color-accent-border-hover |
That border under the pointer. | |
--color-accent-solid |
A filled, saturated block. Buttons and badges. | |
--color-accent-solid-hover |
That fill under the pointer. | |
--color-accent-on-solid |
Text and icons sitting on the solid fill. | |
--color-accent-text-muted |
Secondary text. Captions, metadata. | |
--color-accent-text |
Body text. |
Success
Green. Confirmations, and the success alert.
| Token | Swatch | Description |
|---|---|---|
--color-success-background |
The page itself. | |
--color-success-background-subtle |
A quieter background, one step off the page. | |
--color-success-surface |
A raised thing sitting on the page. | |
--color-success-surface-hover |
That surface under the pointer. | |
--color-success-surface-active |
That surface while pressed. | |
--color-success-border-subtle |
A divider you should barely notice. | |
--color-success-border |
A border that defines an edge. | |
--color-success-border-hover |
That border under the pointer. | |
--color-success-solid |
A filled, saturated block. Buttons and badges. | |
--color-success-solid-hover |
That fill under the pointer. | |
--color-success-on-solid |
Text and icons sitting on the solid fill. | |
--color-success-text-muted |
Secondary text. Captions, metadata. | |
--color-success-text |
Body text. |
Warning
Yellow. Sharp edges that will not stop the build.
| Token | Swatch | Description |
|---|---|---|
--color-warning-background |
The page itself. | |
--color-warning-background-subtle |
A quieter background, one step off the page. | |
--color-warning-surface |
A raised thing sitting on the page. | |
--color-warning-surface-hover |
That surface under the pointer. | |
--color-warning-surface-active |
That surface while pressed. | |
--color-warning-border-subtle |
A divider you should barely notice. | |
--color-warning-border |
A border that defines an edge. | |
--color-warning-border-hover |
That border under the pointer. | |
--color-warning-solid |
A filled, saturated block. Buttons and badges. | |
--color-warning-solid-hover |
That fill under the pointer. | |
--color-warning-on-solid |
Text and icons sitting on the solid fill. | |
--color-warning-text-muted |
Secondary text. Captions, metadata. | |
--color-warning-text |
Body text. |
Error
Red. Failures, and the danger alert.
| Token | Swatch | Description |
|---|---|---|
--color-error-background |
The page itself. | |
--color-error-background-subtle |
A quieter background, one step off the page. | |
--color-error-surface |
A raised thing sitting on the page. | |
--color-error-surface-hover |
That surface under the pointer. | |
--color-error-surface-active |
That surface while pressed. | |
--color-error-border-subtle |
A divider you should barely notice. | |
--color-error-border |
A border that defines an edge. | |
--color-error-border-hover |
That border under the pointer. | |
--color-error-solid |
A filled, saturated block. Buttons and badges. | |
--color-error-solid-hover |
That fill under the pointer. | |
--color-error-on-solid |
Text and icons sitting on the solid fill. | |
--color-error-text-muted |
Secondary text. Captions, metadata. | |
--color-error-text |
Body text. |
Type
Source: profile/semantic/typography.css.
Families
Three names so any one of them can move without the others.
| Token | Value | Sample |
|---|---|---|
--font-family-body | Baseline sets the table | |
--font-family-heading | Baseline sets the table | |
--font-family-code | Baseline sets the table |
Sizes
What the site reaches for when it wants a size. Each maps onto a fluid step.
| Token | Value | Sample |
|---|---|---|
--text-size-muted | Baseline sets the table | |
--text-size-secondary | Baseline sets the table | |
--text-size-code | Baseline sets the table | |
--text-size-body | Baseline sets the table | |
--text-size-lede | Baseline sets the table | |
--text-size-title | Baseline sets the table | |
--text-size-display | Baseline sets the table |
Line height and tracking
| Token | Value | Sample |
|---|---|---|
--text-lineheight-heading | Baseline sets the table, and this line wraps so the leading is visible rather than theoretical. | |
--text-lineheight-code | Baseline sets the table, and this line wraps so the leading is visible rather than theoretical. | |
--text-lineheight-loose | Baseline sets the table, and this line wraps so the leading is visible rather than theoretical. |
--text-lineheight-body is listed under Applied below, because document/tokens.css redefines it.
| Token | Value | Sample |
|---|---|---|
--text-letterspacing-body | Baseline sets the table | |
--text-letterspacing-heading | Baseline sets the table |
Both are wide today. Two names because they could diverge tomorrow, the way --font-family-heading can.
Measure and links
--text-inlinesize-body caps the reading measure; --text-inlinesize-heading is fit-content. Link underlines are tuned through the two --link-underline-* values.
| Token | Value | Size |
|---|---|---|
--text-inlinesize-body | ||
--link-underline-thickness | ||
--link-underline-offset |
Space
Source: profile/semantic/spacing.css. Three axes: inset is padding inside a container, gap is the space between items in a row, flow is vertical rhythm between prose.
Inset
| Token | Value | Size |
|---|---|---|
--space-inset-3xs | ||
--space-inset-2xs | ||
--space-inset-xs | ||
--space-inset-s | ||
--space-inset-m | ||
--space-inset-l | ||
--space-inset-xl | ||
--space-inset-2xl | ||
--space-inset-3xl |
Gap
| Token | Value | Size |
|---|---|---|
--space-gap-2xs | ||
--space-gap-xs | ||
--space-gap-s | ||
--space-gap-m | ||
--space-gap-l |
Flow
Defined in em rather than rem, so they scale with local text. No primitive maps to them: a one-to-one rename earns no layer.
| Token | Value | Size |
|---|---|---|
--flow-space-2xs | ||
--flow-space-xs | ||
--flow-space-s | ||
--flow-space-m | ||
--flow-space-xl |
Applied
Source: document/tokens.css. Shorthands and component defaults sitting one tier above the semantic roles.
Colour shorthands
| Token | Swatch | Description |
|---|---|---|
--bg |
Shorthand for the page background. | |
--bg-alt |
Shorthand for the subtle background. | |
--border |
Shorthand for the subtle border. | |
--border-strong |
Shorthand for the full border. | |
--color-success |
Success at solid strength. | |
--color-warning |
Warning at surface strength, which reads better than the solid. | |
--color-danger |
Error at solid-hover strength. The danger alert border. |
Type
| Token | Value | Sample |
|---|---|---|
--text-lineheight-body | Baseline sets the table, and this line wraps so the leading is visible rather than theoretical. | |
--text-lineheight-footer | Baseline sets the table, and this line wraps so the leading is visible rather than theoretical. |
Flow and wrapper
--flow-space is the live gap between siblings inside .u-flow, with --flow-space-snug for tighter blocks and --flow-space-heading above headings.
| Token | Value | Size |
|---|---|---|
--flow-space | ||
--flow-space-snug | ||
--flow-space-heading | ||
--wrapper-max-width | ||
--wrapper-padding-inline |