Accessible & Ethical

Also called: WCAG AAA, Accessibility-first, Ethical design, Gov-grade UI

Black-on-white at AAA contrast, 18px+ type, thick yellow focus rings and underlined links — an interface that never tricks or squints.

“AAA plain”Accessible & InclusiveEra: 2010s–now (GOV.UK, WCAG 2.2)TrustworthySeriousCalm

Open full screen ↗

accessible-ethical / landingEN

accessible-ethical / 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 sm2pxRadius md4pxRadius lg4pxRadius xl6pxDensity×1.15Display 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.

AAA contrastyellow focus ringunderlined links18px body textbig tap targetsred error barplain languageno dark patternssquare tags

Accessible & Ethical design treats legibility and honesty as the aesthetic. Text is near-black on pure white (≥ 7:1), body type starts at 18px with a hyper-legible face, every link is underlined, and keyboard focus is a loud yellow block with a black bar. Controls are big (52px+), labelled in plain words with icons as support, errors are marked with a thick red side bar and text, and choices are presented with equal weight — no pre-ticked boxes, no shaming opt-outs, no fake urgency.

Best for

Government and public-service forms
Healthcare booking, results and prescriptions
Banking and insurance flows for older users
Any product with a legal accessibility requirement

Avoid for

Fashion or luxury brands that sell mood over clarity
Immersive games and art portfolios
Campaign sites that must feel loud and trendy

✓ Do

Keep body text ≥ 18px and text contrast ≥ 7:1
Show focus as a 3px+ yellow (#FFDD00) block with a dark bar, on every interactive element
Underline every link and pair every icon with a text label
Give accept / decline buttons equal size and weight

✕ Don't

No light-grey placeholder text used as a label
Never convey status with colour alone — add an icon and a word
No pre-ticked consent boxes, countdown timers or confirm-shaming copy
No motion that starts by itself

Not to be confused with

Trust & Authority →Trust & Authority sells credibility with navy, seals and credentials; Accessible & Ethical is plain black-on-white whose signature is the yellow focus block, underlines and 18px type.Inclusive Design →Inclusive Design is warm and multi-coloured (Okabe-Ito palette, rounded cards, diverse avatars); Accessible & Ethical is stark, monochrome-plus-one-blue with 4px corners.Flat Design →Flat design is about bright colour blocks and simplicity; Accessible & Ethical is about contrast ratios, outlines and keyboard states, and allows almost no colour.

On mobile

Keep 17–18px body text and 52px buttons; the tab bar always shows text labels and marks the active tab with a thick bar plus bold text, not colour alone. Focus rings stay on for switch-access and keyboard users.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinAtkinson Hyperlegible · 400/700

The quick brown fox

Heading · ThaiSarabun · 600/700

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

Body · LatinAtkinson Hyperlegible · 400/700

Clear words make shared decisions.

Body · ThaiSarabun · 400/600/700

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

Atkinson Hyperlegible was drawn for low-vision readers with very distinct letter shapes; looped Sarabun, the Thai government standard, gives Thai the same clear, formal and highly recognisable glyphs.

Colour palette

Light

Dark

Design tokens

Radius	`sm 2px · md 4px · lg 4px · xl 6px · pill 999px`
Border	`2px`
Shadow	`none`
Display	`clamp(2.4rem, 4.6vw, 3.6rem)`
Motion	`80ms linear`
Density	`×1.15`

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 · Accessible & Ethical (accessible-ethical) — 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=Atkinson+Hyperlegible:wght@400;700&family=Sarabun:wght@400;600;700&display=swap
 */
:root {
  --radius: 4px;
  --background: #FFFFFF;
  --foreground: #0B0C0C;
  --card: #FFFFFF;
  --card-foreground: #0B0C0C;
  --popover: #FFFFFF;
  --popover-foreground: #0B0C0C;
  --primary: #1D4F91;
  --primary-foreground: #FFFFFF;
  --secondary: #FFDD00;
  --secondary-foreground: #0B0C0C;
  --muted: #F3F2F1;
  --muted-foreground: #484949;
  --accent: #F3F2F1;
  --accent-foreground: #0B0C0C;
  --destructive: #B10E1E;
  --border: #505A5F;
  --input: #505A5F;
  --ring: #1D4F91;
  --chart-1: #1D4F91;
  --chart-2: #00703C;
  --chart-3: #B10E1E;
  --chart-4: #6F2C91;
  --chart-5: #505A5F;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #0B0C0C;
  --sidebar-primary: #1D4F91;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #F3F2F1;
  --sidebar-accent-foreground: #0B0C0C;
  --sidebar-border: #505A5F;
  --sidebar-ring: #1D4F91;
}

.dark {
  --background: #0B0C0C;
  --foreground: #FFFFFF;
  --card: #161718;
  --card-foreground: #FFFFFF;
  --popover: #161718;
  --popover-foreground: #FFFFFF;
  --primary: #9CC8FF;
  --primary-foreground: #0B0C0C;
  --secondary: #FFDD00;
  --secondary-foreground: #0B0C0C;
  --muted: #232526;
  --muted-foreground: #D0D3D4;
  --accent: #232526;
  --accent-foreground: #FFFFFF;
  --destructive: #FF8A8A;
  --border: #B1B4B6;
  --input: #B1B4B6;
  --ring: #9CC8FF;
  --chart-1: #9CC8FF;
  --chart-2: #5FD39B;
  --chart-3: #FF8A8A;
  --chart-4: #D6A7F0;
  --chart-5: #D0D3D4;
  --sidebar: #161718;
  --sidebar-foreground: #FFFFFF;
  --sidebar-primary: #9CC8FF;
  --sidebar-primary-foreground: #0B0C0C;
  --sidebar-accent: #232526;
  --sidebar-accent-foreground: #FFFFFF;
  --sidebar-border: #B1B4B6;
  --sidebar-ring: #9CC8FF;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Accessible & Ethical (accessible-ethical) — 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=Atkinson+Hyperlegible:wght@400;700&family=Sarabun:wght@400;600;700&display=swap
 */
@theme {
  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-2: #F3F2F1;
  --color-text: #0B0C0C;
  --color-text-muted: #484949;
  --color-primary: #1D4F91;
  --color-on-primary: #FFFFFF;
  --color-secondary: #FFDD00;
  --color-on-secondary: #0B0C0C;
  --color-accent: #00703C;
  --color-border: #505A5F;
  --color-success: #00703C;
  --color-warning: #8A4B00;
  --color-danger: #B10E1E;
  --color-chart-1: #1D4F91;
  --color-chart-2: #00703C;
  --color-chart-3: #B10E1E;
  --color-chart-4: #6F2C91;
  --color-chart-5: #505A5F;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-xl: 6px;
  --radius-pill: 999px;
  --shadow-sm: 0 0 #0000;
  --shadow-md: 0 0 #0000;
  --shadow-lg: 0 0 #0000;
  --font-heading: "Atkinson Hyperlegible", "Sarabun", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", "Sarabun", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Sarabun", monospace;
}

.dark {
  --color-bg: #0B0C0C;
  --color-surface: #161718;
  --color-surface-2: #232526;
  --color-text: #FFFFFF;
  --color-text-muted: #D0D3D4;
  --color-primary: #9CC8FF;
  --color-on-primary: #0B0C0C;
  --color-secondary: #FFDD00;
  --color-on-secondary: #0B0C0C;
  --color-accent: #5FD39B;
  --color-border: #B1B4B6;
  --color-success: #5FD39B;
  --color-warning: #FFB54D;
  --color-danger: #FF8A8A;
  --color-chart-1: #9CC8FF;
  --color-chart-2: #5FD39B;
  --color-chart-3: #FF8A8A;
  --color-chart-4: #D6A7F0;
  --color-chart-5: #D0D3D4;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Accessible & Ethical (accessible-ethical). Default mode: light. Fonts: https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Sarabun:wght@400;600;700&display=swap",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9529,
            0.949,
            0.9451
          ],
          "hex": "#f3f2f1"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.0471,
            0.0471
          ],
          "hex": "#0b0c0c"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2824,
            0.2863,
            0.2863
          ],
          "hex": "#484949"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1137,
            0.3098,
            0.5686
          ],
          "hex": "#1d4f91"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.8667,
            0
          ],
          "hex": "#ffdd00"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.0471,
            0.0471
          ],
          "hex": "#0b0c0c"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0,
            0.4392,
            0.2353
          ],
          "hex": "#00703c"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3137,
            0.3529,
            0.3725
          ],
          "hex": "#505a5f"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0,
            0.4392,
            0.2353
          ],
          "hex": "#00703c"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5412,
            0.2941,
            0
          ],
          "hex": "#8a4b00"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6941,
            0.0549,
            0.1176
          ],
          "hex": "#b10e1e"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1137,
            0.3098,
            0.5686
          ],
          "hex": "#1d4f91"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0,
            0.4392,
            0.2353
          ],
          "hex": "#00703c"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6941,
            0.0549,
            0.1176
          ],
          "hex": "#b10e1e"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4353,
            0.1725,
            0.5686
          ],
          "hex": "#6f2c91"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3137,
            0.3529,
            0.3725
          ],
          "hex": "#505a5f"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.0471,
            0.0471
          ],
          "hex": "#0b0c0c"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0863,
            0.0902,
            0.0941
          ],
          "hex": "#161718"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1373,
            0.1451,
            0.149
          ],
          "hex": "#232526"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8157,
            0.8275,
            0.8314
          ],
          "hex": "#d0d3d4"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6118,
            0.7843,
            1
          ],
          "hex": "#9cc8ff"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.0471,
            0.0471
          ],
          "hex": "#0b0c0c"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.8667,
            0
          ],
          "hex": "#ffdd00"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.0471,
            0.0471
          ],
          "hex": "#0b0c0c"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3725,
            0.8275,
            0.6078
          ],
          "hex": "#5fd39b"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6941,
            0.7059,
            0.7137
          ],
          "hex": "#b1b4b6"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3725,
            0.8275,
            0.6078
          ],
          "hex": "#5fd39b"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.7098,
            0.302
          ],
          "hex": "#ffb54d"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.5412,
            0.5412
          ],
          "hex": "#ff8a8a"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6118,
            0.7843,
            1
          ],
          "hex": "#9cc8ff"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3725,
            0.8275,
            0.6078
          ],
          "hex": "#5fd39b"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.5412,
            0.5412
          ],
          "hex": "#ff8a8a"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8392,
            0.6549,
            0.9412
          ],
          "hex": "#d6a7f0"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8157,
            0.8275,
            0.8314
          ],
          "hex": "#d0d3d4"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 2,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 2,
      "unit": "px"
    }
  },
  "shadow": {},
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Atkinson Hyperlegible",
        "Sarabun",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Atkinson Hyperlegible",
        "Sarabun",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Sarabun",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 700
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 80,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0,
      0,
      1,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.15
  }
}

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!