Loading resource
Compositions
A three-color brand overview, current color scales, semantic theme mappings, and typography with copyable values.
Render BrandFoundations with resolved data from the maintained CSS source. The Brand page and its catalog preview share the same view and token values; edit the foundations in globals.css.
src/components/brand/brand-foundations.tsx
Design foundations
Color scales, theme roles, and typography ready to use in your product. Copy the current values or follow the design guide to make them your own.
Primary
Actions and selected controls
primary-900
Neutral
Surfaces and everyday text
neutral-200
Accent
Selective highlights
accent-500
Default actions, selected controls, links, and focus rings.
50
oklch(98.5% 0 none)100
oklch(96.7% 0.001 286.375)200
oklch(92% 0.004 286.32)300
oklch(87.1% 0.006 286.286)400
oklch(70.5% 0.015 286.067)500
oklch(55.2% 0.016 285.938)600
oklch(44.2% 0.017 285.786)700
oklch(37% 0.013 285.805)800
oklch(27.4% 0.006 286.033)900
oklch(21% 0.006 285.885)950
oklch(14.1% 0.005 285.823)Backgrounds, surfaces, borders, and everyday text.
50
oklch(98.5% 0 none)100
oklch(96.7% 0.001 286.375)200
oklch(92% 0.004 286.32)300
oklch(87.1% 0.006 286.286)400
oklch(70.5% 0.015 286.067)500
oklch(55.2% 0.016 285.938)600
oklch(44.2% 0.017 285.786)700
oklch(37% 0.013 285.805)800
oklch(27.4% 0.006 286.033)900
oklch(21% 0.006 285.885)950
oklch(14.1% 0.005 285.823)Deliberate highlights and data visualization.
50
oklch(98.5% 0.032 125)100
oklch(96.5% 0.072 126)200
oklch(93.5% 0.135 127)300
oklch(89% 0.192 128)400
oklch(84% 0.238 129)500
oklch(77% 0.255 130)600
oklch(66% 0.222 131)700
oklch(53% 0.175 132)800
oklch(45% 0.148 132)900
oklch(39.5% 0.125 131)950
oklch(26.5% 0.085 130)Edit the three scales independently in src/app/globals.css. These swatches and copyable values are read from that file during the build. Numbered shades stay fixed in both themes; semantic roles adapt below.
The same controls and semantic classes in both themes. Primary carries the action; a single accent label adds emphasis. Each preview uses the current theme mappings.
Light
A surface, clear text, and one next step.
Dark
A surface, clear text, and one next step.
<div className="bg-card text-card-foreground border-border rounded-xl border p-6">
<p className="text-muted-foreground">A neutral surface for your content.</p>
<Button>Continue</Button>
</div>Use bg-primary text-primary-foreground for standard actions. The semantic bg-accent is a neutral hover surface; numbered accent-* shades are the brand highlight scale.
Interface · font-sans
Clear type, from the first screen.
Headings, paragraphs, navigation, and controls.
--font-sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;Code & values · font-mono
0123456789 · Aa Bb Cc
Code examples, token names, and technical values.
--font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, monospace;Continue with the design system guide, motion primitives, or icon browser.
The preview imports your production components. Open Code for the complete working example, including its imports.
Use Tab to inspect keyboard focus, switch themes, and try the controls. Reset restores the example’s initial state.