Inclusive Design
Also called: Universal design, Colour-blind-safe UI, Design for all
Warm, rounded and multi-coloured with a colour-blind-safe palette, icons that always carry a label, a text-size control and people of every skin tone.
Design keywords
Say these words to ask for this style.
Inclusive Design starts from the people a product usually forgets — colour-blind, older, dyslexic, low-literacy or new-language users — and makes that care visible. The palette is Okabe-Ito (blue, orange, bluish green, reddish purple, vermillion) so series and states survive any colour vision; every series also gets its own marker shape or hatch. Icons always sit next to words, a text-size switch is part of the chrome, Thai uses a looped face, and avatars show a range of skin tones. Cards are soft and rounded on a warm cream ground so it feels welcoming rather than clinical.
Best for
- Learning platforms and public education services
- Community, NGO and civic apps used by all ages
- Products launched in several languages or regions
- Data products whose charts must work for colour-blind readers
Avoid for
- Ultra-minimal luxury brands
- Dark, moody entertainment or gaming
- Dense pro tools where every pixel is data
✓ Do
- Use Okabe-Ito colours (#0072B2, #E69F00, #009E73, #CC79A7, #D55E00) for any categorical meaning
- Pair every colour cue with a shape, pattern or word (●■▲◆, hatching, ✓ !)
- Offer a visible text-size control and keep layouts working at 125%
- Show people of different ages and skin tones in avatars and imagery
✕ Don't
- Never rely on red vs green to separate states
- Don’t use icon-only navigation or icon-only buttons in primary flows
- Don’t use loopless, condensed or thin Thai fonts for body copy
- Don’t default every avatar or illustration to one skin tone
Not to be confused with
On mobile
Tab bar keeps text labels under every icon; list icons rotate through the Okabe-Ito colours with a matching shape. Respect the OS text size and let cards grow in height instead of truncating Thai text.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.