Inclusive Design

Stylegeneral

Accessible, color-blind friendly, high contrast, haptic feedback, voice interaction, screen reader, enhanced contrast targets, universal. Best for Public services, education, healthcare, finance, government, accessible…

Accessible color-blind friendly high contrast haptic feedback voice interaction screen reader enhanced contrast targets universal

Preview

A sample page drawn from this style’s tokens — a guide to the look, not the exact output.

New · weekly review

Plan the week in ten minutes

Pull in every task, see what matters, and share one clear plan with the team.

Get startedSee how it worksDocs

Tasks done1,284+12% this week

Emailyou@example.com

Remember meContinue

Today

Review roadmapDone

Ship onboardingIn progress

Team sync3 pm

Prompt

Paste into any AI assistant before describing what to build — or attach it to a project below.

# Visual style: Inclusive Design

Keywords: Accessible, color-blind friendly, high contrast, haptic feedback, voice interaction, screen reader, enhanced contrast targets, universal
Primary colours: Measured contrast pairs targeting 7:1 for normal text, avoid red-green only, symbol-based indicators, high contrast primary
Secondary colours: Supporting patterns (stripes, dots, hatch), symbols, combinations, clear non-color indicators
Effects & animation: Haptic feedback (vibration), voice guidance, focus indicators (4px+ ring), motion options, alt content, semantic
Best for: Public services, education, healthcare, finance, government, accessible consumer, inclusive
Do not use for: None - accessibility universal

## Prompt keywords
Design for universal accessibility: high contrast (7:1+), large text (16px+), keyboard-only navigation, screen reader optimization, enhanced accessibility criteria with complete-page verification, symbol-based color indicators (not color-only), haptic feedback, voice interaction support, reduced motion options.

## CSS / technical
aria-* attributes complete, role attributes semantic, focus-visible: 3-4px ring, color-contrast: 7:1+, @media (prefers-reduced-motion), alt text on all images, form labels properly associated

## Implementation checklist
☐ complete-page conformance tested against the chosen target, ☐ 7:1+ contrast all text, ☐ Keyboard accessible (Tab/Enter), ☐ Screen reader tested, ☐ Focus visible 3-4px, ☐ No color-only indicators, ☐ Haptic fallback

## Design system variables
--contrast-ratio: 7:1, --font-size: 16px+, --keyboard-accessible: true, --sr-test-required: true, --wcag-target: enhanced, --color-symbols: true, --haptic: enabled

Use it in an app

Create a free account to attach this style to a project: the hub adds it to the prompt your AI assistant gets, so it builds every page in this look.

Start building — free I already have an account

From UI/UX Pro Max (MIT, commit 477bcb2).View source