Brand identity · Design system · Accessibility
Rebuilding an EDI consultancy’s brand around difference — and making sure everyone can read it.
Client
EDI consultancy
Scope
Brand identity + website
Deliverables
Guidelines, tokens, components
Standard
WCAG 2.2 AA
Live prototype
A landing page built on the MTE design system — tokens, button states and accessibility rules included.
Design tokens
WCAG 2.2 AA
Responsive
At a glance
7 pairings
colour pairings tested against WCAG 2.2 AA
3 layers
of design tokens under everything
6 states
for every button, on every background
01 — The challenge
MTE asked for a website. But their brand — colours, type, logo — looked safe and generic, nothing like a practice built on equity, diversity and inclusion.
So I made the case to rebuild the identity first. The founder agreed.
The real brief
Rebuild the identity first, then design the website.
02 — Where it started
Seven cool greys and navys, described as “fresh, modern, dependable.” Right for a bank — not for EDI work.
The icon — two U-shapes hugging — had the right idea. It just never left grayscale.
“Colour that only grabs attention hasn’t done its job yet — it still has to be nice to live with.”
The principle I designed around
03 — Designing the metaphor
EDI work is a conversation: different voices in one room, making something better together.
So the mark became a speech bubble of overlapping coloured circles. Three colours, one bubble.
04 — A palette engineered for contrast
Teal, pink, amber and near-black — bold, but risky for text. Every pairing was tested against WCAG 2.2 AA.
Pairing
Ratio
Body text
Large text / UI
Teal text on white
1.41:1
✕ Fails
✕ Fails
Pink text on white
2.40:1
✕ Fails
✕ Fails
Amber text on white
1.64:1
✕ Fails
✕ Fails
Near-black on teal
12.73:1
✓ Passes
✓ Passes
Near-black on amber
10.89:1
✓ Passes
✓ Passes
Near-black on pink
7.47:1
✓ Passes
✓ Passes
White on near-black
17.89:1
✓ Passes
✓ Passes
No brand colour works as text on white.
The rule the table produced
Colour carries the surface. Dark ink carries the words.
05 — From guideline to system
I turned the guideline into a three-layer token system, so one decision updates everywhere.
01
Raw values
Colour ramps and spacing — no meaning yet.
02
What a colour means
Roles like primary, surface and border mapped onto the values.
03
Built from tokens
Buttons, cards, forms and navigation, with every state.
The same thinking shaped the website: clear structure, well-placed calls to action, and fewer steps to book a workshop.
06 — Inside the system
The old guide defined one button with no states. I specified every missing state within the palette.
States audit
3 variants × 6 states
Buttons on colour
Selected never relies on colour alone
Four decisions, made once
Marigold is the primary action
Every main action is marigold. Rose never labels a button.
Mint carries success
Mint confirms. Marigold never warns.
No dark theme
Dark stays an accent — nav, footer, quotes.
Motion: 150ms ease
150ms ease, and reduced motion respected.
07 — Applications
The same rules held across the website, social and workshops.
Responsive website
Social media templates
The brand at a live workshop
08 — What changed
✓ A new identity built around conversation
✓ An accessible palette, tested to WCAG 2.2 AA
✓ A token system with complete component states
✓ A website built around what visitors need
For the founder, it was the first version of the brand that looked like the work.
09 — Takeaways
Make the case before the craft
The key decision came before any design: showing the brand, not the layout, was the real problem.
Accessibility writes the rules
Contrast testing didn’t follow the usage rule — it created it.
Different voices, combined deliberately, make something stronger.
Next case study