_Themes

Semanatic Token

Context badgeData-theme: Dark

Conversation Title

Prompt Output

  • Light theme Card

    Description

  • Dark theme Card

    Description

_Color

Token architecture

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.7387 0.164 39.57)oklch(98.76% 0.0055 86.2)oklch(55.2% 0.016 285.938)
→
Tier 2

Primitive scale tokens

--color-{scale}-{step}
--color-brand-500--color-dune-50--color-neutral-975
→
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-raisedsurface-overlaytext-on-brandicon-on-brand
text-on-brandicon-on-brand

black

--color-black
text-heading
—

neutral

--color-neutral-25
surface-subtle
—
--color-neutral-50
surface-canvassurface-defaulttext-on-inverse
text-defaulttext-heading
--color-neutral-75
border-muted
—
--color-neutral-100
surface-mutedsurface-sunken
surface-inverse
--color-neutral-200
border-default
—
--color-neutral-300
border-strong
—
--color-neutral-400
text-subtleicon-muted
text-mutedicon-default
--color-neutral-500
text-muted
text-subtleicon-muted
--color-neutral-600
icon-default
border-strong
--color-neutral-700
—
surface-overlayborder-default
--color-neutral-800
—
surface-raisedborder-muted
--color-neutral-900
surface-inversetext-default
surface-subtle
--color-neutral-950
—
surface-defaulttext-on-inverse
--color-neutral-975
—
surface-canvassurface-mutedsurface-sunken

brand

--color-brand-50
surface-brand-subtle
—
--color-brand-300
—
text-link-hover
--color-brand-400
—
text-linkborder-focusicon-brand
--color-brand-500
surface-brandtext-brandtext-linkborder-brandborder-focusicon-brand
—
--color-brand-600
—
surface-brandtext-brandborder-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
—

_Color

Semantic tokens

Every color variable and semantic alias in the system. Resolution chain shows how each semantic token resolves in both themes.
01Semantic tokens — light & dark

☀ Light

data-theme="light"

Surfaces

surface-canvas

--color-surface-canvas

surface-default

--color-surface-default

surface-subtle

--color-surface-subtle

surface-muted

--color-surface-muted

surface-sunken

--color-surface-sunken

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-canvas

--color-surface-canvas

surface-default

--color-surface-default

surface-subtle

--color-surface-subtle

surface-muted

--color-surface-muted

surface-sunken

--color-surface-sunken

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

_color

Primitive color scales

Every color variable and semantic alias in the system. Resolution chain shows how each semantic token resolves in both themes.
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

Custom project scales

50
100
200
300
400
500
600
700
800
900
950

Semantic aliases (generated scales)

50
100
200
300
400
500
600
700
800
900
950

Tailwind palette (color.css)

50
100
200
300
400
500
600
700
800
900
950

Custom neutral variants

_Color

Semantic tokens

Every color variable and semantic alias in the system. Resolution chain shows how each semantic token resolves in both themes.
01Semantic tokens — light & dark

☀ Light

data-theme="light"

Surfaces

surface-canvas

--color-surface-canvas

surface-default

--color-surface-default

surface-subtle

--color-surface-subtle

surface-muted

--color-surface-muted

surface-sunken

--color-surface-sunken

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-canvas

--color-surface-canvas

surface-default

--color-surface-default

surface-subtle

--color-surface-subtle

surface-muted

--color-surface-muted

surface-sunken

--color-surface-sunken

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

_Color

Token resolution chain

Every color variable and semantic alias in the system. Resolution chain shows how each semantic token resolves in both themes.
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-canvas
→var(--color-neutral-50)
→var(--color-neutral-975)
Surface
--color-surface-default
→var(--color-neutral-50)
→var(--color-neutral-950)
Surface
--color-surface-subtle
→var(--color-neutral-25)
→var(--color-neutral-900)
Surface
--color-surface-muted
→var(--color-neutral-100)
→var(--color-neutral-975)
Surface
--color-surface-sunken
→var(--color-neutral-100)
→var(--color-neutral-975)
Surface
--color-surface-raised
→var(--color-white)
→var(--color-neutral-800)
Surface
--color-surface-overlay
→var(--color-white)
→var(--color-neutral-700)
Surface
--color-surface-brand
→var(--color-brand-500)
→var(--color-brand-600)
Surface
--color-surface-brand-subtle
→var(--color-brand-50)
→var(--color-brand-950)
Surface
--color-surface-inverse
→var(--color-neutral-900)
→var(--color-neutral-100)

Text

CatSemantic variableLight → primitiveDark → primitive
Text
--color-text-default
→var(--color-neutral-900)
→var(--color-neutral-50)
Text
--color-text-muted
→var(--color-neutral-500)
→var(--color-neutral-400)
Text
--color-text-subtle
→var(--color-neutral-400)
→var(--color-neutral-500)
Text
--color-text-brand
→var(--color-brand-500)
→var(--color-brand-600)
Text
--color-text-on-brand
→var(--color-white)
→var(--color-white)
Text
--color-text-on-inverse
→var(--color-neutral-50)
→var(--color-neutral-950)
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
→var(--color-black)
→var(--color-neutral-50)
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-neutral-200)
→var(--color-neutral-700)
Border
--color-border-muted
→var(--color-neutral-75)
→var(--color-neutral-800)
Border
--color-border-strong
→var(--color-neutral-300)
→var(--color-neutral-600)
Border
--color-border-brand
→var(--color-brand-500)
→var(--color-brand-600)
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-neutral-600)
→var(--color-neutral-400)
Icon
--color-icon-muted
→var(--color-neutral-400)
→var(--color-neutral-500)
Icon
--color-icon-brand
→var(--color-brand-500)
→var(--color-brand-400)
Icon
--color-icon-on-brand
→var(--color-white)
→var(--color-white)

_Feature Catalog Section

Feature Catalog Section

01

Token system

Color primitives

OKLCH-based palette with perceptual uniformity across the full scale.

Semantic aliases

Surface, text, border, and icon tokens that switch automatically in dark mode.

Typography tokens

Fluid clamp() scale with axis defaults for variable font optical sizing.

text-display-xl

Spatial system

Four-step modular spacing scale exposed as CSS custom properties.

gap-section-gap
02

Developer experience

TypeGen

Zero-drift TypeScript types auto-generated from the Sanity schema.

npm run sanity:typegen

Tailwind v4 CSS-first

No tailwind.config.ts. All theme values live in globals.css @theme blocks.

Live Content API

Real-time Sanity previews via sanityFetch() and the SanityLive component.

_Demo

Agent Use Case Hero

Alt Text

Page Builder Blocks - Surface variant: Light

  • Title

    True scalability requires abstracting presentation from purpose. The system separates raw primitive values from semantic intent.

  • Title 2

    This abstraction layer enables rapid theming, effortless dark mode integration, and systemic visual updates without ever fracturing the underlying component logic.

  • Decisions as Data

    The foundation of this architecture relies entirely on design tokens. By translating arbitrary visual decisions into structured, machine-readable data, the system ensures uncompromising cross-platform parity.

  • Title 3

    Hardcoded values are eliminated, establishing a single source of truth that securely bridges the divide between design intent and engineering execution.

_Default Theme

Feature Showcase Section

  1. 01

    Title size:sm 1

    They help teams move faster, reduce inconsistencies, and maintain quality as products grow. By documenting clear guidelines and reusable elements, design systems align designers and developers, making it easier to build cohesive, scalable experiences across platforms.

  2. 02

    Title size:sm 2

    Design systems bring order to digital products by unifying components, styles, and interaction patterns into a shared language.

  3. 03

    Title size:sm 3

    Design systems unify components, styles, and guidelines to create consistent, scalable digital product experiences.

  4. 04

    Title size:sm 4

    Translating "Design Systems at Scale" to Spanish. Preserving all references, slugs, and schema integrity. Review draft ready in 30 seconds.

    • Typography
    • Colors
    • Spacing
  1. 01

    Title size:md 1

    They help teams move faster, reduce inconsistencies, and maintain quality as products grow. By documenting clear guidelines and reusable elements, design systems align designers and developers, making it easier to build cohesive, scalable experiences across platforms.

  2. 02

    Title size:md 2

    Design systems bring order to digital products by unifying components, styles, and interaction patterns into a shared language.

  3. 03

    Title size:md 3

    Design systems unify components, styles, and guidelines to create consistent, scalable digital product experiences.

  4. 04

    Title size:md 4

    Translating "Design Systems at Scale" to Spanish. Preserving all references, slugs, and schema integrity. Review draft ready in 30 seconds.

    • Typography
    • Colors
    • Spacing
  1. 01

    Title size:lg 1

    They help teams move faster, reduce inconsistencies, and maintain quality as products grow. By documenting clear guidelines and reusable elements, design systems align designers and developers, making it easier to build cohesive, scalable experiences across platforms.

  2. 02

    Title size:lg 2

    Design systems bring order to digital products by unifying components, styles, and interaction patterns into a shared language.

  3. 03

    Title size:lg 3

    Design systems unify components, styles, and guidelines to create consistent, scalable digital product experiences.

  4. 04

    Title size:lg 4

    Translating "Design Systems at Scale" to Spanish. Preserving all references, slugs, and schema integrity. Review draft ready in 30 seconds.

    • Typography
    • Colors
    • Spacing

_Light Theme

Feature Showcase Section

  1. 01

    Title size:sm 1

    They help teams move faster, reduce inconsistencies, and maintain quality as products grow. By documenting clear guidelines and reusable elements, design systems align designers and developers, making it easier to build cohesive, scalable experiences across platforms.

  2. 02

    Title size:sm 2

    Design systems bring order to digital products by unifying components, styles, and interaction patterns into a shared language.

  3. 03

    Title size:sm 3

    Design systems unify components, styles, and guidelines to create consistent, scalable digital product experiences.

  4. 04

    Title size:sm 4

    Translating "Design Systems at Scale" to Spanish. Preserving all references, slugs, and schema integrity. Review draft ready in 30 seconds.

    • Typography
    • Colors
    • Spacing
  1. 01

    Title size:md 1

    They help teams move faster, reduce inconsistencies, and maintain quality as products grow. By documenting clear guidelines and reusable elements, design systems align designers and developers, making it easier to build cohesive, scalable experiences across platforms.

  2. 02

    Title size:md 2

    Design systems bring order to digital products by unifying components, styles, and interaction patterns into a shared language.

  3. 03

    Title size:md 3

    Design systems unify components, styles, and guidelines to create consistent, scalable digital product experiences.

  4. 04

    Title size:md 4

    Translating "Design Systems at Scale" to Spanish. Preserving all references, slugs, and schema integrity. Review draft ready in 30 seconds.

    • Typography
    • Colors
    • Spacing
  1. 01

    Title size:lg 1

    They help teams move faster, reduce inconsistencies, and maintain quality as products grow. By documenting clear guidelines and reusable elements, design systems align designers and developers, making it easier to build cohesive, scalable experiences across platforms.

  2. 02

    Title size:lg 2

    Design systems bring order to digital products by unifying components, styles, and interaction patterns into a shared language.

  3. 03

    Title size:lg 3

    Design systems unify components, styles, and guidelines to create consistent, scalable digital product experiences.

  4. 04

    Title size:lg 4

    Translating "Design Systems at Scale" to Spanish. Preserving all references, slugs, and schema integrity. Review draft ready in 30 seconds.

    • Typography
    • Colors
    • Spacing

_Eyebrow

Feature Showcase Section

  1. 01

    Title size:md 1

    They help teams move faster, reduce inconsistencies, and maintain quality as products grow. By documenting clear guidelines and reusable elements, design systems align designers and developers, making it easier to build cohesive, scalable experiences across platforms.

  2. 02

    Title size:md 2

    Design systems bring order to digital products by unifying components, styles, and interaction patterns into a shared language.

  3. 03

    Title size:md 3

    Design systems unify components, styles, and guidelines to create consistent, scalable digital product experiences.

  4. 04

    Title size:md 4

    Translating "Design Systems at Scale" to Spanish. Preserving all references, slugs, and schema integrity. Review draft ready in 30 seconds.

    • Typography
    • Colors
    • Spacing
Design foundations

Feature Section

From tokens to components, our system covers the full design-development lifecycle.

  • Semantic color tokens

    Three-tier system: primitives → semantic aliases → component tokens.

  • Fluid typography scale

    CSS clamp()-based type ramp from caption to display with opsz tuning.

  • Spatial system

    Four-step modular scale mapped to CSS custom properties and Tailwind utilities.