Documentation
Foundation
Typography

Typography

The typography in Adapt follows Material 3 guidelines, utilizing the Inter typeface for its clean, modern aesthetic and excellent readability. Consistent typography ensures a cohesive user experience and reinforces the Niyo brand.

Available Text Styles

Style NameFont WeightFont SizeLine HeightCharacter SpacingExample
Display LargeW40057px64px-0.25px
Display Large
Display MediumW40045px52px0px
Display Medium
Display SmallW40036px44px0px
Display Small
Headline LargeW60032px40px0px
Headline Large
Headline MediumW50028px36px0px
Headline Medium
Headline SmallW50024px32px0px
Headline Small
Title LargeW60022px28px0px
Title Large
Title MediumW60016px24px+0.15px
Title Medium
Title SmallW60014px20px+0.1px
Title Small
Label LargeW50016px24px+0.1px
Label Large
Label MediumW50014px20px+0.5px
Label Medium
Label SmallW60012px16px+0.5px
Label Small
Body LargeW40016px24px+0.5px
Body Large
Body MediumW45014px20px+0.25px
Body Medium
Body SmallW45012px16px+0.4px
Body Small
MicroW50011px16px+0.5px
Micro

Usage Guidelines

Display & Headline Styles

These styles are designed for large, attention-grabbing text. Use them sparingly and strategically for elements that require significant visual prominence. Typical use cases include:

  • Displaying key information: User balances, prominent welcome messages, or critical message.
  • Creating visual hierarchy: Emphasizing important sections or headings on a page.

Caution: Overuse of display and headline styles can diminish their impact and make the overall design feel cluttered.

Title Styles

Title styles are used for headings and titles within the UI, providing clear structure and hierarchy.

  • Title Large: Section headings, page titles, or titles within larger components.
  • Title Medium: Subheadings, card titles, or titles in smaller components.
  • Title Small: Titles within lists, table headers, or less prominent headings.

Label Styles

Label styles are designed for interactive elements or short, descriptive text.

  • Label Large: Text within buttons, primary call-to-actions, or prominent labels.
  • Label Medium: Text within smaller buttons, secondary labels, or tags.
  • Label Small: Text within compact UI elements or less prominent labels. Use cautiously to ensure readability.

Body Styles

Body styles are the workhorse of your text content, used for paragraphs, descriptions, and other longer-form text.

  • Body Large: Use for longer-form reading where increased font size improves readability.
  • Body Medium: The recommended style for most body text. It provides a good balance of readability and visual density.
  • Body Small: Avoid using Body Small for extended text passages as it can hinder readability. Consider it for captions or short descriptions in constrained spaces.

Micro

The Micro text style is reserved for very small text elements where minimizing visual space is crucial. Typical use cases include:

  • Copyright notices: “© 2025 Niyo”
  • Attribution: “Powered by Niyo” or “In partnership with…”
  • Legal disclaimers: “Terms and conditions” (often linked)

Caution: Ensure the Micro text remains legible, especially on smaller screens.