Tokens
Every token except colors, grouped by what it sets. Values follow the theme and accent settings at the top of the page. Colors have their own page, Colors; the state and material colors also show here next to their demos. A table shows dark and light only where they differ.
Spacing
Padding, gaps and margins: p-md, px-lg, gap-sm, m-xl, space-y-xs, top-md. Tailwind's numeric scale still works for widths and heights.
p-xs4pxp-sm8pxp-md12pxp-lg16pxp-xl24pxp-2xl32pxp-3xl48pxp-4xl64pxSize
Control heights, one ladder of four steps, used as h-element-md, and the smallest hit area. md is the default control; for a dense region set size="sm" on its controls. On touch screens size-element-md grows to 36px, size-element-lg to 44px, size-element-xl to 48px and size-target-min to 44px, so the values below change on a touch screen. size-element-sm stays 28px.
Radius
Set by seed.radius-base. Nest smaller inside larger: inner in element, element in container. Rows inside a padded menu use item, so their corners line up with the menu's.
rounded-none0pxrounded-inner4pxrounded-item7pxrounded-element8pxrounded-container12pxrounded-page16pxrounded-full9999pxBorder and focus ring
border is border-width. focus-visible:focus-ring sets outline-width-focus-ring, outline-offset-focus-ring and color-focus-ring in one class.
| token | dark | light |
|---|---|---|
| color-focus-ring | #f5f5f5 | #111111 |
| border-width | 1px | 1px |
| outline-width-focus-ring | 2px | 2px |
| outline-offset-focus-ring | 2px | 2px |
Typography
Geist for UI text, JetBrains Mono for code. A type role sets size, weight and leading in one class: text-heading-1, text-body. Sizes on their own: text-sm; inputs use text-input (16px on touch, so iOS Safari doesn't zoom).
text-heading-1Invite people to your workspacetext-heading-2Invite people to your workspacetext-heading-3Invite people to your workspacetext-bodyInvite people to your workspace| token | value |
|---|---|
| font-family-sans | Geist, ui-sans-serif, system-ui, sans-serif |
| font-family-mono | 'JetBrains Mono', ui-monospace, monospace |
| font-size-xs | 12px |
| font-size-sm | 13px |
| font-size-md | 14px |
| font-size-lg | 16px |
| font-size-xl | 18px |
| font-size-input | 14px |
| font-weight-regular | 400 |
| font-weight-medium | 500 |
| font-weight-semibold | 600 |
| heading-1-size | 32px |
| heading-1-weight | 500 |
| heading-1-leading | 1.2 |
| heading-2-size | 24px |
| heading-2-weight | 500 |
| heading-2-leading | 1.25 |
| heading-3-size | 18px |
| heading-3-weight | 500 |
| heading-3-leading | 1.3 |
| body-size | 14px |
| body-weight | 400 |
| body-leading | 1.5 |
Motion
duration-fast for state changes in place, duration-medium for menus and popovers, duration-slow for dialogs and sheets. ease-enter for things arriving, ease-exit for things leaving.
| ease-standard | ease-enter | ease-exit | |
|---|---|---|---|
| duration-fast | |||
| duration-medium | |||
| duration-slow |
| token | value |
|---|---|
| duration-fast | 160ms |
| duration-medium | 250ms |
| duration-slow | 400ms |
| duration-loop | 2000ms |
| ease-standard | cubic-bezier(0.2, 0, 0, 1) |
| ease-enter | cubic-bezier(0.05, 0.7, 0.1, 1) |
| ease-exit | cubic-bezier(0.3, 0, 0.8, 0.15) |
| scale-pressed | 0.96 |
Shadow
Floating layers only. Cards on the page use a border. In dark each level is darker and ends with a 1px light line inside the top edge, so a raised layer stands off the near-black page.
| token | dark | light |
|---|---|---|
| shadow-low | 0px 1px 3px 0px #00000066, inset 0px 1px 0px 0px #ffffff1a | 0px 1px 2px 0px #0000001f |
| shadow-med | 0px 4px 16px 0px #00000080, inset 0px 1px 0px 0px #ffffff1a | 0px 4px 12px 0px #00000029 |
| shadow-high | 0px 16px 40px 0px #00000099, inset 0px 1px 0px 0px #ffffff1a | 0px 12px 32px 0px #00000033 |
Blur and material
Glass layers come in three levels, one class each: material-thin for bars, material-thick for sheets, popovers, dialogs and menus, material-refract for fixed-size elements only. The class draws the fill, the backdrop blur and saturation, a 1px edge highlight and a top highlight, and turns solid where backdrop blur is missing, under reduced transparency and in forced colors. Each fill is solved so primary and secondary text keep 4.5:1 over any backdrop, blur not counted, so it is less see-through than decorative glass. At most two glass layers on a screen, never on list rows, cards or the page.
material-thin
Bar
backdrop-blur-smbackdrop-blur-mdbackdrop-blur-lgmaterial-thick
Secondary text stays readable over anything behind it.
material-thin
Bar
backdrop-blur-smbackdrop-blur-mdbackdrop-blur-lgmaterial-thick
Secondary text stays readable over anything behind it.
| token | dark | light |
|---|---|---|
| color-background-material-thin | #111111d9 | #fafafae6 |
| color-background-material-thick | #181818e6 | #ffffffd9 |
| color-background-material-refract | #181818e6 | #ffffffd9 |
| color-border-material-edge | #ffffff1f | #ffffff99 |
| color-overlay-highlight-on-material | #ffffff29 | #ffffffcc |
| blur-sm | 4px | 4px |
| blur-md | 12px | 12px |
| blur-lg | 24px | 24px |
| blur-material-thin | 12px | 12px |
| blur-material-thick | 20px | 20px |
| blur-material-refract | 20px | 20px |
| saturate-material-thin | 1.4 | 1.4 |
| saturate-material-thick | 1.6 | 1.6 |
| saturate-material-refract | 1.8 | 1.8 |
Opacity
Three roles and no free scale: opacity-pending on content kept on screen while the next content loads, opacity-disabled on non-text content in a disabled control (a swatch, an image), opacity-subtle on decorative imagery. Never use opacity to make text lighter; secondary text uses color-text-secondary, which keeps its contrast.
| token | value |
|---|---|
| opacity-disabled | 0.4 |
| opacity-pending | 0.6 |
| opacity-subtle | 0.3 |
Hover, pressed and disabled
Accent and status solids get their own hover and pressed layers (overlay-hover-on-accent, ...). Neutral fills keep overlay-hover and overlay-pressed.
| fill | default | hover | pressed |
|---|---|---|---|
| accent | Default | ||
| danger | Default | ||
| success | Default | ||
| warning | Default | ||
| info | Default | ||
| surface | Default | ||
| danger soft | Default | ||
| disabled | Disabled | ||
| fill | default | hover | pressed |
|---|---|---|---|
| accent | Default | ||
| danger | Default | ||
| success | Default | ||
| warning | Default | ||
| info | Default | ||
| surface | Default | ||
| danger soft | Default | ||
| disabled | Disabled | ||
| token | dark | light |
|---|---|---|
| color-background-disabled | #1e1e1e | #ededed |
| color-text-disabled | #484848 | #b7b7b7 |
| color-icon-disabled | #484848 | #b7b7b7 |
| color-overlay-hover | #ffffff0f | #0000000a |
| color-overlay-pressed | #ffffff1a | #00000014 |
| color-overlay-hover-on-accent | #00000012 | #ffffff0d |
| color-overlay-pressed-on-accent | #00000024 | #ffffff1a |
| color-overlay-hover-on-danger | #0000001f | #0000001f |
| color-overlay-pressed-on-danger | #0000003b | #0000003b |
| color-overlay-hover-on-success | #ffffff2b | #ffffff2b |
| color-overlay-pressed-on-success | #ffffff52 | #ffffff52 |
| color-overlay-hover-on-warning | #00000017 | #ffffff29 |
| color-overlay-pressed-on-warning | #0000002b | #ffffff52 |
| color-overlay-hover-on-info | #0000001f | #0000001f |
| color-overlay-pressed-on-info | #0000003d | #0000003d |