Nexarch · Style guide
Comprehensive UI style guide
This page codifies the current public styling system in use across empoweredagile.co.uk, including tokens, typography, spacing, surfaces, navigation, forms and data presentation patterns.
1) Design principles
- Calm clarity: low visual noise, strong information hierarchy.
- Enterprise trust: neutral slates with restrained blue accents.
- Readable by default: generous line-height and comfortable densities.
- Action-first: clear primary action, predictable secondary controls.
2) Colour tokens
Canvas
--background
#ffffff
Primary text
--foreground
#0f172a
Muted text
--muted
#475569
Border
--border
#e2e8f0
Brand 50
--brand-50
#eff6ff
Brand 100
--brand-100
#dbeafe
Brand 500
--brand-500
#2563eb
Brand 600
--brand-600
#1d4ed8
Brand 700
--brand-700
#1e40af
3) Typography
H1 · Page headline
H2 · Section heading
Body copy uses the Geist sans stack with high legibility. Heading copy uses tighter tracking and stronger weight for visual authority.
Secondary/meta copy uses slate-500/600 for hierarchy without harsh contrast.
4) Spacing, radius and surfaces
Spacing scale
Surface examples
5) Core component patterns
Use 8px radius and slate borders for form controls.
Alert pattern
6) Data display guidance
| Element | Preferred styling | Notes |
|---|---|---|
| Tables | Light header, white rows, subtle borders | Prioritise scanability over decoration |
| Cards | Rounded-2xl, border + soft shadow | Use for grouped context and calls to action |
| Navigation | Minimal, text-led, clear hover states | Keep density consistent across header/footer |
7) Tone of voice (plain-English default)
We write for busy people. Be clear, warm and direct. Prefer plain language over technical jargon unless the page is specifically for technical users.
Voice rules
- • Use short sentences and everyday words.
- • Explain benefits first, mechanism second.
- • Avoid acronyms unless they are widely known.
- • Replace buzzwords with concrete outcomes.
- • Sound confident, not hype-driven.
Word choices
Prefer: "clear", "faster", "safer", "easier", "evidence"
Avoid: "leverage", "orchestrate", "paradigm", "best-in-class", "state-of-the-art"
Default reading level: plain business English.
Before → after example
Too technical: "Orchestrate cross-functional architecture governance with policy-enforced AI workflows."
Better: "Give teams one clear way to design with AI, with guardrails built in."