dotdesign system

Colors

Semantic color tokens using oklch color space. Each token has light and dark mode values.

Core

background

oklch(1 0 0)

dark: oklch(0.145 0 0)

foreground

oklch(0.145 0 0)

dark: oklch(0.985 0 0)

primary

oklch(0.205 0 0)

dark: oklch(0.922 0 0)

primary-foreground

oklch(0.985 0 0)

dark: oklch(0.205 0 0)

secondary

oklch(0.97 0 0)

dark: oklch(0.269 0 0)

secondary-foreground

oklch(0.205 0 0)

dark: oklch(0.985 0 0)

Surface

card

oklch(1 0 0)

dark: oklch(0.205 0 0)

card-foreground

oklch(0.145 0 0)

dark: oklch(0.985 0 0)

popover

oklch(1 0 0)

dark: oklch(0.205 0 0)

popover-foreground

oklch(0.145 0 0)

dark: oklch(0.985 0 0)

muted

oklch(0.97 0 0)

dark: oklch(0.269 0 0)

muted-foreground

oklch(0.556 0 0)

dark: oklch(0.708 0 0)

Interactive

accent

oklch(0.205 0 0)

dark: oklch(0.922 0 0)

accent-foreground

oklch(0.985 0 0)

dark: oklch(0.205 0 0)

border

oklch(0.922 0 0)

dark: oklch(1 0 0 / 10%)

input

oklch(0.922 0 0)

dark: oklch(1 0 0 / 15%)

ring

oklch(0.708 0 0)

dark: oklch(0.556 0 0)

Semantic

destructive

oklch(0.577 0.245 27.325)

dark: oklch(0.704 0.191 22.216)

success

oklch(0.62 0.14 155)

dark: oklch(0.72 0.15 155)

warning

oklch(0.88 0.15 85)

dark: oklch(0.78 0.15 85)

info

oklch(0.64 0.12 230)

dark: oklch(0.72 0.12 230)

Chart

chart-1

oklch(0.809 0.105 251.813)

chart-2

oklch(0.623 0.214 259.815)

chart-3

oklch(0.546 0.245 262.881)

chart-4

oklch(0.488 0.243 264.376)

chart-5

oklch(0.424 0.199 265.638)

Sidebar

sidebar

oklch(0.985 0 0)

dark: oklch(0.205 0 0)

sidebar-foreground

oklch(0.145 0 0)

dark: oklch(0.985 0 0)

sidebar-primary

oklch(0.205 0 0)

dark: oklch(0.488 0.243 264.376)

sidebar-primary-foreground

oklch(0.985 0 0)

sidebar-accent

oklch(0.97 0 0)

dark: oklch(0.269 0 0)

sidebar-accent-foreground

oklch(0.205 0 0)

dark: oklch(0.985 0 0)

sidebar-border

oklch(0.922 0 0)

dark: oklch(1 0 0 / 10%)

sidebar-ring

oklch(0.708 0 0)

dark: oklch(0.556 0 0)