Skip to main content

🔤 Typography

Type scale​

  • Headings (H1–H6), Body (sm/md/lg), Caption.
  • Ensure consistent hierarchy across brands.

Tokens​

  • Size/line-height: font.size.*, line.height.*
  • Weight: font.weight.regular/semibold/bold
  • Letterspacing (if applicable): font.tracking.*

Usage​

  • Choose the smallest size that maintains readability.
  • Maintain sufficient line-height for dense data.
  • Sentence case for UI text unless otherwise specified.

Do’s / Don’ts​

  • âś… Use tokenized text styles
  • âś… Check truncation/wrapping in narrow layouts
  • ❌ Local overrides that break theme parity
  • ❌ Excessive styles (keep to the system scale)