Overview

Design tokens are CSS custom properties that define the visual language. They're installed via @rdc-ui/css and provide a consistent foundation across all components.

Brand Colors

Primary & Secondary Brand Colors

Token	Light	Dark
--midnight-blue	`oklch(0.2968 0.0931 255.44)`	`oklch(0.2968 0.0931 255.44)`
--flame-ignition	`oklch(0.6896 0.2081 41.99)`	`oklch(0.6896 0.2081 41.99)`
--pearl-drift	`oklch(0.9851 0.0102 67.71)`	`oklch(0.9851 0.0102 67.71)`
--skyline-pearl	`oklch(0.9511 0.0127 244.26)`	`oklch(0.9511 0.0127 244.26)`
--sunset-rev	`oklch(0.7474 0.18 57.32)`	`oklch(0.7474 0.18 57.32)`
--turbo-blue	`oklch(0.5616 0.0982 245.84)`	`oklch(0.5616 0.0982 245.84)`

Surface Tokens

Backgrounds & Foregrounds

Token	Light	Dark
--background	`oklch(1 0 0)`	`oklch(0.147 0.004 49.25)`
--foreground	`oklch(0.2968 0.0931 255.44)`	`oklch(0.985 0.001 106.423)`
--card	`oklch(1 0 0)`	`oklch(0.216 0.006 56.043)`
--card-foreground	`oklch(0.2968 0.0931 255.44)`	`oklch(0.985 0.001 106.423)`
--popover	`oklch(1 0 0)`	`oklch(0.216 0.006 56.043)`
--popover-foreground	`oklch(0.2968 0.0931 255.44)`	`oklch(0.985 0.001 106.423)`
--muted	`oklch(0.97 0.001 106.424)`	`oklch(0.268 0.007 34.298)`
--muted-foreground	`oklch(0.553 0.013 58.071)`	`oklch(0.709 0.01 56.259)`

Interactive Tokens

Primary, Secondary & Accent

Token	Light	Dark
--primary	`oklch(0.6896 0.2081 41.99)`	`oklch(0.6896 0.2081 41.99)`
--primary-foreground	`oklch(1 0 0)`	`oklch(0.98 0.016 73.684)`
--secondary	`oklch(0.9511 0.0127 244.26)`	`oklch(0.274 0.006 286.033)`
--secondary-foreground	`oklch(0.2968 0.0931 255.44)`	`oklch(0.985 0 0)`
--accent	`oklch(0.97 0.001 106.424)`	`oklch(0.268 0.007 34.298)`
--accent-foreground	`oklch(0.216 0.006 56.043)`	`oklch(0.985 0.001 106.423)`
--destructive	`oklch(0.577 0.245 27.325)`	`oklch(0.704 0.191 22.216)`

Border & Ring Tokens

Borders, Inputs & Focus Rings

Token	Light	Dark
--border	`oklch(0.923 0.003 48.717)`	`oklch(1 0 0 / 10%)`
--input	`oklch(0.923 0.003 48.717)`	`oklch(1 0 0 / 15%)`
--ring	`oklch(0.709 0.01 56.259)`	`oklch(0.553 0.013 58.071)`

Sidebar Component Tokens

Token	Light	Dark
--sidebar	`oklch(0.985 0.001 106.423)`	`oklch(0.216 0.006 56.043)`
--sidebar-foreground	`oklch(0.147 0.004 49.25)`	`oklch(0.985 0.001 106.423)`
--sidebar-primary	`oklch(0.6896 0.2081 41.99)`	`oklch(0.6896 0.2081 41.99)`
--sidebar-primary-foreground	`oklch(0.98 0.016 73.684)`	`oklch(0.98 0.016 73.684)`
--sidebar-accent	`oklch(0.97 0.001 106.424)`	`oklch(0.268 0.007 34.298)`
--sidebar-accent-foreground	`oklch(0.216 0.006 56.043)`	`oklch(0.985 0.001 106.423)`
--sidebar-border	`oklch(0.923 0.003 48.717)`	`oklch(1 0 0 / 10%)`
--sidebar-ring	`oklch(0.709 0.01 56.259)`	`oklch(0.553 0.013 58.071)`

Chart Tokens

Chart Color Palette

Token	Light	Dark
--chart-1	`oklch(70% 0.20 45)`	`oklch(70% 0.20 45)`
--chart-2	`oklch(75% 0.18 45)`	`oklch(75% 0.18 45)`
--chart-3	`oklch(80% 0.15 45)`	`oklch(80% 0.15 45)`
--chart-4	`oklch(85% 0.11 45)`	`oklch(85% 0.11 45)`
--chart-5	`oklch(30% 0.09 258)`	`oklch(30% 0.09 258)`
--chart-6	`oklch(40% 0.08 258)`	`oklch(40% 0.08 258)`
--chart-7	`oklch(50% 0.07 258)`	`oklch(50% 0.07 258)`
--chart-8	`oklch(60% 0.06 258)`	`oklch(60% 0.06 258)`
--chart-9	`oklch(58% 0.09 189)`	`oklch(58% 0.09 189)`
--chart-10	`oklch(64% 0.09 189)`	`oklch(64% 0.09 189)`
--chart-11	`oklch(71% 0.08 189)`	`oklch(71% 0.08 189)`
--chart-12	`oklch(78% 0.07 189)`	`oklch(78% 0.07 189)`

Radius Tokens

Border Radius Scale

Token	Example
--radius	`0.875rem`
--radius-sm	`calc(0.875rem * 0.6)`
--radius-md	`calc(0.875rem * 0.8)`
--radius-lg(default --radius)	`0.875rem`
--radius-xl	`calc(0.875rem * 1.4)`
--radius-2xl	`calc(0.875rem * 1.8)`
--radius-3xl	`calc(0.875rem * 2.2)`
--radius-4xl	`calc(0.875rem * 2.6)`

Usage

This is a MANUAL step. Usually, you would let the LLM decide what colors to apply by analyzing the design and component context.

Tokens are consumed via Tailwind utilities or direct CSS:

/* Via Tailwind */
.element {
  @apply bg-background text-foreground border-border;
}

/* Direct CSS */
.element {
  background-color: var(--background);
  color: var(--foreground);
  border-color: var(--border);
  border-radius: var(--radius);
}

Design Tokens