Colors

PyColors UI uses an OKLCH-based color system to guarantee high contrast, predictable light/dark behavior, and fully themeable experiences.

OKLCH is used because it is perceptually uniform, making contrast and theme variations more predictable than RGB or HSL.

All core colors are defined as CSS variables in app/global.css and mapped to Tailwind’s internal design tokens via the inline theme mapping.

Theme mapping

@theme inline {
  --color-background: var(--background);
  --color-primary: var(--primary);
  --color-muted-foreground: var(--muted-foreground);
  /* ... */
}

This ensures the entire UI stays consistent while allowing full customization through CSS variables alone.

Semantic tokens

PyColors UI exposes high-level tokens instead of raw colors. These tokens represent roles, not visual values.

Surfaces

• --background / --foreground
• --card / --card-foreground
• --popover / --popover-foreground
• --sidebar, --sidebar-*

Brand / component backgrounds

• --primary / --primary-foreground
• --secondary / --secondary-foreground
• --accent / --accent-foreground
• --muted / --muted-foreground

States

• --destructive
• --destructive-foreground
• --success / --success-foreground
• --warning / --warning-foreground

Borders / input / ring

• --border
• --input
• --ring

Charts

• --chart-1 … --chart-5

Chart tokens are intentionally separated from UI tokens to avoid leaking data visualization colors into interface components.

These roles ensure each component uses the correct meaning, regardless of theme or brand adaptation.

Light & Dark mode

Light mode is applied on :root, dark mode on .dark.

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);

  --primary: oklch(0.21 0.006 285.885);
  --primary-foreground: oklch(0.985 0 0);
  /* ... */
}

.dark {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);

  --primary: oklch(0.92 0.004 286.32);
  --primary-foreground: oklch(0.21 0.006 285.885);
  /* ... */
}

Visual palette preview

Core semantic colors

Usage in components

export function ExampleCard() {
  return (
    <div className="rounded-lg border bg-card text-card-foreground p-4">
      <h2 className="text-sm font-medium text-muted-foreground">Example</h2>
      <div className="mt-2 text-sm">
        This card uses the PyColors UI semantic color tokens.
      </div>
    </div>
  );
}

Roles

PyColors UI follows a role-based color architecture.

Variables table

Guidelines

Color tokens belong to the design system. UI components only consume them — they never redefine them.

• Always use semantic color utilities (bg-card, text-muted-foreground).
• Never use raw OKLCH values in components.
• Modify tokens only in global.css → all components update automatically.
• Keep contrast ratios above WCAG AA for text and interactive states.

Related guides