# Government / institutional clean

Also called: gov design system, GOV.UK style, USWDS, civic design, public sector UI, institutional web  
Era: 2012 (GOV.UK launch), 2016 (USWDS), ongoing  
Page: https://designforai.dev/style/government-institutional-clean

## 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

```css
: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.