02
Typography
Type System
Single typeface: DM Sans across all platform UI. Headings use weights 600–700 with negative letter-spacing for visual authority. Body and UI use weights 300–500. Fraunces is reserved for marketing, website, and brand materials only — not in the product.
Why DM Sans only — design rationale
Performance
Already loaded. Zero additional HTTP requests. DM Sans ships as a variable font — one file covers all weights (300–700), reducing page-load cost vs. loading both Fraunces + DM Sans.
Cognitive load
NNG research shows that typeface switching within a UI — serif headings to sans body — creates a subtle context shift. In dense data UIs, a single typeface with weight hierarchy reduces cognitive friction.
Legibility at scale
DM Sans was designed for UI applications. It performs reliably at 11px labels, 13px table cells, and 40px headings — Fraunces was optimized for editorial display sizes, not dense dashboard typography.
Industry pattern: Single-typeface systems dominate modern enterprise SaaS — Figma, Linear, Vercel, Stripe, and Notion all use one geometric sans across their full UI. Serif/sans splits work well for marketing (where Fraunces shines) but add maintenance burden and visual inconsistency inside products.
DM Sans — Platform Headings
H1
DM Sans 700 · 28px · 1.1lh · ls -0.4px
--type-h1
Work changes when people do.
H2
DM Sans 700 · 22px · 1.15lh · ls -0.3px
--type-h2
Access isn't adoption.
H3
DM Sans 600 · 18px · 1.2lh · ls -0.2px
--type-h3
Behavior change at scale.
H4
DM Sans 700 · 16px · sub-section heading
--type-h4
Order summary
DM Sans — UI & Body
Body
DM Sans 300 · 14px · #444 · 1.7lh
--type-body
Organizations roll out AI tools, launch security programs, and invest in software — then wonder why outcomes don't change. BrainStorm exists to change that.
Small
DM Sans 300 · 12px · #666
--type-small
Supporting metadata, timestamps, helper text.
Micro
DM Sans 500 · 10px · eyebrow above a value
--type-micro
ACTIVE LEARNERS
Label / Eyebrow
DM Sans 500 · 11px · All Caps · 3px tracking · Arches
--type-label
AI Adoption · End-User Security · Customer Education
Link
DM Sans 500 · Wasatch · underline
Rules: DM Sans only in the platform — no Fraunces. Use sentence case for all headings (H1–H4). No italic styling. No synthetic bold. Weights: 700 for H1, H2, H4; 600 for H3; 500 for Micro / Label / Link; 300 for body copy. Apply negative letter-spacing on H1–H3 (−0.2 to −0.4px) for optical tightness. Minimum body text: 13px digital, 8pt print. Labels and eyebrows (Micro, Label tokens) are the only all-caps patterns — headings, including H4, are sentence case.