Tokens
Tokens are CSS custom properties shipped in tenet-ui/styles.css. Theme-agnostic tokens live on :root; themed tokens (fgColor, bgColor, borderColor and shadow-focus) switch on [data-color-mode="light" | "dark"]. The Tier column says what each token is for: base is a raw value, semantic is a decision with a meaning, component belongs to one family of components. App code uses semantic and component tokens only. Design tokens explains the tiers, the naming and the source format.
104 tokens · 15 groups · tenet-ui@0.5.0
fontFamily
Section titled “fontFamily”Type faces. The serif display face is the editorial signature; body and mono cover everything else.
| Token | Tier | CSS variable | Value | Description |
|---|---|---|---|---|
fontFamily-display | semantic | var(--fontFamily-display) | 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Times New Roman', serif | Serif display face for headings: the editorial signature. |
fontFamily-body | semantic | var(--fontFamily-body) | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif | Humanist sans for body and controls. |
fontFamily-mono | semantic | var(--fontFamily-mono) | ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace | Monospace for counts / code. |
The spacing scale. Every gap, padding and margin in the system is one of these steps.
| Token | Tier | CSS variable | Value | Description |
|---|---|---|---|---|
space-1 | semantic | var(--space-1) | 4px | 4px |
space-2 | semantic | var(--space-2) | 8px | 8px |
space-3 | semantic | var(--space-3) | 12px | 12px |
space-4 | semantic | var(--space-4) | 16px | 16px |
space-5 | semantic | var(--space-5) | 24px | 24px |
space-6 | semantic | var(--space-6) | 32px | 32px |
borderWidth
Section titled “borderWidth”Border widths.
| Token | Tier | CSS variable | Value | Description |
|---|---|---|---|---|
borderWidth-thin | semantic | var(--borderWidth-thin) | 1px | Default hairline border. |
borderWidth-thick | semantic | var(--borderWidth-thick) | 2px | Emphasized border. |
borderRadius
Section titled “borderRadius”Corner radii.
| Token | Tier | CSS variable | Value | Description |
|---|---|---|---|---|
borderRadius-small | semantic | var(--borderRadius-small) | 3px | Crisp: tags, options. |
borderRadius-medium | semantic | var(--borderRadius-medium) | 5px | Controls, cards. |
borderRadius-large | semantic | var(--borderRadius-large) | 9px | Surfaces, popovers. |
borderRadius-full | semantic | var(--borderRadius-full) | 9999px | None |
fontSize
Section titled “fontSize”The type scale.
| Token | Tier | CSS variable | Value | Description |
|---|---|---|---|---|
fontSize-0 | semantic | var(--fontSize-0) | 12px | None |
fontSize-1 | semantic | var(--fontSize-1) | 14px | None |
fontSize-2 | semantic | var(--fontSize-2) | 16px | None |
fontSize-3 | semantic | var(--fontSize-3) | 20px | None |
fontSize-4 | semantic | var(--fontSize-4) | 28px | None |
fontSize-5 | semantic | var(--fontSize-5) | 36px | Display size: page titles (Heading level 1). |
lineHeight
Section titled “lineHeight”Line heights.
| Token | Tier | CSS variable | Value | Description |
|---|---|---|---|---|
lineHeight-tight | semantic | var(--lineHeight-tight) | 1.2 | Headings and single-line controls. |
lineHeight-default | semantic | var(--lineHeight-default) | 1.5 | Body copy. |
fontWeight
Section titled “fontWeight”Font weights.
| Token | Tier | CSS variable | Value | Description |
|---|---|---|---|---|
fontWeight-normal | semantic | var(--fontWeight-normal) | 400 | None |
fontWeight-medium | semantic | var(--fontWeight-medium) | 500 | None |
fontWeight-semibold | semantic | var(--fontWeight-semibold) | 600 | None |
fontWeight-bold | semantic | var(--fontWeight-bold) | 700 | None |
letterSpacing
Section titled “letterSpacing”Letter spacing (tracking).
| Token | Tier | CSS variable | Value | Description |
|---|---|---|---|---|
letterSpacing-tag | component | var(--letterSpacing-tag) | 0.48px | Slight tracking for the uppercase tag look: 0.04em at --fontSize-0 (12px), stored in px because DTCG 2025.10 dimensions allow only px and rem. |
control
Section titled “control”Control heights for small / medium / large interactive elements.
| Token | Tier | CSS variable | Value | Description |
|---|---|---|---|---|
control-small-size | component | var(--control-small-size) | 28px | Small control height. |
control-medium-size | component | var(--control-medium-size) | 32px | Medium control height. |
control-large-size | component | var(--control-large-size) | 40px | Large control height. |
shadow
Section titled “shadow”Elevation shadows, plus the focus halo for fields. shadow-focus is themed because its colour is bgColor-accent-muted in each theme.
| Token | Tier | CSS variable | Light | Dark | Description |
|---|---|---|---|---|---|
shadow-resting | semantic | var(--shadow-resting) | 0 1px 2px rgba(31, 27, 22, 0.06) | 0 1px 2px rgba(31, 27, 22, 0.06) | Resting elevation (warm). |
shadow-medium | semantic | var(--shadow-medium) | 0 6px 16px rgba(31, 27, 22, 0.12) | 0 6px 16px rgba(31, 27, 22, 0.12) | Raised elevation (cards, menus, popovers). |
shadow-focus | semantic | var(--shadow-focus) | 0 0 0 3px #f5e4db | 0 0 0 3px #3a2117 | Focus ring halo for fields. |
breakpoint
Section titled “breakpoint”Layout breakpoints. @media cannot read var(), so components hardcode the same values with a comment.
| Token | Tier | CSS variable | Value | Description |
|---|---|---|---|---|
breakpoint-sm | semantic | var(--breakpoint-sm) | 640px | Small: phones landscape / narrow tablets. CSS @media cannot read var(); Grid hardcodes the same value with a comment. |
breakpoint-md | semantic | var(--breakpoint-md) | 960px | Medium: tablets / narrow laptops. |
breakpoint-lg | semantic | var(--breakpoint-lg) | 1280px | Large: desktop. |
fgColor
Section titled “fgColor”Foreground (text and icon) colors, themed. The AA column lists the bgColor tokens each is rated on.
| Token | Tier | CSS variable | Light | Dark | AA on (light / dark) | Description |
|---|---|---|---|---|---|---|
fgColor-default | semantic | var(--fgColor-default) | #2a241b | #f4eee3 | light: bgColor-defaultbgColor-mutedbgColor-insetbgColor-accent-mutedbgColor-success-mutedbgColor-danger-mutedbgColor-attention-emphasisbgColor-attention-muted (large text only: bgColor-accent-emphasis)dark: bgColor-defaultbgColor-mutedbgColor-insetbgColor-accent-mutedbgColor-success-emphasisbgColor-success-mutedbgColor-danger-emphasisbgColor-danger-mutedbgColor-attention-muted (large text only: bgColor-accent-emphasis) | Primary text color. |
fgColor-muted | semantic | var(--fgColor-muted) | #6e6049 | #a1927a | light: bgColor-defaultbgColor-mutedbgColor-insetbgColor-accent-mutedbgColor-success-mutedbgColor-danger-mutedbgColor-attention-muteddark: bgColor-defaultbgColor-mutedbgColor-insetbgColor-accent-mutedbgColor-success-mutedbgColor-danger-mutedbgColor-attention-muted | Secondary text (AA on paper / muted). |
fgColor-onEmphasis | semantic | var(--fgColor-onEmphasis) | #ffffff | #ffffff | light: bgColor-emphasisbgColor-accent-emphasisbgColor-success-emphasisbgColor-danger-emphasis (large text only: bgColor-attention-emphasis)dark: bgColor-defaultbgColor-mutedbgColor-insetbgColor-accent-emphasisbgColor-accent-mutedbgColor-success-emphasisbgColor-success-mutedbgColor-danger-emphasisbgColor-danger-mutedbgColor-attention-muted (large text only: bgColor-attention-emphasis) | Text on a solid emphasis background. |
fgColor-accent | semantic | var(--fgColor-accent) | #a23e1f | #e9a487 | light: bgColor-defaultbgColor-mutedbgColor-insetbgColor-accent-mutedbgColor-success-mutedbgColor-danger-mutedbgColor-attention-muteddark: bgColor-defaultbgColor-mutedbgColor-insetbgColor-accent-mutedbgColor-success-mutedbgColor-danger-mutedbgColor-attention-muted (large text only: bgColor-danger-emphasis) | Accent / link text color. |
fgColor-danger | semantic | var(--fgColor-danger) | #8a2817 | #e7a99b | light: bgColor-defaultbgColor-mutedbgColor-insetbgColor-accent-mutedbgColor-success-mutedbgColor-danger-mutedbgColor-attention-muteddark: bgColor-defaultbgColor-mutedbgColor-insetbgColor-accent-mutedbgColor-success-mutedbgColor-danger-mutedbgColor-attention-muted (large text only: bgColor-danger-emphasis) | Danger text color. |
fgColor-success | semantic | var(--fgColor-success) | #3c5630 | #9cb87a | light: bgColor-defaultbgColor-mutedbgColor-insetbgColor-accent-mutedbgColor-success-mutedbgColor-danger-mutedbgColor-attention-muteddark: bgColor-defaultbgColor-mutedbgColor-insetbgColor-accent-mutedbgColor-success-mutedbgColor-danger-mutedbgColor-attention-muted (large text only: bgColor-danger-emphasis) | Success text color. |
fgColor-attention | semantic | var(--fgColor-attention) | #80600f | #dcc06a | light: bgColor-defaultbgColor-mutedbgColor-insetbgColor-accent-mutedbgColor-success-mutedbgColor-danger-mutedbgColor-attention-muteddark: bgColor-defaultbgColor-mutedbgColor-insetbgColor-accent-mutedbgColor-success-mutedbgColor-danger-mutedbgColor-attention-muted (large text only: bgColor-success-emphasisbgColor-danger-emphasis) | Attention / warning text color. |
fgColor-onAttention | semantic | var(--fgColor-onAttention) | #2a241b | #2a241b | light: bgColor-defaultbgColor-mutedbgColor-insetbgColor-accent-mutedbgColor-success-mutedbgColor-danger-mutedbgColor-attention-emphasisbgColor-attention-muted (large text only: bgColor-accent-emphasis)dark: bgColor-emphasisbgColor-attention-emphasis (large text only: bgColor-accent-emphasis) | Dark text on a solid attention (ochre) background: same ink in both themes. |
bgColor
Section titled “bgColor”Background colors, themed.
| Token | Tier | CSS variable | Light | Dark | Description |
|---|---|---|---|---|---|
bgColor-default | semantic | var(--bgColor-default) | #ffffff | #1a1712 | Default surface background. |
bgColor-muted | semantic | var(--bgColor-muted) | #f4eee3 | #211d17 | Muted surface background. |
bgColor-inset | semantic | var(--bgColor-inset) | #fbf7f0 | #14110d | Page / inset background (warm paper). |
bgColor-backdrop | semantic | var(--bgColor-backdrop) | rgba(20, 17, 13, 0.5) | rgba(0, 0, 0, 0.6) | Modal scrim behind dialogs. |
bgColor-emphasis | semantic | var(--bgColor-emphasis) | #2a241b | #f4eee3 | High-contrast background (ink). |
bgColor-accent-emphasis | semantic | var(--bgColor-accent-emphasis) | #c2502e | #c2502e | Solid accent background (primary action). |
bgColor-accent-muted | semantic | var(--bgColor-accent-muted) | #f5e4db | #3a2117 | Soft accent tint (tags, focus halo). |
bgColor-success-emphasis | semantic | var(--bgColor-success-emphasis) | #4f6f3a | #4f6f3a | Solid success background. |
bgColor-success-muted | semantic | var(--bgColor-success-muted) | #e7eedd | #24301a | Soft success tint. |
bgColor-danger-emphasis | semantic | var(--bgColor-danger-emphasis) | #a8341f | #a8341f | Solid danger background. |
bgColor-danger-muted | semantic | var(--bgColor-danger-muted) | #f8e3dc | #3a1e18 | Soft danger tint. |
bgColor-attention-emphasis | semantic | var(--bgColor-attention-emphasis) | #b5851f | #b5851f | Solid attention background. |
bgColor-attention-muted | semantic | var(--bgColor-attention-muted) | #f6ecd2 | #332813 | Soft attention tint. |
borderColor
Section titled “borderColor”Border colors, themed.
| Token | Tier | CSS variable | Light | Dark | Description |
|---|---|---|---|---|---|
borderColor-default | semantic | var(--borderColor-default) | #ddd2bf | #3d3528 | Default border color. |
borderColor-muted | semantic | var(--borderColor-muted) | #ebe3d5 | #2a241b | Muted / subtle border. |
borderColor-accent-emphasis | semantic | var(--borderColor-accent-emphasis) | #c2502e | #d9744e | Accent border color. |
borderColor-accent-muted | semantic | var(--borderColor-accent-muted) | #ecc9b8 | #5a3320 | Soft accent tag border. |
borderColor-success-muted | semantic | var(--borderColor-success-muted) | #cfe0bc | #33492a | Soft success tag border. |
borderColor-danger-muted | semantic | var(--borderColor-danger-muted) | #efc9be | #5a2c22 | Soft danger tag border. |
borderColor-attention-muted | semantic | var(--borderColor-attention-muted) | #ead9a8 | #4d3c1c | Soft attention tag border. |
Tier 1: the raw palette and size values. App code never uses them; semantic tokens alias them. Components are the exception, for sizes only: 22 component stylesheets use --base-size-* for fixed widths and heights, and the switch thumb uses --base-color-white.
| Token | Tier | CSS variable | Value | Description |
|---|---|---|---|---|
base-color-white | base | var(--base-color-white) | #ffffff | None |
base-color-black | base | var(--base-color-black) | #14110d | None |
base-color-neutral-50 | base | var(--base-color-neutral-50) | #fbf7f0 | Warm paper. |
base-color-neutral-100 | base | var(--base-color-neutral-100) | #f4eee3 | None |
base-color-neutral-200 | base | var(--base-color-neutral-200) | #ebe3d5 | None |
base-color-neutral-300 | base | var(--base-color-neutral-300) | #ddd2bf | None |
base-color-neutral-400 | base | var(--base-color-neutral-400) | #c7b9a1 | None |
base-color-neutral-500 | base | var(--base-color-neutral-500) | #a1927a | None |
base-color-neutral-600 | base | var(--base-color-neutral-600) | #807156 | None |
base-color-neutral-650 | base | var(--base-color-neutral-650) | #6e6049 | Muted text: AA on paper/white/muted. |
base-color-neutral-700 | base | var(--base-color-neutral-700) | #574b39 | None |
base-color-neutral-800 | base | var(--base-color-neutral-800) | #3d3528 | None |
base-color-neutral-900 | base | var(--base-color-neutral-900) | #2a241b | Primary ink. |
base-color-neutral-950 | base | var(--base-color-neutral-950) | #211d17 | None |
base-color-neutral-1000 | base | var(--base-color-neutral-1000) | #14110d | None |
base-color-clay-300 | base | var(--base-color-clay-300) | #e9a487 | None |
base-color-clay-400 | base | var(--base-color-clay-400) | #d9744e | None |
base-color-clay-500 | base | var(--base-color-clay-500) | #c2502e | Primary accent (terracotta). |
base-color-clay-600 | base | var(--base-color-clay-600) | #a23e1f | Accent text: AA on light. |
base-color-olive-300 | base | var(--base-color-olive-300) | #9cb87a | None |
base-color-olive-400 | base | var(--base-color-olive-400) | #6e8c4f | None |
base-color-olive-500 | base | var(--base-color-olive-500) | #4f6f3a | Success solid. |
base-color-olive-600 | base | var(--base-color-olive-600) | #3c5630 | Success text: AA on light. |
base-color-brick-300 | base | var(--base-color-brick-300) | #e7a99b | None |
base-color-brick-400 | base | var(--base-color-brick-400) | #d07a66 | None |
base-color-brick-500 | base | var(--base-color-brick-500) | #a8341f | Danger solid. |
base-color-brick-600 | base | var(--base-color-brick-600) | #8a2817 | Danger text: AA on light. |
base-color-ochre-300 | base | var(--base-color-ochre-300) | #dcc06a | None |
base-color-ochre-400 | base | var(--base-color-ochre-400) | #c49a3d | None |
base-color-ochre-500 | base | var(--base-color-ochre-500) | #b5851f | Attention solid. |
base-color-ochre-600 | base | var(--base-color-ochre-600) | #80600f | Attention text: AA on light + on tint. |
base-size-4 | base | var(--base-size-4) | 4px | None |
base-size-8 | base | var(--base-size-8) | 8px | None |
base-size-12 | base | var(--base-size-12) | 12px | None |
base-size-16 | base | var(--base-size-16) | 16px | None |
base-size-24 | base | var(--base-size-24) | 24px | None |
base-size-28 | base | var(--base-size-28) | 28px | None |
base-size-32 | base | var(--base-size-32) | 32px | None |
base-size-40 | base | var(--base-size-40) | 40px | None |