Skip to content

Tokens

The design tokens in the pack’s tokens/ folder. Components use them through Tailwind utilities (bg-brand, text-body), never raw values, so start with the color roles and the utility next to each.

Colors

The color roles components use. Each one works as bg-, text- and border- (and the other color utilities), and switches value between light and dark on its own.

Surfaces

  • --color-bgbg-bg text-bg border-bg
    Light--gb-neutral-0oklch(100% 0 0)
    Dark--gb-neutral-950oklch(10% 0.003 0)
  • --color-surfacebg-surface text-surface border-surface
    Light--gb-neutral-50oklch(98% 0.001 0)
    Dark--gb-neutral-900oklch(16% 0.003 0)
  • --color-surface-raisedbg-surface-raised text-surface-raised border-surface-raised
    Light--gb-neutral-0oklch(100% 0 0)
    Dark--gb-neutral-800oklch(24% 0.003 0)
  • --color-surface-sunkenbg-surface-sunken text-surface-sunken border-surface-sunken
    Light--gb-neutral-100oklch(96% 0.001 0)
    Dark--gb-neutral-950oklch(10% 0.003 0)

Text

  • --color-textbg-text text-text border-text
    Light--gb-neutral-900oklch(16% 0.003 0)
    Dark--gb-neutral-50oklch(98% 0.001 0)
  • --color-text-secondarybg-text-secondary text-text-secondary border-text-secondary
    Light--gb-neutral-600oklch(43% 0.003 0)
    Dark--gb-neutral-400oklch(65% 0.003 0)
  • --color-text-disabledbg-text-disabled text-text-disabled border-text-disabled
    Light--gb-neutral-400oklch(65% 0.003 0)
    Dark--gb-neutral-600oklch(43% 0.003 0)
  • --color-on-brandbg-on-brand text-on-brand border-on-brand
    Light--gb-neutral-0oklch(100% 0 0)
    Dark--gb-neutral-950oklch(10% 0.003 0)

Borders

  • --color-borderbg-border text-border border-border
    Light--gb-neutral-200oklch(91% 0.002 0)
    Dark--gb-neutral-700oklch(34% 0.003 0)
  • --color-border-strongbg-border-strong text-border-strong border-border-strong

    control boundaries: ≥3:1 on the page (WCAG 1.4.11)

    Light--gb-neutral-400oklch(65% 0.003 0)
    Dark--gb-dark-border-strongoklch(56% 0.003 0)

Brand

Primary actions / primary emphasis

  • --color-brandbg-brand text-brand border-brand
    Light--gb-brand-600oklch(50% 0.17 255)
    Dark--gb-brand-400oklch(68% 0.14 255)
  • --color-brand-hoverbg-brand-hover text-brand-hover border-brand-hover
    Light--gb-brand-700oklch(42% 0.15 255)
    Dark--gb-brand-300oklch(77% 0.11 255)
  • --color-brand-activebg-brand-active text-brand-active border-brand-active
    Light--gb-brand-800oklch(34% 0.12 255)
    Dark--gb-brand-200oklch(86% 0.08 255)
  • --color-brand-subtlebg-brand-subtle text-brand-subtle border-brand-subtle
    Light--gb-brand-50oklch(97% 0.02 255)
    Dark--gb-brand-900oklch(27% 0.09 255)

Interactive

Secondary / neutral interactive surfaces — distinct from brand: buttons/controls that are not the primary action

  • --color-interactivebg-interactive text-interactive border-interactive
    Light--gb-neutral-100oklch(96% 0.001 0)
    Dark--gb-neutral-700oklch(34% 0.003 0)
  • --color-interactive-hoverbg-interactive-hover text-interactive-hover border-interactive-hover
    Light--gb-neutral-200oklch(91% 0.002 0)
    Dark--gb-neutral-600oklch(43% 0.003 0)
  • --color-interactive-activebg-interactive-active text-interactive-active border-interactive-active
    Light--gb-neutral-300oklch(83% 0.002 0)
    Dark--gb-neutral-500oklch(52% 0.003 0)

Focus

  • --color-focus-ringbg-focus-ring text-focus-ring border-focus-ring
    Light--gb-brand-500oklch(58% 0.17 255)
    Dark--gb-brand-300oklch(77% 0.11 255)

Status

  • --color-success-bgbg-success-bg text-success-bg border-success-bg
    Light--gb-success-subtleoklch(95% 0.05 149)
    Dark--gb-dark-success-bgcolor-mix(in oklch, var(--gb-success-strong) 30%, var(--gb-neutral-900))
  • --color-success-textbg-success-text text-success-text border-success-text
    Light--gb-success-strongoklch(32% 0.1 149)
    Dark--gb-dark-success-textoklch(85% 0.1 149)
  • --color-success-borderbg-success-border text-success-border border-success-border
    Light--gb-success-baseoklch(55% 0.15 149)
    Dark--gb-success-baseoklch(55% 0.15 149)
  • --color-warning-bgbg-warning-bg text-warning-bg border-warning-bg
    Light--gb-warning-subtleoklch(96% 0.07 89)
    Dark--gb-dark-warning-bgcolor-mix(in oklch, var(--gb-warning-strong) 30%, var(--gb-neutral-900))
  • --color-warning-textbg-warning-text text-warning-text border-warning-text
    Light--gb-warning-strongoklch(38% 0.11 55)
    Dark--gb-dark-warning-textoklch(88% 0.1 80)
  • --color-warning-borderbg-warning-border text-warning-border border-warning-border
    Light--gb-warning-baseoklch(62% 0.17 70)
    Dark--gb-warning-baseoklch(62% 0.17 70)
  • --color-danger-bgbg-danger-bg text-danger-bg border-danger-bg
    Light--gb-danger-subtleoklch(95% 0.04 25)
    Dark--gb-dark-danger-bgcolor-mix(in oklch, var(--gb-danger-strong) 30%, var(--gb-neutral-900))
  • --color-danger-textbg-danger-text text-danger-text border-danger-text
    Light--gb-danger-strongoklch(33% 0.14 25)
    Dark--gb-dark-danger-textoklch(85% 0.1 25)
  • --color-danger-borderbg-danger-border text-danger-border border-danger-border
    Light--gb-danger-baseoklch(55% 0.21 25)
    Dark--gb-danger-baseoklch(55% 0.21 25)
  • --color-danger-solidbg-danger-solid text-danger-solid border-danger-solid
    Light--gb-danger-baseoklch(55% 0.21 25)
    Dark--gb-dark-danger-solidoklch(62% 0.21 25)
  • --color-danger-solid-hoverbg-danger-solid-hover text-danger-solid-hover border-danger-solid-hover
    Light--gb-danger-strongoklch(33% 0.14 25)
    Dark--gb-dark-danger-solid-hoveroklch(68% 0.2 25)
  • --color-info-bgbg-info-bg text-info-bg border-info-bg
    Light--gb-info-subtleoklch(95% 0.03 230)
    Dark--gb-dark-info-bgcolor-mix(in oklch, var(--gb-info-strong) 30%, var(--gb-neutral-900))
  • --color-info-textbg-info-text text-info-text border-info-text
    Light--gb-info-strongoklch(33% 0.1 230)
    Dark--gb-dark-info-textoklch(85% 0.08 230)
  • --color-info-borderbg-info-border text-info-border border-info-border
    Light--gb-info-baseoklch(55% 0.14 230)
    Dark--gb-info-baseoklch(55% 0.14 230)

Scrim

The dimmed page behind a dialog, sheet or drawer. Never under text.

  • --color-scrimbg-scrim text-scrim border-scrim

    neutral-950 at 50%; a literal: color-mix would get an opaque build fallback

    Lightoklch(10% 0.003 0 / 0.5)
    Dark--gb-dark-scrimoklch(10% 0.003 0 / 0.65)

Chart series

Non-text: at least 3:1 on surface and surface-raised (WCAG 1.4.11). A chart never relies on color alone: the legend and tooltip name each series.

  • --color-chart-1bg-chart-1 text-chart-1 border-chart-1
    Light--gb-brand-600oklch(50% 0.17 255)
    Dark--gb-brand-500oklch(58% 0.17 255)
  • --color-chart-2bg-chart-2 text-chart-2 border-chart-2
    Light--gb-success-baseoklch(55% 0.15 149)
    Dark--gb-success-baseoklch(55% 0.15 149)
  • --color-chart-3bg-chart-3 text-chart-3 border-chart-3
    Light--gb-warning-baseoklch(62% 0.17 70)
    Dark--gb-warning-baseoklch(62% 0.17 70)
  • --color-chart-4bg-chart-4 text-chart-4 border-chart-4
    Light--gb-info-baseoklch(55% 0.14 230)
    Dark--gb-info-baseoklch(55% 0.14 230)
  • --color-chart-5bg-chart-5 text-chart-5 border-chart-5
    Light--gb-danger-baseoklch(55% 0.21 25)
    Dark--gb-danger-baseoklch(55% 0.21 25)

Code syntax

Text: at least 4.5:1 on surface-sunken, comments included. Plain code uses --color-text.

  • --color-syntax-keywordbg-syntax-keyword text-syntax-keyword border-syntax-keyword
    Lightoklch(45% 0.19 300)
    Dark--gb-dark-syntax-keywordoklch(78% 0.12 300)
  • --color-syntax-stringbg-syntax-string text-syntax-string border-syntax-string
    Lightoklch(45% 0.13 149)
    Dark--gb-dark-syntax-stringoklch(80% 0.13 149)
  • --color-syntax-numberbg-syntax-number text-syntax-number border-syntax-number
    Lightoklch(45% 0.12 230)
    Dark--gb-dark-syntax-numberoklch(78% 0.11 230)
  • --color-syntax-functionbg-syntax-function text-syntax-function border-syntax-function
    Lightoklch(45% 0.17 255)
    Dark--gb-dark-syntax-functionoklch(76% 0.12 255)
  • --color-syntax-constantbg-syntax-constant text-syntax-constant border-syntax-constant
    Lightoklch(47% 0.13 55)
    Dark--gb-dark-syntax-constantoklch(80% 0.12 65)
  • --color-syntax-commentbg-syntax-comment text-syntax-comment border-syntax-comment
    Lightoklch(48% 0.003 0)
    Dark--gb-dark-syntax-commentoklch(68% 0.003 0)
  • --color-syntax-punctuationbg-syntax-punctuation text-syntax-punctuation border-syntax-punctuation
    Lightoklch(40% 0.003 0)
    Dark--gb-dark-syntax-punctuationoklch(75% 0.003 0)

Typography

Named type roles. Each utility sets the size and line height, and the heading and label roles also set the weight. Values are the mobile base.

  • --type-displaytext-display

    Ship the brief, not the guesswork

    1.875rem · 30px / 2.25rem · 36px / 700

  • --type-h1text-h1

    Ship the brief, not the guesswork

    1.5rem · 24px / 2rem · 32px / 700

  • --type-h2text-h2

    Ship the brief, not the guesswork

    1.25rem · 20px / 1.75rem · 28px / 600

  • --type-h3text-h3

    Ship the brief, not the guesswork

    1.125rem · 18px / 1.75rem · 28px / 600

  • --type-h4text-h4

    Ship the brief, not the guesswork

    1rem · 16px / 1.5rem · 24px / 600

  • --type-bodytext-body

    Ship the brief, not the guesswork

    1rem · 16px / 1.5rem · 24px / 400

  • --type-body-smtext-body-sm

    Ship the brief, not the guesswork

    0.875rem · 14px / 1.25rem · 20px / 400

  • --type-labeltext-label

    Ship the brief, not the guesswork

    0.875rem · 14px / 1.25rem · 20px / 500

  • --type-metadatatext-metadata

    Ship the brief, not the guesswork

    0.75rem · 12px / 1rem · 16px / 400

  • --type-datatext-data

    Ship the brief, not the guesswork

    0.875rem · 14px / 1.25rem · 20px / 400

Families

  • --font-sansfont-sans

    Ship the brief, not the guesswork

    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"

  • --font-monofont-mono

    Ship the brief, not the guesswork

    ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace

Spacing

One 4px scale for padding, margin and gap. It's Tailwind's own default scale, so the step number is the utility: --space-4 is p-4, gap-4, m-4.

  • --space-00rem · 0pxp-0 gap-0
  • --space-10.25rem · 4pxp-1 gap-1
  • --space-20.5rem · 8pxp-2 gap-2
  • --space-30.75rem · 12pxp-3 gap-3
  • --space-41rem · 16pxp-4 gap-4
  • --space-51.25rem · 20pxp-5 gap-5
  • --space-61.5rem · 24pxp-6 gap-6
  • --space-82rem · 32pxp-8 gap-8
  • --space-102.5rem · 40pxp-10 gap-10
  • --space-123rem · 48pxp-12 gap-12
  • --space-164rem · 64pxp-16 gap-16
  • --space-205rem · 80pxp-20 gap-20
  • --space-246rem · 96pxp-24 gap-24
  • --space-328rem · 128pxp-32 gap-32

Control and icon sizes

  • --size-control-sm2rem · 32px
  • --size-control-md2.75rem · 44px
  • --size-control-lg3rem · 48px
  • --size-icon-sm1rem · 16px
  • --size-icon-md1.25rem · 20px
  • --size-icon-lg1.5rem · 24px
  • --size-touch-target-min2.75rem · 44px

Radii, borders and shadows

Kept restrained: most surfaces have no shadow, and the shadow steps are for popovers and dialogs. Shadows follow the viewer's theme (they're darker in dark mode), so these previews show the current one.

Corner radius

  • --radius-none0px
  • --radius-sm0.25rem · 4pxrounded-sm4px — inputs, small controls
  • --radius-md0.5rem · 8pxrounded-md8px — buttons, cards (default)
  • --radius-lg0.75rem · 12pxrounded-lg12px — larger containers, dialogs
  • --radius-xl1rem · 16pxrounded-xl16px — rare, large surfaces only
  • --radius-full9999pxpills, avatars, dots

Border width and focus ring

  • --border-width-thin1px
  • --border-width-thick2px
  • --focus-ring-width2px
  • --focus-ring-offset2px

Shadows

  • --shadow-nonenone
  • --shadow-sm0 1px 2px 0 oklch(0% 0 0 / 0.05)shadow-sm
  • --shadow-md0 2px 8px 0 oklch(0% 0 0 / 0.08), 0 1px 2px 0 oklch(0% 0 0 / 0.04)shadow-md
  • --shadow-lg0 8px 24px 0 oklch(0% 0 0 / 0.12), 0 2px 4px 0 oklch(0% 0 0 / 0.04)shadow-lg

Motion

Durations and easings. With prefers-reduced-motion on, every duration collapses to near zero in the token file, so anything using them stops travelling.

Runs once per press. With reduced motion on, the dots jump instead of travelling.

Durations

  • --duration-fast100ms · press feedback, tap stateduration-fast
  • --duration-base200ms · default transitions (hover, color, opacity)duration-base
  • --duration-slow350ms · enter/exit of larger elements (dialog, drawer)duration-slow

Easings (over the slow duration)

  • --ease-standardcubic-bezier(0.2, 0, 0, 1) · default — decelerate inease-standard
  • --ease-incubic-bezier(0.3, 0, 1, 1) · exits — accelerate out
  • --ease-outcubic-bezier(0, 0, 0, 1) · entrances
  • --ease-springcubic-bezier(0.34, 1.56, 0.64, 1) · selection/press only — use sparinglyease-spring

Primitives

The raw scales the color roles are built from. They're private to colors.css: components never use them directly, so reach for a color role instead.

neutral

  • 0oklch(100% 0 0)
  • 50oklch(98% 0.001 0)
  • 100oklch(96% 0.001 0)
  • 200oklch(91% 0.002 0)
  • 300oklch(83% 0.002 0)
  • 400oklch(65% 0.003 0)
  • 500oklch(52% 0.003 0)
  • 600oklch(43% 0.003 0)
  • 700oklch(34% 0.003 0)
  • 800oklch(24% 0.003 0)
  • 900oklch(16% 0.003 0)
  • 950oklch(10% 0.003 0)

brand

  • 50oklch(97% 0.02 255)
  • 100oklch(93% 0.045 255)
  • 200oklch(86% 0.08 255)
  • 300oklch(77% 0.11 255)
  • 400oklch(68% 0.14 255)
  • 500oklch(58% 0.17 255)
  • 600oklch(50% 0.17 255)
  • 700oklch(42% 0.15 255)
  • 800oklch(34% 0.12 255)
  • 900oklch(27% 0.09 255)

success

  • subtleoklch(95% 0.05 149)
  • baseoklch(55% 0.15 149)
  • strongoklch(32% 0.1 149)

warning

  • subtleoklch(96% 0.07 89)
  • baseoklch(62% 0.17 70)
  • strongoklch(38% 0.11 55)

danger

  • subtleoklch(95% 0.04 25)
  • baseoklch(55% 0.21 25)
  • strongoklch(33% 0.14 25)

info

  • subtleoklch(95% 0.03 230)
  • baseoklch(55% 0.14 230)
  • strongoklch(33% 0.1 230)

Reference

Every custom property in the pack's tokens/ folder, by file, including the dark-value aliases, the Tailwind wiring and the shadcn bridge.

Show all 329 custom properties

colors.css

Custom properties in tokens/colors.css
TokenLightDark
--gb-neutral-0oklch(100% 0 0)—
--gb-neutral-50oklch(98% 0.001 0)—
--gb-neutral-100oklch(96% 0.001 0)—
--gb-neutral-200oklch(91% 0.002 0)—
--gb-neutral-300oklch(83% 0.002 0)—
--gb-neutral-400oklch(65% 0.003 0)—
--gb-neutral-500oklch(52% 0.003 0)—
--gb-neutral-600oklch(43% 0.003 0)—
--gb-neutral-700oklch(34% 0.003 0)—
--gb-neutral-800oklch(24% 0.003 0)—
--gb-neutral-900oklch(16% 0.003 0)—
--gb-neutral-950oklch(10% 0.003 0)—
--gb-brand-50oklch(97% 0.02 255)—
--gb-brand-100oklch(93% 0.045 255)—
--gb-brand-200oklch(86% 0.08 255)—
--gb-brand-300oklch(77% 0.11 255)—
--gb-brand-400oklch(68% 0.14 255)—
--gb-brand-500oklch(58% 0.17 255)—
--gb-brand-600oklch(50% 0.17 255)—
--gb-brand-700oklch(42% 0.15 255)—
--gb-brand-800oklch(34% 0.12 255)—
--gb-brand-900oklch(27% 0.09 255)—
--gb-success-subtleoklch(95% 0.05 149)—
--gb-success-baseoklch(55% 0.15 149)—
--gb-success-strongoklch(32% 0.1 149)—
--gb-warning-subtleoklch(96% 0.07 89)—
--gb-warning-baseoklch(62% 0.17 70)—
--gb-warning-strongoklch(38% 0.11 55)—
--gb-danger-subtleoklch(95% 0.04 25)—
--gb-danger-baseoklch(55% 0.21 25)—
--gb-danger-strongoklch(33% 0.14 25)—
--gb-info-subtleoklch(95% 0.03 230)—
--gb-info-baseoklch(55% 0.14 230)—
--gb-info-strongoklch(33% 0.1 230)—
--gb-dark-bgvar(--gb-neutral-950)—
--gb-dark-surfacevar(--gb-neutral-900)—
--gb-dark-surface-raisedvar(--gb-neutral-800)—
--gb-dark-surface-sunkenvar(--gb-neutral-950)—
--gb-dark-textvar(--gb-neutral-50)—
--gb-dark-text-secondaryvar(--gb-neutral-400)—
--gb-dark-text-disabledvar(--gb-neutral-600)—
--gb-dark-on-brandvar(--gb-neutral-950)—
--gb-dark-bordervar(--gb-neutral-700)—
--gb-dark-border-strongoklch(56% 0.003 0)—
--gb-dark-brandvar(--gb-brand-400)—
--gb-dark-brand-hovervar(--gb-brand-300)—
--gb-dark-brand-activevar(--gb-brand-200)—
--gb-dark-brand-subtlevar(--gb-brand-900)—
--gb-dark-interactivevar(--gb-neutral-700)—
--gb-dark-interactive-hovervar(--gb-neutral-600)—
--gb-dark-interactive-activevar(--gb-neutral-500)—
--gb-dark-focus-ringvar(--gb-brand-300)—
--gb-dark-success-bgcolor-mix(in oklch, var(--gb-success-strong) 30%, var(--gb-neutral-900))—
--gb-dark-success-textoklch(85% 0.1 149)—
--gb-dark-success-bordervar(--gb-success-base)—
--gb-dark-warning-bgcolor-mix(in oklch, var(--gb-warning-strong) 30%, var(--gb-neutral-900))—
--gb-dark-warning-textoklch(88% 0.1 80)—
--gb-dark-warning-bordervar(--gb-warning-base)—
--gb-dark-danger-bgcolor-mix(in oklch, var(--gb-danger-strong) 30%, var(--gb-neutral-900))—
--gb-dark-danger-textoklch(85% 0.1 25)—
--gb-dark-danger-bordervar(--gb-danger-base)—
--gb-dark-danger-solidoklch(62% 0.21 25)—
--gb-dark-danger-solid-hoveroklch(68% 0.2 25)—
--gb-dark-info-bgcolor-mix(in oklch, var(--gb-info-strong) 30%, var(--gb-neutral-900))—
--gb-dark-info-textoklch(85% 0.08 230)—
--gb-dark-info-bordervar(--gb-info-base)—
--gb-dark-scrimoklch(10% 0.003 0 / 0.65)—
--gb-dark-chart-1var(--gb-brand-500)—
--gb-dark-syntax-keywordoklch(78% 0.12 300)—
--gb-dark-syntax-stringoklch(80% 0.13 149)—
--gb-dark-syntax-numberoklch(78% 0.11 230)—
--gb-dark-syntax-functionoklch(76% 0.12 255)—
--gb-dark-syntax-constantoklch(80% 0.12 65)—
--gb-dark-syntax-commentoklch(68% 0.003 0)—
--gb-dark-syntax-punctuationoklch(75% 0.003 0)—
--color-bgvar(--gb-neutral-0)var(--gb-dark-bg)
--color-surfacevar(--gb-neutral-50)var(--gb-dark-surface)
--color-surface-raisedvar(--gb-neutral-0)var(--gb-dark-surface-raised)
--color-surface-sunkenvar(--gb-neutral-100)var(--gb-dark-surface-sunken)
--color-textvar(--gb-neutral-900)var(--gb-dark-text)
--color-text-secondaryvar(--gb-neutral-600)var(--gb-dark-text-secondary)
--color-text-disabledvar(--gb-neutral-400)var(--gb-dark-text-disabled)
--color-on-brandvar(--gb-neutral-0)var(--gb-dark-on-brand)
--color-bordervar(--gb-neutral-200)var(--gb-dark-border)
--color-border-strongvar(--gb-neutral-400)var(--gb-dark-border-strong)
--color-brandvar(--gb-brand-600)var(--gb-dark-brand)
--color-brand-hovervar(--gb-brand-700)var(--gb-dark-brand-hover)
--color-brand-activevar(--gb-brand-800)var(--gb-dark-brand-active)
--color-brand-subtlevar(--gb-brand-50)var(--gb-dark-brand-subtle)
--color-interactivevar(--gb-neutral-100)var(--gb-dark-interactive)
--color-interactive-hovervar(--gb-neutral-200)var(--gb-dark-interactive-hover)
--color-interactive-activevar(--gb-neutral-300)var(--gb-dark-interactive-active)
--color-focus-ringvar(--gb-brand-500)var(--gb-dark-focus-ring)
--color-success-bgvar(--gb-success-subtle)var(--gb-dark-success-bg)
--color-success-textvar(--gb-success-strong)var(--gb-dark-success-text)
--color-success-bordervar(--gb-success-base)var(--gb-dark-success-border)
--color-warning-bgvar(--gb-warning-subtle)var(--gb-dark-warning-bg)
--color-warning-textvar(--gb-warning-strong)var(--gb-dark-warning-text)
--color-warning-bordervar(--gb-warning-base)var(--gb-dark-warning-border)
--color-danger-bgvar(--gb-danger-subtle)var(--gb-dark-danger-bg)
--color-danger-textvar(--gb-danger-strong)var(--gb-dark-danger-text)
--color-danger-bordervar(--gb-danger-base)var(--gb-dark-danger-border)
--color-danger-solidvar(--gb-danger-base)var(--gb-dark-danger-solid)
--color-danger-solid-hovervar(--gb-danger-strong)var(--gb-dark-danger-solid-hover)
--color-info-bgvar(--gb-info-subtle)var(--gb-dark-info-bg)
--color-info-textvar(--gb-info-strong)var(--gb-dark-info-text)
--color-info-bordervar(--gb-info-base)var(--gb-dark-info-border)
--color-scrimoklch(10% 0.003 0 / 0.5)var(--gb-dark-scrim)
--color-chart-1var(--gb-brand-600)var(--gb-dark-chart-1)
--color-chart-2var(--gb-success-base)—
--color-chart-3var(--gb-warning-base)—
--color-chart-4var(--gb-info-base)—
--color-chart-5var(--gb-danger-base)—
--color-syntax-keywordoklch(45% 0.19 300)var(--gb-dark-syntax-keyword)
--color-syntax-stringoklch(45% 0.13 149)var(--gb-dark-syntax-string)
--color-syntax-numberoklch(45% 0.12 230)var(--gb-dark-syntax-number)
--color-syntax-functionoklch(45% 0.17 255)var(--gb-dark-syntax-function)
--color-syntax-constantoklch(47% 0.13 55)var(--gb-dark-syntax-constant)
--color-syntax-commentoklch(48% 0.003 0)var(--gb-dark-syntax-comment)
--color-syntax-punctuationoklch(40% 0.003 0)var(--gb-dark-syntax-punctuation)

motion.css

Custom properties in tokens/motion.css
TokenValue
--duration-fast100ms
--duration-base200ms
--duration-slow350ms
--ease-standardcubic-bezier(0.2, 0, 0, 1)
--ease-incubic-bezier(0.3, 0, 1, 1)
--ease-outcubic-bezier(0, 0, 0, 1)
--ease-springcubic-bezier(0.34, 1.56, 0.64, 1)

radii-shadows.css

Custom properties in tokens/radii-shadows.css
TokenLightDark
--radius-none0px—
--radius-sm0.25rem—
--radius-md0.5rem—
--radius-lg0.75rem—
--radius-xl1rem—
--radius-full9999px—
--border-width-thin1px—
--border-width-thick2px—
--shadow-nonenone—
--shadow-sm0 1px 2px 0 oklch(0% 0 0 / 0.05)0 1px 2px 0 oklch(0% 0 0 / 0.3)
--shadow-md0 2px 8px 0 oklch(0% 0 0 / 0.08), 0 1px 2px 0 oklch(0% 0 0 / 0.04)0 2px 8px 0 oklch(0% 0 0 / 0.4), 0 1px 2px 0 oklch(0% 0 0 / 0.3)
--shadow-lg0 8px 24px 0 oklch(0% 0 0 / 0.12), 0 2px 4px 0 oklch(0% 0 0 / 0.04)0 8px 24px 0 oklch(0% 0 0 / 0.5), 0 2px 4px 0 oklch(0% 0 0 / 0.3)
--focus-ring-width2px—
--focus-ring-offset2px—

shadcn-theme.css

Custom properties in tokens/shadcn-theme.css
TokenLightDark
--backgroundoklch(100% 0 0)oklch(10% 0.003 0)
--foregroundoklch(16% 0.003 0)oklch(98% 0.001 0)
--cardoklch(100% 0 0)oklch(24% 0.003 0)
--card-foregroundoklch(16% 0.003 0)oklch(98% 0.001 0)
--popoveroklch(100% 0 0)oklch(24% 0.003 0)
--popover-foregroundoklch(16% 0.003 0)oklch(98% 0.001 0)
--primaryoklch(50% 0.17 255)oklch(68% 0.14 255)
--primary-foregroundoklch(100% 0 0)oklch(10% 0.003 0)
--secondaryoklch(96% 0.001 0)oklch(34% 0.003 0)
--secondary-foregroundoklch(16% 0.003 0)oklch(98% 0.001 0)
--mutedoklch(96% 0.001 0)oklch(16% 0.003 0)
--muted-foregroundoklch(43% 0.003 0)oklch(65% 0.003 0)
--accentoklch(91% 0.002 0)oklch(43% 0.003 0)
--accent-foregroundoklch(16% 0.003 0)oklch(98% 0.001 0)
--destructiveoklch(33% 0.14 25)oklch(85% 0.1 25)
--borderoklch(91% 0.002 0)oklch(34% 0.003 0)
--inputoklch(65% 0.003 0)oklch(56% 0.003 0)
--ringoklch(58% 0.17 255)oklch(77% 0.11 255)
--chart-1oklch(50% 0.17 255)oklch(58% 0.17 255)
--chart-2oklch(55% 0.15 149)oklch(55% 0.15 149)
--chart-3oklch(62% 0.17 70)oklch(62% 0.17 70)
--chart-4oklch(55% 0.14 230)oklch(55% 0.14 230)
--chart-5oklch(55% 0.21 25)oklch(55% 0.21 25)
--sidebaroklch(98% 0.001 0)oklch(16% 0.003 0)
--sidebar-foregroundoklch(16% 0.003 0)oklch(98% 0.001 0)
--sidebar-primaryoklch(50% 0.17 255)oklch(68% 0.14 255)
--sidebar-primary-foregroundoklch(100% 0 0)oklch(10% 0.003 0)
--sidebar-accentoklch(91% 0.002 0)oklch(43% 0.003 0)
--sidebar-accent-foregroundoklch(16% 0.003 0)oklch(98% 0.001 0)
--sidebar-borderoklch(91% 0.002 0)oklch(34% 0.003 0)
--sidebar-ringoklch(58% 0.17 255)oklch(77% 0.11 255)
--radius0.5rem—

spacing.css

Custom properties in tokens/spacing.css
TokenValue
--space-00rem
--space-10.25rem
--space-20.5rem
--space-30.75rem
--space-41rem
--space-51.25rem
--space-61.5rem
--space-82rem
--space-102.5rem
--space-123rem
--space-164rem
--space-205rem
--space-246rem
--space-328rem
--size-control-sm2rem
--size-control-md2.75rem
--size-control-lg3rem
--size-icon-sm1rem
--size-icon-md1.25rem
--size-icon-lg1.5rem
--size-touch-target-min2.75rem

tailwind-theme.css

Custom properties in tokens/tailwind-theme.css
TokenValue
--color-bgvar(--color-bg)
--color-surfacevar(--color-surface)
--color-surface-raisedvar(--color-surface-raised)
--color-surface-sunkenvar(--color-surface-sunken)
--color-textvar(--color-text)
--color-text-secondaryvar(--color-text-secondary)
--color-text-disabledvar(--color-text-disabled)
--color-on-brandvar(--color-on-brand)
--color-bordervar(--color-border)
--color-border-strongvar(--color-border-strong)
--color-brandvar(--color-brand)
--color-brand-hovervar(--color-brand-hover)
--color-brand-activevar(--color-brand-active)
--color-brand-subtlevar(--color-brand-subtle)
--color-interactivevar(--color-interactive)
--color-interactive-hovervar(--color-interactive-hover)
--color-interactive-activevar(--color-interactive-active)
--color-focus-ringvar(--color-focus-ring)
--color-success-bgvar(--color-success-bg)
--color-success-textvar(--color-success-text)
--color-success-bordervar(--color-success-border)
--color-warning-bgvar(--color-warning-bg)
--color-warning-textvar(--color-warning-text)
--color-warning-bordervar(--color-warning-border)
--color-danger-bgvar(--color-danger-bg)
--color-danger-textvar(--color-danger-text)
--color-danger-bordervar(--color-danger-border)
--color-danger-solidvar(--color-danger-solid)
--color-danger-solid-hovervar(--color-danger-solid-hover)
--color-info-bgvar(--color-info-bg)
--color-info-textvar(--color-info-text)
--color-info-bordervar(--color-info-border)
--color-scrimvar(--color-scrim)
--color-chart-1var(--color-chart-1)
--color-chart-2var(--color-chart-2)
--color-chart-3var(--color-chart-3)
--color-chart-4var(--color-chart-4)
--color-chart-5var(--color-chart-5)
--color-syntax-keywordvar(--color-syntax-keyword)
--color-syntax-stringvar(--color-syntax-string)
--color-syntax-numbervar(--color-syntax-number)
--color-syntax-functionvar(--color-syntax-function)
--color-syntax-constantvar(--color-syntax-constant)
--color-syntax-commentvar(--color-syntax-comment)
--color-syntax-punctuationvar(--color-syntax-punctuation)
--font-sansvar(--font-sans)
--font-monovar(--font-mono)
--text-displayvar(--type-display-size)
--text-display--line-heightvar(--type-display-leading)
--text-display--font-weightvar(--type-display-weight)
--text-h1var(--type-h1-size)
--text-h1--line-heightvar(--type-h1-leading)
--text-h1--font-weightvar(--type-h1-weight)
--text-h2var(--type-h2-size)
--text-h2--line-heightvar(--type-h2-leading)
--text-h2--font-weightvar(--type-h2-weight)
--text-h3var(--type-h3-size)
--text-h3--line-heightvar(--type-h3-leading)
--text-h3--font-weightvar(--type-h3-weight)
--text-h4var(--type-h4-size)
--text-h4--line-heightvar(--type-h4-leading)
--text-h4--font-weightvar(--type-h4-weight)
--text-bodyvar(--type-body-size)
--text-body--line-heightvar(--type-body-leading)
--text-body-smvar(--type-body-sm-size)
--text-body-sm--line-heightvar(--type-body-sm-leading)
--text-labelvar(--type-label-size)
--text-label--line-heightvar(--type-label-leading)
--text-label--font-weightvar(--type-label-weight)
--text-metadatavar(--type-metadata-size)
--text-metadata--line-heightvar(--type-metadata-leading)
--text-datavar(--type-data-size)
--text-data--line-heightvar(--type-data-leading)
--radius-smvar(--radius-sm)
--radius-mdvar(--radius-md)
--radius-lgvar(--radius-lg)
--radius-xlvar(--radius-xl)
--shadow-smvar(--shadow-sm)
--shadow-mdvar(--shadow-md)
--shadow-lgvar(--shadow-lg)
--transition-duration-fastvar(--duration-fast)
--transition-duration-basevar(--duration-base)
--transition-duration-slowvar(--duration-slow)
--ease-standardvar(--ease-standard)
--ease-springvar(--ease-spring)

typography.css

Custom properties in tokens/typography.css
TokenValue
--font-sansui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"
--font-monoui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace
--font-weight-regular400
--font-weight-medium500
--font-weight-semibold600
--font-weight-bold700
--text-xs-size0.75rem
--text-xs-leading1rem
--text-sm-size0.875rem
--text-sm-leading1.25rem
--text-base-size1rem
--text-base-leading1.5rem
--text-lg-size1.125rem
--text-lg-leading1.75rem
--text-xl-size1.25rem
--text-xl-leading1.75rem
--text-2xl-size1.5rem
--text-2xl-leading2rem
--text-3xl-size1.875rem
--text-3xl-leading2.25rem
--type-display-sizevar(--text-3xl-size)
--type-display-leadingvar(--text-3xl-leading)
--type-display-weightvar(--font-weight-bold)
--type-h1-sizevar(--text-2xl-size)
--type-h1-leadingvar(--text-2xl-leading)
--type-h1-weightvar(--font-weight-bold)
--type-h2-sizevar(--text-xl-size)
--type-h2-leadingvar(--text-xl-leading)
--type-h2-weightvar(--font-weight-semibold)
--type-h3-sizevar(--text-lg-size)
--type-h3-leadingvar(--text-lg-leading)
--type-h3-weightvar(--font-weight-semibold)
--type-h4-sizevar(--text-base-size)
--type-h4-leadingvar(--text-base-leading)
--type-h4-weightvar(--font-weight-semibold)
--type-body-sizevar(--text-base-size)
--type-body-leadingvar(--text-base-leading)
--type-body-weightvar(--font-weight-regular)
--type-body-sm-sizevar(--text-sm-size)
--type-body-sm-leadingvar(--text-sm-leading)
--type-body-sm-weightvar(--font-weight-regular)
--type-label-sizevar(--text-sm-size)
--type-label-leadingvar(--text-sm-leading)
--type-label-weightvar(--font-weight-medium)
--type-metadata-sizevar(--text-xs-size)
--type-metadata-leadingvar(--text-xs-leading)
--type-metadata-weightvar(--font-weight-regular)
--type-data-sizevar(--text-sm-size)
--type-data-leadingvar(--text-sm-leading)
--type-data-weightvar(--font-weight-regular)