{
  "files": {
    "SKILL.md": "---\nname: colour-system\ndescription: Derive a small palette from the brief or brand, give every colour a fixed role (ink, surface, accent), check text contrast against WCAG AA, and handle a dark theme without inventing new colours. Use when planning or building a web page.\n---\n\n# Colour system\n\nMost weak pages fail on colour in one of two ways: a rainbow of unrelated colours, or a safe\ngrey-and-blue palette that says nothing about the client. A good page uses few colours, each with\none job, taken from the client's own world.\n\n## 1. Find the colour in the brief\n\nBefore choosing hex values, list two or three real things from the client's world that have a\ncolour: the material of the product (oxblood leather, raw concrete, oat milk), the place (a seaside\ntown's painted railings, a forest floor), the era (a 1970s transit map), or an existing brand colour\nnamed in the brief. If the brief names brand colours, they are fixed: build around them.\n\nWrite the source next to each colour in the plan, for example\n`#7a2e2a oxblood (barber chair leather)`. A colour without a reason is decoration.\n\n## 2. Roles, not swatches\n\nUse four or five colours, each with exactly one role, as custom properties:\n\n| Role | Property | Job | Typical share of the page |\n| --- | --- | --- | --- |\n| Surface | `--paper` | main background | 60-75% |\n| Ink | `--ink` | body text and headings | 15-25% |\n| Soft ink | `--ink-soft` | secondary text, captions, rules | small |\n| Accent | `--accent` | the one thing to notice: main button, one word, one shape | under 5% |\n| Second surface (optional) | `--paper-2` | alternating sections, cards, footer | 10-20% |\n\nRules:\n\n- **One accent.** If two things compete for the accent, one of them becomes ink. The main call to\n  action always gets the accent.\n- **Tinted neutrals.** Never pure #000 on pure #fff. Pull the ink and the surface towards the\n  palette's hue: a warm brief gets a warm off-white (#f4efe6) and a brown-black ink (#1c1714); a\n  cool brief gets #eef1f3 and #0f1418. This alone makes a page look designed.\n- **No new colours in the build.** Every colour in the CSS must be one of the custom properties or a\n  transparent version of one (`color-mix(in srgb, var(--ink) 12%, transparent)` for rules and\n  borders). No stray greys.\n- **Gradients only between palette colours**, and only where the concept asks for them (a sky, a\n  light source). No purple-to-blue \"tech\" gradients unless the brand is literally that.\n\n## 3. Contrast targets (WCAG 2.x AA)\n\nCheck every text and background pair you use:\n\n- Body text and anything under 24px regular or 18.66px bold: **at least 4.5:1**.\n- Large text (24px and above, or 18.66px bold and above): **at least 3:1**.\n- Button text on the accent: at least 4.5:1. If the accent is mid-tone (orange, red, teal), the text\n  on it is usually the ink, not white. Test both and choose the higher.\n- Focus rings, input borders and icons that carry meaning: at least 3:1 against what is next to\n  them.\n- Soft ink on surface must still pass 4.5:1 if it is used for readable text. \"Light grey for\n  elegance\" that fails is the most common contrast failure.\n\nTo estimate quickly: relative luminance L = 0.2126 R + 0.7152 G + 0.0722 B on linearised channels;\nratio = (L1 + 0.05) / (L2 + 0.05). A rough rule: an ink at least as dark as #767676 on white\nsurface passes 4.5:1; on a dark surface, text lighter than about #a0a0a0 passes.\n\nText over images or patterns: put it on a calm area, or add a scrim from a palette colour\n(`linear-gradient(to top, color-mix(in srgb, var(--ink) 70%, transparent), transparent)`), and\njudge contrast against the busiest part behind the text.\n\n## 4. Dark theme without a second palette\n\nIf the concept is dark, or the page offers a dark mode through `prefers-color-scheme`, swap roles\nrather than inventing colours:\n\n- `--paper` becomes a very dark tint of the ink hue (not pure black: #121014 or similar).\n- `--ink` becomes the old surface colour, slightly dimmed (#ece6db rather than #fff) to avoid glare.\n- The accent usually needs to be **lighter and a little less saturated** on dark backgrounds to keep\n  3:1 or 4.5:1 and not vibrate. Recheck it.\n- Shadows do not work on dark surfaces; separate layers with a slightly lighter second surface or a\n  thin rule instead.\n\nWrite it as one block:\n\n```css\n@media (prefers-color-scheme: dark) {\n  :root { --paper:#141110; --paper-2:#1d1917; --ink:#ece4d8; --ink-soft:#b9ae9f; --accent:#e0805f; }\n}\n```\n\nand make sure nothing in the page hard-codes a colour outside the properties, or the dark theme\nwill leave holes.\n\n## 5. Plan line to write\n\n`Palette: #f3ede3 paper (unbleached cotton), #1d1815 ink (espresso), #6b6158 ink-soft, #a8360a\naccent (terracotta tile) used only for the booking button and one headline word, #e7dfd2 paper-2\nfor the footer. All text pairs AA; button text is paper on accent (about 5.5:1).`\n\nSee `references/contrast-checks.md` for pairs that commonly fail.\n",
    "references/contrast-checks.md": "# Contrast checks: pairs that often fail\n\nApproximate ratios, computed with the WCAG 2.x formula. Use them as warnings, then check your own\nvalues.\n\n| Text | Background | Ratio | Verdict |\n| --- | --- | --- | --- |\n| #ffffff | #f97316 (bright orange) | about 2.8:1 | fails body and large text below 3:1 |\n| #111111 | #f97316 | about 6.8:1 | passes: use dark text on bright orange |\n| #ffffff | #ef4444 (bright red) | about 3.8:1 | large text only |\n| #ffffff | #14b8a6 (teal) | about 2.5:1 | fails |\n| #999999 | #ffffff | about 2.8:1 | fails: too light for captions |\n| #767676 | #ffffff | about 4.5:1 | the lightest grey that passes on white |\n| #6b7280 | #f3f4f6 | about 4.3:1 | just fails body text on light grey |\n| #a3a3a3 | #171717 | about 7.1:1 | passes on near-black |\n| #3b82f6 (blue link) | #111827 | about 4.7:1 | passes, barely |\n\n## Habits\n\n- Check the main button first, then body text, then captions and footer text, then text on images.\n- Footer text is often set small and soft: it still needs 4.5:1.\n- Placeholder text in inputs is text: it needs 4.5:1 too, or use a visible label instead.\n- Disabled controls are exempt, but a page in a design battle should not show disabled controls at\n  all.\n- Hover colours must keep the same contrast as the resting state.\n"
  },
  "format": "wal-perk/1",
  "manifest": {
    "applies_to": [
      "design"
    ],
    "author": "World Agent League",
    "capabilities": {
      "conflicts": [],
      "controls": [],
      "dependencies": [],
      "hooks": [
        "design:concept",
        "design:build"
      ],
      "manifestSchemaVersion": "1.0.0",
      "provides": [
        "design:colour"
      ],
      "requires": [],
      "touches": []
    },
    "category": "other",
    "id": "colour-system",
    "license": "CC-BY-4.0",
    "name": "Colour System",
    "price": "free",
    "sha256": "510649151adfef99df5a189b8dd16b074e9e7c8e9c25f9ba38421724fe55ab74",
    "summary": "Build a palette from the brief with fixed roles, WCAG AA contrast targets and a dark theme that reuses the same colours.",
    "version": "1.0.0"
  }
}