Token reference
Generated by tools/audit.mjs — every CSS custom property the kit declares,
its value and the scope it is declared in. 247 properties across
7 stylesheets.
Read 01-brand-and-color.md for which ones you should actually reach for; this
file exists so nothing is undeclared and no value has to be guessed. Resolved
(computed) values per theme and brand are in 14-measurements.md.
packages/tokens/src/bridge.css
| Token | Value | Scope |
|---|---|---|
--background | var(--surface-page) | [data-theme="light"] |
--foreground | var(--text-primary) | [data-theme="light"] |
--card | var(--surface-card) | [data-theme="light"] |
--card-foreground | var(--text-primary) | [data-theme="light"] |
--popover | var(--surface-card) | [data-theme="light"] |
--popover-foreground | var(--text-primary) | [data-theme="light"] |
--primary | var(--brand-accent) | [data-theme="light"] |
--primary-foreground | var(--text-on-accent) | [data-theme="light"] |
--surface-card | var(--color-warm-white) | [data-theme="light"] |
--surface-sunken | var(--color-warm-white) | [data-theme="light"] |
--secondary | #f1eee8 | [data-theme="light"] |
--secondary-foreground | var(--text-primary) | [data-theme="light"] |
--muted | #f1eee8 | [data-theme="light"] |
--muted-foreground | var(--text-secondary) | [data-theme="light"] |
--accent | rgba(var(--brand-accent-rgb), 0.12) | [data-theme="light"] |
--accent-foreground | var(--text-primary) | [data-theme="light"] |
--accent-fg | var(--accent-ink) | [data-theme="light"] |
--destructive | #a4231c | [data-theme="light"] |
--destructive-foreground | #ffffff | [data-theme="light"] |
--destructive-wash | color-mix(in srgb, var(--destructive) 12%, transparent) | [data-theme="light"] |
--positive | #036b4e | [data-theme="light"] |
--positive-foreground | #ffffff | [data-theme="light"] |
--caution | #8a5a00 | [data-theme="light"] |
--caution-foreground | #ffffff | [data-theme="light"] |
--accent-ink | var(--accent-ink-light) | [data-theme="light"] |
--border | var(--card-border) | [data-theme="light"] |
--border-strong | var(--card-border-strong) | [data-theme="light"] |
--input | var(--card-border-strong) | [data-theme="light"] |
--ring | var(--brand-accent) | [data-theme="light"] |
--skeleton | #e3ded6 | [data-theme="light"] |
--skeleton-pulse | #efebe4 | [data-theme="light"] |
--row | var(--surface-card) | [data-theme="light"] |
--row-alt | #f1eee8 | [data-theme="light"] |
--row-hover | #daece2 | [data-theme="light"] |
--row-selected | #ded8ce | [data-theme="light"] |
--row-header | var(--color-charcoal) | [data-theme="light"] |
--row-header-foreground | var(--color-cream) | [data-theme="light"] |
--sidebar | #f1eee8 | [data-theme="light"] |
--sidebar-foreground | var(--text-primary) | [data-theme="light"] |
--sidebar-primary | var(--brand-accent) | [data-theme="light"] |
--sidebar-primary-foreground | var(--text-on-accent) | [data-theme="light"] |
--sidebar-accent | rgba(var(--brand-accent-rgb), 0.12) | [data-theme="light"] |
--sidebar-accent-foreground | var(--text-primary) | [data-theme="light"] |
--sidebar-border | var(--card-border-strong) | [data-theme="light"] |
--sidebar-ring | var(--brand-accent) | [data-theme="light"] |
--elevation-overlay | var(--shadow-card-hover) | [data-theme="light"] |
--elevation-modal | var(--shadow-modal) | [data-theme="light"] |
--radius | var(--radius-card) | [data-theme="light"] |
--chart-1 | #036B4E | [data-theme="light"] |
--chart-2 | #0B63CE | [data-theme="light"] |
--chart-3 | #B84A19 | [data-theme="light"] |
--chart-4 | #8A5A00 | [data-theme="light"] |
--chart-5 | #4A5568 | [data-theme="light"] |
--background | var(--surface-page) | [data-theme="dark"] |
--foreground | var(--text-primary) | [data-theme="dark"] |
--card | var(--surface-card) | [data-theme="dark"] |
--card-foreground | var(--text-primary) | [data-theme="dark"] |
--popover | var(--surface-card) | [data-theme="dark"] |
--popover-foreground | var(--text-primary) | [data-theme="dark"] |
--primary | var(--brand-accent) | [data-theme="dark"] |
--primary-foreground | var(--text-on-accent) | [data-theme="dark"] |
--secondary | var(--color-titanium-mid) | [data-theme="dark"] |
--secondary-foreground | var(--text-primary) | [data-theme="dark"] |
--muted | var(--color-titanium-mid) | [data-theme="dark"] |
--muted-foreground | var(--text-secondary) | [data-theme="dark"] |
--accent | rgba(var(--brand-accent-rgb), 0.12) | [data-theme="dark"] |
--accent-foreground | var(--text-primary) | [data-theme="dark"] |
--accent-fg | var(--accent-ink) | [data-theme="dark"] |
--destructive | var(--color-danger) | [data-theme="dark"] |
--destructive-foreground | #ffffff | [data-theme="dark"] |
--positive | var(--color-emerald-light) | [data-theme="dark"] |
--positive-foreground | var(--color-gray-1) | [data-theme="dark"] |
--accent-ink | var(--accent-ink-dark) | [data-theme="dark"] |
--caution | var(--color-traffic-yellow) | [data-theme="dark"] |
--caution-foreground | var(--color-gray-1) | [data-theme="dark"] |
--border | var(--card-border) | [data-theme="dark"] |
--border-strong | var(--card-border-strong) | [data-theme="dark"] |
--input | var(--color-titanium-light) | [data-theme="dark"] |
--ring | var(--brand-accent) | [data-theme="dark"] |
--skeleton | #313134 | [data-theme="dark"] |
--skeleton-pulse | #3d3d41 | [data-theme="dark"] |
--row | var(--surface-card) | [data-theme="dark"] |
--row-alt | #29292b | [data-theme="dark"] |
--row-hover | #293d38 | [data-theme="dark"] |
--row-selected | #434346 | [data-theme="dark"] |
--row-header | var(--color-charcoal-deep) | [data-theme="dark"] |
--row-header-foreground | var(--color-warm-white) | [data-theme="dark"] |
--sidebar | var(--surface-sunken) | [data-theme="dark"] |
--sidebar-foreground | var(--text-primary) | [data-theme="dark"] |
--sidebar-primary | var(--brand-accent) | [data-theme="dark"] |
--sidebar-primary-foreground | var(--text-on-accent) | [data-theme="dark"] |
--sidebar-accent | rgba(var(--brand-accent-rgb), 0.12) | [data-theme="dark"] |
--sidebar-accent-foreground | var(--text-primary) | [data-theme="dark"] |
--sidebar-border | var(--card-border-strong) | [data-theme="dark"] |
--sidebar-ring | var(--brand-accent) | [data-theme="dark"] |
--elevation-overlay | var(--shadow-modal) | [data-theme="dark"] |
--elevation-modal | var(--shadow-modal) | [data-theme="dark"] |
--chart-1 | #34D399 | [data-theme="dark"] |
--chart-2 | #0495FE | [data-theme="dark"] |
--chart-3 | #FF6723 | [data-theme="dark"] |
--chart-4 | #FEBC2E | [data-theme="dark"] |
--chart-5 | #A0AEC0 | [data-theme="dark"] |
--color-background | var(--background) | @theme inline |
--color-foreground | var(--foreground) | @theme inline |
--color-card | var(--card) | @theme inline |
--color-card-foreground | var(--card-foreground) | @theme inline |
--color-popover | var(--popover) | @theme inline |
--color-popover-foreground | var(--popover-foreground) | @theme inline |
--color-primary | var(--primary) | @theme inline |
--color-primary-foreground | var(--primary-foreground) | @theme inline |
--color-secondary | var(--secondary) | @theme inline |
--color-secondary-foreground | var(--secondary-foreground) | @theme inline |
--color-muted | var(--muted) | @theme inline |
--color-muted-foreground | var(--muted-foreground) | @theme inline |
--color-accent | var(--accent) | @theme inline |
--color-accent-foreground | var(--accent-foreground) | @theme inline |
--color-accent-fg | var(--accent-fg) | @theme inline |
--color-card-divider | var(--card-divider) | @theme inline |
--color-chart-1 | var(--chart-1) | @theme inline |
--color-chart-2 | var(--chart-2) | @theme inline |
--color-chart-3 | var(--chart-3) | @theme inline |
--color-chart-4 | var(--chart-4) | @theme inline |
--color-chart-5 | var(--chart-5) | @theme inline |
--color-destructive | var(--destructive) | @theme inline |
--color-destructive-foreground | var(--destructive-foreground) | @theme inline |
--color-destructive-wash | var(--destructive-wash) | @theme inline |
--color-positive | var(--positive) | @theme inline |
--color-positive-foreground | var(--positive-foreground) | @theme inline |
--color-caution | var(--caution) | @theme inline |
--color-caution-foreground | var(--caution-foreground) | @theme inline |
--color-border | var(--border) | @theme inline |
--color-border-strong | var(--border-strong) | @theme inline |
--color-input | var(--input) | @theme inline |
--color-ring | var(--ring) | @theme inline |
--color-skeleton | var(--skeleton) | @theme inline |
--color-skeleton-pulse | var(--skeleton-pulse) | @theme inline |
--color-row | var(--row) | @theme inline |
--color-row-alt | var(--row-alt) | @theme inline |
--color-row-hover | var(--row-hover) | @theme inline |
--color-row-selected | var(--row-selected) | @theme inline |
--color-row-header | var(--row-header) | @theme inline |
--color-row-header-foreground | var(--row-header-foreground) | @theme inline |
--color-sidebar | var(--sidebar) | @theme inline |
--color-sidebar-foreground | var(--sidebar-foreground) | @theme inline |
--color-sidebar-primary | var(--sidebar-primary) | @theme inline |
--color-sidebar-primary-foreground | var(--sidebar-primary-foreground) | @theme inline |
--color-sidebar-accent | var(--sidebar-accent) | @theme inline |
--color-sidebar-accent-foreground | var(--sidebar-accent-foreground) | @theme inline |
--color-sidebar-border | var(--sidebar-border) | @theme inline |
--color-sidebar-ring | var(--sidebar-ring) | @theme inline |
--color-brand-accent | var(--brand-accent) | @theme inline |
--font-sans | var(--font-body) | @theme inline |
--font-display | var(--font-display) | @theme inline |
--font-mono | var(--font-mono) | @theme inline |
--text-display | var(--type-h3-size) | @theme inline |
--text-display--line-height | var(--type-h3-lh) | @theme inline |
--text-section | 17px | @theme inline |
--text-section--line-height | 1.3 | @theme inline |
--text-body | var(--type-body-sm-size) | @theme inline |
--text-body--line-height | 1.6 | @theme inline |
--text-caption | var(--type-caption-size) | @theme inline |
--text-caption--line-height | var(--type-caption-lh) | @theme inline |
--text-data | var(--type-data-size) | @theme inline |
--text-data--line-height | 1.3 | @theme inline |
--text-eyebrow | var(--type-eyebrow-size) | @theme inline |
--text-eyebrow--line-height | 1.3 | @theme inline |
--text-stat | 34px | @theme inline |
--text-stat--line-height | 1 | @theme inline |
--shadow-overlay | var(--elevation-overlay) | @theme inline |
--shadow-modal | var(--elevation-modal) | @theme inline |
packages/tokens/src/colors.css
| Token | Value | Scope |
|---|---|---|
--color-emerald | #10B981 | :root |
--color-emerald-dark | #059669 | :root |
--color-emerald-light | #34D399 | :root |
--color-sky | #0495FE | :root |
--color-orange | #FF6723 | :root |
--color-cream | #FAF8F5 | :root |
--color-warm-white | #F5F3EF | :root |
--color-charcoal | #18181B | :root |
--color-charcoal-deep | #0F0F11 | :root |
--color-titanium | #2C2C2E | :root |
--color-titanium-mid | #3A3A3C | :root |
--color-titanium-light | #48484A | :root |
--color-gray-1 | #1C1C1E | :root |
--color-gray-2 | #636366 | :root |
--color-gray-3 | #8E8E93 | :root |
--color-border-hairline | #E8E4DE | :root |
--color-border-heavy | #DDD7CE | :root |
--color-white-8 | rgba(255, 255, 255, 0.08) | :root |
--color-white-25 | rgba(255, 255, 255, 0.25) | :root |
--color-white-40 | rgba(255, 255, 255, 0.40) | :root |
--color-white-60 | rgba(255, 255, 255, 0.60) | :root |
--color-white-65 | rgba(255, 255, 255, 0.65) | :root |
--color-traffic-red | #FF5F57 | :root |
--color-traffic-yellow | #FEBC2E | :root |
--color-traffic-green | #28C840 | :root |
--color-danger | #FF5F57 | :root |
--rgb-emerald | 16, 185, 129 | :root |
--rgb-sky | 4, 149, 254 | :root |
--rgb-orange | 255, 103, 35 | :root |
packages/tokens/src/compat.css
| Token | Value | Scope |
|---|---|---|
--text-figure | 2.125rem | @theme inline |
--text-figure--line-height | 1.05 | @theme inline |
--text-figure-sm | 0.8125rem | @theme inline |
--text-figure-sm--line-height | 1.2 | @theme inline |
--text-label | 0.6875rem | @theme inline |
--text-label--line-height | 1.3 | @theme inline |
--text-meta | 0.75rem | @theme inline |
--text-meta--line-height | 1.4 | @theme inline |
packages/tokens/src/spacing.css
| Token | Value | Scope |
|---|---|---|
--space-1 | 4px | :root |
--space-2 | 8px | :root |
--space-3 | 12px | :root |
--space-4 | 16px | :root |
--space-5 | 20px | :root |
--space-6 | 24px | :root |
--space-8 | 32px | :root |
--space-10 | 40px | :root |
--space-12 | 48px | :root |
--space-16 | 64px | :root |
--space-20 | 80px | :root |
--space-24 | 96px | :root |
--space-32 | 128px | :root |
--radius-card | 16px | :root |
--radius-button | 12px | :root |
--radius-input | 10px | :root |
--radius-chrome | 10px | :root |
--radius-badge | 8px | :root |
--radius-pill | 9999px | :root |
--shadow-card | 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 6px rgba(0, 0, 0, 0.04) | :root |
--shadow-card-hover | 0 4px 12px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.06) | :root |
--shadow-modal | 0 24px 80px rgba(0, 0, 0, 0.18) | :root |
--container-max | 1280px | :root |
--container-pad-mobile | 24px | :root |
--container-pad-tablet | 48px | :root |
--container-pad-desktop | 64px | :root |
--section-pad-mobile | 48px | :root |
--section-pad-tablet | 64px | :root |
--section-pad-desktop | 96px | :root |
--icon-stroke | 2 | :root |
--icon-stroke-emphasis | 2.4 | :root |
--ease-standard | cubic-bezier(0.22, 0.61, 0.36, 1) | :root |
--duration-fast | 120ms | :root |
--duration-base | 180ms | :root |
--duration-slow | 320ms | :root |
packages/tokens/src/texture.css
| Token | Value | Scope |
|---|---|---|
--texture-size | 32px | :root |
--texture-grid-light | rgba(0, 0, 0, 0.04) | :root |
--texture-grid-dark | rgba(255, 255, 255, 0.035) | :root |
--texture-dot-light | rgba(0, 0, 0, 0.06) | :root |
--texture-dot-dark | rgba(255, 255, 255, 0.05) | :root |
--gradient-dark-fade | linear-gradient(180deg, #18181B 0%, #0F0F11 100%) | :root |
packages/tokens/src/themes.css
| Token | Value | Scope |
|---|---|---|
--brand-accent-text | var(--accent-text-light) | [data-theme="light"] |
--surface-page | var(--color-cream) | [data-theme="light"] |
--surface-card | var(--color-warm-white) | [data-theme="light"] |
--surface-sunken | #F1EEE8 | [data-theme="light"] |
--surface-inverse | var(--color-charcoal) | [data-theme="light"] |
--text-primary | var(--color-gray-1) | [data-theme="light"] |
--text-secondary | var(--color-gray-2) | [data-theme="light"] |
--text-tertiary | var(--color-gray-3) | [data-theme="light"] |
--text-inverse | var(--color-cream) | [data-theme="light"] |
--text-on-accent | #FFFFFF | [data-theme="light"] |
--card-border | var(--color-border-heavy) | [data-theme="light"] |
--card-border-strong | var(--color-border-heavy) | [data-theme="light"] |
--card-divider | var(--color-border-hairline) | [data-theme="light"] |
--card-shadow | var(--shadow-card) | [data-theme="light"] |
--chrome-bar-bg | var(--color-warm-white) | [data-theme="light"] |
--track-neutral | var(--color-border-hairline) | [data-theme="light"] |
--brand-accent-text | var(--accent-text-dark) | [data-theme="dark"] |
--surface-page | var(--color-charcoal) | [data-theme="dark"] |
--surface-card | var(--color-titanium) | [data-theme="dark"] |
--surface-sunken | var(--color-charcoal-deep) | [data-theme="dark"] |
--surface-inverse | var(--color-cream) | [data-theme="dark"] |
--text-primary | var(--color-warm-white) | [data-theme="dark"] |
--text-secondary | var(--color-white-60) | [data-theme="dark"] |
--text-tertiary | var(--color-white-40) | [data-theme="dark"] |
--text-inverse | var(--color-gray-1) | [data-theme="dark"] |
--text-on-accent | #FFFFFF | [data-theme="dark"] |
--card-border | var(--color-white-8) | [data-theme="dark"] |
--card-border-strong | var(--color-titanium-light) | [data-theme="dark"] |
--card-divider | var(--color-white-8) | [data-theme="dark"] |
--card-shadow | none | [data-theme="dark"] |
--chrome-bar-bg | rgba(255, 255, 255, 0.04) | [data-theme="dark"] |
--track-neutral | var(--color-titanium-mid) | [data-theme="dark"] |
--brand-accent | var(--color-emerald) | [data-brand="iq"] |
--brand-accent-strong | var(--color-emerald-dark) | [data-brand="iq"] |
--brand-accent-soft | var(--color-emerald-light) | [data-brand="iq"] |
--brand-accent-rgb | var(--rgb-emerald) | [data-brand="iq"] |
--accent-text-light | var(--color-emerald-dark) | [data-brand="iq"] |
--accent-text-dark | var(--color-emerald-light) | [data-brand="iq"] |
--brand-name | "8020IQ" | [data-brand="iq"] |
--accent-ink-light | #036B4E | [data-brand="iq"] |
--accent-ink-dark | var(--color-emerald-light) | [data-brand="iq"] |
--brand-accent | var(--color-sky) | [data-brand="rei"] |
--brand-accent-strong | #0479CC | [data-brand="rei"] |
--brand-accent-soft | var(--color-sky) | [data-brand="rei"] |
--brand-accent-rgb | var(--rgb-sky) | [data-brand="rei"] |
--accent-text-light | var(--color-sky) | [data-brand="rei"] |
--accent-text-dark | var(--color-sky) | [data-brand="rei"] |
--brand-name | "8020REI" | [data-brand="rei"] |
--accent-ink-light | #036EBC | [data-brand="rei"] |
--accent-ink-dark | var(--color-sky) | [data-brand="rei"] |
--brand-accent | var(--color-orange) | [data-brand="roof"] |
--brand-accent-strong | #E0521A | [data-brand="roof"] |
--brand-accent-soft | var(--color-orange) | [data-brand="roof"] |
--brand-accent-rgb | var(--rgb-orange) | [data-brand="roof"] |
--accent-text-light | var(--color-orange) | [data-brand="roof"] |
--accent-text-dark | var(--color-orange) | [data-brand="roof"] |
--brand-name | "8020Roof" | [data-brand="roof"] |
--accent-ink-light | #B84A19 | [data-brand="roof"] |
--accent-ink-dark | var(--color-orange) | [data-brand="roof"] |
packages/tokens/src/typography.css
| Token | Value | Scope |
|---|---|---|
--font-display | "DM Sans", "Helvetica Neue", Arial, sans-serif | :root |
--font-body | "Inter", "Helvetica Neue", Arial, sans-serif | :root |
--font-mono | "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace | :root |
--weight-body | 400 | :root |
--weight-medium | 500 | :root |
--weight-emphasis | 600 | :root |
--weight-bold | 700 | :root |
--weight-display | 800 | :root |
--type-hero-size | 64px | :root |
--type-hero-lh | 1.04 | :root |
--type-h2-size | 40px | :root |
--type-h2-lh | 1.1 | :root |
--type-h3-size | 26px | :root |
--type-h3-lh | 1.25 | :root |
--type-body-size | 17px | :root |
--type-body-lh | 1.62 | :root |
--type-body-sm-size | 15px | :root |
--type-caption-size | 13px | :root |
--type-caption-lh | 1.45 | :root |
--type-data-size | 14px | :root |
--type-eyebrow-size | 11px | :root |
--type-stat-size | 56px | :root |
--type-stat-lh | 1.0 | :root |
--type-score-size | 64px | :root |
--tracking-display | -0.02em | :root |
--tracking-hero | -0.03em | :root |
--tracking-mono-caps | 0.08em | :root |
--tracking-body | 0 | :root |