메뉴
Select and validate a project color palette with WCAG contrast compliance
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | design-colors |
| description | Select and validate a project color palette with WCAG contrast compliance |
| version | 1.0 |
| author | designer |
| audience | designer |
| workflow | branding |
Select a color palette for the project and validate it for accessibility. Write the result to docs/branding.md.
docs/branding.md exists but has no colors yetRead docs/branding.md. If colors are already set and the stakeholder has not asked to change them, stop — do not overwrite.
Map the project theme or mission to a hue. Hue carries meaning before any other element is read (Itten 1961 — hue semantics precede form perception):
| Theme / Mission | Hue | Semantic |
|---|---|---|
| Technology, trust, precision | Blue | Calm, reliable |
| Growth, nature, sustainability | Green | Life, progress |
| Creativity, energy, community | Orange | Warmth, action |
| Innovation, premium, research | Purple | Depth, curiosity |
| Urgency, passion, power | Red | Use sparingly |
| Clarity, neutrality | Grey | Professional, recedes |
Use a complementary scheme by default — a muted primary plus a pure complementary accent. This produces the most reliably professional result without requiring design expertise (Albers 1963 — simultaneous contrast; complementary pairs read as distinct without competing):
Example for green: Primary #2D6A4F (deep forest), Accent #D4A017 (golden amber).
Use analogous, split-complementary, or triadic only when the stakeholder explicitly requests it.
Any color used as a text background must achieve ≥ 4.5:1 contrast with white #FFFFFF (WCAG 2.1 SC 1.4.3 — derived from ISO 9241-3 baseline × 1.5 acuity loss factor):
sRGB → linear: c ≤ 0.04045 ? c/12.92 : ((c+0.055)/1.055)^2.4
L = 0.2126·R + 0.7152·G + 0.0722·B
Contrast = (L_lighter + 0.05) / (L_darker + 0.05)
If contrast < 4.5:1, darken the primary until compliant. Accent colors on non-text surfaces are exempt.
Update docs/branding.md under ## Visual:
- **Primary color:** `#XXXXXX` — <hue> (<semantic rationale>)
- **Accent color:** `#XXXXXX` — <hue> (<semantic rationale>)
> Colors meet WCAG 2.1 AA (X.X:1 contrast) when white text is placed on the primary.
docs/branding.md updated with hex codes, rationale, and contrast noteStep 2 — Architecture and domain design, one feature at a time
Step 1 — discover requirements through stakeholder interviews and write Gherkin acceptance criteria
Generate and update architecture diagrams, living glossary, and system overview from existing project docs
Enforce code quality using ruff, pytest coverage, and static type checking
Create pull requests with conventional commits, proper formatting, and branch workflow
Flow protocol — design and operate state machine workflows with FLOW.md + WORK.md