Concepts

Compositions

Design tokens

Customization

Colors

Primitive swatches, surface roles, and palettes in the Saas UI preset

Product UI should use roles (bg, fg, border) and palette slots (accent.solid, destructive.fg). Primitive tokens are the raw pigments those roles resolve to.

How the system is structured: Color system.

Primitives

black, white, and the whiteAlpha / blackAlpha ramps. black and white are OKLCH, not #000 / #fff.

black

oklch(0.05 0.030 261.692)

white

oklch(1 0 0)

whiteAlpha

whiteAlpha.50

oklch(1 0 0 / 0.04)

whiteAlpha.100

oklch(1 0 0 / 0.06)

whiteAlpha.200

oklch(1 0 0 / 0.08)

whiteAlpha.300

oklch(1 0 0 / 0.16)

whiteAlpha.400

oklch(1 0 0 / 0.24)

whiteAlpha.500

oklch(1 0 0 / 0.36)

whiteAlpha.600

oklch(1 0 0 / 0.48)

whiteAlpha.700

oklch(1 0 0 / 0.64)

whiteAlpha.800

oklch(1 0 0 / 0.80)

whiteAlpha.900

oklch(1 0 0 / 0.92)

whiteAlpha.950

oklch(1 0 0 / 0.95)

blackAlpha

blackAlpha.50

oklch(0 0 0 / 0.04)

blackAlpha.100

oklch(0 0 0 / 0.06)

blackAlpha.200

oklch(0 0 0 / 0.08)

blackAlpha.300

oklch(0 0 0 / 0.16)

blackAlpha.400

oklch(0 0 0 / 0.24)

blackAlpha.500

oklch(0 0 0 / 0.36)

blackAlpha.600

oklch(0 0 0 / 0.48)

blackAlpha.700

oklch(0 0 0 / 0.64)

blackAlpha.800

oklch(0 0 0 / 0.80)

blackAlpha.900

oklch(0 0 0 / 0.92)

blackAlpha.950

oklch(0 0 0 / 0.95)

Surfaces

Semantic roles for page chrome. These follow the appearance base seed.

Group	Tokens
Background	`bg`, `bg.surface`, `bg.elevated`, `bg.inset`, `bg.overlay`, `bg.backdrop`, `bg.inverted`
Foreground	`fg`, `fg.muted`, `fg.subtle`, `fg.emphasized`, `fg.inverted`
Border	`border`, `border.muted`, `border.subtle`, `border.emphasized`
Sidebar	`sidebar.bg`, `sidebar.fg`, `sidebar.border`, `sidebar.accent.*`
Status	`status.info\|success\|warning\|error` → palette solids
Presence	`presence.online\|busy\|dnd\|offline\|away`

bg.error / fg.warning / border.destructive are the muted, fg, and border slots of those palettes. colors.shadow is the pigment used by elevation tokens.

background

base: light-dark(oklch(from var(--sui-base) calc(0.985 + 0.005 * max(calc(-1 * var(--sui-contrast)), 0) - 0.005 * max(var(--sui-contrast), 0)) calc(c * 0.2) h / 1), oklch(from var(--sui-base) calc(0.14 + 0.005 * max(calc(-1 * var(--sui-contrast)), 0) - 0.015 * max(var(--sui-contrast), 0)) calc(c * 0.2) h / 1))

bg.surface

base: light-dark(oklch(from var(--sui-base) 1 0 h / 1), oklch(from var(--sui-base) calc(0.17 - 0.005 * max(calc(-1 * var(--sui-contrast)), 0) + 0.005 * max(var(--sui-contrast), 0)) 0 h / 1))

bg.elevated

base: light-dark(oklch(from var(--sui-base) 1 0 h / 1), oklch(from var(--sui-base) calc(0.2 - 0.015 * max(calc(-1 * var(--sui-contrast)), 0) + 0.025 * max(var(--sui-contrast), 0)) calc(c * 0.45) h / 1))

bg.inset

base: light-dark(oklch(from var(--sui-base) calc(0.965 + 0.01 * max(calc(-1 * var(--sui-contrast)), 0) - 0.02 * max(var(--sui-contrast), 0)) calc(c * 0.35) h / 1), oklch(from var(--sui-base) calc(0.11 + 0.01 * max(calc(-1 * var(--sui-contrast)), 0) - 0.025 * max(var(--sui-contrast), 0)) calc(c * 0.3) h / 1))

bg.overlay

base: light-dark(oklch(from var(--sui-base) 1 0 h / 0.95), oklch(from var(--sui-base) calc(0.2 - 0.015 * max(calc(-1 * var(--sui-contrast)), 0) + 0.025 * max(var(--sui-contrast), 0)) calc(c * 0.45) h / 0.9))

bg.backdrop

base: oklch(0 0 0 / 0.3)

bg.inverted

base: light-dark(oklch(from var(--sui-base) 0.16 calc(c * 0.4) h / 1), oklch(from var(--sui-base) 0.985 calc(c * 0.08) h / 1))

bg.muted

base: {bg.inset}

bg.subtle

base: {interaction.hover}

bg.emphasized

base: {interaction.pressed}

bg.content

base: {bg}

bg.panel

base: {bg.surface}

bg.error

base: {destructive.muted}

bg.warning

base: {warning.muted}

bg.success

base: {success.muted}

bg.info

base: {info.muted}

bg.destructive

base: {destructive.muted}

border

base: light-dark(oklch(from var(--sui-base) calc(0.18 + 0.02 * max(calc(-1 * var(--sui-contrast)), 0) - 0.02 * max(var(--sui-contrast), 0)) calc(c * 0.3) h / calc(0.1 - 0.02 * max(calc(-1 * var(--sui-contrast)), 0) + 0.02 * max(var(--sui-contrast), 0))), oklch(from var(--sui-base) calc(0.94 - 0.02 * max(calc(-1 * var(--sui-contrast)), 0) + 0.02 * max(var(--sui-contrast), 0)) calc(c * 0.3) h / calc(0.12 - 0.02 * max(calc(-1 * var(--sui-contrast)), 0) + 0.03 * max(var(--sui-contrast), 0))))

border.muted

base: light-dark(oklch(from var(--sui-base) calc(0.18 + 0.02 * max(calc(-1 * var(--sui-contrast)), 0) - 0.02 * max(var(--sui-contrast), 0)) calc(c * 0.3) h / calc(0.055 - 0.011 * max(calc(-1 * var(--sui-contrast)), 0) + 0.011 * max(var(--sui-contrast), 0))), oklch(from var(--sui-base) calc(0.94 - 0.02 * max(calc(-1 * var(--sui-contrast)), 0) + 0.02 * max(var(--sui-contrast), 0)) calc(c * 0.3) h / calc(0.066 - 0.011 * max(calc(-1 * var(--sui-contrast)), 0) + 0.0165 * max(var(--sui-contrast), 0))))

border.subtle

base: light-dark(oklch(from var(--sui-base) calc(0.18 + 0.02 * max(calc(-1 * var(--sui-contrast)), 0) - 0.02 * max(var(--sui-contrast), 0)) calc(c * 0.3) h / calc(0.075 - 0.015 * max(calc(-1 * var(--sui-contrast)), 0) + 0.015 * max(var(--sui-contrast), 0))), oklch(from var(--sui-base) calc(0.94 - 0.02 * max(calc(-1 * var(--sui-contrast)), 0) + 0.02 * max(var(--sui-contrast), 0)) calc(c * 0.3) h / calc(0.09 - 0.015 * max(calc(-1 * var(--sui-contrast)), 0) + 0.0225 * max(var(--sui-contrast), 0))))

border.emphasized

base: light-dark(oklch(from var(--sui-base) calc(0.18 + 0.02 * max(calc(-1 * var(--sui-contrast)), 0) - 0.02 * max(var(--sui-contrast), 0)) calc(c * 0.3) h / calc(0.17 - 0.03 * max(calc(-1 * var(--sui-contrast)), 0) + 0.05 * max(var(--sui-contrast), 0))), oklch(from var(--sui-base) calc(0.94 - 0.02 * max(calc(-1 * var(--sui-contrast)), 0) + 0.02 * max(var(--sui-contrast), 0)) calc(c * 0.3) h / calc(0.21 - 0.04 * max(calc(-1 * var(--sui-contrast)), 0) + 0.05 * max(var(--sui-contrast), 0))))

border.inverted

base: light-dark(oklch(from var(--sui-base) 0.985 calc(c * 0.2) h / 0.8), oklch(from var(--sui-base) 0.16 calc(c * 0.2) h / 0.8))

border.error

base: {destructive.border}

border.warning

base: {warning.border}

border.success

base: {success.border}

border.info

base: {info.border}

border.destructive

base: {destructive.border}

text

base: light-dark(oklch(from var(--sui-base) calc(0.18 + 0.02 * max(calc(-1 * var(--sui-contrast)), 0) - 0.02 * max(var(--sui-contrast), 0)) calc(c * 0.3) h / 1), oklch(from var(--sui-base) calc(0.94 - 0.02 * max(calc(-1 * var(--sui-contrast)), 0) + 0.02 * max(var(--sui-contrast), 0)) calc(c * 0.3) h / 1))

fg.muted

base: light-dark(oklch(from var(--sui-base) calc(0.42 + 0.02 * max(calc(-1 * var(--sui-contrast)), 0) - 0.02 * max(var(--sui-contrast), 0)) calc(c * 0.55) h / 1), oklch(from var(--sui-base) calc(0.72 - 0.02 * max(calc(-1 * var(--sui-contrast)), 0) + 0.03 * max(var(--sui-contrast), 0)) calc(c * 0.55) h / 1))

fg.subtle

base: light-dark(oklch(from var(--sui-base) calc(0.52 + 0.02 * max(calc(-1 * var(--sui-contrast)), 0) - 0.03 * max(var(--sui-contrast), 0)) calc(c * 0.5) h / 1), oklch(from var(--sui-base) calc(0.6 - 0.02 * max(calc(-1 * var(--sui-contrast)), 0) + 0.03 * max(var(--sui-contrast), 0)) calc(c * 0.5) h / 1))

fg.emphasized

base: light-dark(oklch(from var(--sui-base) calc(0.26 + 0.02 * max(calc(-1 * var(--sui-contrast)), 0) - 0.03 * max(var(--sui-contrast), 0)) calc(c * 0.4) h / 1), oklch(from var(--sui-base) calc(0.84 - 0.02 * max(calc(-1 * var(--sui-contrast)), 0) + 0.03 * max(var(--sui-contrast), 0)) calc(c * 0.4) h / 1))

fg.inverted

base: light-dark(oklch(from var(--sui-base) 0.985 calc(c * 0.08) h / 1), oklch(from var(--sui-base) 0.16 calc(c * 0.4) h / 1))

fg.error

base: {destructive.fg}

fg.warning

base: {warning.fg}

fg.success

base: {success.fg}

fg.info

base: {info.fg}

fg.destructive

base: {destructive.fg}

sidebar

sidebar.bg

base: var(--sui-color-sidebar-bg)

sidebar.fg

base: var(--sui-color-sidebar-fg)

sidebar.border

base: var(--sui-color-sidebar-border)

sidebar.accent.bg

base: var(--sui-color-sidebar-accent-bg)

sidebar.accent.fg

base: {sidebar.fg}

status

status.success

base: {success.solid}

status.error

base: {destructive.solid}

status.warning

base: {warning.solid}

status.info

base: {info.solid}

presence

presence.online

base: {success.solid}

presence.offline

base: {gray.solid}

presence.busy

base: {warning.solid}

presence.dnd

base: {destructive.solid}

presence.away

base: {gray.solid}

Palettes

Every palette shares the same slots: solid, contrast, fg, muted, subtle, emphasized, border, focusRing.

Use appearance palettes in product UI: base, accent, info, success, warning, destructive. Catalog hues (red, blue, gray, …) are for charts and one-off coding. They do not follow --sui-accent.

base

base.contrast

light-dark(oklch(from var(--sui-base) 0.985 calc(c * 0.08) h / 1), oklch(from var(--sui-base) 0.16 calc(c * 0.4) h / 1))

base.fg

light-dark(oklch(from var(--sui-base) 0.28 calc(c * 0.65) h / 1), oklch(from var(--sui-base) 0.84 calc(c * 0.5) h / 1))

base.muted

light-dark(oklch(from var(--sui-base) calc(0.18 + 0.02 * max(calc(-1 * var(--sui-contrast)), 0) - 0.02 * max(var(--sui-contrast), 0)) calc(c * 0.3) h / 0.05), oklch(from var(--sui-base) calc(0.94 - 0.02 * max(calc(-1 * var(--sui-contrast)), 0) + 0.02 * max(var(--sui-contrast), 0)) calc(c * 0.3) h / 0.08))

base.subtle

light-dark(oklch(from var(--sui-base) calc(0.18 + 0.02 * max(calc(-1 * var(--sui-contrast)), 0) - 0.02 * max(var(--sui-contrast), 0)) calc(c * 0.3) h / 0.08), oklch(from var(--sui-base) calc(0.94 - 0.02 * max(calc(-1 * var(--sui-contrast)), 0) + 0.02 * max(var(--sui-contrast), 0)) calc(c * 0.3) h / 0.13))

base.emphasized

light-dark(oklch(from var(--sui-base) calc(0.18 + 0.02 * max(calc(-1 * var(--sui-contrast)), 0) - 0.02 * max(var(--sui-contrast), 0)) calc(c * 0.3) h / 0.14), oklch(from var(--sui-base) calc(0.94 - 0.02 * max(calc(-1 * var(--sui-contrast)), 0) + 0.02 * max(var(--sui-contrast), 0)) calc(c * 0.3) h / 0.2))

base.solid

light-dark(oklch(from var(--sui-base) 0.2 calc(c * 0.5) h / 1), oklch(from var(--sui-base) 0.92 calc(c * 0.25) h / 1))

base.focusRing

light-dark(oklch(from var(--sui-base) 0.48 calc(c * 0.8) h / 1), oklch(from var(--sui-base) 0.68 calc(c * 0.8) h / 1))

base.border

light-dark(oklch(from var(--sui-base) calc(0.18 + 0.02 * max(calc(-1 * var(--sui-contrast)), 0) - 0.02 * max(var(--sui-contrast), 0)) calc(c * 0.3) h / 0.12), oklch(from var(--sui-base) calc(0.94 - 0.02 * max(calc(-1 * var(--sui-contrast)), 0) + 0.02 * max(var(--sui-contrast), 0)) calc(c * 0.3) h / 0.18))

accent

accent.contrast

base: oklch(from var(--sui-accent) calc(0.16 + 0.825 * var(--sui-accent-foreground-tone)) min(calc(c * calc(0.1 - 0.04 * var(--sui-accent-foreground-tone))), calc(0.025 - 0.01 * var(--sui-accent-foreground-tone))) h / 1)

accent.fg

base: light-dark(oklch(from var(--sui-accent) min(l, 0.44) min(calc(c * 0.65), 0.18) h / 1), oklch(from var(--sui-accent) max(l, 0.78) min(calc(c * 0.65), 0.18) h / 1))

accent.muted

base: light-dark(oklch(from var(--sui-accent) l c h / 0.07), oklch(from var(--sui-accent) l c h / 0.1))

accent.subtle

base: light-dark(oklch(from var(--sui-accent) l c h / 0.11), oklch(from var(--sui-accent) l c h / 0.16))

accent.emphasized

base: light-dark(oklch(from var(--sui-accent) l c h / 0.18), oklch(from var(--sui-accent) l c h / 0.24))

accent.solid

base: oklch(from var(--sui-accent) l c h / 1)

accent.focusRing

base: {accent.solid}

accent.border

base: light-dark(oklch(from var(--sui-accent) l c h / 0.32), oklch(from var(--sui-accent) l c h / 0.44))

info

info.contrast

info.fg

base: light-dark(oklch(from var(--sui-accent) min(l, 0.44) min(calc(c * 0.65), 0.18) 260 / 1), oklch(from var(--sui-accent) max(l, 0.78) min(calc(c * 0.65), 0.18) 260 / 1))

info.muted

base: light-dark(oklch(from var(--sui-accent) l c 260 / 0.07), oklch(from var(--sui-accent) l c 260 / 0.1))

info.subtle

base: light-dark(oklch(from var(--sui-accent) l c 260 / 0.11), oklch(from var(--sui-accent) l c 260 / 0.16))

info.emphasized

base: light-dark(oklch(from var(--sui-accent) l c 260 / 0.18), oklch(from var(--sui-accent) l c 260 / 0.24))

info.solid

base: oklch(from var(--sui-accent) l c 260 / 1)

info.focusRing

base: oklch(from var(--sui-accent) l c 260 / 1)

info.border

base: light-dark(oklch(from var(--sui-accent) l c 260 / 0.32), oklch(from var(--sui-accent) l c 260 / 0.44))

success

success.contrast

success.fg

base: light-dark(oklch(from var(--sui-accent) min(l, 0.44) min(calc(c * 0.65), 0.18) 150 / 1), oklch(from var(--sui-accent) max(l, 0.78) min(calc(c * 0.65), 0.18) 150 / 1))

success.muted

base: light-dark(oklch(from var(--sui-accent) l c 150 / 0.07), oklch(from var(--sui-accent) l c 150 / 0.1))

success.subtle

base: light-dark(oklch(from var(--sui-accent) l c 150 / 0.11), oklch(from var(--sui-accent) l c 150 / 0.16))

success.emphasized

base: light-dark(oklch(from var(--sui-accent) l c 150 / 0.18), oklch(from var(--sui-accent) l c 150 / 0.24))

success.solid

base: oklch(from var(--sui-accent) l c 150 / 1)

success.focusRing

base: oklch(from var(--sui-accent) l c 150 / 1)

success.border

base: light-dark(oklch(from var(--sui-accent) l c 150 / 0.32), oklch(from var(--sui-accent) l c 150 / 0.44))

warning

warning.contrast

warning.fg

base: light-dark(oklch(from var(--sui-accent) min(l, 0.44) min(calc(c * 0.65), 0.18) 50 / 1), oklch(from var(--sui-accent) max(l, 0.78) min(calc(c * 0.65), 0.18) 50 / 1))

warning.muted

base: light-dark(oklch(from var(--sui-accent) l c 50 / 0.07), oklch(from var(--sui-accent) l c 50 / 0.1))

warning.subtle

base: light-dark(oklch(from var(--sui-accent) l c 50 / 0.11), oklch(from var(--sui-accent) l c 50 / 0.16))

warning.emphasized

base: light-dark(oklch(from var(--sui-accent) l c 50 / 0.18), oklch(from var(--sui-accent) l c 50 / 0.24))

warning.solid

base: oklch(from var(--sui-accent) l c 50 / 1)

warning.focusRing

base: oklch(from var(--sui-accent) l c 50 / 1)

warning.border

base: light-dark(oklch(from var(--sui-accent) l c 50 / 0.32), oklch(from var(--sui-accent) l c 50 / 0.44))

destructive

destructive.contrast

destructive.fg

base: light-dark(oklch(from var(--sui-accent) min(l, 0.44) min(calc(c * 0.65), 0.18) 25 / 1), oklch(from var(--sui-accent) max(l, 0.78) min(calc(c * 0.65), 0.18) 25 / 1))

destructive.muted

base: light-dark(oklch(from var(--sui-accent) l c 25 / 0.07), oklch(from var(--sui-accent) l c 25 / 0.1))

destructive.subtle

base: light-dark(oklch(from var(--sui-accent) l c 25 / 0.11), oklch(from var(--sui-accent) l c 25 / 0.16))

destructive.emphasized

base: light-dark(oklch(from var(--sui-accent) l c 25 / 0.18), oklch(from var(--sui-accent) l c 25 / 0.24))

destructive.solid

base: oklch(from var(--sui-accent) l c 25 / 1)

destructive.focusRing

base: oklch(from var(--sui-accent) l c 25 / 1)

destructive.border

base: light-dark(oklch(from var(--sui-accent) l c 25 / 0.32), oklch(from var(--sui-accent) l c 25 / 0.44))

gray

gray.contrast

light: oklch(0.985 0.001 260)

dark: oklch(0.985 0.001 260)

gray.fg

light: oklch(0.44 0.008 260)

dark: oklch(0.78 0.008 260)

gray.muted

light: oklch(0.45 0.012 260 / 0.07)

dark: oklch(0.45 0.012 260 / 0.1)

gray.subtle

light: oklch(0.45 0.012 260 / 0.11)

dark: oklch(0.45 0.012 260 / 0.16)

gray.emphasized

light: oklch(0.45 0.012 260 / 0.18)

dark: oklch(0.45 0.012 260 / 0.24)

gray.solid

light: oklch(0.45 0.012 260)

dark: oklch(0.45 0.012 260)

gray.focusRing

light: oklch(0.45 0.012 260)

dark: oklch(0.45 0.012 260)

gray.border

light: oklch(0.45 0.012 260 / 0.32)

dark: oklch(0.45 0.012 260 / 0.44)

zinc

zinc.contrast

light: oklch(0.985 0.001 286)

dark: oklch(0.985 0.001 286)

zinc.fg

light: oklch(0.44 0.007 286)

dark: oklch(0.78 0.007 286)

zinc.muted

light: oklch(0.45 0.01 286 / 0.07)

dark: oklch(0.45 0.01 286 / 0.1)

zinc.subtle

light: oklch(0.45 0.01 286 / 0.11)

dark: oklch(0.45 0.01 286 / 0.16)

zinc.emphasized

light: oklch(0.45 0.01 286 / 0.18)

dark: oklch(0.45 0.01 286 / 0.24)

zinc.solid

light: oklch(0.45 0.01 286)

dark: oklch(0.45 0.01 286)

zinc.focusRing

light: oklch(0.45 0.01 286)

dark: oklch(0.45 0.01 286)

zinc.border

light: oklch(0.45 0.01 286 / 0.32)

dark: oklch(0.45 0.01 286 / 0.44)

neutral

neutral.contrast

light: {white}

dark: {black}

neutral.fg

light: {black}

dark: {white}

neutral.muted

light: {black/5}

dark: {white/8}

neutral.subtle

light: {black/8}

dark: {white/13}

neutral.emphasized

light: {black/14}

dark: {white/20}

neutral.solid

light: {black}

dark: {white}

neutral.focusRing

light: {black}

dark: {white}

neutral.border

light: {black/12}

dark: {white/18}

stone

stone.contrast

light: oklch(0.985 0.001 56)

dark: oklch(0.985 0.001 56)

stone.fg

light: oklch(0.44 0.007 56)

dark: oklch(0.78 0.007 56)

stone.muted

light: oklch(0.45 0.01 56 / 0.07)

dark: oklch(0.45 0.01 56 / 0.1)

stone.subtle

light: oklch(0.45 0.01 56 / 0.11)

dark: oklch(0.45 0.01 56 / 0.16)

stone.emphasized

light: oklch(0.45 0.01 56 / 0.18)

dark: oklch(0.45 0.01 56 / 0.24)

stone.solid

light: oklch(0.45 0.01 56)

dark: oklch(0.45 0.01 56)

stone.focusRing

light: oklch(0.45 0.01 56)

dark: oklch(0.45 0.01 56)

stone.border

light: oklch(0.45 0.01 56 / 0.32)

dark: oklch(0.45 0.01 56 / 0.44)

red

red.contrast

light: oklch(0.985 0.013 25)

dark: oklch(0.985 0.013 25)

red.fg

light: oklch(0.44 0.143 25)

dark: oklch(0.78 0.143 25)

red.muted

light: oklch(0.55 0.22 25 / 0.07)

dark: oklch(0.55 0.22 25 / 0.1)

red.subtle

light: oklch(0.55 0.22 25 / 0.11)

dark: oklch(0.55 0.22 25 / 0.16)

red.emphasized

light: oklch(0.55 0.22 25 / 0.18)

dark: oklch(0.55 0.22 25 / 0.24)

red.solid

light: oklch(0.55 0.22 25)

dark: oklch(0.55 0.22 25)

red.focusRing

light: oklch(0.55 0.22 25)

dark: oklch(0.55 0.22 25)

red.border

light: oklch(0.55 0.22 25 / 0.32)

dark: oklch(0.55 0.22 25 / 0.44)

orange

orange.contrast

light: oklch(0.985 0.013 50)

dark: oklch(0.985 0.013 50)

orange.fg

light: oklch(0.44 0.143 50)

dark: oklch(0.78 0.143 50)

orange.muted

light: oklch(0.58 0.22 50 / 0.07)

dark: oklch(0.58 0.22 50 / 0.1)

orange.subtle

light: oklch(0.58 0.22 50 / 0.11)

dark: oklch(0.58 0.22 50 / 0.16)

orange.emphasized

light: oklch(0.58 0.22 50 / 0.18)

dark: oklch(0.58 0.22 50 / 0.24)

orange.solid

light: oklch(0.58 0.22 50)

dark: oklch(0.58 0.22 50)

orange.focusRing

light: oklch(0.58 0.22 50)

dark: oklch(0.58 0.22 50)

orange.border

light: oklch(0.58 0.22 50 / 0.32)

dark: oklch(0.58 0.22 50 / 0.44)

amber

amber.contrast

light: oklch(0.16 0.022 80)

dark: oklch(0.16 0.022 80)

amber.fg

light: oklch(0.44 0.143 80)

dark: oklch(0.8 0.143 80)

amber.muted

light: oklch(0.8 0.22 80 / 0.07)

dark: oklch(0.8 0.22 80 / 0.1)

amber.subtle

light: oklch(0.8 0.22 80 / 0.11)

dark: oklch(0.8 0.22 80 / 0.16)

amber.emphasized

light: oklch(0.8 0.22 80 / 0.18)

dark: oklch(0.8 0.22 80 / 0.24)

amber.solid

light: oklch(0.8 0.22 80)

dark: oklch(0.8 0.22 80)

amber.focusRing

light: oklch(0.8 0.22 80)

dark: oklch(0.8 0.22 80)

amber.border

light: oklch(0.8 0.22 80 / 0.32)

dark: oklch(0.8 0.22 80 / 0.44)

yellow

yellow.contrast

light: oklch(0.16 0.022 95)

dark: oklch(0.16 0.022 95)

yellow.fg

light: oklch(0.44 0.143 95)

dark: oklch(0.84 0.143 95)

yellow.muted

light: oklch(0.84 0.22 95 / 0.07)

dark: oklch(0.84 0.22 95 / 0.1)

yellow.subtle

light: oklch(0.84 0.22 95 / 0.11)

dark: oklch(0.84 0.22 95 / 0.16)

yellow.emphasized

light: oklch(0.84 0.22 95 / 0.18)

dark: oklch(0.84 0.22 95 / 0.24)

yellow.solid

light: oklch(0.84 0.22 95)

dark: oklch(0.84 0.22 95)

yellow.focusRing

light: oklch(0.84 0.22 95)

dark: oklch(0.84 0.22 95)

yellow.border

light: oklch(0.84 0.22 95 / 0.32)

dark: oklch(0.84 0.22 95 / 0.44)

lime

lime.contrast

light: oklch(0.16 0.022 128)

dark: oklch(0.16 0.022 128)

lime.fg

light: oklch(0.44 0.143 128)

dark: oklch(0.8 0.143 128)

lime.muted

light: oklch(0.8 0.22 128 / 0.07)

dark: oklch(0.8 0.22 128 / 0.1)

lime.subtle

light: oklch(0.8 0.22 128 / 0.11)

dark: oklch(0.8 0.22 128 / 0.16)

lime.emphasized

light: oklch(0.8 0.22 128 / 0.18)

dark: oklch(0.8 0.22 128 / 0.24)

lime.solid

light: oklch(0.8 0.22 128)

dark: oklch(0.8 0.22 128)

lime.focusRing

light: oklch(0.8 0.22 128)

dark: oklch(0.8 0.22 128)

lime.border

light: oklch(0.8 0.22 128 / 0.32)

dark: oklch(0.8 0.22 128 / 0.44)

green

green.contrast

light: oklch(0.985 0.013 150)

dark: oklch(0.985 0.013 150)

green.fg

light: oklch(0.44 0.143 150)

dark: oklch(0.78 0.143 150)

green.muted

light: oklch(0.55 0.22 150 / 0.07)

dark: oklch(0.55 0.22 150 / 0.1)

green.subtle

light: oklch(0.55 0.22 150 / 0.11)

dark: oklch(0.55 0.22 150 / 0.16)

green.emphasized

light: oklch(0.55 0.22 150 / 0.18)

dark: oklch(0.55 0.22 150 / 0.24)

green.solid

light: oklch(0.55 0.22 150)

dark: oklch(0.55 0.22 150)

green.focusRing

light: oklch(0.55 0.22 150)

dark: oklch(0.55 0.22 150)

green.border

light: oklch(0.55 0.22 150 / 0.32)

dark: oklch(0.55 0.22 150 / 0.44)

emerald

emerald.contrast

light: oklch(0.985 0.013 163)

dark: oklch(0.985 0.013 163)

emerald.fg

light: oklch(0.44 0.143 163)

dark: oklch(0.78 0.143 163)

emerald.muted

light: oklch(0.55 0.22 163 / 0.07)

dark: oklch(0.55 0.22 163 / 0.1)

emerald.subtle

light: oklch(0.55 0.22 163 / 0.11)

dark: oklch(0.55 0.22 163 / 0.16)

emerald.emphasized

light: oklch(0.55 0.22 163 / 0.18)

dark: oklch(0.55 0.22 163 / 0.24)

emerald.solid

light: oklch(0.55 0.22 163)

dark: oklch(0.55 0.22 163)

emerald.focusRing

light: oklch(0.55 0.22 163)

dark: oklch(0.55 0.22 163)

emerald.border

light: oklch(0.55 0.22 163 / 0.32)

dark: oklch(0.55 0.22 163 / 0.44)

teal

teal.contrast

light: oklch(0.985 0.013 182)

dark: oklch(0.985 0.013 182)

teal.fg

light: oklch(0.44 0.143 182)

dark: oklch(0.78 0.143 182)

teal.muted

light: oklch(0.55 0.22 182 / 0.07)

dark: oklch(0.55 0.22 182 / 0.1)

teal.subtle

light: oklch(0.55 0.22 182 / 0.11)

dark: oklch(0.55 0.22 182 / 0.16)

teal.emphasized

light: oklch(0.55 0.22 182 / 0.18)

dark: oklch(0.55 0.22 182 / 0.24)

teal.solid

light: oklch(0.55 0.22 182)

dark: oklch(0.55 0.22 182)

teal.focusRing

light: oklch(0.55 0.22 182)

dark: oklch(0.55 0.22 182)

teal.border

light: oklch(0.55 0.22 182 / 0.32)

dark: oklch(0.55 0.22 182 / 0.44)

cyan

cyan.contrast

light: oklch(0.985 0.013 215)

dark: oklch(0.985 0.013 215)

cyan.fg

light: oklch(0.44 0.143 215)

dark: oklch(0.78 0.143 215)

cyan.muted

light: oklch(0.56 0.22 215 / 0.07)

dark: oklch(0.56 0.22 215 / 0.1)

cyan.subtle

light: oklch(0.56 0.22 215 / 0.11)

dark: oklch(0.56 0.22 215 / 0.16)

cyan.emphasized

light: oklch(0.56 0.22 215 / 0.18)

dark: oklch(0.56 0.22 215 / 0.24)

cyan.solid

light: oklch(0.56 0.22 215)

dark: oklch(0.56 0.22 215)

cyan.focusRing

light: oklch(0.56 0.22 215)

dark: oklch(0.56 0.22 215)

cyan.border

light: oklch(0.56 0.22 215 / 0.32)

dark: oklch(0.56 0.22 215 / 0.44)

sky

sky.contrast

light: oklch(0.985 0.013 237)

dark: oklch(0.985 0.013 237)

sky.fg

light: oklch(0.44 0.143 237)

dark: oklch(0.78 0.143 237)

sky.muted

light: oklch(0.56 0.22 237 / 0.07)

dark: oklch(0.56 0.22 237 / 0.1)

sky.subtle

light: oklch(0.56 0.22 237 / 0.11)

dark: oklch(0.56 0.22 237 / 0.16)

sky.emphasized

light: oklch(0.56 0.22 237 / 0.18)

dark: oklch(0.56 0.22 237 / 0.24)

sky.solid

light: oklch(0.56 0.22 237)

dark: oklch(0.56 0.22 237)

sky.focusRing

light: oklch(0.56 0.22 237)

dark: oklch(0.56 0.22 237)

sky.border

light: oklch(0.56 0.22 237 / 0.32)

dark: oklch(0.56 0.22 237 / 0.44)

blue

blue.contrast

light: oklch(0.985 0.013 260)

dark: oklch(0.985 0.013 260)

blue.fg

light: oklch(0.44 0.143 260)

dark: oklch(0.78 0.143 260)

blue.muted

light: oklch(0.54 0.22 260 / 0.07)

dark: oklch(0.54 0.22 260 / 0.1)

blue.subtle

light: oklch(0.54 0.22 260 / 0.11)

dark: oklch(0.54 0.22 260 / 0.16)

blue.emphasized

light: oklch(0.54 0.22 260 / 0.18)

dark: oklch(0.54 0.22 260 / 0.24)

blue.solid

light: oklch(0.54 0.22 260)

dark: oklch(0.54 0.22 260)

blue.focusRing

light: oklch(0.54 0.22 260)

dark: oklch(0.54 0.22 260)

blue.border

light: oklch(0.54 0.22 260 / 0.32)

dark: oklch(0.54 0.22 260 / 0.44)

indigo

indigo.contrast

light: oklch(0.985 0.013 277)

dark: oklch(0.985 0.013 277)

indigo.fg

light: oklch(0.44 0.143 277)

dark: oklch(0.78 0.143 277)

indigo.muted

light: oklch(0.52 0.22 277 / 0.07)

dark: oklch(0.52 0.22 277 / 0.1)

indigo.subtle

light: oklch(0.52 0.22 277 / 0.11)

dark: oklch(0.52 0.22 277 / 0.16)

indigo.emphasized

light: oklch(0.52 0.22 277 / 0.18)

dark: oklch(0.52 0.22 277 / 0.24)

indigo.solid

light: oklch(0.52 0.22 277)

dark: oklch(0.52 0.22 277)

indigo.focusRing

light: oklch(0.52 0.22 277)

dark: oklch(0.52 0.22 277)

indigo.border

light: oklch(0.52 0.22 277 / 0.32)

dark: oklch(0.52 0.22 277 / 0.44)

violet

violet.contrast

light: oklch(0.985 0.013 293)

dark: oklch(0.985 0.013 293)

violet.fg

light: oklch(0.44 0.143 293)

dark: oklch(0.78 0.143 293)

violet.muted

light: oklch(0.52 0.22 293 / 0.07)

dark: oklch(0.52 0.22 293 / 0.1)

violet.subtle

light: oklch(0.52 0.22 293 / 0.11)

dark: oklch(0.52 0.22 293 / 0.16)

violet.emphasized

light: oklch(0.52 0.22 293 / 0.18)

dark: oklch(0.52 0.22 293 / 0.24)

violet.solid

light: oklch(0.52 0.22 293)

dark: oklch(0.52 0.22 293)

violet.focusRing

light: oklch(0.52 0.22 293)

dark: oklch(0.52 0.22 293)

violet.border

light: oklch(0.52 0.22 293 / 0.32)

dark: oklch(0.52 0.22 293 / 0.44)

purple

purple.contrast

light: oklch(0.985 0.013 304)

dark: oklch(0.985 0.013 304)

purple.fg

light: oklch(0.44 0.143 304)

dark: oklch(0.78 0.143 304)

purple.muted

light: oklch(0.54 0.22 304 / 0.07)

dark: oklch(0.54 0.22 304 / 0.1)

purple.subtle

light: oklch(0.54 0.22 304 / 0.11)

dark: oklch(0.54 0.22 304 / 0.16)

purple.emphasized

light: oklch(0.54 0.22 304 / 0.18)

dark: oklch(0.54 0.22 304 / 0.24)

purple.solid

light: oklch(0.54 0.22 304)

dark: oklch(0.54 0.22 304)

purple.focusRing

light: oklch(0.54 0.22 304)

dark: oklch(0.54 0.22 304)

purple.border

light: oklch(0.54 0.22 304 / 0.32)

dark: oklch(0.54 0.22 304 / 0.44)

fuchsia

fuchsia.contrast

light: oklch(0.985 0.013 322)

dark: oklch(0.985 0.013 322)

fuchsia.fg

light: oklch(0.44 0.143 322)

dark: oklch(0.78 0.143 322)

fuchsia.muted

light: oklch(0.55 0.22 322 / 0.07)

dark: oklch(0.55 0.22 322 / 0.1)

fuchsia.subtle

light: oklch(0.55 0.22 322 / 0.11)

dark: oklch(0.55 0.22 322 / 0.16)

fuchsia.emphasized

light: oklch(0.55 0.22 322 / 0.18)

dark: oklch(0.55 0.22 322 / 0.24)

fuchsia.solid

light: oklch(0.55 0.22 322)

dark: oklch(0.55 0.22 322)

fuchsia.focusRing

light: oklch(0.55 0.22 322)

dark: oklch(0.55 0.22 322)

fuchsia.border

light: oklch(0.55 0.22 322 / 0.32)

dark: oklch(0.55 0.22 322 / 0.44)

pink

pink.contrast

light: oklch(0.985 0.013 350)

dark: oklch(0.985 0.013 350)

pink.fg

light: oklch(0.44 0.143 350)

dark: oklch(0.78 0.143 350)

pink.muted

light: oklch(0.56 0.22 350 / 0.07)

dark: oklch(0.56 0.22 350 / 0.1)

pink.subtle

light: oklch(0.56 0.22 350 / 0.11)

dark: oklch(0.56 0.22 350 / 0.16)

pink.emphasized

light: oklch(0.56 0.22 350 / 0.18)

dark: oklch(0.56 0.22 350 / 0.24)

pink.solid

light: oklch(0.56 0.22 350)

dark: oklch(0.56 0.22 350)

pink.focusRing

light: oklch(0.56 0.22 350)

dark: oklch(0.56 0.22 350)

pink.border

light: oklch(0.56 0.22 350 / 0.32)

dark: oklch(0.56 0.22 350 / 0.44)

rose

rose.contrast

light: oklch(0.985 0.013 16)

dark: oklch(0.985 0.013 16)

rose.fg

light: oklch(0.44 0.143 16)

dark: oklch(0.78 0.143 16)

rose.muted

light: oklch(0.55 0.22 16 / 0.07)

dark: oklch(0.55 0.22 16 / 0.1)

rose.subtle

light: oklch(0.55 0.22 16 / 0.11)

dark: oklch(0.55 0.22 16 / 0.16)

rose.emphasized

light: oklch(0.55 0.22 16 / 0.18)

dark: oklch(0.55 0.22 16 / 0.24)

rose.solid

light: oklch(0.55 0.22 16)

dark: oklch(0.55 0.22 16)

rose.focusRing

light: oklch(0.55 0.22 16)

dark: oklch(0.55 0.22 16)

rose.border

light: oklch(0.55 0.22 16 / 0.32)

dark: oklch(0.55 0.22 16 / 0.44)

Breakpoints

Radii