Typography System

Our typography system uses a mathematical scale (1.25 ratio) combined with a 6-level hierarchy to create clear visual distinction without relying solely on size.

The 6-Level Hierarchy

Each level combines size + color + weight for proper visual distinction:

Display Hero headlines, page titles

Size: --typography-display-size 3.052rem (48.83px)

Color: --typography-display-color neutral-100

Weight: --typography-display-weight 400

Impact

Heading Section headers, article titles

Size: --typography-heading-size 1.953rem (31.25px)

Color: --typography-heading-color neutral-200

Weight: --typography-heading-weight 400

Primary Titles

Subheading Subsections, card titles

Size: --typography-subheading-size 1.563rem (25px)

Color: --typography-subheading-color neutral-400

Weight: --typography-subheading-weight 500

Section Headers

Body Paragraphs, descriptions

Size: --typography-body-size 1rem (16px)

Color: --typography-body-color neutral-700

Weight: --typography-body-weight 400

Default reading text for content

Caption Form labels, helper text

Size: --typography-caption-size 0.8rem (12.8px)

Color: --typography-caption-color neutral-600

Weight: --typography-caption-weight 400

Supporting information and labels

Muted Timestamps, footnotes

Size: --typography-muted-size 0.625rem (10px)

Color: --typography-muted-color neutral-800

Weight: --typography-muted-weight 400

Minimal emphasis for metadata

Core Principles

1. Mathematical Scale

Using a 1.25 ratio (Major Third) ensures each size has at least 25% difference from its neighbors.

2. Three Dimensions of Hierarchy

Size: From 10px to 61px
Color: From darkest (display) to lightest (muted)
Weight: Limited to 400, 500, and 600

3. Constrained Choices

Only 9 sizes and 3 weights prevent decision paralysis and ensure consistency.

Usage Guidelines

/* Display - Hero headlines, maximum impact */
--typography-display-size: 3.052rem;
--typography-display-color: var(--neutral-100);
--typography-display-weight: 400;

/* Body - Default reading text */
--typography-body-size: 1rem;
--typography-body-color: var(--neutral-700);
--typography-body-weight: 400;

Font Stack

Primary: Satoshi - A modern geometric sans-serif
Monospace: Fira Code - For code and technical content

Accessibility

All text maintains WCAG AA contrast ratios, with one intentional exception for tertiary text in dark mode (used only for non-critical decorative elements).