← All UI styles
High Contrast AA
Maximum legibility on purpose: pure values, thick borders, unmistakable focus.
BorderedsystemAccessibility modesPublic terminalsLow-vision support
Construction · Bordered
No depth at all, but every surface is contained by a drawn line — the border does the work a shadow would do elsewhere.
Every style renders this same screen, so the only thing changing between two of them is the style. The component above is the file below, running.
Prompt
Design this interface in the High Contrast AA style. Pure black and white with a single high-contrast accent, 2px borders on everything interactive, and no low-contrast greys at all. Built for the reader who needs it,
The numbers in this prompt are printed from the tokens below, so it cannot drift from what the specimen renders.
What carries the look
- pure black and white
- 2px borders on controls
- no low-contrast greys
- large focus states
What this style refuses
- grey text on grey backgrounds
- thin hairlines
- color as the only signal
- small type
The refusals are the half that keeps generated interfaces from converging — a prompt that only says what to add gets the default look.
Tokens
Palette
RoleLightDark
Background
#ffffff#000000Surface
#ffffff#000000Border
#000000#ffffffText
#000000#ffffffMuted text
#3d3d3d#c9c9c9Accent
#0033a0#ffd400On accent
#ffffff#000000Shape and type
Radius0 / 2 / 4 px
Border2px solid
Shadownone
Displaysystem-ui
Bodysystem-ui
Monoui-monospace
Type scale12 · 14 · 17 · 19 · 25 · 34 px
Weights500 / 700 / 800
Line height1.55
Tracking0em
Spacing4px grid · roomy
Surfaceflat
Accentfilled
Separatorhairline
Labelsuppercase
Blurnone
Measured contrast — body 21:1 light, 21:1 dark; secondary text 10.86:1 and 12.68:1. Every pair clears WCAG AA in both themes, checked on each build.
Specimen · Specimen.tsx
import type { CSSProperties } from "react";
/**
* Vibary · High Contrast AA
*
* Maximum legibility on purpose: pure values, thick borders, unmistakable focus.
*
* One complete product screen, rendered from the token object below —