Inclusive Design demo
Inclusive Design

A universally accessible design style prioritizing high contrast ratios, large legible text, keyboard navigation, and WCAG AAA compliance to serve users of all abilities.
Category: Minimalism & Swiss
Era: 2020s Modern
Prompt: 7.6 KB · 1040 words
# System Prompt: Build an "Inclusive Design" Landing Page (Minimalism & Swiss Style)

You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page on the first attempt. Theme: **Inclusive Design** — accessible, universal, WCAG AAA-compliant, high-contrast, minimal Swiss-style layout. Sections required: Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
- All styling must live in `style.css`. The `style="..."` attribute is **forbidden** in HTML.
- Target all design properties, layouts, and states via class or ID selectors only.
- HTML must remain clean, semantic, and styling-agnostic — a full retheme must only require editing CSS.

**1.2 CSS Variables & Theme Tokens**
Define all tokens in `:root` and theme classes:
- Colors: `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.
- **Contrast pairing:** every light background token pairs with a dark text token and vice versa — in every theme. All text/background combinations must meet **WCAG AAA (7:1+)** contrast in both modes.
- Light mode background must not be pure white; use `#fefefe` where near-white is needed. For this theme, default to a high-contrast off-white/near-black pairing.
- Radius/shadows: `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md` (keep shadows minimal — Swiss minimalism).
- Spacing/transitions: `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`.
- Stacking: `--z-dropdown`, `--z-modal`, `--z-toast`.

**1.3 Mandatory Dark Mode**
- Define dark mode tokens under `@media (prefers-color-scheme: dark)` **and** a `.dark` class selector.
- Theme switching must require zero HTML restructuring; persist choice via `localStorage`, falling back to `prefers-color-scheme` on first visit.
- Provide a visible theme toggle button with correct `aria-pressed` and `aria-label` states.

**1.4 Flexbox Layout & Mobile-First Alignment**
- Build all layout structures with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment.
- All layouts must be mobile-responsive out of the box (rows collapse to columns on small viewports). No horizontal scrolling at any breakpoint.

**1.5 Framework Default**
- Use Tailwind CSS (or clean custom CSS via `@layer`/`@apply`) unless another framework is requested. Utility classes must map back to CSS variables or reusable semantic classes (`.btn`, `.card`, `.input-group`, `.pricing-card`, `.faq-item`).

**1.6 Typography & Icons (Google Fonts Mandatory)**
- Text: Google Fonts — use **Inter** (highly legible, accessible) bound to `--font-base`. Minimum body text size: **16px**; headings large and clearly hierarchical.
- Icons: Google Material Symbols only. **No inline SVGs, no local icon files.**

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Buttons**
- Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target **44×44px**.
- Hover: brightness/shadow shift with `cursor: pointer`.
- Focus: **4px focus-visible ring** using CSS variables — this is the primary navigation affordance for keyboard users; never remove it.
- Active: `transform: scale(0.97)` (respect reduced motion).
- Loading: disables interaction, prevents double-clicks, CSS spinner or animated Google Icon without dimension distortion.
- Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`.
- Success/Error: temporary feedback via `--text-success` / `--text-error`, **always paired with a symbol/icon, never color alone**.
- `.btn-danger` must be visually distinct in both themes (e.g., bold border + icon + label, not just hue).

**2.2 Cards (Features, Testimonials, Pricing)**
- Default: Flexbox layout, `--bg-secondary`, subtle borders, minimal elevation.
- Hover: `transform: translateY(-2px)` or shadow shift.
- Focus-within: highlighted border when a child link/button is focused.
- Loading: CSS shimmer skeleton (no layout jumps).
- Empty state: Google Icon + clear guidance text.
- Pricing tiers: the recommended tier must be distinguishable by **border weight, icon, and label** — not color alone.

**2.3 Forms & Inputs (Newsletter signup in Final CTA / Footer)**
- States: empty, focused (ring), filled, valid (success border + check icon), invalid (error border, error icon, message text), disabled, read-only.
- Structure: flex container wrapping `<label>` (properly associated via `for`/`id`), input, and a dedicated error feedback container with `aria-live="polite"`.
- Errors must be communicated by text + icon, never color alone.

**2.4 FAQ (Accordion / Disclosure Pattern)**
- Use `<details>/<summary>` or ARIA-correct disclosure widgets with `aria-expanded` state.
- Keyboard operable, visible focus ring on summary/toggle, animated open/close via CSS transitions.

**2.5 Modal / Popup (if any interactive demo or dialog is included)**
- States: opening, open, loading, success/error, closing — all CSS-animated.
- Centered flex container, backdrop overlay, Google Icon close button, keyboard focus trapping, close via `Esc` and overlay click.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Accessibility (non-negotiable, WCAG AAA target):**
  - All text/background contrast ≥ **7:1** in both light and dark modes.
  - **Never rely on color alone** to communicate state — pair every color signal with a Material Symbol icon, text label, or pattern (stripes/dots/hatch for secondary indicators).
  - Avoid red-green-only distinctions; use symbol-based indicators.
  - Complete `aria-*` attributes, semantic `role` attributes, logical DOM/focus order, full keyboard operability, `alt` text on all images, `aria-live` regions for dynamic feedback.
  - Skip-to-content link as the first focusable element.
- **Reduced Motion:** wrap all animations in `@media (prefers-reduced-motion: no-preference)`; provide a visible **motion toggle** in the header/footer that sets a class disabling all non-essential animation.
- **Haptic Feedback:** on supported devices, trigger `navigator.vibrate(10)` on primary button presses and form errors (feature-detected, silent fallback).
- **Voice Interaction Support:** use semantic HTML5 landmarks (`<header>`, `<nav>`, `<main>`, `<footer>`), descriptive `aria-label`s on all sections, and clear heading hierarchy (single `h1`, sequential `h2`/`h3`) so screen readers and voice assistants can navigate the page.
- Responsive by default; smooth transitions (`transition: var(--transition-normal)`); every click/hover/submission produces visible feedback.

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **Files:** separate `index.html`, `style.css`, `script.js`. No inline `<script>` blocks beyond one deferred entry-point reference. No inline CSS.
- **Naming:** one consistent convention (BEM or a fixed utility set) across the entire deliverable — never mix conventions.
- **Copy:** all user-facing copy in **English**, real and meaningful (no lorem ipsum). Write genuine, inclusive-design-themed copy for every section: hero headline/subheadline, 3 feature cards, 3 how-it-works steps, 3 testimonials, 3 pricing tiers, 6+ FAQ items, final CTA, and footer secondary links.
- **Visual direction:** Minimalism & Swiss style — generous whitespace, strict grid alignment, strong typographic hierarchy, restrained decoration, high-contrast flat surfaces, and precise spacing driven by `--spacing-gap` multiples.

Build the complete landing page now, in one attempt, fully compliant with every rule above.