<div style="display:flex;flex-wrap:wrap;gap:1rem;">
<div style="display:flex;flex-direction:column;align-items:center;width:130px;">
<div style="width:130px;height:80px;border-radius:8px;background:#672c72;border:1px solid rgba(0,0,0,0.08);"></div>
<strong style="margin-top:0.5rem;font-size:0.8rem;text-align:center;">Primary</strong>
<code style="font-size:0.7rem;color:#666;">#672c72</code>
<code style="font-size:0.65rem;color:#999;">--primary-color</code>
</div>
<div style="display:flex;flex-direction:column;align-items:center;width:130px;">
<div style="width:130px;height:80px;border-radius:8px;background:#521f5a;border:1px solid rgba(0,0,0,0.08);"></div>
<strong style="margin-top:0.5rem;font-size:0.8rem;text-align:center;">Primary Hover</strong>
<code style="font-size:0.7rem;color:#666;">#521f5a</code>
<code style="font-size:0.65rem;color:#999;">--primary-hover</code>
</div>
<div style="display:flex;flex-direction:column;align-items:center;width:130px;">
<div style="width:130px;height:80px;border-radius:8px;background:#F26419;border:1px solid rgba(0,0,0,0.08);"></div>
<strong style="margin-top:0.5rem;font-size:0.8rem;text-align:center;">Secondary</strong>
<code style="font-size:0.7rem;color:#666;">#F26419</code>
<code style="font-size:0.65rem;color:#999;">--secondary-color</code>
</div>
<div style="display:flex;flex-direction:column;align-items:center;width:130px;">
<div style="width:130px;height:80px;border-radius:8px;background:#F2EEF8;border:1px solid rgba(0,0,0,0.08);"></div>
<strong style="margin-top:0.5rem;font-size:0.8rem;text-align:center;">Primary Light (page tint)</strong>
<code style="font-size:0.7rem;color:#666;">#F2EEF8</code>
<code style="font-size:0.65rem;color:#999;">--primary-light</code>
</div>
<div style="display:flex;flex-direction:column;align-items:center;width:130px;">
<div style="width:130px;height:80px;border-radius:8px;background:#efedf7;border:1px solid rgba(0,0,0,0.08);"></div>
<strong style="margin-top:0.5rem;font-size:0.8rem;text-align:center;">Component Tint (pills/chips/hovers)</strong>
<code style="font-size:0.7rem;color:#666;">#efedf7</code>
<code style="font-size:0.65rem;color:#999;">--component-tint</code>
</div>
<div style="display:flex;flex-direction:column;align-items:center;width:130px;">
<div style="width:130px;height:80px;border-radius:8px;background:#3E2155;border:1px solid rgba(0,0,0,0.08);"></div>
<strong style="margin-top:0.5rem;font-size:0.8rem;text-align:center;">Title</strong>
<code style="font-size:0.7rem;color:#666;">#3E2155</code>
<code style="font-size:0.65rem;color:#999;">--title</code>
</div>
<div style="display:flex;flex-direction:column;align-items:center;width:130px;">
<div style="width:130px;height:80px;border-radius:8px;background:#6b6880;border:1px solid rgba(0,0,0,0.08);"></div>
<strong style="margin-top:0.5rem;font-size:0.8rem;text-align:center;">Paragraph / Muted</strong>
<code style="font-size:0.7rem;color:#666;">#6b6880</code>
<code style="font-size:0.65rem;color:#999;">--paragraph</code>
</div>
<div style="display:flex;flex-direction:column;align-items:center;width:130px;">
<div style="width:130px;height:80px;border-radius:8px;background:#6d648f;border:1px solid rgba(0,0,0,0.08);"></div>
<strong style="margin-top:0.5rem;font-size:0.8rem;text-align:center;">Eyebrow label</strong>
<code style="font-size:0.7rem;color:#666;">#6d648f</code>
<code style="font-size:0.65rem;color:#999;">--eyebrow</code>
</div>
<div style="display:flex;flex-direction:column;align-items:center;width:130px;">
<div style="width:130px;height:80px;border-radius:8px;background:#2E9E6B;border:1px solid rgba(0,0,0,0.08);"></div>
<strong style="margin-top:0.5rem;font-size:0.8rem;text-align:center;">Success</strong>
<code style="font-size:0.7rem;color:#666;">#2E9E6B</code>
<code style="font-size:0.65rem;color:#999;">--success</code>
</div>
<div style="display:flex;flex-direction:column;align-items:center;width:130px;">
<div style="width:130px;height:80px;border-radius:8px;background:#F59E0B;border:1px solid rgba(0,0,0,0.08);"></div>
<strong style="margin-top:0.5rem;font-size:0.8rem;text-align:center;">Warning</strong>
<code style="font-size:0.7rem;color:#666;">#F59E0B</code>
<code style="font-size:0.65rem;color:#999;">--warning</code>
</div>
<div style="display:flex;flex-direction:column;align-items:center;width:130px;">
<div style="width:130px;height:80px;border-radius:8px;background:#E03E3E;border:1px solid rgba(0,0,0,0.08);"></div>
<strong style="margin-top:0.5rem;font-size:0.8rem;text-align:center;">Danger</strong>
<code style="font-size:0.7rem;color:#666;">#E03E3E</code>
<code style="font-size:0.65rem;color:#999;">--danger</code>
</div>
<div style="display:flex;flex-direction:column;align-items:center;width:130px;">
<div style="width:130px;height:80px;border-radius:8px;background:#3B82F6;border:1px solid rgba(0,0,0,0.08);"></div>
<strong style="margin-top:0.5rem;font-size:0.8rem;text-align:center;">Info</strong>
<code style="font-size:0.7rem;color:#666;">#3B82F6</code>
<code style="font-size:0.65rem;color:#999;">--info</code>
</div>
<div style="display:flex;flex-direction:column;align-items:center;width:130px;">
<div style="width:130px;height:80px;border-radius:8px;background:#ffffff;border:1px solid rgba(0,0,0,0.08);"></div>
<strong style="margin-top:0.5rem;font-size:0.8rem;text-align:center;">White</strong>
<code style="font-size:0.7rem;color:#666;">#ffffff</code>
</div>
<div style="display:flex;flex-direction:column;align-items:center;width:130px;">
<div style="width:130px;height:80px;border-radius:8px;background:#f9fafb;border:1px solid rgba(0,0,0,0.08);"></div>
<strong style="margin-top:0.5rem;font-size:0.8rem;text-align:center;">Background</strong>
<code style="font-size:0.7rem;color:#666;">#f9fafb</code>
</div>
<div style="display:flex;flex-direction:column;align-items:center;width:130px;">
<div style="width:130px;height:80px;border-radius:8px;background:#EAE2F4;border:1px solid rgba(0,0,0,0.08);"></div>
<strong style="margin-top:0.5rem;font-size:0.8rem;text-align:center;">Border</strong>
<code style="font-size:0.7rem;color:#666;">#EAE2F4</code>
</div>
</div>
<div style="display:flex;flex-wrap:wrap;gap:1rem;">
{{#each colours}}
<div style="display:flex;flex-direction:column;align-items:center;width:130px;">
<div style="width:130px;height:80px;border-radius:8px;background:{{this.value}};border:1px solid rgba(0,0,0,0.08);"></div>
<strong style="margin-top:0.5rem;font-size:0.8rem;text-align:center;">{{this.name}}</strong>
<code style="font-size:0.7rem;color:#666;">{{this.value}}</code>
{{#if this.variable}}<code style="font-size:0.65rem;color:#999;">{{this.variable}}</code>{{/if}}
</div>
{{/each}}
</div>
{
"colours": [
{
"name": "Primary",
"value": "#672c72",
"variable": "--primary-color"
},
{
"name": "Primary Hover",
"value": "#521f5a",
"variable": "--primary-hover"
},
{
"name": "Secondary",
"value": "#F26419",
"variable": "--secondary-color"
},
{
"name": "Primary Light (page tint)",
"value": "#F2EEF8",
"variable": "--primary-light"
},
{
"name": "Component Tint (pills/chips/hovers)",
"value": "#efedf7",
"variable": "--component-tint"
},
{
"name": "Title",
"value": "#3E2155",
"variable": "--title"
},
{
"name": "Paragraph / Muted",
"value": "#6b6880",
"variable": "--paragraph"
},
{
"name": "Eyebrow label",
"value": "#6d648f",
"variable": "--eyebrow"
},
{
"name": "Success",
"value": "#2E9E6B",
"variable": "--success"
},
{
"name": "Warning",
"value": "#F59E0B",
"variable": "--warning"
},
{
"name": "Danger",
"value": "#E03E3E",
"variable": "--danger"
},
{
"name": "Info",
"value": "#3B82F6",
"variable": "--info"
},
{
"name": "White",
"value": "#ffffff",
"variable": null
},
{
"name": "Background",
"value": "#f9fafb",
"variable": null
},
{
"name": "Border",
"value": "#EAE2F4",
"variable": null
}
]
}
Core brand and UI colours. CSS custom properties defined in styleguide.css. Update here and in the CSS if the brand palette changes.
Signed off 2026-07-23 (docs/styling-review-2026-07/decision-doc.md): brand purple moves #712F79 -> #672c72, with a hover-darken step; paragraph/muted text moves #858B98 -> #6b6880 because the old value failed WCAG AA at body size (3.42:1 on white); a new Eyebrow label colour and a second (“component”) tint step are added. Per-mode (light/dark) values for the button role palette live on the Button atom, not here.