Civic

Civic is for services everyone has to be able to use: a council form, a clinic booking, a benefits application, a school portal. It is built for the person who is tired, on an old phone, in bad light, or using a screen reader. Every text color meets WCAG AAA, borders are dark enough to see, and the design never asks the reader to guess what something is.

• Primary (#0B3D91) is a deep civic blue, for the main action and links.
• Secondary (#0B1320) is blue-black ink for secondary buttons and headings.
• Tertiary (#FFD400) is signal yellow, with dark text on it. Use it for one notice that must not be missed, and for nothing else.
• Neutral (#414B5A) sets hints and secondary text. It is still 7:1 on the page.
• Background (#FFFFFF) is white. Surface (#F2F5F9) is a pale blue-grey for a summary box or a section of a form.
• Border (#7B8696) is dark enough (over 3:1) that the edge of a field can be seen.
• Success (#0B5F33) and Error (#A30F0F) report state. Each comes with a word and an icon, and an error says how to fix it.

Public Sans sets headings, plain and sturdy. Atkinson Hyperlegible Next sets body text at 18px: it was drawn so that similar letters cannot be confused. Atkinson Hyperlegible Mono sets labels, reference numbers, dates and button text at 16px, larger than a label in other themes. Labels are sentence case. The label of a form field, and the legend of a group of fields, is not a mono label: it is body text in bold, so the question is the largest thing by its field. Write in plain language, one idea to a sentence.

One column, 720px at its widest, for anything a person fills in or reads; a 12-column grid, 1120px at its widest, only for overviews. One question per screen where you can. Spacing comes from the scale (4, 8, 16, 24, 40, 64): 24px between fields, 40px between groups. Touch targets are at least 44px tall, with 8px between them.

Flat. A summary box is the pale surface with a 1px border. Nothing depends on a shadow to be seen. Dialogs float on one short, neutral shadow and also have a border.

Lightly rounded and consistent: 3px for badges and checkboxes, 5px for buttons and inputs, 8px for boxes. No pills, and no shape that carries meaning by itself.

• Buttons: civic blue for the one main action on a screen, blue-black for the rest. Sentence-case labels that say what happens: "Save and continue".
• Cards (boxes): the pale surface, 8px corners, 24px padding, a 1px border.
• Badges: signal yellow with dark text, for a notice. State badges use the success and error colors with a word.
• Inputs: a visible label above, a hint under the label, and the error message next to the field it is about.
• Icons: 1.5px or 2px stroke line icons, always with a word beside them. Never emoji.

• Do keep every text pair at 7:1 or better, in both modes.
• Do put a visible label on every field and a word beside every icon.
• Do say what went wrong and what to do next, in the error itself.
• Don't rely on color, position or shape alone to say something.
• Don't use placeholder text as a label, or light grey text for anything.
• Don't introduce a color, size or radius that is not a token above.