Colors

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

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

Borders / input / ring

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

Charts

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

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

• 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