Reference Tokens
Colors
Font Weight
Font Size
Astro UXDS font size tokens define the font size of text styles and
elements. The design tokens are based on a t-shirt sizing system where the font-size-base token equals 1 rem (16 px by default), and font sizes are either smaller (sm,
xs) or larger (lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl) than the base. For reference,
the P body text style uses the font-size-base
token to set the font size.
Font Weight
Radii
Opacity
Border Width
Spacing
Astro UXDS spacing tokens use increments of four to define all dimensions,
padding, and margins for components, containers, grids, and other UI
elements. The design tokens are based on a 4 px system where 1 token step
equals .25 rem, which equals 4 px by default. For example, the spacing-4 token equals 1 rem (16 px by default).
When building components, Astro UXDS uses the border-collapse method for sizing. In this method the borders overlap the padding within a component, as opposed to the box model method where the borders are added in addition to the padding. So in Astro UXDS, a component with 8 px padding and 2 px border would only have 8 px of spacing.
Line Height
Astro UXDS line height tokens use increments of four to define the spacing
and line height of text styles and elements. The design tokens are based on
a t-shirt sizing system where the line-height-base token equals
1.5 rem (24 px by default), and line heights are either smaller (sm, xs, 2xs)
or larger (lg, xl, 2xl, 3xl, 4xl) than the base. For reference, the P body text
style uses the line-height-base token to set the line height.
Typography
The following typography tokens are mostly for reference. We recommend that developers use our typography utility classes instead