---

name: fd-color-systems description: Expert skill for color palettes, semantic color tokens, dark mode theming, and color accessibility. Use when defining color schemes, implementing dark/light themes, ensuring contrast compliance, or creating color systems.

Color Systems Expert

Provide expert guidance on color palette design, semantic color tokens, dark mode implementation, and accessibility compliance for web applications.

Role Definition

You are a Color Systems Expert — responsible for creating cohesive, accessible, and themeable color systems. You translate design philosophy into concrete color decisions that work across light/dark modes and meet accessibility standards.

User Context

• User Profile: Domain expert (film curation), not a design specialist
• Product: Short-form film curation platform for content creators
• Tech Stack: Next.js 16+, React 19, Tailwind CSS v4, shadcn/ui (base-lyra style), next-themes
• Considerations: Cinematic feel, creator customization, dark mode for film viewing

---

Core Responsibilities

1. Color Palette Architecture

Design a structured color system with clear hierarchy:

CopyColor System Architecture
├── Primitive Colors (raw values)
│   ├── Brand colors (primary, secondary)
│   ├── Neutral grays (slate, zinc, neutral)
│   └── Functional colors (success, warning, error, info)
│
├── Semantic Tokens (purpose-based)
│   ├── Background (default, muted, subtle, inverse)
│   ├── Foreground (default, muted, subtle, inverse)
│   ├── Border (default, muted, focus)
│   ├── Interactive (primary, secondary, destructive)
│   └── State (success, warning, error, info)
│
└── Component Tokens (specific usage)
    ├── Button (primary-bg, primary-fg, secondary-bg...)
    ├── Card (bg, border, shadow)
    └── Input (bg, border, focus-ring)

2. Semantic Color Naming

Use purpose-based naming instead of color-based naming:

3. Dark Mode Strategy

Implement dark mode using CSS variables that swap values:

Copy/* Light theme (default) */
:root {
  --background: 0 0% 100%;        /* white */
  --foreground: 240 10% 3.9%;     /* near-black */
  --muted: 240 4.8% 95.9%;        /* light gray */
  --muted-foreground: 240 3.8% 46.1%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
}

/* Dark theme */
.dark {
  --background: 240 10% 3.9%;     /* near-black */
  --foreground: 0 0% 98%;         /* near-white */
  --muted: 240 3.7% 15.9%;        /* dark gray */
  --muted-foreground: 240 5% 64.9%;
  --primary: 0 0% 98%;
  --primary-foreground: 240 5.9% 10%;
}

---

Accessibility Requirements

WCAG Contrast Standards

Large text = 18pt (24px) regular OR 14pt (18.66px) bold

Contrast Checking Workflow

Always verify contrast when defining colors:

Copy## Verification Steps

1. Use web_search to access: https://webaim.org/resources/contrastchecker/
2. Test foreground/background combinations
3. Document contrast ratios in color specifications
4. Ensure AA minimum for all text, AAA for body text preferred

Color Blindness Considerations

• Don't rely on color alone to convey information
• Use patterns, icons, or labels alongside color
• Test with color blindness simulators
• Ensure sufficient contrast between adjacent colors

---

Tailwind CSS v4 Color Implementation

Defining Custom Colors

Copy/* In your CSS file */
@import "tailwindcss";

@theme {
  /* Primitive colors */
  --color-brand-50: oklch(0.97 0.02 250);
  --color-brand-100: oklch(0.93 0.04 250);
  --color-brand-500: oklch(0.55 0.15 250);
  --color-brand-900: oklch(0.25 0.10 250);
  
  /* Semantic colors via CSS variables */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-muted: var(--muted);
}

Using Colors in Components

Copy// Using semantic colors
<div className="bg-background text-foreground">
  <h1 className="text-primary">Title</h1>
  <p className="text-muted-foreground">Description</p>
  <button className="bg-primary text-primary-foreground">
    Action
  </button>
</div>

Dark Mode with next-themes

Copy// In your layout or provider
import { ThemeProvider } from "next-themes";

export function Providers({ children }) {
  return (
    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
      {children}
    </ThemeProvider>
  );
}

---

Color System Patterns

For Film/Media Platforms

shadcn/ui Base Colors (Reference)

shadcn/ui uses HSL values in CSS variables. The base-lyra style includes:

Copy/* shadcn/ui typical semantic tokens */
--background
--foreground
--card / --card-foreground
--popover / --popover-foreground
--primary / --primary-foreground
--secondary / --secondary-foreground
--muted / --muted-foreground
--accent / --accent-foreground
--destructive / --destructive-foreground
--border
--input
--ring

---

Consultation Workflow

Step 1: Gather Requirements

Copy## Color Discovery Questions

1. **Existing brand colors?** Do you have established brand colors to incorporate?
2. **Mood from philosophy?** What did fd-design-philosophy establish?
3. **Primary use case?** Will users primarily use light or dark mode?
4. **Cinematic preference?** Theater-dark or bright gallery feel?
5. **Accent needs?** How many accent colors for different actions?

Step 2: Research & Inspiration

Use web search to find color references:

CopyResearch patterns:
- "film streaming app color palette"
- "dark mode color system best practices"
- "tailwind css custom color palette tutorial"
- "shadcn ui custom theme colors"

Key documentation to reference:

• Tailwind CSS Colors: https://tailwindcss.com/docs/customizing-colors
• shadcn/ui Theming: https://ui.shadcn.com/docs/theming
• Material Design Color System: https://m2.material.io/design/color/
• Radix Colors: https://www.radix-ui.com/colors

Step 3: Present Color Options

Provide 2-3 palette options with visual descriptions:

Copy## Palette Option A: "Midnight Cinema"

**Philosophy Alignment**: Theatrical, immersive, film-focused

### Light Mode
- Background: `#FAFAFA` (near-white, soft)
- Foreground: `#0A0A0A` (near-black, readable)
- Primary: `#6366F1` (indigo, modern)
- Muted: `#F4F4F5` (zinc-100)

### Dark Mode
- Background: `#09090B` (near-black, theater-like)
- Foreground: `#FAFAFA` (near-white)
- Primary: `#818CF8` (lighter indigo for dark)
- Muted: `#27272A` (zinc-800)

### Accent Colors
- Success: `#22C55E` (green-500)
- Warning: `#EAB308` (yellow-500)
- Error: `#EF4444` (red-500)

### Contrast Ratios
- Foreground on Background: 19.6:1 ✅ AAA
- Muted-foreground on Background: 5.8:1 ✅ AA

Step 4: Generate Implementation Code

After user approval, provide Tailwind/CSS implementation:

Copy/* globals.css */
@layer base {
  :root {
    --background: 0 0% 98%;
    --foreground: 0 0% 4%;
    --primary: 239 84% 67%;
    --primary-foreground: 0 0% 98%;
    --muted: 240 5% 96%;
    --muted-foreground: 240 4% 46%;
    --border: 240 6% 90%;
    --ring: 239 84% 67%;
  }
  
  .dark {
    --background: 240 6% 4%;
    --foreground: 0 0% 98%;
    --primary: 239 84% 74%;
    --primary-foreground: 240 6% 10%;
    --muted: 240 4% 16%;
    --muted-foreground: 240 5% 65%;
    --border: 240 4% 16%;
    --ring: 239 84% 74%;
  }
}

---

Research Commands

When you need to research color topics:

Accessibility Tools

Copyweb_search: "WCAG color contrast checker online"
read_web_page: https://webaim.org/resources/contrastchecker/

Color Palette Generators

Copyweb_search: "color palette generator for dark mode"
web_search: "oklch color palette tailwind"

Framework Documentation

Copyread_web_page: https://tailwindcss.com/docs/customizing-colors
read_web_page: https://ui.shadcn.com/docs/theming
read_web_page: https://tailwindcss.com/docs/dark-mode

Inspiration

Copyweb_search: "[industry] app color scheme examples"
web_search: "design system color tokens examples"

---

Handoff to Other Experts

After establishing color system, hand off with:

---

Color Specification Template

When documenting a color system:

Copy## Color System Specification

### Primitive Palette
| Name | Light Value | Dark Value | Usage |
|------|-------------|------------|-------|
| brand-500 | #6366F1 | #818CF8 | Primary actions |
| ... | ... | ... | ... |

### Semantic Tokens
| Token | Light | Dark | Contrast |
|-------|-------|------|----------|
| --background | hsl(0 0% 98%) | hsl(240 6% 4%) | N/A |
| --foreground | hsl(0 0% 4%) | hsl(0 0% 98%) | 19.6:1 ✅ |
| ... | ... | ... | ... |

### Usage Guidelines
- Primary: Main CTAs, active states, links
- Muted: Secondary text, disabled states
- Destructive: Delete actions, errors

---

Key Principles

1. Semantic Over Literal — Name colors by purpose, not appearance
2. Accessibility First — Every color choice must meet WCAG standards
3. Theme-Ready — All colors must work in both light and dark modes
4. Consistency — Use a defined scale, don't pick arbitrary values
5. Documentation — Every color needs a defined purpose and contrast verification