# Inclusive Design > 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. - Nickname: Made for everyone - Also called: Universal design, Colour-blind-safe UI, Design for all - Category: Accessible & Inclusive - Moods: Friendly, Calm, Trustworthy, Playful - Industries: Education, Government & Nonprofit, Healthcare, Kids & Family, SaaS - Style page: https://uilingo.dev/styles/inclusive-design/ 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 ## Audit Passed after 1 round · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Inclusive Design" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line 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: Okabe-Ito palette, colour-blind safe, icon + text label, text-size switch, shape-coded legends, hatched chart bars, diverse skin-tone avatars, looped Thai font, warm cream canvas. ## Visual language A warm, welcoming interface built so that nobody is left out: deep indigo text (#1F2544) on a cream canvas (#FFF8EE) with soft orange, sky and green glows, white rounded cards (18px radius, 2px sand border #E4D3BC) and a calm mid-tone palette taken from Okabe-Ito (#0072B2 blue, #E69F00 orange, #009E73 bluish green, #CC79A7 reddish purple, #D55E00 vermillion). Every colour cue is doubled by a shape, pattern or word, icons always sit next to text, the type is the reading-friendly Lexend with looped Thai, and people are shown in a range of skin tones. It should feel like a friendly public library, not a clinic. ## Signature details (must be visible) - Okabe-Ito colours for all categorical meaning and chart series; never red-vs-green to separate states - Shape coding: series and categories rotate ● circle, ■ square, ▲ triangle, ◆ diamond, ★ star — on legend keys, icon-tile corner tags, step numbers, pager dots and status dots - Chart bars and comparison bars carry patterns (diagonal hatch, dots, horizontal stripes) on top of the colour; the second line series is dashed 8 6 - Avatars rotate through skin tones (#8D5524, #F1C27D, #5C3A21, #E0AC69, #C68642) with a 2px Okabe-coloured ring; onboarding and article art show three figures of different skin tones - A visible text-size switch (three 'A' buttons → 100 / 115 / 130%) fixed bottom-right on web; layouts must survive 130% - Every badge and chip carries a symbol plus a word: ✓ done, ▲ needs attention, ✕ failed, ○ neutral, ★ featured, ✓ on the active chip and the selected segment - Eyebrow pill: white, 2px sand border, prefixed with a tiny blue-circle / orange-square / green-triangle mark - Headline keyword underlined with a soft orange marker band (45% #E69F00) behind the lower quarter of the text ## Design tokens — use these exact values Colours (light mode): - background #FFF8EE - surface #FFFFFF - surface-2 #FCEBD3 - text #1F2544 - text-muted #4D5475 - primary #0067A3 (text on it #FFFFFF) - secondary #E69F00 (text on it #1F2544) - accent #00805D - border #E4D3BC - success #00805D · warning #A86400 · danger #C04400 - chart series #0072B2, #E69F00, #009E73, #CC79A7, #D55E00 Radius: sm 8px, md 12px, lg 18px, xl 26px, pill 999px Border width: 2px Shadows: sm `0 1px 2px rgba(31,37,68,0.08)`, md `0 6px 18px rgba(31,37,68,0.10)`, lg `0 16px 40px rgba(31,37,68,0.14)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.1 density Motion: 200ms cubic-bezier(.2,.7,.3,1) ## Typography (Latin + Thai) - Headings: Lexend 400/500/600 with Thai fallback Noto Sans Thai Looped 500/600 - Body: Lexend 400/500/600 with Thai fallback Noto Sans Thai Looped 400/500/600 - Google Fonts URL: https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600&family=Noto+Sans+Thai+Looped:wght@400;500;600&display=swap - CSS stacks: heading `"Lexend", "Noto Sans Thai Looped", system-ui, sans-serif`; body `"Lexend", "Noto Sans Thai Looped", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.5rem, 5.2vw, 4.25rem), heading weight 600, heading tracking -0.01em (Latin only), sentence-case labels. - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: Lexend was designed to reduce visual stress and improve reading speed; Noto Sans Thai Looped matches its open, wide proportions and keeps the traditional head loops that new and young Thai readers recognise fastest. ## Components - Primary button: #0067A3 fill, white 600 label, 12px radius, soft blue shadow; secondary: white with 2px #1F2544 outline; accent: orange #E69F00 with indigo text - Focus: 3px solid primary outline with 3px offset and a surface-coloured gap ring - Cards: white, 2px #E4D3BC border, 18px radius, subtle shadow; icon tile tinted in the rotating Okabe colour with a small shape tag in its corner - Inputs: 50px tall, 2px warm-grey border #B9A88F, 12px radius; focus = blue border + 4px 22% blue halo; error = vermillion border, faint tint and a bold message with an icon - Checkbox 26px with 8px radius; switch is green when on and shows a ✓ inside the track; segmented control is a pill whose selected option is blue with a ✓ - Navigation: cream bar, links in indigo; the current link sits in a light-blue pill; the logo tile has an orange offset shadow - Dashboard: white sidebar, active item light-blue with a 4px blue inner bar; KPI deltas say 'up'/'down' in words; table status as symbol pills - Tab bar: white with labels always visible; the active icon sits in a 56×32px light-blue pill and the label turns blue 600 - Featured mobile card: solid blue, 26px radius, white tag with an orange dot, three overlapping coloured circles peeking from the bottom-right ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: two columns — copy left, product visual right. Navigation: bar style. Sections in order: hero → features → steps → testimonials → stats → faq → cta. Feature section as grid. Split hero with a left-aligned headline (orange marker under the key phrase), plain lead and two clear buttons; the product shot is a cluster of rounded cards. Features in a 3-column grid of rounded cards with colour+shape icon tiles, then numbered steps whose numbers are a blue square, orange circle and green diamond, testimonials with diverse avatars, stats with colour bars on the left, FAQ with round + toggles and a blue CTA panel with three coloured circles. The text-size switch is pinned bottom-right on every web page. ## Content Use realistic product copy (fictional brand) suited to: Learning platforms and public education services. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## 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 - Red/green-only status, legends that differ only by hue, unpatterned multi-series bar charts - Icon-only navigation or icon-only primary actions - Stark black-on-white with square corners and yellow focus blocks (that reads as Accessible & Ethical) - Neon or fully saturated brights (that becomes Dopamine or Flat design) - Loopless, condensed or thin Thai body fonts; tight Thai line-height - One default skin tone for every avatar or illustration ## Stack notes One self-contained HTML file with a