Federal service interface
Trust rails before visual drama.
A civic interface language for benefits, permits, public records, compliance tasks, and official information flows where users need clear ownership, accessible forms, and recoverable status.
Service status
Case ID IF-2048-7A
Color tokens
Role-based civic color, not decoration.
Blue carries service identity and action, cool gray carries reading structure, warm accents are short-lived signals, and dark blue anchors the identifier.
Typography
Public Sans rhythm for service reading.
display-xl / 56px / 700 / 1.05
Large headings name the user task. They should not become slogans or abstract campaign language.
What you need before you start
Body text stays compact and readable. Use lists, summary boxes, and field hints to reduce ambiguity before users enter information.
mono token for IDs: IF-2048-7A
Components
Forms, alerts, progress, and official anchors.
Application form
Process list
Confirm basic requirements.
Upload required proof.
Get a secure notice.
Alert states
Identifier links
Required links appear in a consistent location so users can inspect ownership, accessibility, privacy, and oversight paths.
Layout and responsive behavior
A token grid for forms, records, and recovery.
Service container
Use a 64rem max container, with long form text constrained near 40rem. Support rails and side navigation appear only when they clarify context.
8px rhythm
Spacing units are practical: 8, 16, 24, 32, and 48px. Large whitespace should separate tasks, not create brand atmosphere.
| Viewport | Behavior | Risk to check |
|---|---|---|
| Mobile | Single-column forms, stacked links, visible errors. | Banner and footer links must not disappear. |
| Tablet | Process and help rails may sit below the task. | DOM order must match visual order. |
| Desktop | Side nav and summary cards can support long flows. | Do not overfill the right rail. |