color-system

Color System — Multi-Domain Color Architecture

Comprehensive color design system governing both digital product interfaces (Web/App tokens & theming) and graphic/print media (CMYK/Pantone & prepress standards).

---

Architecture Overview

This skill operates across two specialized domains depending on the user's medium:

                      ┌─────────────────────────┐
                      │      color-system       │
                      │ Multi-Domain Color Core │
                      └────────────┬────────────┘
                                   │
         ┌─────────────────────────┴─────────────────────────┐
         ▼                                                   ▼
┌─────────────────────────────────┐ ┌─────────────────────────────────┐
│ Domain 1: Digital UI & Tokens   │ │ Domain 2: Graphic & Print Media │
│ • Semantic CSS vars (tokens.css)│ │ • CMYK (FOGRA39) & Pantone Spot │
│ • Auto Light/Dark mode switching│ │ • 60-30-10 Rule & Emotion Matrix│
│ • WCAG AA (≥4.5:1 / ≥3:1) check │ │ • Pure K100 vs Rich Black (TIC) │
│ • 5 Curated Palettes + Custom   │ │ • Substrate dot gain absorption │
└─────────────────────────────────┘ └─────────────────────────────────┘

---

Domain 1: Digital Product & UI Color Tokens

This track produces production-ready CSS token blocks (tokens.css) containing semantic variables with automatic dark-mode adaptation.

Side Files

• assets/tokens-template.css — base CSS template with light/dark scaffolding.
• references/palettes.md — curated digital palette catalog with all 5 systems' light and dark values.

Available Digital Palettes

Digital Workflow

1. Determine palette: Ask user for keyword or derive from a base hex color + mood (warm / cool / neutral).
2. Consult reference: Read references/palettes.md for curated palettes.
3. Generate :root block for default light-mode values.
4. Generate @media (prefers-color-scheme: dark) and .dark block for dark-mode overrides.
5. Validate WCAG AA contrast ratios:
   • Body text (≤16px): ≥ 4.5:1
   • Large text (>18px or 14px bold): ≥ 3:1
   • UI components / borders: ≥ 3:1
6. Emit CSS block and enforce accent discipline (max 2 visible accent uses per screen).

Standard Token Set

---

Domain 2: Graphic & Print Design Color System

This track provides physical media color standards, converting visual concepts into accurate CMYK formulas, Pantone spot colors, and print prepress parameters.

Reference Manual

• references/graphic-print-color.md — deep-dive guide on gamut conversion, black ink rules, paper substrates, and industry mood matrices.

Core Graphic Color Rules

1. 60-30-10 Golden Ratio:
   • 60% Dominant Base: Canvas, background paper tone, dominant negative space.
   • 30% Secondary Structure: Layout elements, secondary blocks, major headline typography.
   • 10% Visual Accent Hook: Focal hook, CTA sticker, key emblem, spot foil/varnish.
2. RGB ➜ CMYK Gamut Protection:
   • For physical print, never rely on unmanaged RGB conversions (especially vibrant greens, cyan blues, and fluorescent pinks).
   • High-chroma branding elements must be assigned a dedicated Pantone Spot Color (Formula Guide Coated/Uncoated).
3. Black Ink Prepress Rules:
   • Body text (≤24pt) & barcodes: Strictly single black C:0 M:0 Y:0 K:100. Never use four-color rich black for fine text.
   • Large dark backgrounds: Rich black (C:30 M:20 Y:20 K:100 or C:40 M:30 Y:0 K:100). Total Ink Coverage (TIC) must remain ≤ 300% to prevent drying defects and offset smearing.
4. Substrate & Paper Absorption Compensation:
   • Coated art paper: High color fidelity, small dot gain (~10%-15%).
   • Uncoated paper: High dot gain (~20%-25%), colors darken and desaturate; increase pre-press curve brightness by +5%~10%.
   • Specialty/Kraft paper: Dark or tinted base; white elements require an opaque spot white underprint (白墨打底).

Graphic Color Deliverable Format

When delivering a color system for posters, brochures, packaging, or brand VI collateral, output the following structured specification:

### [Palette Name] Print & Graphic Color Specification

| Role | Color Name | HEX / RGB | CMYK (FOGRA39) | Pantone Spot | Substrate & Application Notes |
|---|---|---|---|---|---|
| Dominant (60%) | [Name] | `#HEX` / `R,G,B` | `C:__ M:__ Y:__ K:__` | `PANTONE ___ C/U` | Canvas / background cardstock; check paper tone |
| Secondary (30%) | [Name] | `#HEX` / `R,G,B` | `C:__ M:__ Y:__ K:__` | `PANTONE ___ C/U` | Primary headline typography & structural graphics |
| Accent (10%) | [Name] | `#HEX` / `R,G,B` | `C:__ M:__ Y:__ K:__` | `PANTONE ___ C/U` | Focal hook, brand badge, hot foil / spot UV plate |
| Body Text Black | Standard Black | `#000000` / `0,0,0` | `C:0 M:0 Y:0 K:100` | — | Text ≤24pt, barcodes; strictly no rich black mixing |