Typography
Type sets the hierarchy, rhythm and visual voice of the product. The whole system runs on a single typeface — Poppins — across one consistent scale.
Poppins
The official typeface of the design system.
abcdefghijklmnopqrstuvwxyz
0123456789 & ! ? @ #
Poppins was chosen for its modern style, clean geometry and excellent legibility in digital environments. Its versatility lets us build consistent, accessible interfaces that are easy to scan on any device.
We adapt the familiar Material type ramp to our brand — same proven scale, rendered in Poppins instead of Roboto.
Type Scale
Thirteen roles from display to overline — every one set in Poppins.
| Scale Category | Typeface | Weight | Size | Case | Letter spacing |
|---|---|---|---|---|---|
| H1 | Poppins | Light | 96 | Sentence | -1.5 |
| H2 | Poppins | Light | 60 | Sentence | -0.5 |
| H3 | Poppins | Regular | 48 | Sentence | 0 |
| H4 | Poppins | Regular | 34 | Sentence | 0.25 |
| H5 | Poppins | Regular | 24 | Sentence | 0 |
| H6 | Poppins | Medium | 20 | Sentence | 0.15 |
| Subtitle 1 | Poppins | Regular | 16 | Sentence | 0.15 |
| Subtitle 2 | Poppins | Medium | 14 | Sentence | 0.1 |
| Body 1 | Poppins | Regular | 16 | Sentence | 0.5 |
| Body 2 | Poppins | Regular | 14 | Sentence | 0.25 |
| Button | Poppins | Medium | 14 | All caps | 1.25 |
| Caption | Poppins | Regular | 12 | Sentence | 0.4 |
| Overline | Poppins | Regular | 10 | All caps | 1.5 |
Display sizes (H1–H2) are shown capped for layout; values in the table are the true tokens. Letter-spacing is expressed in px.
Usage
When to reach for each tier of the scale.
Hero moments and page titles. Used sparingly — these are the loudest type in the system.
Section and component headings. The everyday hierarchy across screens.
Supporting titles and lead-ins that sit above body copy.
Paragraphs, forms, tables and general reading content.
UI labels, metadata and eyebrows. Buttons and overlines use all caps with wider tracking.
Contrast & Legibility
Recommended text-on-surface pairings, aligned with our color system.
On light surfaces, use dark type to maximize reading. Keep it clean and professional — avoid absolute black when it isn't needed.
On dark surfaces, use light type to ensure enough contrast. Avoid low-contrast grays that make reading harder.
Accessibility
Rules that keep type legible for everyone.