# Design system (Phase 1)

Identity: the Lagos danfo bus and the road sign. Signage is the language of public information, which is what this
platform is. Spend boldness in one place: the yellow hero block and the black-and-yellow stripe. Everything else is quiet.

| Token | Hex | Use |
|---|---|---|
| Danfo | #F6B800 | Hero, primary buttons, brand mark |
| Asphalt | #1C1D21 | Text, borders, staff header, footer |
| Road-sign green | #0B7A4B | Success, available username, focus ring |
| Flag red | #C8321E | Errors, destructive actions |
| Chalk | #FAFAF7 | Page background |

Type: Archivo (wide, heavy) for headlines; Public Sans for text. Sentence case. Left-aligned. Line length under 80 characters.
Shape: 2px asphalt borders, 6-8px radius, no shadows except toasts. Motion: none on load; toasts only in response to actions.
Accessible by default: visible focus ring, skip link, labelled inputs, `aria-invalid` and `role="alert"` on errors,
reduced-motion respected. Colours are tokens in `tailwind.config.js`; themes (Phase 3) will override them.
Password fields: the eye icon and the word "Show" / "Hide" sit inside the field, on every password input
(`<x-password-field>`). The Flutter app will follow the same pattern.