<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:#712F79;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;">#712F79</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:#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</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:#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:#858B98;border:1px solid rgba(0,0,0,0.08);"></div>
<strong style="margin-top:0.5rem;font-size:0.8rem;text-align:center;">Paragraph</strong>
<code style="font-size:0.7rem;color:#666;">#858B98</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:#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": "#712F79",
"variable": "--primary-color"
},
{
"name": "Secondary",
"value": "#F26419",
"variable": "--secondary-color"
},
{
"name": "Primary Light",
"value": "#F2EEF8",
"variable": "--primary-light"
},
{
"name": "Title",
"value": "#3E2155",
"variable": "--title"
},
{
"name": "Paragraph",
"value": "#858B98",
"variable": "--paragraph"
},
{
"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.