← All UI styles
Gov Plain
Public-service plainness: black on white, square corners, focus you cannot miss.
RuledsystemPublic servicesForms and applicationsAccessibility-first products
Construction · Ruled
There are no cards. A rule above a block announces it, spacing separates it, and nothing is ever enclosed.
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 Gov Plain style. Square corners, black text on white, one link blue, and a yellow focus state that is impossible to overlook. Every decorative decision has been removed on purpose. Build
The numbers in this prompt are printed from the tokens below, so it cannot drift from what the specimen renders.
What carries the look
- square corners
- one link blue
- large readable body text
- unmissable focus state
What this style refuses
- rounded corners
- decorative color
- small body text
- shadows or gradients
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#0b0c0cSurface
#ffffff#141516Border
#0b0c0c#f3f2f1Text
#0b0c0c#f3f2f1Muted text
#505a5f#a8adb0Accent
#1d70b8#7cb6e8On accent
#ffffff#06121fShape and type
Radius0 / 0 / 0 px
Border2px solid
Shadownone
Displaysystem-ui
Bodysystem-ui
Monoui-monospace
Type scale12 · 14 · 16 · 19 · 24 · 34 px
Weights400 / 700 / 700
Line height1.55
Tracking0em
Spacing4px grid · roomy
Surfaceflat
Accentfilled
Separatorrule
Labelssentence case
Blurnone
Measured contrast — body 19.59:1 light, 17.52:1 dark; secondary text 7.07:1 and 8.65:1. Every pair clears WCAG AA in both themes, checked on each build.
Specimen · Specimen.tsx
import type { CSSProperties } from "react";
/**
* Vibary · Gov Plain
*
* Public-service plainness: black on white, square corners, focus you cannot miss.
*
* One complete product screen, rendered from the token object below —