Kainos Design System
Kainos Blue (#283583) on white — every design decision communicates earned trust. Generous white space, a single accent that signals action without shouting, and a heading stack built on British institutional confidence. Built for delivery teams and the enterprise clients they serve.
Strategy
Frameworks and playbooks grounded in real delivery experience.
Enablement
Pathway modules, field guides, and hands-on webinars for your team.
Delivery
Launchpad assets and roadmap tools to go from pilot to production.
Default
White background, border, rounded corners.
Elevated
Adds raised shadow for hierarchy.
build/kainos-ui/ and importable via import { Button, Badge, Card, Input, NavItem, Text } from '@kainos/ui'.Data Table
| Component | Token | Value | Use |
|---|---|---|---|
| Primary button | --k-blue |
#283583 |
One per screen; signals primary action |
| Success badge | --k-green |
#61a83f |
Positive state; never a CTA colour |
| Surface canvas | --surface-sunken |
#f5f6fa |
Page background; cards sit above it in white |
| Focus ring | --k-bright-blue |
#009fe3 |
2px outline-offset:2px on all interactive elements |
| Chart series 1–5 | Brand palette | Blue → Green → Bright Blue → Bright Green → Orange | Data visualisation order; never deviate |
| Token | Value | Visual | Typical use |
|---|---|---|---|
| xs | 4px | Icon gaps, tight badge padding | |
| sm | 8px | Inline gaps, chip padding | |
| md | 16px | Default component padding, grid gap | |
| lg | 32px | Card padding, section sub-headings | |
| xl | 64px | Section vertical padding | |
| 2xl | 96px | Hero vertical padding | |
| gutter | 24px | Grid column gap | |
| page-margin | 48px | Page-level horizontal margin |
Base unit: 8px. All values are multiples or factors. Never use an arbitrary value. Adjacent scale steps differ by ≥25%.
Honest
Transparent and direct. Deliver on promises; no spin.
Humble
Let the work speak. Never boast or position above the reader.
Familial
Warm and inclusive. Write like a trusted colleague.
Ambitious
Frame obstacles as growth. Be forward-thinking.
Confident
Share expertise without arrogance. Welcome other views.
Show, don't tell
Lead with outcomes and evidence. Specifics carry more weight than claims.
System state copy
State what happened and what the user can do. Never blame the user or use "Oops!".
British English
Use British spelling throughout: colour, centre, organisation, programme. Practise (verb) vs practice (noun).
Button and label copy
Use verbs that describe the outcome, not the system action. Sentence case for buttons; Title Case only for headings.
This design system targets Kainos delivery teams and their enterprise clients — public sector organisations, large NHS trusts, and regulated financial institutions. The users are professionals who use these tools for hours each day. Their tolerance for decoration is low; their requirement for clarity is absolute.
The reference: a GOV.UK form rendered with Kainos confidence. Generous white space. A single accent colour that signals action without shouting. Typography drawn from a British institutional tradition — readable at desktop resolutions, not optimised for visual impact at arm's length.
Brand positioning: "Thinking Beyond Limitations". The product must feel earned trust, not designed enthusiasm. Users arriving for the first time should feel that they are in capable hands. Users arriving for the hundredth time should feel oriented instantly.
Brand traits applied: Honest (no spin, state reality), Humble (the interface does not boast), Confident (empowered expertise without arrogance).
The atmosphere is Architectural Minimal. Every element on screen has earned its presence by solving a user need. Decoration that does not carry function is removed. The result feels serious without being austere, and purposeful without being joyless.
What it looks like in practice
- White content cards on a cool-grey canvas — tonal elevation without shadows
- One primary action per screen in Kainos Blue; everything else recedes
- Section headers in uppercase with generous letter-spacing to orient without competing
- Empty states are designed, not blank — use the Flux motif sparingly
- Motion is functional: transitions reveal state changes, not style
- Use tonal layers (white cards on grey canvas) for elevation
- Let empty margins communicate confidence
- Start with too much space, then remove
- Design the empty state before the filled state
- Glassmorphism, backdrop-blur, or decorative gradients
- Fill white space to make things feel "complete"
- Multiple competing accent colours on one screen
- Animated illustrations in functional UI regions
The palette is built on three anchors: Kainos Blue for authority and primary action, Kainos Green for confirmation and positive states, and a cool-grey neutral surface for everything else.
Colour roles
- Primary (Kainos Blue #283583): Reserved for primary actions, active navigation states, and focused form elements. It should not appear as decoration. When in doubt, leave it out.
- Accent (Kainos Green #61a83f): Success states, positive indicators, and confirmation UI. Never used for primary actions — that distinction belongs to Blue.
- Surface (#f5f6fa): The page canvas. Cards sit on a pure white surface above it, creating a single-step tonal elevation without any shadow.
- Semantic colours: Error (red), Warning (amber), Success (green) follow conventional meaning. Always pair with an icon or label — never colour alone.
Chart series order (never deviate)
Blue (#283583) → Green (#61a83f) → Bright Blue (#009fe3) → Bright Green (#cfd600) → Orange (#ec6608)
Working in HSL
Grey on a coloured background: hand-pick a hue-tinted lighter tint at reduced saturation. Never use literal grey (hsl(0,0%,50%)) on a coloured surface — pick the background hue at high lightness, low saturation.
Two families, strictly separated by role. Heading font must always lead with Foundry Gridnik — never skip straight to Century Gothic unless the licensed fonts are unavailable.
Heading stack
Foundry Gridnik, Galano Grotesque, Century Gothic, sans-serif
Foundry Gridnik and Galano Grotesque are licensed brand fonts for digital channels. Century Gothic is the required embedded fallback. Do not substitute others.
Body / UI stack
Arial, Helvetica, sans-serif — legible at 11px in a crowded table and at 18px in a long-form panel.
Key rules
- Minimum font weight in UI: 400. Never 300.
- Line length: 45–75 characters for body prose (
max-width: 65ch). - Line height: 1.1 for large headings, 1.6 for body text.
- Letter-spacing: −0.02em on display headings; +0.08em on all-caps labels.
- Align mixed-size text to baseline, not vertical centre.
- Two weights only: 400 (body) and 600–700 (emphasis).
Buttons
One primary button per screen. Secondary actions use outlined/ghost treatment. Destructive actions are never styled as primary buttons unless they are the sole action in a confirmation dialog.
Forms
Input fields: white background, border at rest, Kainos Blue 2px border on focus. Labels appear above the field — never as placeholders. Error messages replace helper text below the field.
Tables
Kainos Blue header row with white bold label-sm headers. Alt rows: white / surface-container-low. Numbers right-align; text and badges left-align.
Status Badges
Info (blue), Success (green), Warning (amber), Error (red). Each uses container colour for background and full-saturation for text. Always include an icon alongside the label.
Navigation
Active items: primary-container background, on-primary-container text. Inactive: on-surface-variant on transparent. Left sidebar never exceeds 240px.
Cards
White background, rounded-lg (8px), 3px Kainos Green bottom border as the brand accent. Shadow only on hover: 0 8px 24px rgba(40,53,131,0.07).
All spacing from the 8px scale: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128. No arbitrary values.
Layout model
- Fixed sidebar, fluid content area for application pages
- Centred single column for document and form pages
- Content maximum: 1200px centred; prose maximum: 720px (65ch)
- Page margin: 48px desktop → 16px mobile
- Fixed-pixel sidebar width — never a grid percentage
Breakpoints
- Sidebar appears/disappears: 768px
- 3-col → 2-col: 960px
- 2-col → 1-col: 720px
- Page wrap collapses: 1100px
Motion in this system is functional — it reveals state changes, not style. The threshold question is always: does this motion help the user understand what happened?
Transition defaults
- Interactive state changes (hover, focus):
all 0.15s ease - Panel/drawer open:
transform 0.2s ease - Accordion expand:
height 0.2s easeor display toggle - Scroll reveal:
opacity + translateY(12px) → 0, 0.3s ease
Reduced motion
Always include the reduced-motion media query. All transitions and animations must be disabled when the user prefers it:
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition: none !important;
animation: none !important;
}
}
Colour contrast
- Normal text: minimum 4.5:1 (WCAG AA)
- Large text (18px+ / 14px+ bold): minimum 3:1
- UI components and focus indicators: minimum 3:1
- Kainos Blue on white: 7.2:1 (AAA) — use confidently
- Kainos Green on white: 3.1:1 — use at 18px+ only, or with bold weight
Colour is never the only signal
Every status badge pairs colour with an icon or label. Error states pair red border with an error message below. Never rely on hue alone.
Focus management
a:focus-visible,
button:focus-visible,
input:focus-visible {
outline: 2px solid #009fe3; /* --k-bright-blue */
outline-offset: 2px;
border-radius: 4px;
}
Touch targets
Minimum 44×44px for all interactive elements. Kainos button min-height: 44px by default.
Semantic HTML
Use landmark elements: <nav>, <main>, <aside>, <section>, <header>, <footer>. Heading hierarchy must never skip levels (H1 → H2 → H3).
Intent
Answer: who is the primary user, what specific real-world object does this resemble, what must it never feel like, and which Kainos brand traits apply?
Define Systems
Before any pixel: lock the spacing scale (8px base), type scale (12–64px, 2 weights), colour shades (9 per hue), and corner radius register.
Feature-First
Start with the single most important feature — not the nav shell. Build in greyscale first. Add colour only when hierarchy is solid.
Hierarchy
Primary: dark + weight 700. Secondary: lighter, weight 400. Tertiary: much lighter OR smaller, never both. De-emphasise to emphasise.
Layout
Start with too much white space and remove until density is right. Fixed sidebar, fluid content. Never stretch to fill a container.
Colour
Work in HSL. Grey on coloured backgrounds = hue-tinted shade, not literal grey. Colour alone is never the only accessibility signal.
Typography
Max line length 65ch. Align mixed sizes to baseline. Tight line-height for display (1.1), loose for body (1.6). Open all-caps labels to 0.08em.
Depth & Finish
Tonal layers first, shadows second. 4px green accent border beats a full outline. Empty states are designed. Transitions reveal, not style.
| Resource | Path | Purpose |
|---|---|---|
| DESIGN.md spec | build/design/docs/spec.md |
Format specification for the DESIGN.md file |
| Kainos Enterprise example | build/design/examples/kainos-enterprise/DESIGN.md |
Production-ready reference implementation to copy and adapt |
| Design methodology | build/design/KAINOS-DESIGN-METHODOLOGY.md |
8-phase process synthesised from Refactoring UI + design.md + Kainos brand |
| Brand skill | .claude/skills/kainos-ui-design/SKILL.md |
Single source of truth — tokens, assets, voice, per-format guidance |
| Brand JSON | .claude/skills/kainos-ui-design/assets/kainos-brand.json |
Machine-readable brand tokens for all agents |
| Cortex chrome | assets/js/cortex-chrome.js |
Shared nav, command palette, toolkit, statusbar — required on every page |
| design.md CLI | npx @google/design.md lint|export|diff DESIGN.md |
Lint, export to Tailwind/CSS/DTCG, diff designs |