Prototyper UI

Design Tokens

Complete reference of all Prototyper UI design tokens — colors, surfaces, shadows, radius, typography, and animation.

Prototyper UI uses OKLCH color tokens with color-mix() for derived states. All tokens are defined in prototyper-tokens.css and registered with Tailwind CSS v4's @theme directive.

Token Overview

CategoryCount
Colors102
Surfaces34
Shadows5
Radius7
Typography18
Spacing1
Animation10

Colors

Core color tokens in OKLCH format. These define the color palette for all components.

TokenLightDark
--accent96.76% 0 027.41% 0.006 286.0
--accent-foreground21.03% 0.006 285.998.48% 0 0
--accent-hovercolor-mix(in oklab, oklch(var(--accent)) 92%, oklch(var(--accent-foreground)) 8%)color-mix(in oklab, oklch(var(--accent)) 92%, oklch(var(--accent-foreground)) 8%)
--background100% 0 014.05% 0.004 285.8
--border91.97% 0.004 286.331.51% 0.007 286.0
--border-dark79.59% 0.011 286.223.37% 0.004 286.1
--border-light96.01% 0 037.27% 0.008 286.0
--color-accentoklch(var(--accent))—
--color-accent-foregroundoklch(var(--accent-foreground))—
--color-accent-hovervar(--accent-hover)—
--color-backgroundoklch(var(--background))—
--color-borderoklch(var(--border))—
--color-border-darkoklch(var(--border-dark))—
--color-border-lightoklch(var(--border-light))—
--color-cardoklch(var(--card))—
--color-card-foregroundoklch(var(--card-foreground))—
--color-destructiveoklch(var(--destructive))—
--color-destructive-foregroundoklch(var(--destructive-foreground))—
--color-destructive-hovervar(--destructive-hover)—
--color-destructive-softvar(--destructive-soft)—
--color-destructive-soft-hovervar(--destructive-soft-hover)—
--color-field-backgroundoklch(var(--field-background))—
--color-field-bordervar(--field-border)—
--color-field-border-focusvar(--field-border-focus)—
--color-field-border-hovervar(--field-border-hover)—
--color-field-border-invalidvar(--field-border-invalid)—
--color-foregroundoklch(var(--foreground))—
--color-infooklch(var(--info))—
--color-info-foregroundoklch(var(--info-foreground))—
--color-inputoklch(var(--input))—
--color-machine-bgoklch(var(--machine-bg))—
--color-machine-borderoklch(var(--machine-border))—
--color-machine-fgoklch(var(--machine-fg))—
--color-machine-fg-mutedoklch(var(--machine-fg-muted))—
--color-machine-fg-subtleoklch(var(--machine-fg-subtle))—
--color-machine-inverseoklch(var(--machine-inverse))—
--color-machine-inverse-fgoklch(var(--machine-inverse-fg))—
--color-machine-paneloklch(var(--machine-panel))—
--color-machine-panel-raisedoklch(var(--machine-panel-raised))—
--color-machine-ruleoklch(var(--machine-rule))—
--color-mutedoklch(var(--muted))—
--color-muted-foregroundoklch(var(--muted-foreground))—
--color-overlayoklch(var(--overlay))—
--color-overlay-backdropvar(--overlay-backdrop)—
--color-overlay-foregroundoklch(var(--overlay-foreground))—
--color-popoveroklch(var(--popover))—
--color-popover-foregroundoklch(var(--popover-foreground))—
--color-primaryoklch(var(--primary))—
--color-primary-darkoklch(var(--primary-dark))—
--color-primary-foregroundoklch(var(--primary-foreground))—
--color-primary-hovervar(--primary-hover)—
--color-primary-lightoklch(var(--primary-light))—
--color-primary-middleoklch(var(--primary-middle))—
--color-primary-softvar(--primary-soft)—
--color-primary-soft-hovervar(--primary-soft-hover)—
--color-ringoklch(var(--ring))—
--color-secondaryoklch(var(--secondary))—
--color-secondary-foregroundoklch(var(--secondary-foreground))—
--color-successoklch(var(--success))—
--color-success-foregroundoklch(var(--success-foreground))—
--color-success-hovervar(--success-hover)—
--color-surfaceoklch(var(--surface))—
--color-surface-foregroundoklch(var(--surface-foreground))—
--color-surface-secondaryvar(--surface-secondary)—
--color-surface-tertiaryvar(--surface-tertiary)—
--color-syntax-componentoklch(74% 0.14 220)—
--color-syntax-keyoklch(74% 0.14 220)—
--color-syntax-keywordoklch(72% 0.17 300)—
--color-syntax-numberoklch(80% 0.15 85)—
--color-syntax-stringoklch(72% 0.17 160)—
--color-syntax-tagoklch(72% 0.16 15)—
--color-warningoklch(var(--warning))—
--color-warning-foregroundoklch(var(--warning-foreground))—
--color-warning-hovervar(--warning-hover)—
--destructive63.68% 0.208 25.358% 0.16 25.7
--destructive-foreground98.43% 0 098.43% 0 0
--destructive-hovercolor-mix(in oklab, oklch(var(--destructive)) 90%, oklch(var(--destructive-foreground)) 10%)color-mix(in oklab, oklch(var(--destructive)) 90%, oklch(var(--destructive-foreground)) 10%)
--destructive-softcolor-mix(in oklab, oklch(var(--destructive)) 15%, transparent)color-mix(in oklab, oklch(var(--destructive)) 20%, transparent)
--destructive-soft-hovercolor-mix(in oklab, oklch(var(--destructive)) 20%, transparent)color-mix(in oklab, oklch(var(--destructive)) 28%, transparent)
--foreground14.05% 0.004 285.898.48% 0 0
--info62.61% 0.186 259.662.61% 0.186 259.6
--info-foreground100% 0 038.14% 0.136 265.3
--input91.97% 0.004 286.327.41% 0.006 286.0
--muted96.76% 0 027.41% 0.006 286.0
--muted-foreground51% 0.014 285.971.19% 0.013 286.1
--primary44% 0.017 28655% 0.016 286
--primary-dark37% 0.016 28644% 0.017 286
--primary-foreground100% 0 0100% 0 0
--primary-hovercolor-mix(in oklab, oklch(var(--primary)) 90%, oklch(var(--primary-foreground)) 10%)color-mix(in oklab, oklch(var(--primary)) 90%, oklch(var(--primary-foreground)) 10%)
--primary-light87% 0.006 28687% 0.006 286
--primary-middle55% 0.016 28671% 0.015 286
--primary-softcolor-mix(in oklab, oklch(var(--primary)) 15%, transparent)color-mix(in oklab, oklch(var(--primary)) 20%, transparent)
--primary-soft-hovercolor-mix(in oklab, oklch(var(--primary)) 20%, transparent)color-mix(in oklab, oklch(var(--primary)) 28%, transparent)
--ring44% 0.017 28655% 0.016 286
--secondary97% 0.003 26527% 0.006 286
--secondary-foreground21% 0.006 28697% 0.003 265
--success72.05% 0.192 149.579.99% 0.182 151.8
--success-foreground100% 0 038.98% 0.089 152.7
--success-hovercolor-mix(in oklab, oklch(var(--success)) 90%, oklch(var(--success-foreground)) 10%)color-mix(in oklab, oklch(var(--success)) 90%, oklch(var(--success-foreground)) 10%)
--warning76.97% 0.165 70.686.11% 0.173 92.0
--warning-foreground0% 0 042.36% 0.091 56.8
--warning-hovercolor-mix(in oklab, oklch(var(--warning)) 90%, oklch(var(--warning-foreground)) 10%)color-mix(in oklab, oklch(var(--warning)) 90%, oklch(var(--warning-foreground)) 10%)

Surfaces

Surface and overlay tokens that create depth hierarchy in the UI.

TokenLightDark
--card98.48% 0 016.30% 0.006 285.7
--card-foreground14.05% 0.004 285.898.48% 0 0
--field-background100% 0 016.30% 0.006 285.7
--field-borderoklch(0% 0 0 / 0.12)oklch(100% 0 0 / 0.12)
--field-border-focusoklch(0% 0 0 / 0.35)oklch(100% 0 0 / 0.35)
--field-border-hoveroklch(0% 0 0 / 0.22)oklch(100% 0 0 / 0.22)
--field-border-invalidoklch(var(--destructive))oklch(var(--destructive))
--machine-bg2.8% 0 02.8% 0 0
--machine-block-gap1rem1rem
--machine-border100% 0 0 / 0.22100% 0 0 / 0.22
--machine-code-size0.84rem0.84rem
--machine-content-max76ch76ch
--machine-fg98% 0 098% 0 0
--machine-fg-muted88% 0 088% 0 0
--machine-fg-subtle72% 0 072% 0 0
--machine-font-size-base0.95rem0.95rem
--machine-heading-weight640640
--machine-inverse96% 0 096% 0 0
--machine-inverse-fg8% 0 08% 0 0
--machine-line-height-base1.71.7
--machine-panel4.4% 0 04.4% 0 0
--machine-panel-raised7.2% 0 07.2% 0 0
--machine-rail-offsetclamp(0.9rem, 2vw, 1.45rem)clamp(0.9rem, 2vw, 1.45rem)
--machine-rule100% 0 0 / 0.3100% 0 0 / 0.3
--machine-section-gap2.5rem2.5rem
--overlay100% 0 019.50% 0.008 285.7
--overlay-backdropoklch(0% 0 0 / 0.40)oklch(0% 0 0 / 0.55)
--overlay-foreground14.05% 0.004 285.898.48% 0 0
--popover100% 0 014.05% 0.004 285.8
--popover-foreground14.05% 0.004 285.898.48% 0 0
--surface98.48% 0 016.30% 0.006 285.7
--surface-foreground14.05% 0.004 285.898.48% 0 0
--surface-secondarycolor-mix(in oklab, oklch(var(--surface)) 94%, oklch(var(--surface-foreground)) 6%)color-mix(in oklab, oklch(var(--surface)) 94%, oklch(var(--surface-foreground)) 6%)
--surface-tertiarycolor-mix(in oklab, oklch(var(--surface)) 88%, oklch(var(--surface-foreground)) 12%)color-mix(in oklab, oklch(var(--surface)) 88%, oklch(var(--surface-foreground)) 12%)

Shadows

Shadow tokens with 3 semantic tiers, adaptive for dark mode.

TokenLightDark
--shadow-field0 1px 2px 0 oklch(0% 0 0 / 0.05), 0 0 0 1px oklch(0% 0 0 / 0.04)none
--shadow-inset-trackinset 0 1px 2px oklch(0% 0 0 / 0.06), inset 0 0 0 1px oklch(0% 0 0 / 0.04)inset 0 1px 2px oklch(0% 0 0 / 0.12), inset 0 0 0 1px oklch(100% 0 0 / 0.06)
--shadow-overlay0 8px 30px oklch(0% 0 0 / 0.12), 0 2px 8px oklch(0% 0 0 / 0.06), 0 0 0 1px oklch(0% 0 0 / 0.06)0 0 0 1px oklch(100% 0 0 / 0.08), 0 8px 30px oklch(0% 0 0 / 0.35)
--shadow-surface0 2px 4px 0 oklch(0% 0 0 / 0.04), 0 1px 2px 0 oklch(0% 0 0 / 0.06), 0 0 0 1px oklch(0% 0 0 / 0.04)none
--shadow-tooltip0 2px 8px oklch(0% 0 0 / 0.12), 0 1px 3px oklch(0% 0 0 / 0.08)0 0 0 1px oklch(100% 0 0 / 0.10), 0 4px 16px oklch(0% 0 0 / 0.4)

Radius

Border radius scale derived from the base --radius token.

TokenLightDark
--radius0.5rem—
--radius-2xlcalc(var(--radius) + 8px)—
--radius-3xlcalc(var(--radius) + 12px)—
--radius-lgvar(--radius)—
--radius-mdcalc(var(--radius) - 2px)—
--radius-smcalc(var(--radius) - 4px)—
--radius-xlcalc(var(--radius) + 4px)—

Typography

Font families and type scale tokens.

TokenLightDark
--font-headingvar(--font-overpass)—
--font-monovar(--font-geist-mono)—
--font-pixelvar(--font-geist-pixel-square)—
--font-sansvar(--font-geist-sans)—
--text-2xl1.5rem—
--text-2xl--line-height2rem—
--text-3xl1.875rem—
--text-3xl--line-height2.25rem—
--text-base1rem—
--text-base--line-height1.5rem—
--text-lg1.125rem—
--text-lg--line-height1.75rem—
--text-sm0.875rem—
--text-sm--line-height1.25rem—
--text-xl1.25rem—
--text-xl--line-height1.75rem—
--text-xs0.75rem—
--text-xs--line-height1rem—

Spacing

Base spacing unit for the design system.

TokenLightDark
--spacing0.25rem—

Animation

Easing curves and keyframe animation tokens.

TokenLightDark
--animate-accordion-downaccordion-down 0.2s ease-out—
--animate-accordion-upaccordion-up 0.2s ease-out—
--animate-progress-indeterminateprogress-indeterminate 1.8s ease-in-out infinite—
--ease-in-out-quadcubic-bezier(0.455, 0.03, 0.515, 0.955)—
--ease-in-quadcubic-bezier(0.55, 0.085, 0.68, 0.53)—
--ease-in-quartcubic-bezier(0.895, 0.03, 0.685, 0.22)—
--ease-out-fluidcubic-bezier(0.32, 0.72, 0, 1)—
--ease-out-quadcubic-bezier(0.25, 0.46, 0.45, 0.94)—
--ease-out-quartcubic-bezier(0.165, 0.84, 0.44, 1)—
--ease-smoothcubic-bezier(0.4, 0, 0.2, 1)—

Design Principles

Core principles that guide Prototyper UI's design and development.

LLMs.txt

Machine-readable documentation endpoints for AI assistants

On this page

Token OverviewColorsSurfacesShadowsRadiusTypographySpacingAnimation