Foundations
Typography
One shared scale; the theme picks the faces. Display styles use the display face, body and labels the body face, numbers the number face with tabular figures. Use the helper classes instead of setting families by hand.
| Style | Size / line | Sample |
|---|---|---|
e-display-xl | 48 / 52 | Push day |
e-display | 34 / 40 | Revenue |
e-title | 22 / 28 | Weekly volume |
e-heading | 17 / 24 | Bench press |
e-body-lg | 16 / 24 | Your plan adjusts to the last three sessions. |
e-body | 14 / 20 | Invoices are sent on the first of the month. |
e-label | 13 / 18 | Search customers |
e-caption | 12 / 16 | +12.4% this month |
micro | 11 / 14 | THU |
num-hero | 56 / 56 | 12,480 |
num-kpi | 30 / 34 | 12,480 |
num-inline | 13 / 18 | 12,480 |
Faces per theme
Graphite
RevenueCalm, precise and a little bit crafted.
Active seats
1,284
Glass
RevenueCalm, precise and a little bit crafted.
Active seats
1,284
Paper
RevenueCalm, precise and a little bit crafted.
Active seats
1,284
Mineral
RevenueCalm, precise and a little bit crafted.
Active seats
1,284
Enamel
RevenueCalm, precise and a little bit crafted.
Active seats
1,284
Ember
RevenueCalm, precise and a little bit crafted.
Active seats
1,284
- Display sizes track tight (negative letter spacing); body text never does.
- Paper sets display sizes larger and numbers 1.36 times larger, in italic serif. Its eyebrows, stat labels and table headers are uppercase with 0.1em tracking.
- Never set a big number in the body face. Units sit outside the number ("12,480 kg").