Substrate UI — Neobrutalist React Component Library

Colors

Semantic color tokens with light and dark theme values. All colors map to Tailwind utilities.

Swatch	Token	Tailwind
	--background	bg-background
	--foreground	bg-foreground
	--primary	bg-primary
	--primary-hover	bg-primary-hover
	--primary-foreground	bg-primary-foreground
	--secondary	bg-secondary
	--secondary-foreground	bg-secondary-foreground
	--card	bg-card
	--card-foreground	bg-card-foreground
	--muted	bg-muted
	--muted-foreground	bg-muted-foreground
	--accent	bg-accent
	--accent-foreground	bg-accent-foreground
	--destructive	bg-destructive
	--destructive-foreground	bg-destructive-foreground
	--border	bg-border

Spacing

4px base unit spacing scale. Used for padding, margin, and gap.

--spacing-0

0 (0px)

--spacing-0_5

0.125rem (2px)

--spacing-1

0.25rem (4px)

--spacing-1_5

0.375rem (6px)

--spacing-2

0.5rem (8px)

--spacing-3

0.75rem (12px)

--spacing-4

1rem (16px)

--spacing-6

1.5rem (24px)

--spacing-8

2rem (32px)

--spacing-10

2.5rem (40px)

--spacing-12

3rem (48px)

--spacing-16

4rem (64px)

--spacing-20

5rem (80px)

--spacing-24

6rem (96px)

--spacing-28

7rem (112px)

Typography

Font size scale from xs to 6xl. Three font families: head (Archivo Black), sans (Space Grotesk), mono (Space Mono).

Font Families

--font-head (Archivo Black)The quick brown fox jumps over the lazy dog

--font-sans (Space Grotesk)The quick brown fox jumps over the lazy dog

--font-mono (Space Mono)The quick brown fox jumps over the lazy dog

Size Scale

--text-xs0.75rem (12px)Aa

--text-sm0.875rem (14px)Aa

--text-base1rem (16px)Aa

--text-lg1.125rem (18px)Aa

--text-xl1.25rem (20px)Aa

--text-2xl1.5rem (24px)Aa

--text-3xl1.875rem (30px)Aa

--text-4xl2.25rem (36px)Aa

--text-5xl3rem (48px)Aa

--text-6xl3.75rem (60px)Aa

Weights

--weight-normal (400)Normal weight text

--weight-medium (500)Medium weight text

--weight-bold (700)Bold weight text

Line Heights & Tracking

Token	Value
--leading-none	1
--leading-tight	1.25
--leading-normal	1.5
--leading-relaxed	1.625
--tracking-tight	-0.025em
--tracking-normal	0

Shadows

Hard pixel-offset shadows with no blur — the neobrutalist signature.

xs1px 1px 0 0

sm2px 2px 0 0

DEFAULT3px 3px 0 0

md4px 4px 0 0

lg6px 6px 0 0

xl10px 10px 0 1px

2xl16px 16px 0 1px

Border Radius

Default is 0 (sharp corners). Add the .with-radius class to get 0.5rem rounded corners.

--radius: 0

.with-radius (0.5rem)

Color Contrast (WCAG AA)

WCAG AA requires at least 4.5:1 contrast for normal text and 3:1 for large text (18px+ or 14px bold). Pairings that fail AA for normal text are flagged below.

light Theme

Foreground	Background	Preview	Ratio	AA Normal	AA Large
--foreground	--background	Aa	21.0:1	Pass	Pass
--primary-foreground	--primary	Aa	6.4:1	Pass	Pass
--primary	--background	Aa	3.3:1	Fail	Pass
--destructive-foreground	--destructive	Aa	4.0:1	Fail	Pass
--muted-foreground	--background	Aa	7.5:1	Pass	Pass
--success-foreground	--success	Aa	11.0:1	Pass	Pass
--warning-foreground	--warning	Aa	13.5:1	Pass	Pass
--info-foreground	--info	Aa	7.4:1	Pass	Pass
--error-foreground	--error	Aa	5.6:1	Pass	Pass

--primary on --background: Use as background with dark foreground, not as text on white

--destructive-foreground on --destructive: Passes for large/bold text only

dark Theme

Foreground	Background	Preview	Ratio	AA Normal	AA Large
--foreground	--background	Aa	12.3:1	Pass	Pass
--primary-foreground	--primary	Aa	6.4:1	Pass	Pass
--muted-foreground	--background	Aa	3.4:1	Fail	Pass
--card-foreground	--card	Aa	9.1:1	Pass	Pass

--muted-foreground on --background: Fails AA for normal text; suitable for large/decorative text only