Typography

DM Sans for prose, DM Mono for code and labels. A modular scale built for readability.

Font Families

DM Sans — The quick brown fox

Primary font. Used for headings, body text, and UI labels.

font-family: var(--font-sans)

DM Mono — The quick brown fox

Monospace font. Used for code, tokens, and technical labels.

font-family: var(--font-mono)

<H1>

Page titles. text-4xl font-bold tracking-tight

<H2>

Section headers. text-3xl font-semibold tracking-tight

<H3>

Sub-sections. text-2xl font-semibold tracking-tight

<H4>

Card headers. text-xl font-semibold tracking-tight

<P>

Body text. text-base leading-7

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

<Lead>

Intro paragraphs. text-xl text-muted-foreground

The quick brown fox jumps over the lazy dog.

<Large>

Emphasized text. text-lg font-semibold

The quick brown fox

<Small>

Captions and metadata. text-sm font-medium

The quick brown fox

<Muted>

Secondary text. text-sm text-muted-foreground

The quick brown fox

<Code>

Inline code. font-mono bg-muted rounded px-1

Run npm install substrateui to get started.

<Mono>

Monospace labels. font-mono tracking-tight

--color-primary: oklch(0.480 0.145 314)

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes
`children` required	`React.ReactNode`	—	Text content
`asChild`	`boolean`	`false`	Render as child element (H1-H4 only)