Foundations

Typography.

Two faces. Manrope as the primary face on every surface — body, UI labels, buttons, cells. Helvetica Now Display is reserved for hero copy and page-title headlines. The scale runs 10 / 12 / 14 / 16 / 20 / 24 / 32 / 48 — no other sizes.

The faces

Aa
Manrope · primary
Body, UI labels, buttons, cells, sidenav. Loaded from Google Fonts via next/font; system fallback is the OS sans.
300 · 400 · 500 · 600 · 700 · 800
Aa
Helvetica Now Display · headlines
Hero copy and page-title headlines only. Don't use for body — kerning is tuned for large sizes. Helvetica Neue is the system fallback.
300 · 400 · 500 · 700

Scale

Click any row to copy its CSS class.

DisplayBold (HND) · 64 / 105%.t-display
Marketing & cover surfaces. Helvetica Now Display, -0.02em.
Tools for the builders of society
H1Bold · 48 / 110%.t-h1
Page titles. Manrope, -0.015em.
Project budget with hours and line items
H2Bold · 32 / 115%.t-h2
Major section headers.
Recently opened
H3Bold · 24 / 125%.t-h3
Drawer & dialog titles.
Active cost categories
H4Semibold · 20 / 130%.t-h4
Inline section headers.
Clipboard
H5Semibold · 16 / 140%.t-h5
Component-level headings.
Description
BodyRegular · 16 / 150%.t-body
Default body text.
Add a new cost category to this budget.
Body-smRegular · 14 / 145%.t-body-sm
Captions, helper text.
Anna Lindgren edited this — 11 February
LabelMedium · 12 / 140%.t-label
Form labels, dense rows. +0.02em.
Status
OverlineMedium (HND) · 10 / 160%.t-overline
Token labels, eyebrow. UPPERCASE +0.08em.
PRIMARY 700
MonoRegular · 14 / 145%.t-mono
Token values, numbers. ui-monospace.
--sprout-color-primary-700
ButtonBold · 16 / 100%.t-button
Buttons. Manrope Bold.
Add cost category
← PreviousColor
Sprout · Aceve Design System · v3.7.0