Typography

Standardize font sizes, weights, and line heights to create a clear and cohesive text hierarchy. These tokens ensure readability, accessibility, and a polished look across all text elements.”

Font Family Token

Sets the primary typeface for the interface, establishing a consistent style across all text elements. Chosen for readability and style, this font aligns with the brand’s personality and ensures a cohesive experience.

Heading Font Token

Used for titles and headings, offering boldness and emphasis to create a clear visual hierarchy. It’s optimized for quick scanning, helping users understand content structure at a glance.

Body Font Token

Defines the primary text style for paragraphs, ensuring readability across various devices and screen sizes. This token balances legibility with style, making long-form content easy to consume.

Caption Font Token

For smaller, supporting text, such as image captions or footnotes. Subtle yet clear, it provides additional context without distracting from the main content.

Font Size Tokens

Standardize text sizes, creating a clear typographic scale for headings, body text, and captions. These sizes maintain hierarchy and readability across different layouts and screen resolutions.

Line Height Tokens

Define vertical spacing between lines of text, enhancing readability and ensuring text doesn’t appear cramped. Each token is tailored to its font size, providing optimal balance and flow for paragraphs and headings.

Font Weight Tokens

Control the thickness of the text, from light to bold, to emphasize specific parts of the content. They create contrast and hierarchy, helping important information stand out while supporting visual harmony.

Letter Spacing Tokens

Adjust the space between characters, improving readability and creating a balanced look for each type size. Carefully calibrated, this spacing enhances the text’s legibility and aesthetic.