On this page
Colour
Core palette
Violet is the brand. Blue and cyan support it in gradients and motion — they are not substitutes for it.
Name | Hex | Use |
|---|---|---|
AGN Violet |
| Primary accent — buttons, embed bars, links, fills |
Violet Light |
| Violet on dark — headings, links, and text on Ink |
Signal Blue |
| Secondary accent — gradients, hover states, supporting UI |
Cyan |
| Highlights, particles, focus rings, gradient end-stop |
Ink |
| Primary dark background |
Panel |
| Raised surfaces, cards, embeds |
Line |
| Borders and dividers on dark |
Text |
| Primary text on dark |
Muted |
| Secondary text, captions, labels |
Violet has a contrast problem, and it runs the opposite way to most accents
#6E14FF is a dark colour. It reaches 6.6:1 on white — fine for body text, and it takes white text on top of it. On Ink it only reaches 2.9:1, which fails.
On dark backgrounds use Violet Light (#A97CFF, 6.4:1 on Ink) for anything that has to be read. Reserve #6E14FF for fills, borders, and large display type, where white or Text sits on top of it rather than beside it.
Cyan (#22D3EE) is the reverse: 10.7:1 on Ink, 1.8:1 on white. Dark backgrounds only. Never use it for text on a light page.
Status colours
Used in embeds and the dashboard so state is readable at a glance.
Name | Hex | Use |
|---|---|---|
Success |
| Confirmed, approved, resolved |
Warning |
| Quarantine, pending, needs attention |
Danger |
| Bans, errors, destructive actions |
Info |
| Neutral notices |
Reserve amber for quarantine and pending states specifically. If everything is amber, nothing is.
Signal Blue (#2563EB) and Info (#60A5FA) sit close together. Blue is brand, Info is state — do not use Info as a decorative accent or the distinction stops working.