Brand & Accessibility Guidelines · v1.0
Clarity you can
act on. Authority
you can trust.
The design system for the digital home of Scotland's Powers of Attorney — built on the Adults with Incapacity (Scotland) Act 2000, aligned with the OPG, and trusted at the moment a PoA is used.
Clear
Plain, legible, calm. Nothing hidden, nothing to fear.Authority
Trustworthy, institutional, correct — verified at a glance.01 · Foundations
One system, three surfaces
ClearAuthority is one deed with two rails — financial and welfare — presented through three surfaces that must feel like a single product. Same tokens, colours, type and icons throughout; only density and guidance level change. Never introduce anything on one surface that doesn't exist on the others.
Attorney app
For humans. The registered certificate in a biometric vault; approve every request; the granter's recorded wishes carried into each decision. Larger type, one task per screen, 56px targets.
Provider portal
For institutions. A teller, care manager or ward coordinator confirms in ~90 seconds whether this person may do this thing, checked against the deed's wording. A decisive green / red result.
Living Register
For the system. Every use is a heartbeat: live PoA status, anonymised national statistics and structured safeguarding referrals. Dashboards, tables, data-viz, export.
02 · Compliance
Built to WCAG 2.2 AA — the UK legal floor
WCAG 2.2 Level AA is mandatory for the public-sector bodies this product serves, and the de-facto benchmark for satisfying the Equality Act 2010 duty to make reasonable adjustments. Because our users are often vulnerable and older, we treat AA as the floor and reach AAA wherever it costs nothing — most body and interactive colours here already clear 7:1.
| SC | Criterion | Level | Requirement in this system |
|---|---|---|---|
| 1.4.3 | Contrast (Minimum) | AA | Body/label text ≥ 4.5:1; large text ≥ 3:1 |
| 1.4.11 | Non-text Contrast | AA | Component borders & meaningful icons ≥ 3:1 |
| 1.4.4 | Resize Text | AA | Usable at 200% zoom, no loss of content |
| 1.4.10 | Reflow | AA | Reflows at 320 CSS px, no 2-D scroll |
| 1.4.12 | Text Spacing | AA | No clipping at 1.5× line / 2× paragraph spacing |
| 2.5.8 | Target Size (Minimum) | AA | ≥ 24px floor — we mandate 44px default |
| 2.4.11 | Focus Not Obscured | AA · new | Focused control never hidden by sticky UI |
| 1.4.1 | Use of Colour | A | Status always icon + text, never colour alone |
Designing for the whole spectrum of need
Distilled from UK Home Office accessibility guidance — because our users span low vision, dyslexia, motor and anxiety needs, and the autistic spectrum.
Do
- Use strong contrast and generous text size
- Write in plain English; name buttons by their action
- Keep layouts linear and consistent
- Use simple, calm colours
- Make large, well-spaced tap targets
- Design for keyboard and speech only
Don't
- Rely on colour as the only signal
- Use bright, clashing colours
- Use idioms, jargon or vague labels
- Underline, italicise or ALL-CAP body text
- Build walls of text or complex layouts
- Demand pointing precision or short timeouts
03 · Logo direction
The verified seal
The mark is a rounded square — a clean window, a document, a stamp — enclosing a single confident check that reads as correct, confirmed, authorised. The square is the seal of authority; the check is the clarity. Geometric, ownable, legible at 16px, and complete in one colour. Every icon in the system inherits its rounded frame and single-stroke language.
Primary mark
Navy on light
Reversed
On brand navy
Verified accent
Teal — active / confirmed
Motif rules the system inherits: rounded-square containers · one decisive stroke · optical balance over mathematical centring · works in a single colour, accent reserved for “verified”.
04 · Colour
Contrast-first, trust-led
Navy carries the authority, one teal accent carries “verified”, neutrals do the quiet work, and semantic colours are reserved strictly for status. Every ratio below is measured — not estimated — against the stated background.
Brand & interactive
Ink & surface
Semantic status — always paired with icon + text
05 · Typography
Legibility is the brief
The product face is Inter — a humanist sans with a large x-height and open apertures, chosen for low-vision and dyslexic readers, not for fashion. Sizes are defined in rem, never px, so OS text-size and zoom flow through, and bind to Dynamic Type on native. Left-aligned always; no italics or ALL-CAPS in reading text.
Minimum essential text: 16px in Assisted mode, 14px anywhere. Scale is a Major Third (1.25). Never convey meaning by weight or size alone.
06 · Iconography
An original, single-stroke suite
Built on a 24px grid, 2px monochrome stroke, rounded joins, 2px framed corners — echoing the logo's rounded square. Outline, never filled or cartoony. The golden rule, from Nielsen Norman Group research: an icon never travels alone — every navigational and category icon carries a visible text label; the teal accent marks only the active / verified state. These are production-ready starters to refine on the keyline grid.
System & navigation
Financial rail — accounts, bills, property, utilities
Welfare rail — care, placement, health, wishes
Trust primitives
Grid 24px · live area 20px · stroke 2px · fill:none; stroke:currentColor · every meaningful icon gets a <title>; decorative icons are hidden from assistive tech.
07 · Components
How the tokens behave
Live examples rendered from the tokens above. Tab through them to see the amber focus ring — never remove it.
The verification moment
The provider portal's hero screen. A decisive, scope-checked result in ~90 seconds — green proceeds; red is a logged refusal with a kind, legally sound script, never an alarm.
David may operate Margaret's current account.
Financial power, registered deed OPG-2211-… · confirmed against the OPG register. Approved on David's device 14:32.
This attorney can't make a gift.
The registered deed grants no gifting power. This request has been logged. You can offer the customer our explanation leaflet.
Buttons
Primary 44px (Assisted 56px) · labels are verb phrases.
Authority badges
Icon + word every time — the defining pattern of this product. Never colour alone.
Form field
Label above field, never placeholder-as-label. Errors = icon + message, not a red border alone.
Focus & touch
Amber ring (≥3:1 on any surface), 3px, 2px offset. Minimum 44×44 target, 8px apart.
08 · Acceptance gate
Every generated screen must pass
- All text ≥ 4.5:1 (≥3:1 large); no meaning by colour alone — status is always icon + text.
- Every interactive target ≥ 44×44 with ≥8px separation.
- Intact at 200% zoom, reflows at 320px; text in rem, honours OS Dynamic Type.
- Visible amber focus ring on every interactive element, never obscured.
- Every nav/category icon has a visible label; meaningful icons named, decorative ones hidden from AT.
- Type on scale; body ≥16px Assisted / ≥14px elsewhere; left-aligned; no ALL-CAPS or italic body.
- Only brand tokens used — no off-palette colour; semantic colours reserved for status.
- Assisted & Professional modes share the same tokens and components.
- Plain-English labels; buttons name their action.
- A published accessibility statement (WCAG 2.2 AA) exists for the product.
Appendix
Sources — retained after a 10/10 authority screen
Broad searching surfaced ~60 candidate sources; each was screened for authority, currency (WCAG 2.2 / 2025–26 law) and direct relevance. Only primary and standards-grade sources were kept; aggregator and SEO blogs were discarded.
- GOV.UK — Accessibility requirements for public sector websites and apps
- W3C — Web Content Accessibility Guidelines (WCAG) 2.2
- W3C/WAI — Understanding Resize Text & Reflow
- UK Home Office / GDS — Dos and don'ts on designing for accessibility
- GOV.UK Design System — Colour & styles
- Nielsen Norman Group — Icon Usability
- IBM Carbon Design System — Icons (usage)
- Material Design 3 — Type scale tokens
- W3C Design Tokens Community Group — Format Module
- Level Access — UK digital accessibility requirements (Equality Act, EAA)