Tokens
Tokens are CSS custom properties shipped in tenet-ui/styles.css. Theme-agnostic tokens live on :root; themed tokens (fgColor, bgColor, borderColor) switch on [data-color-mode="light" | "dark"]. Components reference semantic tokens only — the base palette at the bottom exists to be aliased, not used.
104 tokens · 15 groups · tenet-ui@0.4.0
fontFamily
Section titled “fontFamily”Type faces. The serif display face is the editorial signature; body and mono cover everything else.
| Token | CSS variable | Value | Description |
|---|---|---|---|
fontFamily-display | 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 | var(--fontFamily-body) | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif | Humanist sans for body and controls. |
fontFamily-mono | 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 | CSS variable | Value | Description |
|---|---|---|---|
space-1 | var(--space-1) | 4px | 4px |
space-2 | var(--space-2) | 8px | 8px |
space-3 | var(--space-3) | 12px | 12px |
space-4 | var(--space-4) | 16px | 16px |
space-5 | var(--space-5) | 24px | 24px |
space-6 | var(--space-6) | 32px | 32px |
borderWidth
Section titled “borderWidth”Border widths.
| Token | CSS variable | Value | Description |
|---|---|---|---|
borderWidth-thin | var(--borderWidth-thin) | 1px | Default hairline border. |
borderWidth-thick | var(--borderWidth-thick) | 2px | Emphasized border. |
borderRadius
Section titled “borderRadius”Corner radii.
| Token | CSS variable | Value | Description |
|---|---|---|---|
borderRadius-small | var(--borderRadius-small) | 3px | Crisp — tags, options. |
borderRadius-medium | var(--borderRadius-medium) | 5px | Controls, cards. |
borderRadius-large | var(--borderRadius-large) | 9px | Surfaces, popovers. |
borderRadius-full | var(--borderRadius-full) | 9999px | — |
fontSize
Section titled “fontSize”The type scale.
| Token | CSS variable | Value | Description |
|---|---|---|---|
fontSize-0 | var(--fontSize-0) | 12px | — |
fontSize-1 | var(--fontSize-1) | 14px | — |
fontSize-2 | var(--fontSize-2) | 16px | — |
fontSize-3 | var(--fontSize-3) | 20px | — |
fontSize-4 | var(--fontSize-4) | 28px | — |
fontSize-5 | var(--fontSize-5) | 36px | Display size — page titles (Heading level 1). |
lineHeight
Section titled “lineHeight”Line heights.
| Token | CSS variable | Value | Description |
|---|---|---|---|
lineHeight-tight | var(--lineHeight-tight) | 1.2 | Headings and single-line controls. |
lineHeight-default | var(--lineHeight-default) | 1.5 | Body copy. |
fontWeight
Section titled “fontWeight”Font weights.
| Token | CSS variable | Value | Description |
|---|---|---|---|
fontWeight-normal | var(--fontWeight-normal) | 400 | — |
fontWeight-medium | var(--fontWeight-medium) | 500 | — |
fontWeight-semibold | var(--fontWeight-semibold) | 600 | — |
fontWeight-bold | var(--fontWeight-bold) | 700 | — |
letterSpacing
Section titled “letterSpacing”Letter spacing (tracking).
| Token | CSS variable | Value | Description |
|---|---|---|---|
letterSpacing-tag | var(--letterSpacing-tag) | 0.04em | Slight tracking for the uppercase tag look. |
control
Section titled “control”Control heights for small / medium / large interactive elements.
| Token | CSS variable | Value | Description |
|---|---|---|---|
control-small-size | var(--control-small-size) | 28px | Small control height. |
control-medium-size | var(--control-medium-size) | 32px | Medium control height. |
control-large-size | var(--control-large-size) | 40px | Large control height. |
shadow
Section titled “shadow”Elevation shadows.
| Token | CSS variable | Value | Description |
|---|---|---|---|
shadow-resting | var(--shadow-resting) | 0 1px 2px rgba(31, 27, 22, 0.06) | Resting elevation (warm). |
shadow-medium | var(--shadow-medium) | 0 6px 16px rgba(31, 27, 22, 0.12) | Raised elevation (cards, menus, popovers). |
shadow-focus | var(--shadow-focus) | 0 0 0 3px var(--bgColor-accent-muted) | 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 | CSS variable | Value | Description |
|---|---|---|---|
breakpoint-sm | var(--breakpoint-sm) | 640px | Small: phones landscape / narrow tablets. CSS @media cannot read var(); Grid hardcodes the same value with a comment. |
breakpoint-md | var(--breakpoint-md) | 960px | Medium: tablets / narrow laptops. |
breakpoint-lg | 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 | CSS variable | Light | Dark | AA on (light / dark) | Description |
|---|---|---|---|---|---|
fgColor-default | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | CSS variable | Light | Dark | Description |
|---|---|---|---|---|
bgColor-default | var(--bgColor-default) | #ffffff | #1a1712 | Default surface background. |
bgColor-muted | var(--bgColor-muted) | #f4eee3 | #211d17 | Muted surface background. |
bgColor-inset | var(--bgColor-inset) | #fbf7f0 | #14110d | Page / inset background (warm paper). |
bgColor-backdrop | var(--bgColor-backdrop) | rgba(20, 17, 13, 0.5) | rgba(0, 0, 0, 0.6) | Modal scrim behind dialogs. |
bgColor-emphasis | var(--bgColor-emphasis) | #2a241b | #f4eee3 | High-contrast background (ink). |
bgColor-accent-emphasis | var(--bgColor-accent-emphasis) | #c2502e | #c2502e | Solid accent background (primary action). |
bgColor-accent-muted | var(--bgColor-accent-muted) | #f5e4db | #3a2117 | Soft accent tint (tags, focus halo). |
bgColor-success-emphasis | var(--bgColor-success-emphasis) | #4f6f3a | #4f6f3a | Solid success background. |
bgColor-success-muted | var(--bgColor-success-muted) | #e7eedd | #24301a | Soft success tint. |
bgColor-danger-emphasis | var(--bgColor-danger-emphasis) | #a8341f | #a8341f | Solid danger background. |
bgColor-danger-muted | var(--bgColor-danger-muted) | #f8e3dc | #3a1e18 | Soft danger tint. |
bgColor-attention-emphasis | var(--bgColor-attention-emphasis) | #b5851f | #b5851f | Solid attention background. |
bgColor-attention-muted | var(--bgColor-attention-muted) | #f6ecd2 | #332813 | Soft attention tint. |
borderColor
Section titled “borderColor”Border colors, themed.
| Token | CSS variable | Light | Dark | Description |
|---|---|---|---|---|
borderColor-default | var(--borderColor-default) | #ddd2bf | #3d3528 | Default border color. |
borderColor-muted | var(--borderColor-muted) | #ebe3d5 | #2a241b | Muted / subtle border. |
borderColor-accent-emphasis | var(--borderColor-accent-emphasis) | #c2502e | #d9744e | Accent border color. |
borderColor-accent-muted | var(--borderColor-accent-muted) | #ecc9b8 | #5a3320 | Soft accent tag border. |
borderColor-success-muted | var(--borderColor-success-muted) | #cfe0bc | #33492a | Soft success tag border. |
borderColor-danger-muted | var(--borderColor-danger-muted) | #efc9be | #5a2c22 | Soft danger tag border. |
borderColor-attention-muted | var(--borderColor-attention-muted) | #ead9a8 | #4d3c1c | Soft attention tag border. |
Primitive palette and size values. Components never use these directly — they reference the semantic tokens above.
| Token | CSS variable | Value | Description |
|---|---|---|---|
base-color-white | var(--base-color-white) | #ffffff | — |
base-color-black | var(--base-color-black) | #14110d | — |
base-color-neutral-50 | var(--base-color-neutral-50) | #fbf7f0 | Warm paper. |
base-color-neutral-100 | var(--base-color-neutral-100) | #f4eee3 | — |
base-color-neutral-200 | var(--base-color-neutral-200) | #ebe3d5 | — |
base-color-neutral-300 | var(--base-color-neutral-300) | #ddd2bf | — |
base-color-neutral-400 | var(--base-color-neutral-400) | #c7b9a1 | — |
base-color-neutral-500 | var(--base-color-neutral-500) | #a1927a | — |
base-color-neutral-600 | var(--base-color-neutral-600) | #807156 | — |
base-color-neutral-650 | var(--base-color-neutral-650) | #6e6049 | Muted text — AA on paper/white/muted. |
base-color-neutral-700 | var(--base-color-neutral-700) | #574b39 | — |
base-color-neutral-800 | var(--base-color-neutral-800) | #3d3528 | — |
base-color-neutral-900 | var(--base-color-neutral-900) | #2a241b | Primary ink. |
base-color-neutral-950 | var(--base-color-neutral-950) | #211d17 | — |
base-color-neutral-1000 | var(--base-color-neutral-1000) | #14110d | — |
base-color-clay-300 | var(--base-color-clay-300) | #e9a487 | — |
base-color-clay-400 | var(--base-color-clay-400) | #d9744e | — |
base-color-clay-500 | var(--base-color-clay-500) | #c2502e | Primary accent (terracotta). |
base-color-clay-600 | var(--base-color-clay-600) | #a23e1f | Accent text — AA on light. |
base-color-olive-300 | var(--base-color-olive-300) | #9cb87a | — |
base-color-olive-400 | var(--base-color-olive-400) | #6e8c4f | — |
base-color-olive-500 | var(--base-color-olive-500) | #4f6f3a | Success solid. |
base-color-olive-600 | var(--base-color-olive-600) | #3c5630 | Success text — AA on light. |
base-color-brick-300 | var(--base-color-brick-300) | #e7a99b | — |
base-color-brick-400 | var(--base-color-brick-400) | #d07a66 | — |
base-color-brick-500 | var(--base-color-brick-500) | #a8341f | Danger solid. |
base-color-brick-600 | var(--base-color-brick-600) | #8a2817 | Danger text — AA on light. |
base-color-ochre-300 | var(--base-color-ochre-300) | #dcc06a | — |
base-color-ochre-400 | var(--base-color-ochre-400) | #c49a3d | — |
base-color-ochre-500 | var(--base-color-ochre-500) | #b5851f | Attention solid. |
base-color-ochre-600 | var(--base-color-ochre-600) | #80600f | Attention text — AA on light + on tint. |
base-size-4 | var(--base-size-4) | 4px | — |
base-size-8 | var(--base-size-8) | 8px | — |
base-size-12 | var(--base-size-12) | 12px | — |
base-size-16 | var(--base-size-16) | 16px | — |
base-size-24 | var(--base-size-24) | 24px | — |
base-size-28 | var(--base-size-28) | 28px | — |
base-size-32 | var(--base-size-32) | 32px | — |
base-size-40 | var(--base-size-40) | 40px | — |