Tokens
The custom properties the components use for corners, text and shadows. Use them in your own CSS, and your elements match the components next to them.
This page shows which token to use for what. To change the values, see Customization.
Border radius
Eight steps of corner rounding, and --ui-rounded-full
for pills and circles. Use the step that the components of the same
size use.
| Property | Use for |
|---|---|
--ui-rounded-1 |
The smallest rounding, for tiny marks and inner details. |
--ui-rounded-2 |
Small elements, like checkboxes, code, kbd and skeletons. |
--ui-rounded-3 |
Most controls, like buttons, inputs and menus. |
--ui-rounded-4 |
Small surfaces, like a group of controls. |
--ui-rounded-5 |
Surfaces, like cards, dialogs, drawers and popovers. |
--ui-rounded-6 |
Large surfaces. |
--ui-rounded-7 |
Large surfaces with a lot of padding. |
--ui-rounded-8 |
The largest rounding, for hero blocks and big panels. |
--ui-rounded-full |
Pills and circles, like badges, avatars and switches. |
.panel {
border-radius: var(--ui-rounded-5);
}
.tag {
border-radius: var(--ui-rounded-full);
}
When you put one rounded element inside another, the corners must
match. Two steps next to each other are about 0.5em
apart. So pad the outer element by 0.5em and give it one
step more than the inner element. To use more padding, go up more
steps. For 1em, go up two steps.
/* one step apart, padded by 0.5em */
.outer {
border-radius: var(--ui-rounded-5);
padding: 0.5em;
}
.inner {
border-radius: var(--ui-rounded-4);
}
/* two steps apart, padded by 1em */
.wide-outer {
border-radius: var(--ui-rounded-5);
padding: 1em;
}
.wide-inner {
border-radius: var(--ui-rounded-3);
}Font size
Thirteen font sizes. In HTML, use the Text classes. They set the font size and a line height that fits it. In CSS, use the token and set the line height from the table yourself.
| Property | Size | Line height | Class |
|---|---|---|---|
--ui-text-xs |
0.75rem |
1rem |
.text-xs |
--ui-text-sm |
0.875rem |
1.25rem |
.text-sm |
--ui-text-base |
1rem |
1.5rem |
.text-base |
--ui-text-lg |
1.125rem |
1.75rem |
.text-lg |
--ui-text-xl |
1.25rem |
1.75rem |
.text-xl |
--ui-text-2xl |
1.5rem |
2rem |
.text-2xl |
--ui-text-3xl |
1.875rem |
2.25rem |
.text-3xl |
--ui-text-4xl |
2.25rem |
2.5rem |
.text-4xl |
--ui-text-5xl |
3rem |
3rem |
.text-5xl |
--ui-text-6xl |
3.75rem |
3.75rem |
.text-6xl |
--ui-text-7xl |
4.5rem |
4.5rem |
.text-7xl |
--ui-text-8xl |
6rem |
6rem |
.text-8xl |
--ui-text-9xl |
8rem |
8rem |
.text-9xl |
The sizes use rem. So a size is always the same,
wherever the element is on the page.
A heading in 2xl
A caption in sm
<p class="text-2xl">A heading in 2xl</p>
<p class="text-sm">A caption in sm</p>
<style>
.caption {
font-size: var(--ui-text-sm);
line-height: 1.25rem;
}
</style>Shadow
Five shadows that lift an element off the page, three inset shadows that press it in, and three shiny shadows that make it look rounded and lit. The higher the element sits, the higher the step. The Shadows page shows how to animate and stack them.
| Property | Use for |
|---|---|
--ui-shadow-0 |
No shadow. Start from it when a shadow animates in. |
--ui-shadow-1 |
Elements that sit just above the page, like a raised button. |
--ui-shadow-2 |
Small floating elements, like tooltips. |
--ui-shadow-3 |
Cards and menus. |
--ui-shadow-4 |
Popovers and drawers. |
--ui-shadow-5 |
Dialogs and anything else on top of everything. |
--ui-shadow-inset-0 |
No inset shadow. Start from it when a press animates in. |
--ui-shadow-inset-1 |
A light dent, like an input or a track. |
--ui-shadow-inset-2 |
A pressed button, or a well that holds content. |
--ui-shadow-inset-3 |
A deep well. |
--ui-shadow-shiny-0 |
No shiny shadow. Start from it when a shine animates in. |
--ui-shadow-shiny-1 |
A glossy button or chip that catches the light. |
--ui-shadow-shiny-2 |
A larger glossy control, like a call to action. |
--ui-shadow-shiny-3 |
A glossy card or panel. |
.card {
box-shadow: var(--ui-shadow-3);
transition: box-shadow 400ms var(--ease-glide);
&:hover {
box-shadow: var(--ui-shadow-4);
}
}
.well {
box-shadow: var(--ui-shadow-inset-2);
}