This page has no content!

Open the page in Sanity Studio to add content.

foundations

Typography Tokens

Designed as a scalable typography foundation, this system applies fluid clamp() scale above 40rem to Display, Headline, and Title, while keeping Body, Detail, Label, and Code fixed for stable reading sizes. The foundation is supported by default font-axis settings, primitive size tokens, and W3C DTCG-compliant token files.

00Variable font axis defaults

Shared axis values applied via font-variation-settings. font-optical-sizing: none required for manual opsz control.

wdth100Normal width
slnt0Upright (no slant)
opsz (display)30Display scale
opsz (headline)28Headline scale
opsz (title)22Title scale
04Typography

Fluid clamp() scale above 40rem · static base below · Display/Headline/Title: --font-display · Body/Detail/Label: --font-sans · Code: --font-mono

Role
Specimen
Utility
Leading
Tracking
Display--font-display · fluid
Display 2XL
type: GT Standard Variable
base: 4.5rem / 72px
min: 5.5625rem / 89px
max: 7rem / 112px
fluid: clamp(5.5625rem, calc(4.7169rem + 2.114vw), 7rem)
Opsz
30
Leading
0.92
Tracking
-0.02em
Weight
450
Display XL
type: GT Standard Variable
base: 3.5625rem / 56px
min: 4.5rem / 72px
max: 5.5625rem / 89px
fluid: clamp(4.5rem, calc(3.875rem + 1.5625vw), 5.5625rem)
Opsz
30
Leading
0.95
Tracking
-0.02em
Weight
450
Display LG
type: GT Standard Variable
base: 2.875rem / 46px
min: 3.5625rem / 57px
max: 4.5rem / 72px
fluid: clamp(3.5625rem, calc(3.011rem + 1.3787vw), 4.5rem)
Opsz
30
Leading
0.98
Tracking
-0.02em
Weight
450
Display MD
type: GT Standard Variable
base: 2.3125rem / 37px
min: 2.875rem / 46px
max: 3.5625rem / 57px
fluid: clamp(2.875rem, calc(2.4706rem + 1.011vw), 3.5625rem)
Opsz
30
Leading
1
Tracking
-0.02em
Weight
450
Display SM
type: GT Standard Variable
base: 1.875rem / 30px
min: 2.3125rem / 37px
max: 2.875rem / 46px
fluid: clamp(2.3125rem, calc(1.9816rem + 0.8272vw), 2.875rem)
Opsz
30
Leading
1.02
Tracking
-0.02em
Weight
450
Headline--font-display · fluid
Headline 2XL
type: GT Standard Variable
base: 2.8125rem / 45px
min: 3.375rem / 54px
max: 4.0625rem / 65px
fluid: clamp(3.375rem, calc(2.9706rem + 1.011vw), 4.0625rem)
Opsz
28
Leading
1.02
Tracking
-0.035em
Weight
400
Headline XL
type: GT Standard Variable
base: 2.3125rem / 37px
min: 2.8125rem / 45px
max: 3.375rem / 54px
fluid: clamp(2.8125rem, calc(2.4816rem + 0.8272vw), 3.375rem)
Opsz
28
Leading
1.05
Tracking
-0.03em
Weight
400
Headline LG
type: GT Standard Variable
base: 1.9375rem / 31px
min: 2.3125rem / 37px
max: 2.8125rem / 45px
fluid: clamp(2.3125rem, calc(2.0184rem + 0.7353vw), 2.8125rem)
Opsz
28
Leading
1.08
Tracking
-0.03em
Weight
400
Headline MD
type: GT Standard Variable
base: 1.625rem / 26px
min: 1.9375rem / 31px
max: 2.3125rem / 37px
fluid: clamp(1.9375rem, calc(1.7169rem + 0.5515vw), 2.3125rem)
Opsz
28
Leading
1.12
Tracking
-0.025em
Weight
400
Headline SM
type: GT Standard Variable
base: 1.375rem / 22px
min: 1.625rem / 26px
max: 1.9375rem / 31px
fluid: clamp(1.625rem, calc(1.4412rem + 0.4596vw), 1.9375rem)
Opsz
28
Leading
1.15
Tracking
-0.02em
Weight
400
Title--font-display · fluid
Title LG
type: GT Standard Variable
base: 1.5rem / 24px
min: 1.6875rem / 27px
max: 1.875rem / 30px
fluid: clamp(1.6875rem, calc(1.5772rem + 0.2757vw), 1.875rem)
Opsz
22
Leading
1.12
Tracking
-0.015em
Weight
400
Title MD
type: GT Standard Variable
base: 1.3125rem / 21px
min: 1.5rem / 24px
max: 1.6875rem / 27px
fluid: clamp(1.5rem, calc(1.3897rem + 0.2757vw), 1.6875rem)
Opsz
22
Leading
1.16
Tracking
-0.01em
Weight
400
Title SM
type: GT Standard Variable
base: 1.1875rem / 19px
min: 1.3125rem / 21px
max: 1.5rem / 24px
fluid: clamp(1.3125rem, calc(1.2022rem + 0.2757vw), 1.5rem)
Opsz
22
Leading
1.2
Tracking
-0.01em
Weight
400
Statement--font-sans · fixed
Statement MD
type: Inter Variable
base: 1.5rem / 24px
min: /
max: /
Opsz
Leading
1.24
Tracking
-0.01em
Weight
425

note: wght 425 via font-variation-settings

Body--font-sans · fixed
Body MD
type: Inter Variable
base: 1.125rem / 18px
min: /
max: /
Opsz
Leading
1.5
Tracking
-0.01em
Weight
400
Body SM
type: Inter Variable
base: 1rem / 16px
min: /
max: /
Opsz
Leading
1.5
Tracking
0
Weight
400
Detail--font-sans · fixed
Detail MD
type: Inter Variable
base: 0.8125rem / 13px
min: /
max: /
Opsz
Leading
1.5
Tracking
0
Weight
400
Detail SM
type: Inter Variable
base: 0.75rem / 12px
min: /
max: /
Opsz
Leading
1.5
Tracking
0
Weight
400
Label--font-sans · fixed
Label MD
type: IBM Plex Mono
base: 0.8125rem / 13px
min: /
max: /
Opsz
Leading
1.3
Tracking
0
Weight
400
Label SM
type: IBM Plex Mono
base: 0.625rem / 10px
min: /
max: /
Opsz
Leading
1.3
Tracking
0
Weight
400
Caption--font-sans · fixed
Caption
type: IBM Plex Mono
base: 0.625rem / 10px
min: /
max: /
Opsz
Leading
1.3
Tracking
0
Weight
400

note: alias of label-sm

Overline--font-sans · fixed
Overline
type: IBM Plex Mono
base: 0.625rem / 10px
min: /
max: /
Opsz
Leading
1.3
Tracking
0
Weight
400

note: uppercase · +0.06em optical tracking at CSS layer

Code--font-mono · fixed
Code SM
type: IBM Plex Mono
base: 0.8125rem / 13px
min: /
max: /
Opsz
Leading
1.5
Tracking
0
Weight
400
Code MD
type: IBM Plex Mono
base: 0.9375rem / 15px
min: /
max: /
Opsz
Leading
1.5
Tracking
0
Weight
400

Primitive font sizes (--text-*) — fixed, non-fluid

--text-xs12pxThe quick brown fox0.75rem
--text-sm13pxThe quick brown fox0.8125rem
--text-md16pxThe quick brown fox1rem
--text-lg18pxThe quick brown fox1.125rem
--text-xl20pxThe quick brown fox1.25rem
--text-2xl24pxThe quick brown fox1.5rem
--text-3xl30pxThe quick brown fox1.875rem
--text-4xl36pxThe quick brown fox2.25rem
05W3C DTCG typography token files
primitives/typography.jsonFont families, weights, primitive sizes
W3C DTCG
{
  "$metadata": {
    "tokenSetOrder": [
      "primitives/typography"
    ]
  },
  "typography": {
    "font-family": {
      "sans": {
        "$type": "fontFamily",
        "$value": [
          "Inter",
          "system-ui",
          "sans-serif"
        ],
        "$description": "var(--font-sans) — injected by next/font"
      },
      "display": {
        "$type": "fontFamily",
        "$value": [
          "Inter",
          "system-ui",
          "sans-serif"
        ],
        "$description": "var(--font-display) — same family, distinct opsz/wdth axis settings"
      },
      "mono": {
        "$type": "fontFamily",
        "$value": [
          "IBM Plex Mono",
          "monospace"
        ],
        "$description": "var(--font-mono) — injected by next/font"
      }
    },
    "font-weight": {
      "regular": {
        "$type": "fontWeight",
        "$value": 400
      },
      "book": {
        "$type": "fontWeight",
        "$value": 425,
        "$description": "Intermediate weight — requires font-variation-settings"
      },
      "medium": {
        "$type": "fontWeight",
        "$value": 500
      },
      "bold": {
        "$type": "fontWeight",
        "$value": 700
      }
    },
    "font-size": {
      "xs": {
        "$type": "fontSize",
        "$value": "0.75rem",
        "$description": "12px"
      },
      "sm": {
        "$type": "fontSize",
        "$value": "0.8125rem",
        "$description": "13px"
      },
      "md": {
        "$type": "fontSize",
        "$value": "1rem",
        "$description": "16px"
      },
      "lg": {
        "$type": "fontSize",
        "$value": "1.125rem",
        "$description": "18px"
      },
      "xl": {
        "$type": "fontSize",
        "$value": "1.25rem",
        "$description": "20px"
      },
      "2xl": {
        "$type": "fontSize",
        "$value": "1.5rem",
        "$description": "24px"
      },
      "3xl": {
        "$type": "fontSize",
        "$value": "1.875rem",
        "$description": "30px"
      },
      "4xl": {
        "$type": "fontSize",
        "$value": "2.25rem",
        "$description": "36px"
      }
    }
  }
}
semantic/typography.jsonFluid + fixed scale · Display → Code · font axis defaults
W3C DTCG
{
  "$metadata": {
    "tokenSetOrder": [
      "tokens/typography"
    ]
  },
  "$description": "Fluid + fixed type scale. Fluid categories (Display, Headline, Title) use base/min/fluid/max sub-tokens for CSS clamp(); fluid sizing activates above 40rem. Fixed categories use a single font-size.",
  "type": {
    "font": {
      "$description": "Global variable font axis defaults.",
      "axis": {
        "wdth": {
          "$type": "number",
          "$value": 100,
          "$description": "Normal width"
        },
        "slnt": {
          "$type": "number",
          "$value": 0,
          "$description": "Upright"
        },
        "opsz": {
          "display": {
            "$type": "number",
            "$value": 30
          },
          "headline": {
            "$type": "number",
            "$value": 28
          },
          "title": {
            "$type": "number",
            "$value": 22
          }
        }
      }
    },
    "display": {
      "$description": "Fluid. --font-display. text-box: trim-both cap alphabetic.",
      "2xl": {
        "$type": "typography",
        "$value": {
          "fontSize": {
            "base": "4.5rem",
            "min": "5.5625rem",
            "fluid": "calc(4.7169rem + 2.114vw)",
            "max": "7rem"
          },
          "lineHeight": 0.92,
          "letterSpacing": "-0.04em",
          "fontWeight": 400,
          "textBox": "trim-both cap alphabetic",
          "opsz": "{type.font.axis.opsz.display}"
        }
      },
      "xl": {
        "$type": "typography",
        "$value": {
          "fontSize": {
            "base": "3.5625rem",
            "min": "4.5rem",
            "fluid": "calc(3.875rem + 1.5625vw)",
            "max": "5.5625rem"
          },
          "lineHeight": 0.95,
          "letterSpacing": "-0.04em",
          "fontWeight": 400,
          "textBox": "trim-both cap alphabetic",
          "opsz": "{type.font.axis.opsz.display}"
        }
      },
      "lg": {
        "$type": "typography",
        "$value": {
          "fontSize": {
            "base": "2.875rem",
            "min": "3.5625rem",
            "fluid": "calc(3.011rem + 1.3787vw)",
            "max": "4.5rem"
          },
          "lineHeight": 0.98,
          "letterSpacing": "-0.04em",
          "fontWeight": 400,
          "textBox": "trim-both cap alphabetic",
          "opsz": "{type.font.axis.opsz.display}"
        }
      },
      "md": {
        "$type": "typography",
        "$value": {
          "fontSize": {
            "base": "2.3125rem",
            "min": "2.875rem",
            "fluid": "calc(2.4706rem + 1.011vw)",
            "max": "3.5625rem"
          },
          "lineHeight": 1,
          "letterSpacing": "-0.04em",
          "fontWeight": 400,
          "textBox": "trim-both cap alphabetic",
          "opsz": "{type.font.axis.opsz.display}"
        }
      },
      "sm": {
        "$type": "typography",
        "$value": {
          "fontSize": {
            "base": "1.875rem",
            "min": "2.3125rem",
            "fluid": "calc(1.9816rem + 0.8272vw)",
            "max": "2.875rem"
          },
          "lineHeight": 1.02,
          "letterSpacing": "-0.04em",
          "fontWeight": 400,
          "textBox": "trim-both cap alphabetic",
          "opsz": "{type.font.axis.opsz.display}"
        }
      }
    },
    "headline": {
      "$description": "Fluid. --font-display. text-box: trim-both cap alphabetic.",
      "2xl": {
        "$type": "typography",
        "$value": {
          "fontSize": {
            "base": "2.8125rem",
            "min": "3.375rem",
            "fluid": "calc(2.9706rem + 1.011vw)",
            "max": "4.0625rem"
          },
          "lineHeight": 1.02,
          "letterSpacing": "-0.035em",
          "fontWeight": 400,
          "textBox": "trim-both cap alphabetic",
          "opsz": "{type.font.axis.opsz.headline}"
        }
      },
      "xl": {
        "$type": "typography",
        "$value": {
          "fontSize": {
            "base": "2.3125rem",
            "min": "2.8125rem",
            "fluid": "calc(2.4816rem + 0.8272vw)",
            "max": "3.375rem"
          },
          "lineHeight": 1.05,
          "letterSpacing": "-0.03em",
          "fontWeight": 400,
          "textBox": "trim-both cap alphabetic",
          "opsz": "{type.font.axis.opsz.headline}"
        }
      },
      "lg": {
        "$type": "typography",
        "$value": {
          "fontSize": {
            "base": "1.9375rem",
            "min": "2.3125rem",
            "fluid": "calc(2.0184rem + 0.7353vw)",
            "max": "2.8125rem"
          },
          "lineHeight": 1.08,
          "letterSpacing": "-0.03em",
          "fontWeight": 400,
          "textBox": "trim-both cap alphabetic",
          "opsz": "{type.font.axis.opsz.headline}"
        }
      },
      "md": {
        "$type": "typography",
        "$value": {
          "fontSize": {
            "base": "1.625rem",
            "min": "1.9375rem",
            "fluid": "calc(1.7169rem + 0.5515vw)",
            "max": "2.3125rem"
          },
          "lineHeight": 1.12,
          "letterSpacing": "-0.025em",
          "fontWeight": 400,
          "textBox": "trim-both cap alphabetic",
          "opsz": "{type.font.axis.opsz.headline}"
        }
      },
      "sm": {
        "$type": "typography",
        "$value": {
          "fontSize": {
            "base": "1.375rem",
            "min": "1.625rem",
            "fluid": "calc(1.4412rem + 0.4596vw)",
            "max": "1.9375rem"
          },
          "lineHeight": 1.15,
          "letterSpacing": "-0.02em",
          "fontWeight": 400,
          "textBox": "trim-both cap alphabetic",
          "opsz": "{type.font.axis.opsz.headline}"
        }
      }
    },
    "title": {
      "$description": "Fluid. --font-display. text-box: trim-both cap alphabetic.",
      "lg": {
        "$type": "typography",
        "$value": {
          "fontSize": {
            "base": "1.5rem",
            "min": "1.6875rem",
            "fluid": "calc(1.5772rem + 0.2757vw)",
            "max": "1.875rem"
          },
          "lineHeight": 1.12,
          "letterSpacing": "-0.015em",
          "fontWeight": 400,
          "textBox": "trim-both cap alphabetic",
          "opsz": "{type.font.axis.opsz.title}"
        }
      },
      "md": {
        "$type": "typography",
        "$value": {
          "fontSize": {
            "base": "1.3125rem",
            "min": "1.5rem",
            "fluid": "calc(1.3897rem + 0.2757vw)",
            "max": "1.6875rem"
          },
          "lineHeight": 1.16,
          "letterSpacing": "-0.01em",
          "fontWeight": 400,
          "textBox": "trim-both cap alphabetic",
          "opsz": "{type.font.axis.opsz.title}"
        }
      },
      "sm": {
        "$type": "typography",
        "$value": {
          "fontSize": {
            "base": "1.1875rem",
            "min": "1.3125rem",
            "fluid": "calc(1.2022rem + 0.2757vw)",
            "max": "1.5rem"
          },
          "lineHeight": 1.2,
          "letterSpacing": "-0.01em",
          "fontWeight": 400,
          "textBox": "trim-both cap alphabetic",
          "opsz": "{type.font.axis.opsz.title}"
        }
      }
    },
    "statement": {
      "$description": "Fixed. --font-sans. text-box: trim-both cap alphabetic.",
      "md": {
        "$type": "typography",
        "$value": {
          "fontSize": "1.5rem",
          "lineHeight": 1.24,
          "letterSpacing": "-0.01em",
          "fontWeight": "425 — intermediate, requires font-variation-settings",
          "textBox": "trim-both cap alphabetic"
        }
      }
    },
    "body": {
      "$description": "Fixed. --font-sans. text-box: normal.",
      "md": {
        "$type": "typography",
        "$value": {
          "fontSize": "1.125rem",
          "lineHeight": 1.5,
          "letterSpacing": "-0.01em",
          "fontWeight": 400,
          "textBox": "normal"
        }
      },
      "sm": {
        "$type": "typography",
        "$value": {
          "fontSize": "1rem",
          "lineHeight": 1.5,
          "letterSpacing": "0",
          "fontWeight": 400,
          "textBox": "normal"
        }
      }
    },
    "detail": {
      "$description": "Fixed. --font-sans. text-box: trim-both ex alphabetic.",
      "md": {
        "$type": "typography",
        "$value": {
          "fontSize": "0.8125rem",
          "lineHeight": 1.5,
          "letterSpacing": "0",
          "fontWeight": 400,
          "textBox": "trim-both ex alphabetic"
        }
      },
      "sm": {
        "$type": "typography",
        "$value": {
          "fontSize": "0.75rem",
          "lineHeight": 1.5,
          "letterSpacing": "0",
          "fontWeight": 400,
          "textBox": "trim-both ex alphabetic"
        }
      }
    },
    "label": {
      "$description": "Fixed. --font-sans. text-box: trim-both ex alphabetic.",
      "md": {
        "$type": "typography",
        "$value": {
          "fontSize": "0.8125rem",
          "lineHeight": 1.3,
          "letterSpacing": "0",
          "fontWeight": 400,
          "textBox": "trim-both ex alphabetic"
        }
      },
      "sm": {
        "$type": "typography",
        "$value": {
          "fontSize": "0.625rem",
          "lineHeight": 1.3,
          "letterSpacing": "0",
          "fontWeight": 400,
          "textBox": "trim-both ex alphabetic"
        }
      }
    },
    "caption": {
      "$type": "typography",
      "$description": "Alias of label-sm. --font-sans. text-box: trim-both ex alphabetic.",
      "$value": {
        "fontSize": "{type.label.sm.font-size}",
        "lineHeight": "{type.label.sm.line-height}",
        "letterSpacing": "{type.label.sm.letter-spacing}",
        "fontWeight": "{type.label.sm.font-weight}",
        "textBox": "trim-both ex alphabetic"
      }
    },
    "overline": {
      "$type": "typography",
      "$description": "Alias of label-sm, uppercase. --font-sans. text-box: trim-both cap alphabetic. +0.06em optical tracking at CSS layer.",
      "$value": {
        "fontSize": "{type.label.sm.font-size}",
        "lineHeight": "{type.label.sm.line-height}",
        "letterSpacing": "0",
        "letterSpacingOpticalCorrection": "0.06em",
        "fontWeight": "{type.label.sm.font-weight}",
        "textBox": "trim-both cap alphabetic",
        "textTransform": "uppercase"
      }
    },
    "code": {
      "$description": "Fixed. --font-mono. text-box: normal.",
      "sm": {
        "$type": "typography",
        "$value": {
          "fontSize": "0.8125rem",
          "lineHeight": 1.5,
          "letterSpacing": "0",
          "fontWeight": 400,
          "textBox": "normal"
        }
      },
      "md": {
        "$type": "typography",
        "$value": {
          "fontSize": "0.9375rem",
          "lineHeight": 1.5,
          "letterSpacing": "0",
          "fontWeight": 400,
          "textBox": "normal"
        }
      }
    }
  }
}
token-showcase / color

Color Tokens

Every color variable and semantic alias in the system. Resolution chain shows how each semantic token resolves in both themes.

00Token architecture
Tier 1

OKLCH primitives

oklch(L C H)
oklch(0.6927 0.2519 38.64)oklch(98.5% 0 0)oklch(55.2% 0.016 285.938)
→
Tier 2

Primitive scale tokens

--color-{scale}-{step}
--color-brand-500--color-zinc-900--color-cyan-400
→
Tier 3

Semantic aliases

--color-{role}-{variant}
--color-surface-default--color-text-brand--color-border-focus
→
Tier 4

Tailwind utilities

bg-* / text-* / border-*
bg-surface-defaulttext-text-brandborder-border-focus

Each primitive token and which semantic tokens reference it in ☀ light and ◑ dark mode.

white

--color-white
surface-defaultsurface-raisedsurface-overlaytext-on-brandicon-on-brand
text-on-brandicon-on-brand

zinc

--color-zinc-50
surface-subtletext-on-inverse
text-default
--color-zinc-100
surface-mutedborder-muted
surface-inverse
--color-zinc-200
border-default
—
--color-zinc-300
border-strong
—
--color-zinc-400
text-subtleicon-muted
text-mutedicon-default
--color-zinc-500
text-muted
text-subtleicon-muted
--color-zinc-600
icon-default
border-strong
--color-zinc-700
—
border-default
--color-zinc-800
—
surface-mutedsurface-overlayborder-muted
--color-zinc-900
surface-inversetext-default
surface-subtlesurface-raisedtext-on-inverse
--color-zinc-950
—
surface-default

brand

--color-brand-50
surface-brand-subtle
—
--color-brand-300
—
text-link-hover
--color-brand-400
—
text-brandtext-linkborder-focusicon-brand
--color-brand-500
surface-brandtext-linkborder-brandborder-focusicon-brand
surface-brandborder-brand
--color-brand-600
text-brand
—
--color-brand-700
text-link-hover
—
--color-brand-950
—
surface-brand-subtle

info

--color-info-400
—
text-info
--color-info-500
text-info
—

success

--color-success-400
—
text-success
--color-success-500
text-success
—

warning

--color-warning-400
—
text-warning
--color-warning-500
text-warning
—

danger

--color-danger-400
—
text-dangerborder-danger
--color-danger-500
text-dangerborder-danger
—
01Semantic tokens — light & dark

☀ Light

data-theme="light"

Surfaces

surface-default

--color-surface-default

surface-subtle

--color-surface-subtle

surface-muted

--color-surface-muted

surface-raised

--color-surface-raised

surface-overlay

--color-surface-overlay

surface-brand

--color-surface-brand

surface-brand-subtle

--color-surface-brand-subtle

surface-inverse

--color-surface-inverse

Text

--color-text-defaulttext-defaultAa — The quick brown fox
--color-text-mutedtext-mutedAa — The quick brown fox
--color-text-subtletext-subtleAa — The quick brown fox
--color-text-brandtext-brandAa — The quick brown fox
--color-text-on-brandtext-on-brandAa — The quick brown fox
--color-text-on-inversetext-on-inverseAa — The quick brown fox
--color-text-linktext-linkAa — The quick brown fox
--color-text-link-hovertext-link-hoverAa — The quick brown fox
--color-text-headingtext-headingAa — The quick brown fox
--color-text-infotext-infoAa — The quick brown fox
--color-text-successtext-successAa — The quick brown fox
--color-text-warningtext-warningAa — The quick brown fox
--color-text-dangertext-dangerAa — The quick brown fox

Borders

--color-border-defaultborder-default
--color-border-mutedborder-muted
--color-border-strongborder-strong
--color-border-brandborder-brand
--color-border-focusborder-focus
--color-border-dangerborder-danger

Icons

icon-default

--color-icon-default

icon-muted

--color-icon-muted

icon-brand

--color-icon-brand

icon-on-brand

--color-icon-on-brand

Media frame

media-surface

--color-media-surface

media-border

--color-media-border

media-surface-inverse

--color-media-surface-inverse

media-border-inverse

--color-media-border-inverse

◑ Dark

data-theme="dark"

Surfaces

surface-default

--color-surface-default

surface-subtle

--color-surface-subtle

surface-muted

--color-surface-muted

surface-raised

--color-surface-raised

surface-overlay

--color-surface-overlay

surface-brand

--color-surface-brand

surface-brand-subtle

--color-surface-brand-subtle

surface-inverse

--color-surface-inverse

Text

--color-text-defaulttext-defaultAa — The quick brown fox
--color-text-mutedtext-mutedAa — The quick brown fox
--color-text-subtletext-subtleAa — The quick brown fox
--color-text-brandtext-brandAa — The quick brown fox
--color-text-on-brandtext-on-brandAa — The quick brown fox
--color-text-on-inversetext-on-inverseAa — The quick brown fox
--color-text-linktext-linkAa — The quick brown fox
--color-text-link-hovertext-link-hoverAa — The quick brown fox
--color-text-headingtext-headingAa — The quick brown fox
--color-text-infotext-infoAa — The quick brown fox
--color-text-successtext-successAa — The quick brown fox
--color-text-warningtext-warningAa — The quick brown fox
--color-text-dangertext-dangerAa — The quick brown fox

Borders

--color-border-defaultborder-default
--color-border-mutedborder-muted
--color-border-strongborder-strong
--color-border-brandborder-brand
--color-border-focusborder-focus
--color-border-dangerborder-danger

Icons

icon-default

--color-icon-default

icon-muted

--color-icon-muted

icon-brand

--color-icon-brand

icon-on-brand

--color-icon-on-brand

Media frame

media-surface

--color-media-surface

media-border

--color-media-border

media-surface-inverse

--color-media-surface-inverse

media-border-inverse

--color-media-border-inverse

02Token resolution chain

How each semantic token resolves: semantic → primitive (light) / primitive (dark) → oklch(L C H)

Surface

CatSemantic variableLight → primitiveDark → primitive
Surface
--color-surface-default
→var(--color-white)
→var(--color-zinc-950)
Surface
--color-surface-subtle
→var(--color-zinc-50)
→var(--color-zinc-900)
Surface
--color-surface-muted
→var(--color-zinc-100)
→var(--color-zinc-800)
Surface
--color-surface-raised
→var(--color-white)
→var(--color-zinc-900)
Surface
--color-surface-overlay
→var(--color-white)
→var(--color-zinc-800)
Surface
--color-surface-brand
→var(--color-brand-500)
→var(--color-brand-500)
Surface
--color-surface-brand-subtle
→var(--color-brand-50)
→var(--color-brand-950)
Surface
--color-surface-inverse
→var(--color-zinc-900)
→var(--color-zinc-100)

Text

CatSemantic variableLight → primitiveDark → primitive
Text
--color-text-default
→var(--color-zinc-900)
→var(--color-zinc-50)
Text
--color-text-muted
→var(--color-zinc-500)
→var(--color-zinc-400)
Text
--color-text-subtle
→var(--color-zinc-400)
→var(--color-zinc-500)
Text
--color-text-brand
→var(--color-brand-600)
→var(--color-brand-400)
Text
--color-text-on-brand
→var(--color-white)
→var(--color-white)
Text
--color-text-on-inverse
→var(--color-zinc-50)
→var(--color-zinc-900)
Text
--color-text-link
→var(--color-brand-500)
→var(--color-brand-400)
Text
--color-text-link-hover
→var(--color-brand-700)
→var(--color-brand-300)
Text
--color-text-heading
→(--color-text-default)
→(--color-text-default)
Text
--color-text-info
→var(--color-info-500)
→var(--color-info-400)
Text
--color-text-success
→var(--color-success-500)
→var(--color-success-400)
Text
--color-text-warning
→var(--color-warning-500)
→var(--color-warning-400)
Text
--color-text-danger
→var(--color-danger-500)
→var(--color-danger-400)

Border

CatSemantic variableLight → primitiveDark → primitive
Border
--color-border-default
→var(--color-zinc-200)
→var(--color-zinc-700)
Border
--color-border-muted
→var(--color-zinc-100)
→var(--color-zinc-800)
Border
--color-border-strong
→var(--color-zinc-300)
→var(--color-zinc-600)
Border
--color-border-brand
→var(--color-brand-500)
→var(--color-brand-500)
Border
--color-border-focus
→var(--color-brand-500)
→var(--color-brand-400)
Border
--color-border-danger
→var(--color-danger-500)
→var(--color-danger-400)

Icon

CatSemantic variableLight → primitiveDark → primitive
Icon
--color-icon-default
→var(--color-zinc-600)
→var(--color-zinc-400)
Icon
--color-icon-muted
→var(--color-zinc-400)
→var(--color-zinc-500)
Icon
--color-icon-brand
→var(--color-brand-500)
→var(--color-brand-400)
Icon
--color-icon-on-brand
→var(--color-white)
→var(--color-white)
03All primitive color scales

Flat / single-stop tokens

framework

--color-framework

black

--color-black

white

--color-white

brand

--color-brand

blue

--color-blue

yellow

--color-yellow

off-brand

--color-off-brand

50
100
200
300
400
500
600
700
800
900
950
Brand
Zinc
Dune
Red
Orange
Amber
Yellow
Lime
Green
Emerald
Teal
Cyan
Sky
Blue
Indigo
Violet
Purple
Fuchsia
Pink
Rose
Slate
Gray
Neutral
Stone
Mauve
Olive
Mist
Taupe
Info (→ cyan)
Success (→ green)
Warning (→ yellow)
Danger (→ red)
05W3C DTCG color token files
primitives/color.jsonFlat tokens, brand scale, zinc, status aliases
W3C DTCG
{
  "$metadata": {
    "tokenSetOrder": [
      "primitives/color"
    ]
  },
  "color": {
    "framework": {
      "$type": "color",
      "$value": "oklch(0 0 0)",
      "$description": "True black — framework/overlay use only"
    },
    "black": {
      "$type": "color",
      "$value": "oklch(0.1697 0 0)",
      "$description": "Near-black default ink"
    },
    "white": {
      "$type": "color",
      "$value": "oklch(1 0 0)",
      "$description": "Pure white"
    },
    "brand": {
      "$type": "color",
      "$value": "oklch(0.6927 0.2519 38.64)",
      "$description": "Single-stop brand accent (hue 38.64)"
    },
    "blue": {
      "$type": "color",
      "$value": "oklch(0.531 0.2498 263.11)"
    },
    "yellow": {
      "$type": "color",
      "$value": "oklch(0.8868 0.1883 116.45)"
    },
    "off-brand": {
      "$type": "color",
      "$value": "oklch(0.8896 0.1984 180)"
    },
    "brand-scale": {
      "50": {
        "$type": "color",
        "$value": "oklch(0.98 0.016 38.64)"
      },
      "100": {
        "$type": "color",
        "$value": "oklch(0.95 0.038 38.64)"
      },
      "200": {
        "$type": "color",
        "$value": "oklch(0.88 0.08 38.64)"
      },
      "300": {
        "$type": "color",
        "$value": "oklch(0.8 0.14 38.64)"
      },
      "400": {
        "$type": "color",
        "$value": "oklch(0.74 0.19 38.64)"
      },
      "500": {
        "$type": "color",
        "$value": "oklch(0.6927 0.2519 38.64)"
      },
      "600": {
        "$type": "color",
        "$value": "oklch(0.58 0.2 38.64)"
      },
      "700": {
        "$type": "color",
        "$value": "oklch(0.48 0.16 38.64)"
      },
      "800": {
        "$type": "color",
        "$value": "oklch(0.38 0.12 38.64)"
      },
      "900": {
        "$type": "color",
        "$value": "oklch(0.28 0.08 38.64)"
      },
      "950": {
        "$type": "color",
        "$value": "oklch(0.2 0.05 38.64)"
      }
    },
    "zinc": {
      "50": {
        "$type": "color",
        "$value": "oklch(98.5% 0 0)"
      },
      "100": {
        "$type": "color",
        "$value": "oklch(96.7% 0.001 286.375)"
      },
      "200": {
        "$type": "color",
        "$value": "oklch(92% 0.004 286.32)"
      },
      "300": {
        "$type": "color",
        "$value": "oklch(87.1% 0.006 286.286)"
      },
      "400": {
        "$type": "color",
        "$value": "oklch(70.5% 0.015 286.067)"
      },
      "500": {
        "$type": "color",
        "$value": "oklch(55.2% 0.016 285.938)"
      },
      "600": {
        "$type": "color",
        "$value": "oklch(44.2% 0.017 285.786)"
      },
      "700": {
        "$type": "color",
        "$value": "oklch(37% 0.013 285.805)"
      },
      "800": {
        "$type": "color",
        "$value": "oklch(27.4% 0.006 286.033)"
      },
      "900": {
        "$type": "color",
        "$value": "oklch(21% 0.006 285.885)"
      },
      "950": {
        "$type": "color",
        "$value": "oklch(14.1% 0.005 285.823)"
      }
    },
    "info": {
      "50": {
        "$type": "color",
        "$value": "{color.cyan.50}"
      },
      "100": {
        "$type": "color",
        "$value": "{color.cyan.100}"
      },
      "200": {
        "$type": "color",
        "$value": "{color.cyan.200}"
      },
      "300": {
        "$type": "color",
        "$value": "{color.cyan.300}"
      },
      "400": {
        "$type": "color",
        "$value": "{color.cyan.400}"
      },
      "500": {
        "$type": "color",
        "$value": "{color.cyan.500}"
      },
      "600": {
        "$type": "color",
        "$value": "{color.cyan.600}"
      },
      "700": {
        "$type": "color",
        "$value": "{color.cyan.700}"
      },
      "800": {
        "$type": "color",
        "$value": "{color.cyan.800}"
      },
      "900": {
        "$type": "color",
        "$value": "{color.cyan.900}"
      },
      "950": {
        "$type": "color",
        "$value": "{color.cyan.950}"
      },
      "$description": "Aliased → cyan scale"
    },
    "success": {
      "50": {
        "$type": "color",
        "$value": "{color.green.50}"
      },
      "100": {
        "$type": "color",
        "$value": "{color.green.100}"
      },
      "200": {
        "$type": "color",
        "$value": "{color.green.200}"
      },
      "300": {
        "$type": "color",
        "$value": "{color.green.300}"
      },
      "400": {
        "$type": "color",
        "$value": "{color.green.400}"
      },
      "500": {
        "$type": "color",
        "$value": "{color.green.500}"
      },
      "600": {
        "$type": "color",
        "$value": "{color.green.600}"
      },
      "700": {
        "$type": "color",
        "$value": "{color.green.700}"
      },
      "800": {
        "$type": "color",
        "$value": "{color.green.800}"
      },
      "900": {
        "$type": "color",
        "$value": "{color.green.900}"
      },
      "950": {
        "$type": "color",
        "$value": "{color.green.950}"
      },
      "$description": "Aliased → green scale"
    },
    "warning": {
      "50": {
        "$type": "color",
        "$value": "{color.yellow.50}"
      },
      "100": {
        "$type": "color",
        "$value": "{color.yellow.100}"
      },
      "200": {
        "$type": "color",
        "$value": "{color.yellow.200}"
      },
      "300": {
        "$type": "color",
        "$value": "{color.yellow.300}"
      },
      "400": {
        "$type": "color",
        "$value": "{color.yellow.400}"
      },
      "500": {
        "$type": "color",
        "$value": "{color.yellow.500}"
      },
      "600": {
        "$type": "color",
        "$value": "{color.yellow.600}"
      },
      "700": {
        "$type": "color",
        "$value": "{color.yellow.700}"
      },
      "800": {
        "$type": "color",
        "$value": "{color.yellow.800}"
      },
      "900": {
        "$type": "color",
        "$value": "{color.yellow.900}"
      },
      "950": {
        "$type": "color",
        "$value": "{color.yellow.950}"
      },
      "$description": "Aliased → yellow scale"
    },
    "danger": {
      "50": {
        "$type": "color",
        "$value": "{color.red.50}"
      },
      "100": {
        "$type": "color",
        "$value": "{color.red.100}"
      },
      "200": {
        "$type": "color",
        "$value": "{color.red.200}"
      },
      "300": {
        "$type": "color",
        "$value": "{color.red.300}"
      },
      "400": {
        "$type": "color",
        "$value": "{color.red.400}"
      },
      "500": {
        "$type": "color",
        "$value": "{color.red.500}"
      },
      "600": {
        "$type": "color",
        "$value": "{color.red.600}"
      },
      "700": {
        "$type": "color",
        "$value": "{color.red.700}"
      },
      "800": {
        "$type": "color",
        "$value": "{color.red.800}"
      },
      "900": {
        "$type": "color",
        "$value": "{color.red.900}"
      },
      "950": {
        "$type": "color",
        "$value": "{color.red.950}"
      },
      "$description": "Aliased → red scale"
    }
  }
}
semantic/color.jsonSurface / text / border / icon · light + dark overrides
W3C DTCG
{
  "$metadata": {
    "tokenSetOrder": [
      "semantic/color"
    ]
  },
  "$description": "Semantic tokens. Base $value = light mode. $extensions.mode.dark = dark mode override.",
  "color": {
    "surface": {
      "default": {
        "$type": "color",
        "$value": "{color.white}",
        "$extensions": {
          "mode": {
            "dark": "{color.zinc.950}"
          }
        }
      },
      "subtle": {
        "$type": "color",
        "$value": "{color.zinc.50}",
        "$extensions": {
          "mode": {
            "dark": "{color.zinc.900}"
          }
        }
      },
      "muted": {
        "$type": "color",
        "$value": "{color.zinc.100}",
        "$extensions": {
          "mode": {
            "dark": "{color.zinc.800}"
          }
        }
      },
      "raised": {
        "$type": "color",
        "$value": "{color.white}",
        "$extensions": {
          "mode": {
            "dark": "{color.zinc.900}"
          }
        }
      },
      "overlay": {
        "$type": "color",
        "$value": "{color.white}",
        "$extensions": {
          "mode": {
            "dark": "{color.zinc.800}"
          }
        }
      },
      "brand": {
        "$type": "color",
        "$value": "{color.brand-scale.500}",
        "$extensions": {
          "mode": {
            "dark": "{color.brand-scale.500}"
          }
        }
      },
      "brand-subtle": {
        "$type": "color",
        "$value": "{color.brand-scale.50}",
        "$extensions": {
          "mode": {
            "dark": "{color.brand-scale.950}"
          }
        }
      },
      "inverse": {
        "$type": "color",
        "$value": "{color.zinc.900}",
        "$extensions": {
          "mode": {
            "dark": "{color.zinc.100}"
          }
        }
      }
    },
    "text": {
      "default": {
        "$type": "color",
        "$value": "{color.zinc.900}",
        "$extensions": {
          "mode": {
            "dark": "{color.zinc.50}"
          }
        }
      },
      "muted": {
        "$type": "color",
        "$value": "{color.zinc.500}",
        "$extensions": {
          "mode": {
            "dark": "{color.zinc.400}"
          }
        }
      },
      "subtle": {
        "$type": "color",
        "$value": "{color.zinc.400}",
        "$extensions": {
          "mode": {
            "dark": "{color.zinc.500}"
          }
        }
      },
      "brand": {
        "$type": "color",
        "$value": "{color.brand-scale.600}",
        "$extensions": {
          "mode": {
            "dark": "{color.brand-scale.400}"
          }
        }
      },
      "on-brand": {
        "$type": "color",
        "$value": "{color.white}",
        "$extensions": {
          "mode": {
            "dark": "{color.white}"
          }
        }
      },
      "on-inverse": {
        "$type": "color",
        "$value": "{color.zinc.50}",
        "$extensions": {
          "mode": {
            "dark": "{color.zinc.900}"
          }
        }
      },
      "link": {
        "$type": "color",
        "$value": "{color.brand-scale.500}",
        "$extensions": {
          "mode": {
            "dark": "{color.brand-scale.400}"
          }
        }
      },
      "link-hover": {
        "$type": "color",
        "$value": "{color.brand-scale.700}",
        "$extensions": {
          "mode": {
            "dark": "{color.brand-scale.300}"
          }
        }
      },
      "heading": {
        "$type": "color",
        "$value": "{color.text.default}",
        "$description": "Inherits text.default; overridden per-mode via cascade"
      },
      "info": {
        "$type": "color",
        "$value": "{color.info.500}",
        "$extensions": {
          "mode": {
            "dark": "{color.info.400}"
          }
        }
      },
      "success": {
        "$type": "color",
        "$value": "{color.success.500}",
        "$extensions": {
          "mode": {
            "dark": "{color.success.400}"
          }
        }
      },
      "warning": {
        "$type": "color",
        "$value": "{color.warning.500}",
        "$extensions": {
          "mode": {
            "dark": "{color.warning.400}"
          }
        }
      },
      "danger": {
        "$type": "color",
        "$value": "{color.danger.500}",
        "$extensions": {
          "mode": {
            "dark": "{color.danger.400}"
          }
        }
      }
    },
    "border": {
      "default": {
        "$type": "color",
        "$value": "{color.zinc.200}",
        "$extensions": {
          "mode": {
            "dark": "{color.zinc.700}"
          }
        }
      },
      "muted": {
        "$type": "color",
        "$value": "{color.zinc.100}",
        "$extensions": {
          "mode": {
            "dark": "{color.zinc.800}"
          }
        }
      },
      "strong": {
        "$type": "color",
        "$value": "{color.zinc.300}",
        "$extensions": {
          "mode": {
            "dark": "{color.zinc.600}"
          }
        }
      },
      "brand": {
        "$type": "color",
        "$value": "{color.brand-scale.500}",
        "$extensions": {
          "mode": {
            "dark": "{color.brand-scale.500}"
          }
        }
      },
      "focus": {
        "$type": "color",
        "$value": "{color.brand-scale.500}",
        "$extensions": {
          "mode": {
            "dark": "{color.brand-scale.400}"
          }
        }
      },
      "danger": {
        "$type": "color",
        "$value": "{color.danger.500}",
        "$extensions": {
          "mode": {
            "dark": "{color.danger.400}"
          }
        }
      }
    },
    "icon": {
      "default": {
        "$type": "color",
        "$value": "{color.zinc.600}",
        "$extensions": {
          "mode": {
            "dark": "{color.zinc.400}"
          }
        }
      },
      "muted": {
        "$type": "color",
        "$value": "{color.zinc.400}",
        "$extensions": {
          "mode": {
            "dark": "{color.zinc.500}"
          }
        }
      },
      "brand": {
        "$type": "color",
        "$value": "{color.brand-scale.500}",
        "$extensions": {
          "mode": {
            "dark": "{color.brand-scale.400}"
          }
        }
      },
      "on-brand": {
        "$type": "color",
        "$value": "{color.white}",
        "$extensions": {
          "mode": {
            "dark": "{color.white}"
          }
        }
      }
    },
    "media": {
      "surface": {
        "$type": "color",
        "$value": "oklch(0 0 0 / 0.05)"
      },
      "border": {
        "$type": "color",
        "$value": "oklch(0 0 0 / 0.1)"
      },
      "surface-inverse": {
        "$type": "color",
        "$value": "oklch(1 0 0 / 0.05)"
      },
      "border-inverse": {
        "$type": "color",
        "$value": "oklch(1 0 0 / 0.1)"
      }
    }
  }
}