Cognition

Foundations

Typography

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

Type scale

Eight steps, Geist throughout. Each row renders at its live size and weight.

Building CognitionH1 · 36px · Bold
Why a systemH2 · 30px · Semibold
Three layersH3 · 24px · Semibold
Token swap, skin swapH4 · 20px · Semibold
The shared foundation every product sits onLead · 18px · Semibold
A design system is not a deliverable. It is infrastructure.Body · 16px · Regular
Primitives, semantic, component — never crossed.Small · 14px · Medium
Cognition v1.2 · maintained by Research & DesignCaption · 12px · Regular

Each style set in running copy:

CognitionH1 · 36px · Bold
Design systemH2 · 30px · Semibold
Tokens and componentsH3 · 24px · Semibold
Semantic colorsH4 · 20px · Semibold
One source of truth.Lead · 18px · Semibold
The quick brown fox jumps over the lazy dog.Body · 16px · Regular
Secondary copy and helper text.Small · 14px · Medium
Captions, labels, metadata.Caption · 12px · Regular

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 Cognition

Cognition 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

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

Token swap, skin swap

SurfaceToken layerResult
Distyl platformDefault semanticPurple, dark mode
Hoover implRemapped semanticCustom brand
Toolkit appRemapped semanticNeutral 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 = "Cognition";
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 Cognition 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.