Typography

53 tokens

Families, weights, the ten-step type scale with its paired line heights, and tracking, each with English and Arabic variants. Previews render through the generated CSS variables, so they show the real token, not a copy of it.

Semantic font families

9 tokens

PreviewTokenCSS variableValueSourceDescription
Ag 123InterEnglish typeface for titles and subtitles.
Ag 123InterEnglish typeface for body text.
Ag 123InterEnglish typeface for numerals and counters.
Ag 123JetBrains MonoMonospace typeface for code and technical content only, never headings or body text.
Ag 123JetBrains MonoTypeface for technical labels inside illustrations or diagrams.
Ag 123IBM Plex Sans ArabicArabic typeface for titles and subtitles.
Ag 123IBM Plex Sans ArabicArabic typeface for body text. Arabic uses one typeface for everything.
Ag 123IBM Plex Sans ArabicArabic typeface for numerals and counters.
Ag 123IBM Plex Sans ArabicArabic typeface for technical labels. Arabic has no separate code typeface.

Semantic font weights

12 tokens

PreviewTokenCSS variableValueSourceDescription
Ag 123500Weight for English titles and subtitles.
Ag 123400Default weight for English body text.
Ag 123500Weight for emphasized spans within English body text.
Ag 123400Weight for English numerals. Pair with the accent icon color by default, or the neutral/error icon color depending on context.
Ag 123400Weight for code text, kept consistent.
Ag 123400Weight for technical labels, usually shown in all caps.
Ag 123500Weight for Arabic titles and subtitles, matching English.
Ag 123400Default weight for Arabic body text, matching English.
Ag 123500Weight for emphasized spans within Arabic body text.
Ag 123400Weight for Arabic numerals, matching English numbers.
Ag 123400Weight for Arabic technical content. Arabic has no separate code typeface.
Ag 123400Weight for Arabic technical labels, matching the English equivalent.

Type scale

Each step emits two declarations: the font size, and a paired --line-height variable.

SpecimenTokenCSS variableValueSourceLine heightDescription
Ag150One step in Lean's English type scale (size). Its specific use is set by the semantic typography tokens, not by this raw step.
Ag110One step in Lean's English type scale (size). Its specific use is set by the semantic typography tokens, not by this raw step.
Ag72One step in Lean's English type scale (size). Its specific use is set by the semantic typography tokens, not by this raw step.
Ag48One step in Lean's English type scale (size). Its specific use is set by the semantic typography tokens, not by this raw step.
Ag36One step in Lean's English type scale (size). Its specific use is set by the semantic typography tokens, not by this raw step.
Ag28One step in Lean's English type scale (size). Its specific use is set by the semantic typography tokens, not by this raw step.
Ag20One step in Lean's English type scale (size). Its specific use is set by the semantic typography tokens, not by this raw step.
Ag16One step in Lean's English type scale (size). Its specific use is set by the semantic typography tokens, not by this raw step.
Ag14One step in Lean's English type scale (size). Its specific use is set by the semantic typography tokens, not by this raw step.
Ag12One step in Lean's English type scale (size). Its specific use is set by the semantic typography tokens, not by this raw step.
Ag144One step in Lean's Arabic type scale (size). Its specific use is set by the semantic typography tokens, not by this raw step.
Ag106One step in Lean's Arabic type scale (size). Its specific use is set by the semantic typography tokens, not by this raw step.
Ag70One step in Lean's Arabic type scale (size). Its specific use is set by the semantic typography tokens, not by this raw step.
Ag47One step in Lean's Arabic type scale (size). Its specific use is set by the semantic typography tokens, not by this raw step.
Ag34One step in Lean's Arabic type scale (size). Its specific use is set by the semantic typography tokens, not by this raw step.
Ag26One step in Lean's Arabic type scale (size). Its specific use is set by the semantic typography tokens, not by this raw step.
Ag19One step in Lean's Arabic type scale (size). Its specific use is set by the semantic typography tokens, not by this raw step.
Ag15One step in Lean's Arabic type scale (size). Its specific use is set by the semantic typography tokens, not by this raw step.
Ag14One step in Lean's Arabic type scale (size). Its specific use is set by the semantic typography tokens, not by this raw step.
Ag12One step in Lean's Arabic type scale (size). Its specific use is set by the semantic typography tokens, not by this raw step.

Primitive font families

3 tokens

PreviewTokenCSS variableValueSourceDescription
Ag 123InterLean's default English typeface.
Ag 123JetBrains MonoLean's monospace typeface, reserved for code and technical content.
Ag 123IBM Plex Sans ArabicLean's only Arabic typeface.

Primitive font weights

4 tokens

PreviewTokenCSS variableValueSourceDescription
Ag 123500Medium weight, used for titles and emphasis in English.
Ag 123400Regular weight, the default for English body text, numbers, and code.
Ag 123500Medium weight, used for titles and emphasis in Arabic, matching English.
Ag 123400Regular weight, the default for Arabic body text, numbers, and code, matching English.

Tracking

Authored in Figma as em values, so tracking scales with font size.

PreviewTokenCSS variableValueSourceDescription
Tracking-0.04Tighter letter-spacing option for fine-tuning text readability.
Tracking-0.02emTight letter-spacing option for fine-tuning text readability.
Tracking0emNormal letter-spacing option for fine-tuning text readability.
Tracking0.02emLoose letter-spacing option for fine-tuning text readability.
Tracking0.04emLooser letter-spacing option for fine-tuning text readability.