Foundations
Typography A nine-role type scale built on Suisse Int'l from Swiss Typefaces, with Google Fonts fallbacks. Each role defines family, size, weight, line height, and tracking as a composition token.
Families
Font families Aa Bb Cc Dd
Display Suisse Int'l
Headlines, display type, hero moments. Always weight 300 (light). If it feels thin, go bigger.
--font-family-display 300, 400, 500
Aa Bb Cc Dd
Body Suisse Int'l
Body text, UI labels, navigation, general interface copy.
--font-family-sans 400 (Book), 450 (Regular), 500 (Medium)
0123456789
Mono Suisse Int'l Mono
Code blocks, token names, tabular data, eyebrow labels.
--font-family-mono 400, 700
Scale
Type scale Every role rendered at its actual size, weight, and family.
Display 2XL Hero headlines, splash screens
clamp(48px, 10vw, 96px) Entangle
size: clamp(48px, 10vw, 96px) weight: 300 line-height: 1.05 tracking: -0.03em
Display XL Section heroes, key moments
clamp(40px, 8vw, 72px) Design System
size: clamp(40px, 8vw, 72px) weight: 300 line-height: 1.05 tracking: -0.02em
Heading LG Page titles, major section headings
clamp(28px, 5vw, 40px) Platform-grade infrastructure
size: clamp(28px, 5vw, 40px) weight: 300 line-height: 1.1 tracking: -0.02em
Heading MD Sub-sections, card headings
24px Components built for production
size: 24px weight: 300 line-height: 1.25 tracking: -0.01em
Body LG Lead paragraphs, intros
18px Token-driven components that respect the system while giving engineers the flexibility they need to build fast.
size: 18px weight: 400 line-height: 1.6 tracking: 0
Body MD Default body text
16px The default reading size. Comfortable for long-form content, UI labels, and general body text across the platform.
size: 16px weight: 400 line-height: 1.6 tracking: 0
Body SM Captions, helper text
14px Captions, helper text, and secondary information that supports the primary content without competing for attention.
size: 14px weight: 400 line-height: 1.5 tracking: 0
Label Form labels, overlines, badges
12px FORM LABEL
size: 12px weight: 500 line-height: 1.4 tracking: 0.08em
Mono Code, token names, technical
14px const token = getToken('color.brand.500');
size: 14px weight: 400 line-height: 1.5 tracking: 0.02em
Usage
Usage guide How each type role maps to specific UI elements. Every example below is rendered at its production specification.
Button Typography
Primary Action Secondary Action Ghost Action
The signature Entangle treatment. All interactive pill elements — buttons, badges, tags, nav items — share this voice. Mono uppercase at small size communicates precision and technical authority.
font: --font-family-mono size: 11px weight: 500 case: uppercase tracking: 0.10em shape: pill (rounded-full)
Badge & Tag Typography
Active Positive Warning Critical Tag
Slightly tighter tracking than buttons. Used for status indicators and categorisation. Pill shape for status badges, rounded-md for tags.
font: --font-family-mono size: 11px weight: 500 case: uppercase tracking: 0.08em
Form Field Typography
Email address you@company.com
We'll send a verification link to this address.
Password ********
Password must be at least 8 characters.
Labels Sans, 14px, medium (500)
Input text Sans, 14px, regular (400)
Placeholder Sans, 14px, regular (400), dimmed colour
Helper text Sans, 12px, regular (400), muted colour
Error text Sans, 12px, regular (400), critical colour
font: --font-family-sans label: 14px / 500 input: 14px / 400 helper: 12px / 400
Navigation Typography
Dashboard Analytics Campaigns Settings
Foundations / Typography / Usage Guide
Active link Mono, 10.5px, uppercase, tracking 0.10em, foreground
Inactive link Mono, 10.5px, uppercase, tracking 0.10em, muted
Breadcrumb Mono, 12px, tracking 0.04em
font: --font-family-mono nav: 10.5px / 500 breadcrumb: 12px / 400 case: uppercase (nav) tracking: 0.10em (nav)
Data Typography
Campaign Spend Leads CPL
Brand Search $4,200 312 $13.46
Competitor $6,800 198 $34.34
Metric value Display, light (300), clamp(2rem, 4vw, 3rem)
Metric label Mono, 10.5px, uppercase, tracking 0.12em, muted
Chart axis Mono, 11px, muted
Table header Mono, 11px, uppercase, tracking 0.08em
value: --font-family-display / 300 label: --font-family-mono / 10.5px table-header: 11px / uppercase tabular-nums: always
Rules
× Never use italic
The system has no italic weights loaded. Do not apply font-style: italic anywhere.
× Body text minimum: 14px for UI, 16px for long-form
UI labels and short text can use 14px. Long-form reading content (articles, documentation paragraphs) must use 16px or larger.
× Display type is reserved for headlines and hero moments
Suisse Int’l Light (300) should only appear in display roles. Never use weight 300 for body text or UI elements.
× Monospace uppercase is reserved for interactive and label elements
Never use mono uppercase for body text. It is reserved for buttons, badges, tags, nav items, eyebrow labels, and data labels.