PARTS.

The building blocks. Every component in the substrate vocabulary, shown in isolation and in context. Slabs, stamps, badges, terminals, CTAs, conversations, and splits.

Slabs

Full-width rotated color blocks. The primary layout primitive. Content lives inside slabs. Slabs bleed past their container edges.

Hot Slab

Problem statements. Bold disruption.

Content within the slab uses mono body text.

Acid Slab

Compatibility. Electric information.

Used for secondary emphasis sections.

Blue Slab

Contrast sections. Cool counterpoint.

Balances the warm hot + acid palette.
LIVE DEMO

Black Slab

Terminal contexts. Dark canvas.

Where code and conversation blocks live.

Stamps

Micro-labels with borders. Rotated for zine energy. Used for temperature markers, section identifiers, and inline tags.

TEMP 9 LIVE DEMO NEW STRUCTURE

Badges

Solid-fill blocks for compatibility, categories, and tags. No border-radius. Sharp edges. Butted together with zero gap.

CLAUDE CODE CODEX GEMINI CLI
OUTLINE VARIANT

Terminal Block

Code/process display. Black background, rotated, offset from margins. Acid stamp label. Syntax highlighting uses the terminal palette.

PROCESS
$ substrate taste # discover
$ substrate iterate # refine
$ substrate apply # build

CTA Slab

Hot background. Giant mono text. Underline hover shifts to acid. The loudest element on the page.

$ substrate taste

Start discovering yours.

Conversation Block

Embedded terminal transcript. Shows the skill in action. User input in mint, system responses in amber-bordered cards.

LIVE DEMO
~/site $ substrate taste

substrate

What are we building?
A bold product website. Not AI-slop.

Split Zone

Side-by-side before/after. Left: the AI mean. Right: your substrate. Hot divider. Rotated. The contrast IS the argument.

Build the Future of
Design Systems

Your AI makes beautiful things.
They all look the same.