Catalog · Foundation
The groundwork every component is built on.
Foundation defines the design system's base layer — color and spacing tokens, theming, and the usage docs that keep everything consistent from the ground up.
Sections
3
Tokens
Geist
Type
Docs
S-0101 / Foundation
Geist token shelf
A white and black foundation, low-contrast borders, and color only when status needs a signal.
Color tokens
Foundation color table
The table language matches the data surfaces below: header, row rhythm, hover, and swatch area.
var(--ds-background-100)var(--ds-background-200)var(--ds-gray-alpha-400)var(--ds-gray-1000)Page, card, border and text depth
var(--ds-red-100)var(--ds-red-400)var(--ds-red-700)var(--ds-red-900)Error, blocked and high-risk state
var(--ds-orange-100)var(--ds-orange-400)var(--ds-orange-700)var(--ds-orange-900)In-progress, running and queued state
var(--ds-bronze-100)var(--ds-bronze-400)var(--ds-bronze-700)var(--ds-bronze-900)Favorite, pinned and premium accent
var(--ds-amber-100)var(--ds-amber-400)var(--ds-amber-700)var(--ds-amber-900)Warning, review and medium-risk state
var(--ds-green-100)var(--ds-green-400)var(--ds-green-700)var(--ds-green-900)Success, complete and positive state
var(--ds-teal-100)var(--ds-teal-400)var(--ds-teal-700)var(--ds-teal-900)Semantic tags, judgment and empathy signals
var(--ds-sky-100)var(--ds-sky-400)var(--ds-sky-700)var(--ds-sky-900)Passive, informational notice
var(--ds-blue-100)var(--ds-blue-400)var(--ds-blue-700)var(--ds-blue-900)Active state, focus and primary system signal
var(--ds-slate-100)var(--ds-slate-400)var(--ds-slate-700)var(--ds-slate-900)Inactive, archived and disabled state
var(--ds-indigo-100)var(--ds-indigo-400)var(--ds-indigo-700)var(--ds-indigo-900)AI, automated and agentic actions
var(--ds-pink-100)var(--ds-pink-400)var(--ds-pink-700)var(--ds-pink-900)New, beta and experimental highlight
S-1414 / Theme
Theme and config
Template-level configuration for density, radius, accent, and preview behavior.
Theme controls
Template-level knobs for density, radius, accent, and preview behavior.
Preview
Configuration preview
Configuration should preview realistic product surfaces, not only token swatches.
Density
Compact
Radius
7px / 8px
Accent
Blue 700
Preview
Off
S-1515 / Usage
Usage notes and props
Documentation blocks for when to use, what to avoid, props, and code previews.
Usage
Component usage notes
Each mature primitive should document intent, expected props, and common mistakes.
Use when
Repeated operational records
Dense admin surfaces
Clear action hierarchy
Avoid
Decorative color blocks
Nested cards inside cards
Viewport-scaled type
Props
tone
density
variant
layout profile
Code preview
Small code samples make the catalog usable as project docs.
<DataPanel title="Runtime">
<RecordTable rows={rows} />
</DataPanel>