Foundation

Typography

A 15-style type system built on Poppins (display) and Inter (UI) from your Figma brand. Every style has a precise role — nothing overlaps, nothing is missing.

Font Stacks

Typefaces

Three purpose-specific families — each chosen for its role, not interchangeable.

Display · From Figma
Poppins
For hero text, section titles, marketing copy. Bold personality, geometric clarity.
600 Semibold — Display M, H2
700 Bold — Display XL, L
UI · From Figma
Inter
The primary UI typeface. Optimised for readability at small sizes on screens.
400Regular — Body text
500Medium — Labels, buttons
600Semibold — Headings H3/H4
700Bold — H1, H2, critical UI
Code
JetBrains Mono
Code snippets, tokens, identifiers. Excellent legibility and ligature support.
400 Regular — inline code
500 Medium — code emphasis
Type Scale

Display Styles

Large-scale type for heroes, landing pages, and marketing screens. Poppins only.

Display XL Poppins 700 · 56px lh 1.05 · ls -2px --type-display-xl
Nest
Display L Poppins 700 · 48px lh 1.1 · ls -1.5px --type-display-l
Design System
Display M Poppins 600 · 36px lh 1.15 · ls -1px --type-display-m
Built for production.

Headings

Inter-based headings for app screens, dashboards, and documents. H1–H4.

Heading H1 Inter 700 · 32px lh 1.2 · ls -0.5px --type-h1
Hey Dave, Welcome back!
Heading H2 Inter 600 · 24px lh 1.3 · ls -0.3px --type-h2
Nest Score: 625
Heading H3 Inter 600 · 20px lh 1.35 --type-h3
Your focus for today
Heading H4 Inter 600 · 18px lh 1.4 --type-h4
Campaigns overview

Body Styles

Four body sizes for different content densities. All Inter 400 for optimal readability.

Body XL Inter 400 · 18px lh 1.65 --type-body-xl
You're on a roll — your Nest Score grew by +17 points this week!
Body L Inter 400 · 16px lh 1.65 --type-body-l
Collect reviews from your best customers automatically with smart follow-up sequences.
Body M Inter 400 · 14px lh 1.55 --type-body-m
Campaign sent to 47 customers. 12 reviews received so far. See full analytics →
Body S Inter 400 · 12px lh 1.5 --type-body-s
Last synced 2 minutes ago · Auto-refresh on

Labels

Tight, purposeful styles for UI chrome: buttons, navigation, form labels, table headers, status indicators.

Label L Inter 500 · 14px lh 1 --type-label-l
Button Text · Nav Item
Label M Inter 500 · 12px lh 1 · ls 0.1px --type-label-m
Badge · Tag · Caption
Label S Inter 600 · 11px UPPERCASE · ls 0.4px --type-label-s
CAMPAIGNS ACTIVE · 3 PENDING

Code Type

JetBrains Mono for all code, tokens, and technical identifiers. Excellent for monospaced alignment and long strings.

Code JetBrains Mono 400 14px · lh 1.6 --type-code
<Button variant="primary" size="md">
Code Inline JetBrains Mono 400 12px · bg surface3 --type-code-inline
Set --primary to override the brand colour.

Full Scale Reference

All 15 type styles in one view. Use CSS custom properties to apply consistently.

Style Family Size Weight Line Height Token

Line Heights

Line height is critical for readability. Display type is tight (1.05); body text is loose (1.65) for maximum legibility.

Font Sizes at a Glance

The type scale follows a loose modular ratio — each step is purposeful, not mechanical.

Usage Guidelines

✓ Do
Use Display styles only for marketing/hero sections
Maintain clear hierarchy — never two adjacent styles the same size
Use Body M (14px) as the default for dense UI like tables
Apply Label S (uppercase) sparingly — only for section labels
Use Code type for all tokens, props, and code references
✕ Don't
Don't mix Poppins and Inter at the same hierarchy level
Don't use font-size below 11px — use Label S as the minimum
Don't set body text heavier than 500 weight
Don't set letter-spacing on body text — it reduces readability
Don't use more than 3 type styles in a single card/section

Full Specimen

Every style together — how the system looks in real app context.

NEST DESIGN SYSTEM · TYPOGRAPHY SPECIMEN
Display XL
Display Large
Display Medium. Smart, precise.
H1 · Hey Dave, Welcome back!
H2 · Nest Score: 625
H3 · Your focus for today
H4 · Campaign performance overview
Body XL · You're on a roll — your Nest Score grew by +17 points this week! Keep the momentum going.
Body L · Collect reviews from your best customers automatically with smart follow-up sequences and personalised messaging.
Body M · Campaign sent to 47 customers. 12 reviews received so far.
Body S · Last synced 2 minutes ago · Auto-refresh enabled
Label L · Button Text · Navigation
Label M · Badge · Caption · Tag
LABEL S · SECTION HEADER · STATUS
<Button variant="primary" size="md" onClick={handleSubmit}>
// Inter 500 · 16px · white on Purple-500
</Button>

CSS Tokens

Copy-paste the complete typography custom properties block.

tokens/typography.css 
:root {
  /* Font families */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-display: 'Poppins', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Font sizes */
  --text-xs: 11px;   /* Label S */
  --text-sm: 12px;   /* Body S, Label M */
  --text-base: 14px; /* Body M, Label L */
  --text-md: 16px;   /* Body L */
  --text-lg: 18px;   /* Body XL, H4 */
  --text-xl: 20px;   /* H3 */
  --text-2xl: 24px;  /* H2 */
  --text-3xl: 32px;  /* H1 */
  --text-4xl: 36px;  /* Display M */
  --text-5xl: 48px;  /* Display L */
  --text-6xl: 56px;  /* Display XL */

  /* Font weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Line heights */
  --lh-tight: 1.05;   /* Display XL */
  --lh-snug: 1.15;    /* Display M */
  --lh-normal: 1.3;   /* H2 */
  --lh-relaxed: 1.5;  /* Body M */
  --lh-loose: 1.65;   /* Body L, Body XL */
}
Copied!