Category
Typography
Typography is the operational voice of the brand. This manual aligns visual tone, readability, and implementation discipline.
Font system
Figtree is the primary brand voice. Keep a clean sans-serif fallback stack for environments where custom fonts are unavailable.
Primary font: Figtree. Modern, geometric, and highly readable for UI and marketing surfaces.
Fallback: system sans-serif stack. For office docs and legacy tools, use Arial-compatible rendering.
Licensing principle: prefer open, low-friction licensing for long-term scale and handoff simplicity.
Download
Source of truth for the primary typeface: Figtree on Google Fonts.
heading1
The quick brown fox jumps over the lazy dog.
Heading 1 / Hero - 48px / 56px / 700
Use: Hero headlines and key campaign statements. Use once per view for dominant context framing.
heading2
The quick brown fox jumps over the lazy dog.
Heading 2 / Page title - 32px / 40px / 700
Use: Page-level titles for major sections and route headers.
heading3
The quick brown fox jumps over the lazy dog.
Heading 3 / Section title - 24px / 32px / 600
Use: Section headers inside pages, cards, and structured content blocks.
heading4
The quick brown fox jumps over the lazy dog.
Heading 4 / Block title - 20px / 28px / 600
Use: Compact subsection titles and component block headers.
bodyL
The quick brown fox jumps over the lazy dog.
Body L / Default text - 16px / 24px / 400
Use: Default paragraph copy, form help text, and narrative product explanations.
button
The quick brown fox jumps over the lazy dog.
Button - 16px / 16px / 600
Use: Button labels and high-priority interactive controls.
caption
The quick brown fox jumps over the lazy dog.
Caption / Meta - 12px / 16px / 400
Use: Metadata, timestamps, secondary notes, and technical references.
labelTiny
The quick brown fox jumps over the lazy dog.
Label Tiny / Badge - 12px / 12px / 700
Use: Micro-labels in chips, badges, and status markers.
Forbidden manipulations
- Do not stretch or condense letterforms manually.
- Do not fake bold/italic styles if real weights are available.
- Avoid all-caps for long headings or body text blocks.