Prototypes / Design Tokens

Token Names
Dark Mode
Background
Text Color
Border
1. Border Presets
2. Border Radius
Outline
Typography
Size / Space

2 requests, 7 KB (2 KB compressed)

Module: File size; Compressed
/src/theme/colors.css: NaN KB; NaN KB
/src/theme/tokens.css: 6.24 KB; 1.58 KB

Token Names

Token (CSS custom property) names start with the CSS property name they are primarily meant to be used for:
--[property]

For example, the token for the default text color:
--color

Token variants and states are suffixed after the property name:
--[property]-[variant]-[state]

For example, the token for low contrast (secondary) text:
--color-low-contrast

Dark Mode

Light and dark theme presets are available. The theme="dark" and theme="light" attributes can be used to toggle between modes, at any level of DOM hierarchy.

Always light

Always dark

<div theme="light">Always light</div>
<div theme="dark">Always dark</div>

You can customize the hue, saturation, and lightness of the grayscale colors easily.

Custom theme

<div theme="custom-theme">Custom theme</div>
<style>
  [theme="custom-theme"] {
    --bg-h: 200;
    --bg-c: 0.1;
    --bg-l: 0.4;
  }
</style>

Background

Note, that the background tokens are meant to be used for the CSS background shorthand property, and not for the background-color property.

You need to combine these properties with the --background-blend-mode-surface property.

--background-surface-4
Surface which is visually the highest (most elevated). Mainly used for popups/popovers/menus.

--background-surface-3
Surface which is above the default surface. Mainly used for cards, dialogs, and other containers.

--background-surface-2
The default surface.

--background-surface-1
Surface which is below the default surface.

--background-surface-0
Surface which is visually the lowest (most recessed).

Text Color

--color-high-contrastoklch(from oklch(clamp(0, (0.67 - 0.97) * 1000, 1) 0 250) l c h / 90%)
High contrast text color. Use, for example, for heading text elements.

--coloroklch(from oklch(clamp(0, (0.67 - 0.97) * 1000, 1) 0 250) l c h / 60%)
Default text color. Should have at least 7:1 contrast ratio on top of all backgrounds/surfaces.

--color-low-contrastoklch(from oklch(clamp(0, (0.67 - 0.97) * 1000, 1) 0 250) l c h / 40%)
Low contrast text color. Use, for example, for secondary text elements. Should have at least 4.5:1 contrast ratio on top of all non-UI backgrounds.

--color-disabled
Disabled text color.

--color-accent

--color-accent-high-contrast

--color-accent-low-contrast

Border

--border-coloroklch(from oklch(clamp(0, (0.67 - 0.97) * 1000, 1) 0 250) l c h / 8%)
Default border color.

--border-color-high-contrastoklch(from oklch(clamp(0, (0.67 - 0.97) * 1000, 1) 0 250) l c h / 11%)
High contrast border color.

--border-color-low-contrast
Low contrast border color.

--border-color-accent

Border Presets

--border-ui1px solid oklch(from oklch(clamp(0, (0.67 - 0.97) * 1000, 1) 0 250) l c h / 11%)
Default border for UI controls, such as text inputs.

--border-ui-hover
Border for UI controls when hovered.

--border-ui-active
Border for UI controls when activated.

--border-ui-focus
Border for UI controls when focused.

Border Radius

--border-radius-l12px
Large border radius. For example, dialogs, cards, and other containers.

--border-radius-m8px
Medium border radius. For example, button and text input.

--border-radius-s5px
Small border radius. For example, checkbox.

Outline

Focus outlines are the primary use case for these tokens.

--outline-color var(--border-color-accent)
The color of the outline.

--outline-offset 2px
How far detached the outline is from the associated component.

--outline-width 2px
The size of the outline.

Typography

Font Family

Lorem ipsum

<p style="font-family: var(--font-family-sans-serif);">Lorem ipsum</p>
<p style="font-family: var(--font-family-serif);">Lorem ipsum</p>
<p style="font-family: var(--font-family-monospace);">Lorem ipsum</p>

--font-family-sans-serifsystem-ui, ui-sans-serif, -apple-system, sans-serif

--font-family-serifui-serif, serif

--font-family-monospaceui-monospace, "Menlo", "Monaco", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro","Fira Mono", "Droid Sans Mono", "Courier New", monospace

--font-family system-ui, ui-sans-serif, -apple-system, sans-serifvar(--font-family-sans-serif)

<p style="font-size: var(--font-size-3xl);">Lorem ipsum</p>
<p style="font-size: var(--font-size-2xl);">Lorem ipsum</p>
<p style="font-size: var(--font-size-xl);">Lorem ipsum</p>
<p style="font-size: var(--font-size-l);">Lorem ipsum</p>
<p style="font-size: var(--font-size-m);">Lorem ipsum</p>
<p style="font-size: var(--font-size-s);">Lorem ipsum</p>
<p style="font-size: var(--font-size-xs);">Lorem ipsum</p>
<p style="font-size: var(--font-size-2xs);">Lorem ipsum</p>

--font-size-3xl2rem

--font-size-2xl1.5rem

--font-size-xl1.25rem

--font-size-l1.0625rem

--font-size-m0.9375rem

--font-size-s0.875rem

--font-size-xs0.8125rem

--font-size-2xs0.75rem

Line Height

--line-height-m1.375rem

--line-height-s1.125rem

--line-height-xs1rem

--line-height-m-px

--line-height-s-px

--line-height-xs-px

Font Weight

--font-weight-strongest650

--font-weight-strong500

--font-weight450

--font-weight-weak

--font-weight-weakest

Font Smoothing

--font-smoothing
Set to auto to disable grayscale/antialiased font smoothing and use default sub-pixel antialiasing.

Presets

--font-label
Form field labels.

--font-button500 0.9375rem/1.125rem system-ui, ui-sans-serif, -apple-system, sans-serif

--font-button-small500 0.875rem/1rem system-ui, ui-sans-serif, -apple-system, sans-serif
Font size and line height should match those of --font-textinput-small.

--font-textinput450 0.9375rem/1.125rem system-ui, ui-sans-serif, -apple-system, sans-serif

--font-textinput-small450 0.875rem/1rem system-ui, ui-sans-serif, -apple-system, sans-serif
Font size and line height should match those of --font-button-small.

--font-field-label500 0.9375rem/1.125rem system-ui, ui-sans-serif, -apple-system, sans-serif

--font-field-description450 0.875rem/1.125rem system-ui, ui-sans-serif, -apple-system, sans-serif

Size / Space

--size-1

--size-2

--size-4

--size-6

--size-8

--size-12

--size-16

--size-24

--size-28

--size-32

--size-40

--size-48

--size-56

--size-64