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.

“Made for everyone”Accessible & InclusiveEra: 2018–nowFriendlyCalmTrustworthyPlayful

Open full screen ↗

inclusive-design / landingEN

inclusive-design / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm8pxRadius md12pxRadius lg18pxRadius xl26pxDensity×1.1Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

Okabe-Ito palettecolour-blind safeicon + text labeltext-size switchshape-coded legendshatched chart barsdiverse skin-tone avatarslooped Thai fontwarm cream canvas

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

Accessible & Ethical →Accessible & Ethical is stark black-on-white with a yellow focus block and square corners; Inclusive Design is warm cream, rounded and multi-coloured with shape-coded charts and diverse avatars.Flat Design →Flat design picks bright hues for looks; Inclusive Design picks a tested colour-blind-safe set and doubles every colour with a shape or label.Dopamine Design →Dopamine design pushes neon brights for joy; Inclusive Design’s colours are mid-tone, calm and chosen to stay distinguishable for everyone.

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.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinLexend · 400/500/600

The quick brown fox

Heading · ThaiNoto Sans Thai Looped · 500/600

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinLexend · 400/500/600

Clear words make shared decisions.

Body · ThaiNoto Sans Thai Looped · 400/500/600

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

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.

Colour palette

Light

Dark

Design tokens

Radius	`sm 8px · md 12px · lg 18px · xl 26px · pill 999px`
Border	`2px`
Shadow	`0 6px 18px rgba(31,37,68,0.10)`
Display	`clamp(2.5rem, 5.2vw, 4.25rem)`
Motion	`200ms cubic-bezier(.2,.7,.3,1)`
Density	`×1.1`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Inclusive Design (inclusive-design) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is light; dark values apply under .dark.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600&family=Noto+Sans+Thai+Looped:wght@400;500;600&display=swap
 */
:root {
  --radius: 18px;
  --background: #FFF8EE;
  --foreground: #1F2544;
  --card: #FFFFFF;
  --card-foreground: #1F2544;
  --popover: #FFFFFF;
  --popover-foreground: #1F2544;
  --primary: #0067A3;
  --primary-foreground: #FFFFFF;
  --secondary: #E69F00;
  --secondary-foreground: #1F2544;
  --muted: #FCEBD3;
  --muted-foreground: #4D5475;
  --accent: #FCEBD3;
  --accent-foreground: #1F2544;
  --destructive: #C04400;
  --border: #E4D3BC;
  --input: #E4D3BC;
  --ring: #0067A3;
  --chart-1: #0072B2;
  --chart-2: #E69F00;
  --chart-3: #009E73;
  --chart-4: #CC79A7;
  --chart-5: #D55E00;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #1F2544;
  --sidebar-primary: #0067A3;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #FCEBD3;
  --sidebar-accent-foreground: #1F2544;
  --sidebar-border: #E4D3BC;
  --sidebar-ring: #0067A3;
}

.dark {
  --background: #171A2C;
  --foreground: #F7F2EA;
  --card: #21253B;
  --card-foreground: #F7F2EA;
  --popover: #21253B;
  --popover-foreground: #F7F2EA;
  --primary: #56B4E9;
  --primary-foreground: #10132A;
  --secondary: #E69F00;
  --secondary-foreground: #10132A;
  --muted: #2B3050;
  --muted-foreground: #C3C6DA;
  --accent: #2B3050;
  --accent-foreground: #F7F2EA;
  --destructive: #FF8A4D;
  --border: #3B4166;
  --input: #3B4166;
  --ring: #56B4E9;
  --chart-1: #56B4E9;
  --chart-2: #E69F00;
  --chart-3: #2FC89B;
  --chart-4: #E59AC4;
  --chart-5: #FF8A4D;
  --sidebar: #21253B;
  --sidebar-foreground: #F7F2EA;
  --sidebar-primary: #56B4E9;
  --sidebar-primary-foreground: #10132A;
  --sidebar-accent: #2B3050;
  --sidebar-accent-foreground: #F7F2EA;
  --sidebar-border: #3B4166;
  --sidebar-ring: #56B4E9;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Inclusive Design (inclusive-design) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is light; dark values apply under .dark.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600&family=Noto+Sans+Thai+Looped:wght@400;500;600&display=swap
 */
@theme {
  --color-bg: #FFF8EE;
  --color-surface: #FFFFFF;
  --color-surface-2: #FCEBD3;
  --color-text: #1F2544;
  --color-text-muted: #4D5475;
  --color-primary: #0067A3;
  --color-on-primary: #FFFFFF;
  --color-secondary: #E69F00;
  --color-on-secondary: #1F2544;
  --color-accent: #00805D;
  --color-border: #E4D3BC;
  --color-success: #00805D;
  --color-warning: #A86400;
  --color-danger: #C04400;
  --color-chart-1: #0072B2;
  --color-chart-2: #E69F00;
  --color-chart-3: #009E73;
  --color-chart-4: #CC79A7;
  --color-chart-5: #D55E00;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(31,37,68,0.08);
  --shadow-md: 0 6px 18px rgba(31,37,68,0.10);
  --shadow-lg: 0 16px 40px rgba(31,37,68,0.14);
  --font-heading: "Lexend", "Noto Sans Thai Looped", system-ui, sans-serif;
  --font-body: "Lexend", "Noto Sans Thai Looped", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Noto Sans Thai Looped", monospace;
}

.dark {
  --color-bg: #171A2C;
  --color-surface: #21253B;
  --color-surface-2: #2B3050;
  --color-text: #F7F2EA;
  --color-text-muted: #C3C6DA;
  --color-primary: #56B4E9;
  --color-on-primary: #10132A;
  --color-secondary: #E69F00;
  --color-on-secondary: #10132A;
  --color-accent: #2FC89B;
  --color-border: #3B4166;
  --color-success: #2FC89B;
  --color-warning: #F0B93A;
  --color-danger: #FF8A4D;
  --color-chart-1: #56B4E9;
  --color-chart-2: #E69F00;
  --color-chart-3: #2FC89B;
  --color-chart-4: #E59AC4;
  --color-chart-5: #FF8A4D;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Inclusive Design (inclusive-design). Default mode: light. Fonts: https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600&family=Noto+Sans+Thai+Looped:wght@400;500;600&display=swap",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.9725,
            0.9333
          ],
          "hex": "#fff8ee"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9882,
            0.9216,
            0.8275
          ],
          "hex": "#fcebd3"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1216,
            0.1451,
            0.2667
          ],
          "hex": "#1f2544"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.302,
            0.3294,
            0.4588
          ],
          "hex": "#4d5475"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0,
            0.4039,
            0.6392
          ],
          "hex": "#0067a3"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.902,
            0.6235,
            0
          ],
          "hex": "#e69f00"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1216,
            0.1451,
            0.2667
          ],
          "hex": "#1f2544"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0,
            0.502,
            0.3647
          ],
          "hex": "#00805d"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8941,
            0.8275,
            0.7373
          ],
          "hex": "#e4d3bc"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0,
            0.502,
            0.3647
          ],
          "hex": "#00805d"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6588,
            0.3922,
            0
          ],
          "hex": "#a86400"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7529,
            0.2667,
            0
          ],
          "hex": "#c04400"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0,
            0.4471,
            0.698
          ],
          "hex": "#0072b2"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.902,
            0.6235,
            0
          ],
          "hex": "#e69f00"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0,
            0.6196,
            0.451
          ],
          "hex": "#009e73"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8,
            0.4745,
            0.6549
          ],
          "hex": "#cc79a7"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8353,
            0.3686,
            0
          ],
          "hex": "#d55e00"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0902,
            0.102,
            0.1725
          ],
          "hex": "#171a2c"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1294,
            0.1451,
            0.2314
          ],
          "hex": "#21253b"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1686,
            0.1882,
            0.3137
          ],
          "hex": "#2b3050"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9686,
            0.949,
            0.9176
          ],
          "hex": "#f7f2ea"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7647,
            0.7765,
            0.8549
          ],
          "hex": "#c3c6da"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3373,
            0.7059,
            0.9137
          ],
          "hex": "#56b4e9"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0627,
            0.0745,
            0.1647
          ],
          "hex": "#10132a"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.902,
            0.6235,
            0
          ],
          "hex": "#e69f00"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0627,
            0.0745,
            0.1647
          ],
          "hex": "#10132a"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1843,
            0.7843,
            0.6078
          ],
          "hex": "#2fc89b"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2314,
            0.2549,
            0.4
          ],
          "hex": "#3b4166"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1843,
            0.7843,
            0.6078
          ],
          "hex": "#2fc89b"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9412,
            0.7255,
            0.2275
          ],
          "hex": "#f0b93a"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.5412,
            0.302
          ],
          "hex": "#ff8a4d"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3373,
            0.7059,
            0.9137
          ],
          "hex": "#56b4e9"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.902,
            0.6235,
            0
          ],
          "hex": "#e69f00"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1843,
            0.7843,
            0.6078
          ],
          "hex": "#2fc89b"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.898,
            0.6039,
            0.7686
          ],
          "hex": "#e59ac4"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.5412,
            0.302
          ],
          "hex": "#ff8a4d"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 12,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 18,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 26,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 2,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1216,
              0.1451,
              0.2667
            ],
            "hex": "#1f2544",
            "alpha": 0.08
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1216,
              0.1451,
              0.2667
            ],
            "hex": "#1f2544",
            "alpha": 0.1
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 6,
            "unit": "px"
          },
          "blur": {
            "value": 18,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1216,
              0.1451,
              0.2667
            ],
            "hex": "#1f2544",
            "alpha": 0.14
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 16,
            "unit": "px"
          },
          "blur": {
            "value": 40,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Lexend",
        "Noto Sans Thai Looped",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Lexend",
        "Noto Sans Thai Looped",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Noto Sans Thai Looped",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 600
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 200,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.2,
      0.7,
      0.3,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.1
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 1
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!