Typography
Humanist variable sans-serif built for universal clarity at all sizes. Governs all headings H1–H4, display text, and section titles. Used at weight 500 (Medium) with 0 letter spacing and 1.4 line height — open, readable presence without aggressive compression.
Geometric sans-serif with perfectly circular forms and consistent stroke width. Governs all body copy, paragraphs P1–P4, captions, and UI labels. Used at weight 300 (Light) with 0 letter spacing and 1.8 line height — giving prose an airy, effortless rhythm.
Headings use Noto Sans at weight 500 (Medium) — highlighted below. The variable font supports the full range 100–900, giving flexibility for display and giant sizes when needed.
Paragraphs use Poppins at weight 300 (Light) — highlighted below. Heavier weights serve UI labels, emphasis, and interactive elements.
native mobile products.
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 . , ; : ! ? @ # % & ( ) — / →
Black (#000000) on main background (#FFFFFF). Exceeds AAA 7:1. All H1–H4 headings and P1–P4 body copy on the default white canvas.
Black (#000000) on supportive background (#EEEDEB). Exceeds AAA. All text content in sand sections, card surfaces, and sidebar panels.
Black (#000000) on accent background (#FFE9D6). Exceeds AAA. All text in callout sections, featured stats, and highlighted rows.
Taupe (#757263) on white (#FFFFFF). Meets AA 4.5:1 for normal text. Labels, tags, borders, and accent text — on white only.
/* ── FONT FAMILIES ─────────────────────────────────────── */
:root {
--font-display: 'Noto Sans', sans-serif; /* Headings H1–H4 · Display */
--font-body: 'Poppins', sans-serif; /* Body · Paragraphs · Captions */
/* ── HEADING STYLE TOKENS ──────────────────────────── */
--h-weight: 500; /* Medium — all H1–H4 */
--h-lh: 1.4; /* Line height — all H1–H4 */
--h-ls: 0; /* Letter spacing — all H1–H4 */
/* ── PARAGRAPH STYLE TOKENS ────────────────────────── */
--p-weight: 300; /* Light — all P1–P4 */
--p-lh: 1.8; /* Line height — all P1–P4 */
--p-ls: 0em; /* Letter spacing — all P1–P4 */
/* ── HEADING SIZES ─────────────────────────────────── */
--h1: 4rem; /* 64px — Page Title */
--h2: 2.3rem; /* ~37px — Section Hero */
--h3: 2.2rem; /* ~35px — Section Title */
--h4: 1.6rem; /* ~26px — Card Headline */
/* ── PARAGRAPH SIZES ───────────────────────────────── */
--p1: 1.5rem; /* 24px — Lead / Large */
--p2: 1rem; /* 16px — Body Base ← BASE */
--p3: 0.9rem; /* ~14px — Small / Footnote */
--p4: 0.6rem; /* ~10px — Caption / Micro */
/* ── LINE HEIGHTS ──────────────────────────────────── */
--lh-none: 1;
--lh-tighter: 1.05;
--lh-tight: 1.15;
--lh-snug: 1.25;
--lh-normal: 1.4; /* Headings H1–H4 ★ */
--lh-relaxed: 1.6;
--lh-loose: 1.8; /* Paragraphs P1–P4 ★ */
/* ── LETTER SPACING ────────────────────────────────── */
--ls-tightest: -0.04em;
--ls-tighter: -0.025em;
--ls-tight: -0.015em;
--ls-normal: 0em; /* Paragraphs P1–P4 ★ */
--ls-wide: 0.02em;
--ls-wider: 0.06em;
--ls-widest: 0.1em; /* Label caps · Poppins UI */
}Use Noto Sans for all headings H1–H4 and display text. Use Poppins for all body copy, paragraphs P1–P4, nav items, captions, and UI labels. Never swap these roles — the contrast between Noto Sans (humanist, open) and Poppins (geometric, airy) creates deliberate typographic rhythm.
All H1–H4 headings must use weight 500, line-height 1.4, and letter-spacing 0. Style is Normal, transform is None. Noto Sans has excellent native spacing that reads cleanly without adjustment at all heading sizes.
All P1–P4 paragraphs must use weight 300, line-height 1.8, and letter-spacing 0em. Style is Normal, transform is None. The generous line height (1.8) is essential for readability of Light-weight Poppins — do not reduce below 1.6.
P4 at 0.6rem (~10px) is a micro size — limit to captions, timestamps, and metadata only. Never use P4 for actionable content. P3 (0.9rem) is the minimum for readable footnotes. On iOS use Dynamic Type: minimum 11pt body and respect user font-size preferences.
Use Black (#000000) for all body and heading text — it achieves AAA on every background in the palette. Taupe (#757263) on white passes AA (4.82:1) for normal text but not on sand or peach. Test with VoiceOver (iOS) and Accessibility Inspector (macOS).
Use clamp() for H1–H2 on fluid layouts. On mobile (<640px) reduce H1 to 2.5rem and H2 to 1.8rem to preserve breathing room. P1 (1.5rem) may reduce to 1.25rem on narrow viewports. H3 and H4 typically hold fixed — they're compact enough not to overflow.
Prose links use Taupe (#757263) color, weight 500 (a step up from body weight 300), and an underline in the same Taupe with a 2px underline offset. Hover deepens both color and underline to Black. Implemented globally on a in base.css — component-styled links (buttons, nav, cards) override via their own class rules. Applies to all inline text links across the system.