Console

Pure monochrome engineering: black, white, hairlines, zero decoration.

Devtools/consolelight + dark

Exemplar: Vercel

Studied from Vercel's developer surfaces. Original tokens and copy; no assets copied.

Live tokens

Colors

bg
#FFFFFF

surface
#FAFAFA

surface-alt
#F4F4F5

text
#000000

text-muted
#626262

border
#E5E5E5

primary
#000000

on-primary
#FFFFFF

accent
#0070F3

on-accent
#FFFFFF

Type

Directionxxxl · 3.5rem

Design systemxxl · 2.5rem

Conversion notesxl · 1.75rem

Section headinglg · 1.375rem

Body copy for the pagemd · 1rem

Supporting textsm · 0.875rem

Meta labelxs · 0.75rem

Pack recipe 0123'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace

Pack recipe 0123'Geist', 'Inter', system-ui, sans-serif

Pack recipe 0123'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace

Spacing, radius, shadow

xs 0.25rem

sm 0.5rem

md 1rem

lg 1.5rem

xl 2.5rem

xxl 4rem

sm 0px

md 0px

lg 0px

Component samples

Deploy in one command

Zero config. Your framework, our edge.

Declarative, docs-grade.

v4.2.0

npx create-app@latest

Press enter to copy.

Command as input.

p95 latency

41 ms

measured over 30 days

Recipe

Apply the rules, place the patterns, then tune the conversion notes against the rubric.

Rules

Use no color except the single info blue.
Set corners square everywhere.
Use mono for labels, code, and figures only.
Draw structure with 1px hairlines.
Ship copy that reads like good docs.

Patterns

Terminal block as the hero: command in, output out.
Grid of capability cells separated by hairlines.
Install command with a copy button under the hero.
Benchmark table with real numbers and units.

Conversion notes

Put the install command above any signup ask.
Link source and docs in the header for developer trust.
State the license and price plainly in the footer.

See this pack on your site.

Attach your URL. The audit maps your gaps to Console or a better-fit pack.