Typography

Browse the @ebrains/assets package to access all the typography design tokens used in our design system. Simply include the vars.css from unpkg.com in your application, and you’ll have all the predefined typograpy variables ready to use. If you prefer, you can always create your own variables using the provided CSS values listed below.

This chapter showcases a structured presentation of typography styles with responsive mapped utility classes for headings (f-heading-XX). Each heading style is defined across different breakpoints (sm, md, lg, xl), with associated CSS properties such as font size, line height, letter spacing, font weight, and font family.

The primary typefaces are IBM Plex Sans for body and UI text, IBM Plex Mono for code, and Inter for headings and display typography in cards and components.

Font Families

• IBM Plex Sans — Primary typeface for UI and body text
• IBM Plex Mono — Monospace typeface for code and technical content
• Inter — Display and heading typeface for cards and component titles (Light 300)

Font Downloads

The available font files are IBM Plex Sans Regular (.woff2), IBM Plex Mono Regular (.woff2), and Inter Light (.woff2)