Color Palette

Color Palette Management

Generate color palettes in the standard YAML format that can be consumed by design-spec.css and HTML templates. This is the "source of truth" for all colors.

Standard YAML Output Format

All palettes use this format for downstream compatibility:

palette:
  name: "SaaS Blue"
  version: "1.0"
  source: "curated"           # curated | extracted | trending | traditional | custom
  source_url: null

  tags:
    industry: "saas"
    style: "enterprise"
    mode: "light"
    season: null
    culture: null

  colors:
    primary:
      base: "#4F46E5"
      hover: "#4338CA"
      light: "#E0E7FF"

    secondary:
      base: "#0EA5E9"
      hover: "#0284C7"
      light: "#E0F2FE"

    accent:
      base: "#F59E0B"
      hover: "#D97706"
      light: "#FEF3C7"

    surface:
      base: "#FFFFFF"
      alt: "#F9FAFB"
      hover: "#F3F4F6"

    text:
      primary: "#111827"
      secondary: "#6B7280"
      disabled: "#D1D5DB"
      inverse: "#FFFFFF"

    border:
      base: "#E5E7EB"
      focus: "#4F46E5"

    semantic:
      success: "#10B981"
      warning: "#F59E0B"
      error: "#EF4444"
      info: "#3B82F6"

  dark_mode:
    surface:
      base: "#1F2937"
      alt: "#111827"
    text:
      primary: "#F9FAFB"
      secondary: "#9CA3AF"

YAML → CSS Conversion Rules

Conversion Script

python3 -c "
import yaml
with open('palette.yml') as f:
    p = yaml.safe_load(f)['palette']['colors']

for role in ['primary', 'secondary', 'accent']:
    if role in p and p[role]:
        for k, v in p[role].items():
            suffix = '' if k == 'base' else f'-{k}'
            print(f'  --color-{role}{suffix}: {v};')

for role in ['surface', 'text', 'border']:
    if role in p and p[role]:
        for k, v in p[role].items():
            if k == 'base':
                print(f'  --color-{role}: {v};')
            else:
                print(f'  --color-{role}-{k}: {v};')

if 'semantic' in p and p[semantic]:
    for k, v in p['semantic'].items():
        print(f'  --color-{k}: {v};')
"

Capabilities

1. Built-in Industry Palettes (12 schemes)

Download from registry:

curl -s https://raw.githubusercontent.com/YaoApp/design-assets/main/palettes/2024/saas-blue.yml \
  -o $WORKDIR/design-works/.cache/assets/palettes/2024/saas-blue.yml

2. Traditional Chinese Colors (742 colors)

When user asks for traditional Chinese colors, read the colors database:

cat $WORKDIR/design-works/.cache/assets/palettes/traditional/colors.yml

Download from registry if not cached:

curl -s https://raw.githubusercontent.com/YaoApp/design-assets/main/palettes/traditional/colors.yml \
  -o $WORKDIR/design-works/.cache/assets/palettes/traditional/colors.yml

Search by color name, season, or dynasty. Generate palette YAML with source: "traditional" and filled tags.culture and tags.season fields.

3. Extract from Reference URL

When user provides a URL:

1. web_fetch the page
2. Extract CSS colors (color, background-color, --color-* variables)
3. Classify by semantic role (largest background → surface, most-used text → text.primary, etc.)
4. Output palette YAML with source: "extracted" and source_url filled

4. Search Trending Colors

tai tool web_search '{"query": "2026 UI color trends popular palettes"}'

Synthesize results into palette YAML. Mark source: "trending".

5. Standalone Color Consultation

When user needs colors from scratch, use AskUserQuestion:

• Industry? (saas / ecommerce / healthcare / ...)
• Style? (enterprise / playful / tech / ...)
• Temperature? (warm / cool / neutral)
• Mode? (light / dark)

Match closest scheme from built-in library, propose 2-3 candidates.

6. Adjust Existing Palette

Common adjustments:

• "Make it warmer" → shift primary hue +15°, regenerate derivations
• "Lower contrast" → move text.primary closer to surface.base
• "Add an accent color" → pick from complementary colors

Boundary with design-spec

External Color Resources

Rules

• All palettes must output the standard YAML format
• tags must be fully filled for resource library searchability
• Traditional Chinese palettes: source: "traditional" with culture and season tags
• Extracted palettes: source_url is required
• YAML → CSS conversion is lossless; variable names follow fixed mapping
• Palette YAML stored at .library/palettes/{year}/ or .library/palettes/traditional/
• text.primary → --color-text-primary (NEVER --color-text)
• semantic.* keys omit the "semantic" prefix in CSS: semantic.error → --color-error
• Only apply dark_mode when manifest mode is "dark", not just because it exists