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

16 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)

lightoklch(0.5 0.2 27.325)

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)

lightoklch(0.45 0.17 240)

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

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

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)

lightoklch(0.45 0.15 145)

darkoklch(0.85 0.13 145)

--color-warning-borderLockedaliases --warning-border

hue locked at 60; L/C tunable

Light: oklch(0.82 0.12 60)
Dark: oklch(0.5 0.12 60)

lightoklch(0.82 0.12 60)

darkoklch(0.5 0.12 60)

Brand

Brand tokens

56 tokens

--color-accentBrandaliases --accent

bright yellow #FFF162, the single brand highlight

Light: oklch(0.945 0.18 100)
Dark: oklch(0.85 0.16 100)

lightoklch(0.945 0.18 100)

darkoklch(0.85 0.16 100)

--color-accent-foregroundBrandaliases --accent-foreground

warm dark ink readable on bright yellow (#1A1505)

Light: oklch(0.18 0.025 90)
Dark: oklch(0.18 0.025 90)

lightoklch(0.18 0.025 90)

darkoklch(0.18 0.025 90)

--color-backgroundBrandaliases --background

pure white canvas (#FFFFFF), the marketing inner page card

Light: oklch(1 0 0)
Dark: oklch(0.17 0.006 50)

lightoklch(1 0 0)

darkoklch(0.17 0.006 50)

--color-borderBrandaliases --border

default divider on cool canvas

Light: oklch(0.88 0.005 95)
Dark: oklch(1 0 0 / 10%)

lightoklch(0.88 0.005 95)

darkoklch(1 0 0 / 10%)

--color-border-focusBrandaliases --border-focus

alias of --ring

Light: oklch(0.17 0.006 50)

lightoklch(0.17 0.006 50)

darkoklch(0.17 0.006 50)

--color-border-inputBrandaliases --border-input

input edge, sits between default and strong so empty fields read clearly

Light: oklch(0.84 0.006 95)
Dark: oklch(1 0 0 / 13%)

lightoklch(0.84 0.006 95)

darkoklch(1 0 0 / 13%)

--color-border-strongBrandaliases --border-strong

assertive dividers

Light: oklch(0.78 0.006 95)
Dark: oklch(1 0 0 / 18%)

lightoklch(0.78 0.006 95)

darkoklch(1 0 0 / 18%)

--color-border-subtleBrandaliases --border-subtle

table rows, dense lists

Light: oklch(0.94 0.004 95)
Dark: oklch(1 0 0 / 6%)

lightoklch(0.94 0.004 95)

darkoklch(1 0 0 / 6%)

--color-cardBrandaliases --card

near-white with subtle warm tint, sits flush with the white canvas

Light: oklch(0.99 0.002 95)
Dark: oklch(0.21 0.007 50)

lightoklch(0.99 0.002 95)

darkoklch(0.21 0.007 50)

--color-card-foregroundBrandaliases --card-foreground

pairs with --card

Light: oklch(0.17 0.006 50)
Dark: oklch(0.99 0.002 95)

lightoklch(0.17 0.006 50)

darkoklch(0.99 0.002 95)

--color-chart-1Brandaliases --chart-1

yellow (anchors to brand accent)

Light: oklch(0.85 0.18 100)
Dark: oklch(0.92 0.18 100)

lightoklch(0.85 0.18 100)

darkoklch(0.92 0.18 100)

--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

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

lavender

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-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.78 0.006 95)

lightoklch(0.78 0.006 95)

darkoklch(0.78 0.006 95)

--color-chart-gridBrandaliases --chart-grid

Light: oklch(0.94 0.004 95)

lightoklch(0.94 0.004 95)

darkoklch(0.94 0.004 95)

--color-foregroundBrandaliases --foreground

warm near-black body text (#110F0D)

Light: oklch(0.17 0.006 50)
Dark: oklch(0.99 0.002 95)

lightoklch(0.17 0.006 50)

darkoklch(0.99 0.002 95)

--color-foreground-disabledBrandaliases --foreground-disabled

disabled controls (warm mid-grey, low-chroma yellow tint)

Light: oklch(0.63 0.01 100.08)
Dark: oklch(0.5 0.008 50)

lightoklch(0.63 0.01 100.08)

darkoklch(0.5 0.008 50)

--color-foreground-subtleBrandaliases --foreground-subtle

captions, secondary labels (warm grey, low-chroma yellow tint)

Light: oklch(0.35 0.01 100.33)
Dark: oklch(0.7 0.008 50)

lightoklch(0.35 0.01 100.33)

darkoklch(0.7 0.008 50)

--color-inputBrandaliases --input

input fill

Light: oklch(0.97 0.004 95)
Dark: oklch(1 0 0 / 8%)

lightoklch(0.97 0.004 95)

darkoklch(1 0 0 / 8%)

--color-mutedBrandaliases --muted

depressed surface (alt sections)

Light: oklch(0.96 0.004 95)
Dark: oklch(0.25 0.007 50)

lightoklch(0.96 0.004 95)

darkoklch(0.25 0.007 50)

--color-primaryBrandaliases --primary

warm near-black, the marketing CTA color

Light: oklch(0.17 0.006 50)
Dark: oklch(0.99 0.002 95)

lightoklch(0.17 0.006 50)

darkoklch(0.99 0.002 95)

--color-primary-foregroundBrandaliases --primary-foreground

near-white on near-black

Light: oklch(0.99 0.002 95)
Dark: oklch(0.17 0.006 50)

lightoklch(0.99 0.002 95)

darkoklch(0.17 0.006 50)

--color-ringBrandaliases --ring

focus ring color (uses --primary hue for crisp visibility)

Light: oklch(0.17 0.006 50)
Dark: oklch(0.85 0.16 100)

lightoklch(0.17 0.006 50)

darkoklch(0.85 0.16 100)

--color-secondaryBrandaliases --secondary

quiet neutral for secondary buttons / soft badges

Light: oklch(0.97 0.004 95)
Dark: oklch(0.3 0.007 50)

lightoklch(0.97 0.004 95)

darkoklch(0.3 0.007 50)

--color-secondary-foregroundBrandaliases --secondary-foreground

Light: oklch(0.17 0.006 50)
Dark: oklch(0.99 0.002 95)

lightoklch(0.17 0.006 50)

darkoklch(0.99 0.002 95)

--color-sidebarBrandaliases --sidebar

near-white sidebar surface

Light: oklch(0.99 0.002 95)
Dark: oklch(0.21 0.007 50)

lightoklch(0.99 0.002 95)

darkoklch(0.21 0.007 50)

--color-sidebar-accentBrandaliases --sidebar-accent

hover/selected item surface (subtle, not yellow, to avoid loud nav)

Light: oklch(0.96 0.004 95)
Dark: oklch(0.27 0.007 50)

lightoklch(0.96 0.004 95)

darkoklch(0.27 0.007 50)

--color-sidebar-accent-foregroundBrandaliases --sidebar-accent-foreground

Light: oklch(0.17 0.006 50)
Dark: oklch(0.99 0.002 95)

lightoklch(0.17 0.006 50)

darkoklch(0.99 0.002 95)

--color-sidebar-borderBrandaliases --sidebar-border

visible against sidebar surface

Light: oklch(0.9 0.005 95)
Dark: oklch(1 0 0 / 10%)

lightoklch(0.9 0.005 95)

darkoklch(1 0 0 / 10%)

--color-sidebar-foregroundBrandaliases --sidebar-foreground

Light: oklch(0.17 0.006 50)
Dark: oklch(0.99 0.002 95)

lightoklch(0.17 0.006 50)

darkoklch(0.99 0.002 95)

--color-sidebar-primaryBrandaliases --sidebar-primary

Light: oklch(0.17 0.006 50)
Dark: oklch(0.99 0.002 95)

lightoklch(0.17 0.006 50)

darkoklch(0.99 0.002 95)

--color-sidebar-primary-foregroundBrandaliases --sidebar-primary-foreground

Light: oklch(0.99 0.002 95)
Dark: oklch(0.17 0.006 50)

lightoklch(0.99 0.002 95)

darkoklch(0.17 0.006 50)

--color-sidebar-ringBrandaliases --sidebar-ring

Light: oklch(0.17 0.006 50)
Dark: oklch(0.85 0.16 100)

lightoklch(0.17 0.006 50)

darkoklch(0.85 0.16 100)

--color-tier-exclusiveBrandaliases --tier-exclusive

warm near-black card

Light: oklch(0.19 0.006 50)
Dark: oklch(0.99 0.002 95)

lightoklch(0.19 0.006 50)

darkoklch(0.99 0.002 95)

--color-tier-exclusive-foregroundBrandaliases --tier-exclusive-foreground

near-white text

Light: oklch(0.99 0.002 95)
Dark: oklch(0.17 0.006 50)

lightoklch(0.99 0.002 95)

darkoklch(0.17 0.006 50)

--color-tier-freeBrandaliases --tier-free

near-white card

Light: oklch(0.99 0.002 95)
Dark: oklch(0.21 0.007 50)

lightoklch(0.99 0.002 95)

darkoklch(0.21 0.007 50)

--color-tier-free-foregroundBrandaliases --tier-free-foreground

warm near-black

Light: oklch(0.17 0.006 50)
Dark: oklch(0.99 0.002 95)

lightoklch(0.17 0.006 50)

darkoklch(0.99 0.002 95)

--color-tier-premiumBrandaliases --tier-premium

bright yellow (mirrors --accent)

Light: oklch(0.945 0.18 100)
Dark: oklch(0.85 0.16 100)

lightoklch(0.945 0.18 100)

darkoklch(0.85 0.16 100)

--color-tier-premium-foregroundBrandaliases --tier-premium-foreground

dark warm ink on yellow

Light: oklch(0.18 0.025 90)
Dark: oklch(0.18 0.025 90)

lightoklch(0.18 0.025 90)

darkoklch(0.18 0.025 90)

--color-warningBrandaliases --warning

shifted from 80→60 to clear the brand yellow (hue 100); L/C tunable

Light: oklch(0.93 0.06 60)
Dark: oklch(0.32 0.08 60)

lightoklch(0.93 0.06 60)

darkoklch(0.32 0.08 60)

--gradient-brandBrand

black → yellow, the marketing signature

Light: linear-gradient(135deg, var(--primary), var(--accent))

lightlinear-gradient(135deg, var(--primary), var(--accent))

darklinear-gradient(135deg, var(--primary), var(--accent))

--slider-rangeBrand

defaults to brand primary

Light: oklch(0.17 0.006 50)
Dark: oklch(0.85 0.16 100)

lightoklch(0.17 0.006 50)

darkoklch(0.85 0.16 100)

--switch-track-onBrand

defaults to brand primary

Light: oklch(0.17 0.006 50)
Dark: oklch(0.85 0.16 100)

lightoklch(0.17 0.006 50)

darkoklch(0.85 0.16 100)

Tunable

Tunable tokens

24 tokens

--code-bgTunable

Light: oklch(0.96 0.004 95)

lightoklch(0.96 0.004 95)

darkoklch(0.96 0.004 95)

--code-fgTunable

Light: oklch(0.17 0.006 50)

lightoklch(0.17 0.006 50)

darkoklch(0.17 0.006 50)

--color-muted-foregroundTunablealiases --muted-foreground

sits between -subtle and -disabled

Light: oklch(0.51 0.01 95.31)
Dark: oklch(0.62 0.008 50)

lightoklch(0.51 0.01 95.31)

darkoklch(0.62 0.008 50)

--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)

--color-warning-foregroundTunablealiases --warning-foreground

hue ~55 = deeper orange tone; L/C tunable

Light: oklch(0.5 0.14 55)
Dark: oklch(0.88 0.14 55)

lightoklch(0.5 0.14 55)

darkoklch(0.88 0.14 55)

--kbd-bgTunable

Light: oklch(0.96 0.004 95)

lightoklch(0.96 0.004 95)

darkoklch(0.96 0.004 95)

--kbd-borderTunable

Light: oklch(0.78 0.006 95)

lightoklch(0.78 0.006 95)

darkoklch(0.78 0.006 95)

--kbd-fgTunable

Light: oklch(0.17 0.006 50)

lightoklch(0.17 0.006 50)

darkoklch(0.17 0.006 50)

--label-colorTunable

Light: oklch(0.17 0.006 50)

lightoklch(0.17 0.006 50)

darkoklch(0.17 0.006 50)

--linkTunable

Light: oklch(0.17 0.006 50)
Dark: oklch(0.85 0.16 100)

lightoklch(0.17 0.006 50)

darkoklch(0.85 0.16 100)

--link-hoverTunable

Light: oklch(0.17 0.006 50)
Dark: oklch(0.99 0.002 95)

lightoklch(0.17 0.006 50)

darkoklch(0.99 0.002 95)

--link-visitedTunable

Light: oklch(0.34 0.008 50)
Dark: oklch(0.7 0.008 50)

lightoklch(0.34 0.008 50)

darkoklch(0.7 0.008 50)

--placeholder-colorTunable

Light: oklch(0.63 0.01 100.08)

lightoklch(0.63 0.01 100.08)

darkoklch(0.63 0.01 100.08)

--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

yellow selection mirrors marketing ::selection

Light: oklch(0.945 0.18 100)
Dark: oklch(0.85 0.16 100)

lightoklch(0.945 0.18 100)

darkoklch(0.85 0.16 100)

--selection-fgTunable

Light: oklch(0.18 0.025 90)
Dark: oklch(0.18 0.025 90)

lightoklch(0.18 0.025 90)

darkoklch(0.18 0.025 90)

--skeleton-bgTunable

cool-neutral base

Light: color-mix(in oklch, var(--muted) 80%, var(--background))

lightcolor-mix(in oklch, var(--muted) 80%, var(--background))

darkcolor-mix(in oklch, var(--muted) 80%, var(--background))

--skeleton-shimmerTunable

foreground-tinted shimmer band

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)

--slider-thumbTunable

Light: oklch(0.99 0.002 95)
Dark: oklch(0.99 0.002 95)

lightoklch(0.99 0.002 95)

darkoklch(0.99 0.002 95)

--slider-trackTunable

Light: oklch(0.88 0.005 95)
Dark: oklch(1 0 0 / 0.18)

lightoklch(0.88 0.005 95)

darkoklch(1 0 0 / 0.18)

--switch-thumbTunable

Light: oklch(0.99 0.002 95)
Dark: oklch(0.21 0.007 50)

lightoklch(0.99 0.002 95)

darkoklch(0.21 0.007 50)

--switch-track-offTunable

Light: oklch(0.88 0.005 95)
Dark: oklch(1 0 0 / 0.18)

lightoklch(0.88 0.005 95)

darkoklch(1 0 0 / 0.18)

Search Raihin Design System