Tokens
Typography
Two scales: Showcase for landing pages and brand surfaces; Product UI for dashboards, consoles, and dense operational tools.
Showcase / Landing Scale
RoleSizeWeightLH
Display Hero
Maximum impact; tight and confident
Display Secondary
Sub-hero and major narrative section
Display Third
Feature-band headline
Section Heading
Product section heading
Body
Standard landing/body reading
Button
CTA labels
Caption
Metadata, labels
Product UI Scale
RoleSizeWeightLH
App Title
Console page title
Section Title
Toolbar or major panel title
Panel Title
Cards, drawers, dialogs
Body
Product UI copy
Table Text
Dense rows and metadata
Label
Forms and fields
Micro
Uppercase technical labels
Rules
- Display headings can use ultra-tight line-height near 1.00.
- Use strong type scale before adding any visual decoration.
- Avoid gradient text, novelty fonts, and type effects.
- Keep operational screens compact — never use 80px hero type in dashboards.
- Uppercase labels are for grouping and hierarchy, not commands.
- Product UI body is 14px; do not use 18px body inside sidebars or toolbars.