Design for AI

Government / institutional clean: UI design prompt

Palette, type rules and a pasteable prompt for government / institutional clean. Also called gov design system, GOV.UK style, USWDS, civic design, public sector UI, institutional web. 2012 (GOV.UK launch), 2016 (USWDS), ongoing.

Traits

  • plain language first; layout serves reading and forms, not marketing
  • large, high-contrast type, one column, generous line-height
  • black text on white, one strong link blue, one focus yellow, a thin brand bar at the top
  • forms as the core pattern: one question per page, big inputs, clear error summaries
  • no hero imagery, no cards, no icons beyond a crest or a chevron
  • accessible by default: skip links, visible focus, 44px targets, AA or better
  • zero decorative motion

Palette

#ffffff page, #0b0c0c text, #1d70b8 link, #003078 link hover, #ffdd00 focus, #d4351c error, #00703c success, #f3f2f1 surface, #b1b4b6 border

Type

GDS Transport is restricted; free: Public Sans (USWDS), Source Sans 3 or Atkinson Hyperlegible; body 19px line-height 1.3-1.5, headings 700 at 48/36/27px, max width 66ch

Do

  • follow an existing public design system's patterns (GOV.UK Design System or USWDS) for forms, errors, buttons and navigation
  • keep pages single-column at 66ch and put one task per page
  • make the focus state a 3px #ffdd00 background plus a 3px #0b0c0c outline so it is unmissable

Don't

  • do not add marketing sections, testimonials, hero images or animation
  • do not use light grey text, placeholder-only labels or thin borders
  • do not invent new components when the design system already has one

Known for it: GOV.UK, USWDS (usa.gov), Canada.ca, Service NSW, Bundesregierung.de (partial)

CSS seed
:root {
  --bg: #ffffff;
   --fg: #0b0c0c;
   --accent: #1d70b8;
   --focus: #ffdd00;
   --error: #d4351c;
   --surface: #f3f2f1;
   --line: #b1b4b6;
   --radius: 0;
   --font: 'Public Sans',sans-serif
}
Prompt

Build the site in government institutional style following GOV.UK Design System conventions. Background #ffffff, text #0b0c0c, links #1d70b8 underlined (hover #003078), focus #ffdd00, error #d4351c, success #00703c, surface #f3f2f1, borders #b1b4b6. Top: a 10px #1d70b8 brand bar, then a black 60px header with a white wordmark and a plain text nav. Font Public Sans: body 19px line-height 1.5, headings 700 at 48/36/27/24px with 30px bottom margin, captions 16px, max-width 66ch, single column with 30px side padding. Forms: one question per page, labels 19px 700 above inputs, hint text 16px in #505a5f, inputs 40px tall with a 2px #0b0c0c border and radius 0, error state 4px #d4351c left border and an error summary box at the top. Buttons: #00703c fill, white 19px 700 text, 2px darker bottom edge, radius 0. Focus: 3px #ffdd00 background and 3px #0b0c0c outline. Skip link first. No images, no cards, no animation.
For design.md, .cursorrules or AGENTS.md
## Design direction
Build the site in government institutional style following GOV.UK Design System conventions. Background #ffffff, text #0b0c0c, links #1d70b8 underlined (hover #003078), focus #ffdd00, error #d4351c, success #00703c, surface #f3f2f1, borders #b1b4b6. Top: a 10px #1d70b8 brand bar, then a black 60px header with a white wordmark and a plain text nav. Font Public Sans: body 19px line-height 1.5, headings 700 at 48/36/27/24px with 30px bottom margin, captions 16px, max-width 66ch, single column with 30px side padding. Forms: one question per page, labels 19px 700 above inputs, hint text 16px in #505a5f, inputs 40px tall with a 2px #0b0c0c border and radius 0, error state 4px #d4351c left border and an error summary box at the top. Buttons: #00703c fill, white 19px 700 text, 2px darker bottom edge, radius 0. Focus: 3px #ffdd00 background and 3px #0b0c0c outline. Skip link first. No images, no cards, no animation.

## Tokens
:root { --bg:#ffffff; --fg:#0b0c0c; --accent:#1d70b8; --focus:#ffdd00; --error:#d4351c; --surface:#f3f2f1; --line:#b1b4b6; --radius:0; --font:'Public Sans',sans-serif }

Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.