Foundations

Tokens

The canonical Cognition v1.2 token set. Swatches below render from the live CSS variables — toggle the theme and they remap automatically. Never hardcode a hex value; always reference the token utility.

Color

Every color token, grouped by role — backgrounds, text, borders, feedback, and chart series.

Backgrounds

Surface fills, from the main canvas to brand and feedback tints.

background.default

bg-background-default

Main page / app background

light #FFFFFFdark #0F1117

background.subtle

bg-background-subtle

Sidebars, off-white surfaces

light #F9FAFBdark #141820

background.secondary

bg-background-secondary

Secondary surfaces, hover states

light #F3F4F6dark #1F2937

background.accent

bg-background-accent

Brand-tinted surfaces

light #EFEDFDdark #06041B

background.primary

bg-background-primary

Primary brand fills, buttons

light #5D4EE7dark #7C6FF7

background.inverse

bg-background-inverse

Dark surfaces

light #0F1117dark #F9FAFB

background.danger

bg-background-danger

Error background tints

light #FEF2F2dark #450A0A

background.success

bg-background-success

Success background tints

light #F0FDF4dark #052E16

background.warning

bg-background-warning

Warning background tints

light #FFFBEBdark #431407

Text

Foreground colors for copy, labels, and states.

text.default

text-text-default

Body text, primary content

light #0F1117dark #F9FAFB

text.subtle

text-text-subtle

Secondary text, placeholders

light #6B7280dark #9CA3AF

text.primary

text-text-primary

Brand text, links, active labels

light #5D4EE7dark #7C6FF7

text.inverse

text-text-inverse

Text on dark / filled backgrounds

light #FFFFFFdark #0F1117

text.disabled

text-text-disabled

Disabled text only

light #D1D5DBdark #4B5563

text.danger

text-text-danger

Error messages

light #DC2626dark #F87171

text.success

text-text-success

Success messages

light #15803Ddark #4ADE80

text.warning

text-text-warning

Warning messages

light #B45309dark #FBBF24

Borders

Outlines, separators, and focus rings.

border.default

border-border-default

Standard borders, input outlines

light #E5E7EBdark #374151

border.subtle

border-border-subtle

Light separators

light #F3F4F6dark #1F2937

border.strong

border-border-strong

Emphasized borders

light #9CA3AFdark #6B7280

border.primary

border-border-primary

Focused / active inputs

light #5D4EE7dark #7C6FF7

border.danger

border-border-danger

Error state borders

light #EF4444dark #F87171

border.success

border-border-success

Valid / success borders

light #16A34Adark #4ADE80

Feedback

Canonical status colors — use these for every status state.

feedback.info

bg-feedback-info

text-feedback-info

border-feedback-info

All info states

light #5D4EE7dark #7C6FF7

feedback.success

bg-feedback-success

text-feedback-success

border-feedback-success

All success states

light #15803Ddark #4ADE80

feedback.warning

bg-feedback-warning

text-feedback-warning

border-feedback-warning

All warning states

light #F59E0Bdark #FBBF24

feedback.danger

bg-feedback-danger

text-feedback-danger

border-feedback-danger

All error / destructive states

light #EF4444dark #F87171

Chart

Data series colors for charts. Use in order — chart-1 first, chart-5 last. Never use feedback or primary tokens for neutral data series.

chart.1

var(--color-chart-1)

First data series

light #7C6FF7dark #9089F9

chart.2

var(--color-chart-2)

Second data series

light #38BDF8dark #7DD3FC

chart.3

var(--color-chart-3)

Third data series

light #34D399dark #6EE7B7

chart.4

var(--color-chart-4)

Fourth data series

light #FB923Cdark #FDBA74

chart.5

var(--color-chart-5)

Fifth data series

light #A78BFAdark #C4B5FD

Radius

Six steps. rounded-md (8px) is the default.

rounded-none

0px

rounded-sm

4px

rounded-md

8px

rounded-lg

12px

rounded-xl

16px

rounded-full

9999px

Spacing

4px base unit. Never use arbitrary px values in inline styles.

p-1

4px

p-2

8px

p-3

12px

p-4

16px

p-6

24px

p-8

32px

p-12

48px

p-16

64px

Type Scale

Geist for all UI and body copy. Geist Mono for code and technical values only.

CognitionH1 · 36px · Bold

Design systemH2 · 30px · Semibold

Tokens & componentsH3 · 24px · Semibold

Semantic colorsH4 · 20px · Semibold

One source of truth.Lead · 18px · Semibold

The quick brown fox jumps over the lazy dog.Body · 16px · Regular

Secondary copy and helper text.Small · 14px · Medium

Captions, labels, metadata.Caption · 12px · Regular

400 · Regular

500 · Medium

600 · Semibold

700 · Bold

font-family: Geist Mono — 0123456789 { } => const x = 42;

Geist is self-hosted via the geist package (Vercel's official build), not the Google font. Download Geist →

Values mirror cognition-tokens.css. Adding a token is a MINOR bump; changing a value is a PATCH or MINOR.