Typography draft v0.3.1
The font families and their size and weight scales from the Figma library, plus the line heights and letter spacing components set their text with.
The families (heading, body, mono) and their size and weight scales are the Figma library's Typography, as they are; line heights and letter spacing, which the Figma library lacks, are the design system's additions (tokens/additions/). Components and the docs site read them directly: a component's typography token is a composite of a family, a size and a weight from the Figma library and a line height and letter spacing from the additions. There are no semantic text styles in between.
Tokens
Semantic tokens owned by the foundation (tokens in packages/components/specs/foundations/typography.spec.json). They live in packages/tokens/src/semantic/ (recreated from the Figma library) or tokens/additions/semantic/ (added by the design system), with their other values in tokens/modes/, tokens/additions/modes/ and tokens/platforms/.
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
heading.family
|
fontFamily |
Inter
|
Inter
|
--heading-family
|
heading.size.3xl
|
dimension |
{"value":64,"unit":"px"}
|
64px
|
--heading-size-3xl
|
heading.size.2xl
|
dimension |
{"value":64,"unit":"px"}
|
64px
|
--heading-size-2xl
|
heading.size.xl
|
dimension |
{"value":48,"unit":"px"}
|
48px
|
--heading-size-xl
|
heading.size.lg
|
dimension |
{"value":42,"unit":"px"}
|
42px
|
--heading-size-lg
|
heading.size.md
|
dimension |
{"value":32,"unit":"px"}
|
32px
|
--heading-size-md
|
heading.size.sm
|
dimension |
{"value":24,"unit":"px"}
|
24px
|
--heading-size-sm
|
heading.size.xs
|
dimension |
{"value":20,"unit":"px"}
|
20px
|
--heading-size-xs
|
heading.size.2xs
|
dimension |
{"value":16,"unit":"px"}
|
16px
|
--heading-size-2xs
|
heading.size.3xs
|
dimension |
{"value":14,"unit":"px"}
|
14px
|
--heading-size-3xs
|
heading.size.4xs
|
dimension |
{"value":12,"unit":"px"}
|
12px
|
--heading-size-4xs
|
heading.weight.medium
|
fontWeight |
500
|
500
|
--heading-weight-medium
|
heading.weight.semi-bold
|
fontWeight |
600
|
600
|
--heading-weight-semi-bold
|
body.family
|
fontFamily |
Inter
|
Inter
|
--body-family
|
body.size.xl
|
dimension |
{"value":24,"unit":"px"}
|
24px
|
--body-size-xl
|
body.size.lg
|
dimension |
{"value":20,"unit":"px"}
|
20px
|
--body-size-lg
|
body.size.md
|
dimension |
{"value":16,"unit":"px"}
|
16px
|
--body-size-md
|
body.size.sm
|
dimension |
{"value":14,"unit":"px"}
|
14px
|
--body-size-sm
|
body.size.xs
|
dimension |
{"value":12,"unit":"px"}
|
12px
|
--body-size-xs
|
body.size.2xs
|
dimension |
{"value":10,"unit":"px"}
|
10px
|
--body-size-2xs
|
body.weight.regular
|
fontWeight |
400
|
400
|
--body-weight-regular
|
body.weight.medium
|
fontWeight |
500
|
500
|
--body-weight-medium
|
mono.family
|
fontFamily |
Fragment Mono
|
"Fragment Mono"
|
--mono-family
|
mono.size.2xl
|
dimension |
{"value":40,"unit":"px"}
|
40px
|
--mono-size-2xl
|
mono.size.xl
|
dimension |
{"value":24,"unit":"px"}
|
24px
|
--mono-size-xl
|
mono.size.lg
|
dimension |
{"value":20,"unit":"px"}
|
20px
|
--mono-size-lg
|
mono.size.md
|
dimension |
{"value":16,"unit":"px"}
|
16px
|
--mono-size-md
|
mono.size.sm
|
dimension |
{"value":14,"unit":"px"}
|
14px
|
--mono-size-sm
|
mono.size.xs
|
dimension |
{"value":12,"unit":"px"}
|
12px
|
--mono-size-xs
|
mono.weight.regular
|
fontWeight |
400
|
400
|
--mono-weight-regular
|
font.line-height.compact
The line box equals the font size: single-line labels set as in the Figma prototype (Button).
|
number |
1
|
1
|
--font-line-height-compact
|
font.line-height.tight
|
number |
1.2
|
1.2
|
--font-line-height-tight
|
font.line-height.normal
|
number |
1.5
|
1.5
|
--font-line-height-normal
|
font.letter-spacing.normal
|
dimension |
{"value":0,"unit":"px"}
|
0px
|
--font-letter-spacing-normal
|
font.letter-spacing.tight.xs
|
dimension |
{"value":-0.24,"unit":"px"}
|
-0.24px
|
--font-letter-spacing-tight-xs
|
font.letter-spacing.tight.sm
|
dimension |
{"value":-0.28,"unit":"px"}
|
-0.28px
|
--font-letter-spacing-tight-sm
|
font.letter-spacing.tight.md
|
dimension |
{"value":-0.48,"unit":"px"}
|
-0.48px
|
--font-letter-spacing-tight-md
|
Components following it
Derived from the component tokens aliasing the foundation's tokens.
| Component | Component tokens aliasing the foundation |
|---|---|
| Accordion |
|
| Alert |
|
| Avatar |
|
| Badge |
|
| Breadcrumb |
|
| Button |
|
| Card |
|
| Checkbox group |
|
| Checkbox |
|
| Dropdown |
|
| Number field |
|
| Pagination |
|
| Progress bar |
|
| Radio group |
|
| Search field |
|
| Select |
|
| Slider |
|
| Spinner |
|
| Switch |
|
| Text field |
|
| Textarea |
|