Foundations

Typography

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

Type scale

Eight named styles, Geist throughout, nothing above 20px. Each row renders live via its own text-* class -- size, weight, and color are the real token.

Good decisions, made reusable.text-large · 20px · Regular

Good decisions, made reusable.text-lead · 18px · Semibold

Good decisions, made reusable.text-title · 16px · Medium

Good decisions, made reusable.text-body · 16px · Regular

Good decisions, made reusable.text-small · 14px · Medium

Good decisions, made reusable.text-description · 14px · Regular

Good decisions, made reusable.text-caption · 12px · Regular

Good decisions, made reusable.text-label · 12px · Medium

Weights

Geist is variable; these four weights cover the system.

The quick brown fox jumps over the lazy dog.400 · Regular

The quick brown fox jumps over the lazy dog.500 · Medium

The quick brown fox jumps over the lazy dog.600 · Semibold

The quick brown fox jumps over the lazy dog.700 · Bold

In context

The styles working together as a document.

Building Folio

Folio is Distyl AI's design system -- the shared foundation every product implementation sits on. It exists so engineers ship faster, interfaces stay consistent, and the cost of a rebrand is one token file, not a codebase.

Why a system

Ad hoc UI compounds. Every hardcoded hex value, every one-off spacing decision, every parallel component is debt that slows the next build and the one after that.

A design system is not a deliverable. It is infrastructure. It earns its place the same way a database does -- by making everything built on top of it faster and more reliable.

Three layers

Primitives -- raw values, never used directly
Semantic -- purpose-named aliases, where dark mode lives
Component -- scoped tokens referencing semantic, never primitives

Token swap, skin swap

Surface	Token layer	Result
Distyl platform	Default semantic	Purple, dark mode
Hoover impl	Remapped semantic	Custom brand
Toolkit app	Remapped semantic	Neutral theme

Use font-mono for inline technical values like --color-background-primary and var(--color-chart-1).

The moral

Never underestimate the cost of building the same thing twice.

Monospace

Geist Mono for code and technical values only -- never for prose.

const system = "Folio";
const tokens = { primary: "var(--color-background-primary)" };
const theme = (key: string) => `var(--color-${key})`;
export default { system, tokens, theme };

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

Type styles are the Folio v1.2 named text styles in globals.css -- set the type with the text-* class, the color with a token. The full token scale lives under Tokens → Type Scale.