Typography
How type creates hierarchy and makes dense screens readable. This is the reasoning behind the scale and the Text component; for the sizes, weights, and tokens themselves, see Typography in Tokens.
Type is the cheapest hierarchy you have
Before color or borders, size and weight tell the eye what matters. A clear type hierarchy lets someone scan a screen in seconds. Pick one element to be the headline, make it unmistakable with size and weight, and let everything else recede.
72%
across 48 activitiesPromote the value, demote the label
Most BCMS data is label–value pairs. The value is the answer; the label just says what it is. Bold the value and keep the label small and muted — getting this one habit right fixes half of all hierarchy problems.
Bold the value, keep the label regular and muted: small “Owner”, strong “A. Chen”.
Don't give the label and value the same size and weight — the eye can't tell which to read.
Use tone="muted" for labels and captions so values carry the emphasis.
Don't bold everything to make it “important”; if all is bold, nothing is.
Use the scale; use semantic variants
Reach for a Text variant (heading2xl, body, smallBody), not an arbitrary pixel size. The scale keeps headings related and rhythm consistent; semantic variants keep the same role looking the same everywhere and adapting to theme.
| Use | Avoid | Why |
|---|---|---|
| <Text variant="heading2xl"> | fontSize: 28px | Stays on the scale; consistent with other headings. |
| <Text variant="smallBody" tone="muted"> | color: #98A2B3; font-size: 12px | One role, one definition; adapts to dark mode. |
| Correct heading level + token size | An h2 styled to look like an h4 | Semantic order isn't font size — keep both right. |
Density is a feature — but keep it readable
Enterprise users want to see a lot at once, so don't pad BCMS into a consumer app. The goal is organized density: a high information rate that's still scannable. A few constraints keep dense type legible.
Cap reading width for paragraphs (~70 characters); long lines are hard to track.
Don't let body text run the full width of a wide screen.
Truncate long values in table cells and reveal the full text on hover.
Don't wrap table rows to two lines; it breaks the scan rhythm of the grid.