القائمة
Select and validate a project color palette with WCAG contrast compliance
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
Step 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
استنادا إلى تصنيف 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 note