Colours
Brand core colors
Primary Palette
These are the core colors that define our brand presence. Each tone has been selected for high contrast, bold expression, and consistent visibility across print and digital formats.
*Aligned to WCAG 2.2 AA contrast thresholds.
Secondary colors
Supporting shades
for accents
This secondary palette expands the brand’s visual flexibility. These colors are used to support the primary palette - adding contrast, depth, and variation across layouts, packaging, and digital content.
Use them sparingly and with intent. They’re designed to complement, not compete with, the core brand colors. Avoid assigning them primary roles unless specifically directed in a campaign or system.
How to theme
Color Discipline — Operating Rules
Color isn’t decoration. It sets hierarchy, improves legibility, and signals action. Use it with intent.
1)
Keep surfaces neutral
Keep most surfaces neutral. It calms the page and lets content lead. If a section needs “brand,” use a brand tint as a surface, not as a text color.
2)
Spend brand on actions
Reserve the brand color for primary buttons, key links, and section anchors. If everything is brand, nothing is important.
3)
Use accent for highlights
Use the accent for states (info/success/warn/error), small badges, charts, and tiny UI cues. Never use accent for large backgrounds or body text.
4)
Protect legibility
Text must sit on high-contrast backgrounds—neutral on light, white on strong brand, dark on pale brand. If the background is busy (image, gradient), add an overlay or move the text.
5)
Make links look like links
Default links use the brand color; add an underline on hover and a clear focus style. Don’t invent a “subtle link” that reads like body text.
6)
Borders, dividers, and UI chrome
Use light neutrals for lines and card borders. Avoid coloring lines with brand or accent; it creates noise and fake hierarchy.
7)
Match icons to text
Keep icons the same color as adjacent text unless signaling status. In charts, use brand for the primary series and accent for comparisons; neutrals carry gridlines and labels.
8)
On photography
If you place text on an image, add a soft overlay (light over dark image, dark over light image) until the text is unquestionably readable. If you have to squint, it fails.
Consistency beats creativity
Pick your pairs once (heading/body, link, button, caption) and reuse them everywhere. The brain learns patterns; don’t make it re-learn on every page.
Core color ratio
60/30/10 — Allocation Standard
A fixed budget for calm, decisive interfaces.
A clean interface follows simple proportions:
60% Neutral – backgrounds, cards, dividers, long sections
30% Brand – primary actions, headers, key highlights
10% Accent – states, badges, micro-highlights
Why it matters
Clarity: users find actions instantly because brand is reserved for what’s clickable or important.
Speed: no debating color on every block; the ratio makes the choice for you.
Consistency: pages feel related without copying layouts—same proportions, different content.
60%
30%
10%
This system keeps decisions simple: neutral surfaces, brand emphasis, accent signals—no improvisation required. Follow the allocation standard and you’ll get the same premium read across web, docs, and decks.