Search Kaotypr Design System

Search tokens, pages and quick actions

TokensColor

Color

Locked names and pairings; brand-tunable values. Status uses the solid pattern (bg-{status} text-{status}-foreground), never bg-{status}/10.

Status uses the solid pattern

Always render status with bg-{status} text-{status}-foreground border-{status}-border. Never bg-{status}/10 — the pastel base loses contrast at low opacity.

<div className="bg-success text-success-foreground border border-success-border rounded-card p-4">
  All systems operational
</div>
Locked

Locked tokens

18 tokens
--color-destructiveLockedaliases --destructive

hue locked (red ≈ 27); L/C tunable

Light
oklch(0.92 0.05 27.325)
Dark
oklch(0.32 0.1 27.325)
lightoklch(0.92 0.05 27.325)
darkoklch(0.32 0.1 27.325)
--color-destructive-borderLockedaliases --destructive-border

hue locked; L/C tunable

Light
oklch(0.82 0.13 27.325)
Dark
oklch(0.5 0.15 27.325)
lightoklch(0.82 0.13 27.325)
darkoklch(0.5 0.15 27.325)
--color-destructive-foregroundLockedaliases --destructive-foreground

hue locked; L/C tunable

Light
oklch(0.5 0.2 27.325)
Dark
oklch(0.85 0.13 27.325)
Aa
lightoklch(0.5 0.2 27.325)
Aa
darkoklch(0.85 0.13 27.325)
--color-infoLockedaliases --info

hue locked (blue ≈ 240); L/C tunable

Light
oklch(0.94 0.04 240)
Dark
oklch(0.32 0.08 240)
lightoklch(0.94 0.04 240)
darkoklch(0.32 0.08 240)
--color-info-borderLockedaliases --info-border

hue locked; L/C tunable

Light
oklch(0.83 0.1 240)
Dark
oklch(0.5 0.13 240)
lightoklch(0.83 0.1 240)
darkoklch(0.5 0.13 240)
--color-info-foregroundLockedaliases --info-foreground

hue locked; L/C tunable

Light
oklch(0.45 0.17 240)
Dark
oklch(0.85 0.12 240)
Aa
lightoklch(0.45 0.17 240)
Aa
darkoklch(0.85 0.12 240)
--color-ring-invalidLockedaliases --ring-color-invalid

aria-invalid ring (status hue, saturated to match error text)

Light
oklch(0.5 0.2 27.325)
lightoklch(0.5 0.2 27.325)
darkoklch(0.5 0.2 27.325)
--color-state-activeLockedaliases --state-active

12%

Light
color-mix(in oklch, var(--foreground) 12%, transparent)
lightcolor-mix(in oklch, var(--foreground) 12%, transparent)
darkcolor-mix(in oklch, var(--foreground) 12%, transparent)
--color-state-expandedLockedaliases --state-expanded

4% — large-area persistent states (accordion, collapsible)

Light
color-mix(in oklch, var(--foreground) 4%, transparent)
lightcolor-mix(in oklch, var(--foreground) 4%, transparent)
darkcolor-mix(in oklch, var(--foreground) 4%, transparent)
--color-state-focusLockedaliases --state-focus

8%

Light
color-mix(in oklch, var(--foreground) 8%, transparent)
lightcolor-mix(in oklch, var(--foreground) 8%, transparent)
darkcolor-mix(in oklch, var(--foreground) 8%, transparent)
--color-state-hoverLockedaliases --state-hover

6%

Light
color-mix(in oklch, var(--foreground) 6%, transparent)
lightcolor-mix(in oklch, var(--foreground) 6%, transparent)
darkcolor-mix(in oklch, var(--foreground) 6%, transparent)
--color-state-selectedLockedaliases --state-selected

16%

Light
color-mix(in oklch, var(--foreground) 16%, transparent)
lightcolor-mix(in oklch, var(--foreground) 16%, transparent)
darkcolor-mix(in oklch, var(--foreground) 16%, transparent)
--color-successLockedaliases --success

hue locked (green ≈ 145); L/C tunable

Light
oklch(0.93 0.06 145)
Dark
oklch(0.32 0.08 145)
lightoklch(0.93 0.06 145)
darkoklch(0.32 0.08 145)
--color-success-borderLockedaliases --success-border

hue locked; L/C tunable

Light
oklch(0.82 0.12 145)
Dark
oklch(0.5 0.12 145)
lightoklch(0.82 0.12 145)
darkoklch(0.5 0.12 145)
--color-success-foregroundLockedaliases --success-foreground

hue locked; L/C tunable

Light
oklch(0.45 0.15 145)
Dark
oklch(0.85 0.13 145)
Aa
lightoklch(0.45 0.15 145)
Aa
darkoklch(0.85 0.13 145)
--color-warningLockedaliases --warning

hue locked (yellow/orange ≈ 80); L/C tunable

Light
oklch(0.94 0.07 80)
Dark
oklch(0.32 0.08 80)
lightoklch(0.94 0.07 80)
darkoklch(0.32 0.08 80)
--color-warning-borderLockedaliases --warning-border

hue locked; L/C tunable

Light
oklch(0.83 0.13 80)
Dark
oklch(0.5 0.12 80)
lightoklch(0.83 0.13 80)
darkoklch(0.5 0.12 80)
--color-warning-foregroundLockedaliases --warning-foreground

hue locked; L/C tunable

Light
oklch(0.5 0.14 80)
Dark
oklch(0.88 0.14 80)
Aa
lightoklch(0.5 0.14 80)
Aa
darkoklch(0.88 0.14 80)
Brand

Brand tokens

49 tokens
--color-accentBrandaliases --accent

selected/highlighted item surface

Light
oklch(0.97 0 0)
Dark
oklch(0.269 0 0)
lightoklch(0.97 0 0)
darkoklch(0.269 0 0)
--color-accent-foregroundBrandaliases --accent-foreground

pairs with --accent

Light
oklch(0.205 0 0)
Dark
oklch(0.985 0 0)
Aa
lightoklch(0.205 0 0)
Aa
darkoklch(0.985 0 0)
--color-backgroundBrandaliases --background

Light
oklch(1 0 0)
Dark
oklch(0.145 0 0)
lightoklch(1 0 0)
darkoklch(0.145 0 0)
--color-borderBrandaliases --border

default divider

Light
oklch(0.922 0 0)
Dark
oklch(1 0 0 / 10%)
lightoklch(0.922 0 0)
darkoklch(1 0 0 / 10%)
--color-border-focusBrandaliases --border-focus

alias of --ring

Light
oklch(0.708 0 0)
lightoklch(0.708 0 0)
darkoklch(0.708 0 0)
--color-border-inputBrandaliases --border-input

input edge

Light
oklch(0.85 0 0)
Dark
oklch(1 0 0 / 15%)
lightoklch(0.85 0 0)
darkoklch(1 0 0 / 15%)
--color-border-strongBrandaliases --border-strong

assertive dividers

Light
oklch(0.85 0 0)
Dark
oklch(1 0 0 / 18%)
lightoklch(0.85 0 0)
darkoklch(1 0 0 / 18%)
--color-border-subtleBrandaliases --border-subtle

table rows, dense lists

Light
oklch(0.94 0 0)
Dark
oklch(1 0 0 / 6%)
lightoklch(0.94 0 0)
darkoklch(1 0 0 / 6%)
--color-cardBrandaliases --card

Light
oklch(1 0 0)
Dark
oklch(0.205 0 0)
lightoklch(1 0 0)
darkoklch(0.205 0 0)
--color-card-foregroundBrandaliases --card-foreground

pairs with --card

Light
oklch(0.145 0 0)
Dark
oklch(0.985 0 0)
Aa
lightoklch(0.145 0 0)
Aa
darkoklch(0.985 0 0)
--color-chart-1Brandaliases --chart-1

lavender (anchors to --secondary)

Light
oklch(0.65 0.13 290)
Dark
oklch(0.7 0.13 290)
lightoklch(0.65 0.13 290)
darkoklch(0.7 0.13 290)
--color-chart-10Brandaliases --chart-10

rust

Light
oklch(0.55 0.14 35)
Dark
oklch(0.6 0.14 35)
lightoklch(0.55 0.14 35)
darkoklch(0.6 0.14 35)
--color-chart-11Brandaliases --chart-11

sky

Light
oklch(0.7 0.1 220)
Dark
oklch(0.75 0.1 220)
lightoklch(0.7 0.1 220)
darkoklch(0.75 0.1 220)
--color-chart-12Brandaliases --chart-12

dusty rose

Light
oklch(0.65 0.09 5)
Dark
oklch(0.7 0.09 5)
lightoklch(0.65 0.09 5)
darkoklch(0.7 0.09 5)
--color-chart-2Brandaliases --chart-2

teal

Light
oklch(0.65 0.13 195)
Dark
oklch(0.7 0.13 195)
lightoklch(0.65 0.13 195)
darkoklch(0.7 0.13 195)
--color-chart-3Brandaliases --chart-3

warm orange

Light
oklch(0.7 0.15 50)
Dark
oklch(0.75 0.15 50)
lightoklch(0.7 0.15 50)
darkoklch(0.75 0.15 50)
--color-chart-4Brandaliases --chart-4

green

Light
oklch(0.65 0.13 140)
Dark
oklch(0.7 0.13 140)
lightoklch(0.65 0.13 140)
darkoklch(0.7 0.13 140)
--color-chart-5Brandaliases --chart-5

coral

Light
oklch(0.7 0.13 15)
Dark
oklch(0.75 0.13 15)
lightoklch(0.7 0.13 15)
darkoklch(0.75 0.13 15)
--color-chart-6Brandaliases --chart-6

blue

Light
oklch(0.6 0.16 250)
Dark
oklch(0.65 0.16 250)
lightoklch(0.6 0.16 250)
darkoklch(0.65 0.16 250)
--color-chart-7Brandaliases --chart-7

amber

Light
oklch(0.78 0.13 90)
Dark
oklch(0.82 0.13 90)
lightoklch(0.78 0.13 90)
darkoklch(0.82 0.13 90)
--color-chart-8Brandaliases --chart-8

magenta

Light
oklch(0.55 0.18 330)
Dark
oklch(0.6 0.18 330)
lightoklch(0.55 0.18 330)
darkoklch(0.6 0.18 330)
--color-chart-9Brandaliases --chart-9

forest

Light
oklch(0.5 0.13 155)
Dark
oklch(0.55 0.13 155)
lightoklch(0.5 0.13 155)
darkoklch(0.55 0.13 155)
--color-chart-axisBrandaliases --chart-axis

Light
oklch(0.85 0 0)
lightoklch(0.85 0 0)
darkoklch(0.85 0 0)
--color-chart-gridBrandaliases --chart-grid

Light
oklch(0.94 0 0)
lightoklch(0.94 0 0)
darkoklch(0.94 0 0)
--color-chart-tooltip-bgBrandaliases --chart-tooltip-bg

Light
oklch(1 0 0)
lightoklch(1 0 0)
darkoklch(1 0 0)
--color-chart-tooltip-fgBrandaliases --chart-tooltip-fg

Light
oklch(0.145 0 0)
lightoklch(0.145 0 0)
darkoklch(0.145 0 0)
--color-foregroundBrandaliases --foreground

body text

Light
oklch(0.145 0 0)
Dark
oklch(0.985 0 0)
Aa
lightoklch(0.145 0 0)
Aa
darkoklch(0.985 0 0)
--color-foreground-disabledBrandaliases --foreground-disabled

disabled controls

Light
oklch(0.65 0 0)
Dark
oklch(0.45 0 0)
Aa
lightoklch(0.65 0 0)
Aa
darkoklch(0.45 0 0)
--color-foreground-subtleBrandaliases --foreground-subtle

captions, secondary labels

Light
oklch(0.4 0 0)
Dark
oklch(0.65 0 0)
Aa
lightoklch(0.4 0 0)
Aa
darkoklch(0.65 0 0)
--color-inputBrandaliases --input

input fill

Light
oklch(0.922 0 0)
Dark
oklch(1 0 0 / 15%)
lightoklch(0.922 0 0)
darkoklch(1 0 0 / 15%)
--color-mutedBrandaliases --muted

Light
oklch(0.97 0 0)
Dark
oklch(0.269 0 0)
lightoklch(0.97 0 0)
darkoklch(0.269 0 0)
--color-popoverBrandaliases --popover

Light
oklch(1 0 0)
Dark
oklch(0.205 0 0)
lightoklch(1 0 0)
darkoklch(0.205 0 0)
--color-popover-foregroundBrandaliases --popover-foreground

pairs with --popover

Light
oklch(0.145 0 0)
Dark
oklch(0.985 0 0)
Aa
lightoklch(0.145 0 0)
Aa
darkoklch(0.985 0 0)
--color-primaryBrandaliases --primary

near-black (the K of Kaotypr)

Light
oklch(0.205 0 0)
Dark
oklch(0.922 0 0)
lightoklch(0.205 0 0)
darkoklch(0.922 0 0)
--color-primary-foregroundBrandaliases --primary-foreground

Light
oklch(0.985 0 0)
Dark
oklch(0.205 0 0)
Aa
lightoklch(0.985 0 0)
Aa
darkoklch(0.205 0 0)
--color-ringBrandaliases --ring

focus ring color (often follows --primary hue)

Light
oklch(0.708 0 0)
Dark
oklch(0.556 0 0)
lightoklch(0.708 0 0)
darkoklch(0.556 0 0)
--color-secondaryBrandaliases --secondary

lavender; anchors to logo accent

Light
oklch(0.86 0.07 292.88)
Dark
oklch(0.43 0.07 290.31)
lightoklch(0.86 0.07 292.88)
darkoklch(0.43 0.07 290.31)
--color-secondary-foregroundBrandaliases --secondary-foreground

Light
oklch(0.205 0 0)
Dark
oklch(0.985 0 0)
Aa
lightoklch(0.205 0 0)
Aa
darkoklch(0.985 0 0)
--color-sidebarBrandaliases --sidebar

Light
oklch(0.985 0 0)
Dark
oklch(0.205 0 0)
lightoklch(0.985 0 0)
darkoklch(0.205 0 0)
--color-sidebar-accentBrandaliases --sidebar-accent

Light
oklch(0.97 0 0)
Dark
oklch(0.269 0 0)
lightoklch(0.97 0 0)
darkoklch(0.269 0 0)
--color-sidebar-accent-foregroundBrandaliases --sidebar-accent-foreground

Light
oklch(0.205 0 0)
Dark
oklch(0.985 0 0)
Aa
lightoklch(0.205 0 0)
Aa
darkoklch(0.985 0 0)
--color-sidebar-borderBrandaliases --sidebar-border

Light
oklch(0.922 0 0)
Dark
oklch(1 0 0 / 10%)
lightoklch(0.922 0 0)
darkoklch(1 0 0 / 10%)
--color-sidebar-foregroundBrandaliases --sidebar-foreground

Light
oklch(0.145 0 0)
Dark
oklch(0.985 0 0)
Aa
lightoklch(0.145 0 0)
Aa
darkoklch(0.985 0 0)
--color-sidebar-primaryBrandaliases --sidebar-primary

Light
oklch(0.205 0 0)
Dark
oklch(0.488 0.243 264.376)
lightoklch(0.205 0 0)
darkoklch(0.488 0.243 264.376)
--color-sidebar-primary-foregroundBrandaliases --sidebar-primary-foreground

Light
oklch(0.985 0 0)
Dark
oklch(0.985 0 0)
Aa
lightoklch(0.985 0 0)
Aa
darkoklch(0.985 0 0)
--color-sidebar-ringBrandaliases --sidebar-ring

Light
oklch(0.708 0 0)
Dark
oklch(0.556 0 0)
lightoklch(0.708 0 0)
darkoklch(0.556 0 0)
--gradient-brandBrand

Light
linear-gradient(135deg, var(--primary), var(--secondary))
lightlinear-gradient(135deg, var(--primary), var(--secondary))
darklinear-gradient(135deg, var(--primary), var(--secondary))
--slider-rangeBrand

defaults to brand primary

Light
oklch(0.205 0 0)
lightoklch(0.205 0 0)
darkoklch(0.205 0 0)
--switch-track-onBrand

defaults to brand primary

Light
oklch(0.205 0 0)
lightoklch(0.205 0 0)
darkoklch(0.205 0 0)
Tunable

Tunable tokens

23 tokens
--code-bgTunable

Light
oklch(0.97 0 0)
lightoklch(0.97 0 0)
darkoklch(0.97 0 0)
--code-fgTunable

Light
oklch(0.145 0 0)
lightoklch(0.145 0 0)
darkoklch(0.145 0 0)
--color-muted-foregroundTunablealiases --muted-foreground

shadcn-canonical mid-grey; sits between -subtle and -disabled

Light
oklch(0.556 0 0)
Dark
oklch(0.708 0 0)
Aa
lightoklch(0.556 0 0)
Aa
darkoklch(0.708 0 0)
--color-overlayTunablealiases --overlay

Light
color-mix(in oklch, oklch(0 0 0) 30%, transparent)
lightcolor-mix(in oklch, oklch(0 0 0) 30%, transparent)
darkcolor-mix(in oklch, oklch(0 0 0) 30%, transparent)
--kbd-bgTunable

Light
oklch(0.97 0 0)
lightoklch(0.97 0 0)
darkoklch(0.97 0 0)
--kbd-borderTunable

Light
oklch(0.85 0 0)
lightoklch(0.85 0 0)
darkoklch(0.85 0 0)
--kbd-fgTunable

Light
oklch(0.145 0 0)
lightoklch(0.145 0 0)
darkoklch(0.145 0 0)
--label-colorTunable

Light
oklch(0.145 0 0)
lightoklch(0.145 0 0)
darkoklch(0.145 0 0)
--linkTunable

Light
oklch(0.205 0 0)
Dark
oklch(0.922 0 0)
lightoklch(0.205 0 0)
darkoklch(0.922 0 0)
--link-hoverTunable

Light
oklch(0 0 0)
Dark
oklch(1 0 0)
lightoklch(0 0 0)
darkoklch(1 0 0)
--link-visitedTunable

Light
oklch(0.4 0 0)
Dark
oklch(0.65 0 0)
lightoklch(0.4 0 0)
darkoklch(0.65 0 0)
--placeholder-colorTunable

Light
oklch(0.65 0 0)
lightoklch(0.65 0 0)
darkoklch(0.65 0 0)
--required-indicator-colorTunable

asterisk color in <FieldLabel>

Light
oklch(0.5 0.2 27.325)
lightoklch(0.5 0.2 27.325)
darkoklch(0.5 0.2 27.325)
--scrollbar-thumbTunable

Light
color-mix(in oklch, var(--foreground) 20%, transparent)
Dark
color-mix(in oklch, var(--foreground) 30%, transparent)
lightcolor-mix(in oklch, var(--foreground) 20%, transparent)
darkcolor-mix(in oklch, var(--foreground) 30%, transparent)
--scrollbar-trackTunable

Light
transparent
lighttransparent
darktransparent
--selection-bgTunable

Light
oklch(0.86 0.07 292.88)
lightoklch(0.86 0.07 292.88)
darkoklch(0.86 0.07 292.88)
--selection-fgTunable

Light
oklch(0.205 0 0)
lightoklch(0.205 0 0)
darkoklch(0.205 0 0)
--skeleton-bgTunable

secondary-tinted

Light
color-mix(in oklch, var(--secondary) 35%, var(--muted))
lightcolor-mix(in oklch, var(--secondary) 35%, var(--muted))
darkcolor-mix(in oklch, var(--secondary) 35%, var(--muted))
--skeleton-shimmerTunable

secondary-tinted shimmer band

Light
color-mix(in oklch, var(--secondary) 60%, transparent)
lightcolor-mix(in oklch, var(--secondary) 60%, transparent)
darkcolor-mix(in oklch, var(--secondary) 60%, transparent)
--slider-thumbTunable

Light
oklch(0.99 0 0)
lightoklch(0.99 0 0)
darkoklch(0.99 0 0)
--slider-trackTunable

Light
oklch(0.85 0 0)
Dark
oklch(1 0 0 / 0.2)
lightoklch(0.85 0 0)
darkoklch(1 0 0 / 0.2)
--switch-thumbTunable

Light
oklch(0.99 0 0)
lightoklch(0.99 0 0)
darkoklch(0.99 0 0)
--switch-track-offTunable

Light
oklch(0.85 0 0)
Dark
oklch(1 0 0 / 0.2)
lightoklch(0.85 0 0)
darkoklch(1 0 0 / 0.2)