---
name: Kainos Enterprise
description: A purposeful British civil-service tool — trusted, unhurried, and never decorative without reason.
colors:
  primary:                "#283583"
  on-primary:             "#ffffff"
  primary-container:      "#dce3ff"
  on-primary-container:   "#001061"
  accent:                 "#61a83f"
  on-accent:              "#ffffff"
  accent-container:       "#d8f7bc"
  on-accent-container:    "#0e3000"
  surface:                "#f4f4f6"
  surface-container-low:  "#ededf0"
  surface-container:      "#e4e4e8"
  surface-container-high: "#d9d9dd"
  on-surface:             "#1a1a2e"
  on-surface-variant:     "#44445a"
  outline:                "#74748a"
  outline-variant:        "#c4c4d4"
  error:                  "#ba1a1a"
  on-error:               "#ffffff"
  error-container:        "#ffdad6"
  on-error-container:     "#410002"
  warning:                "#b45309"
  on-warning:             "#ffffff"
  warning-container:      "#fef3c7"
  success:                "#166534"
  on-success:             "#ffffff"
  success-container:      "#dcfce7"
  brand-mid-blue:         "#41679f"
  brand-dark-green:       "#004631"
  brand-grey:             "#575756"
  brand-orange:           "#ec6608"
  brand-bright-green:     "#cfd600"
  brand-bright-blue:      "#009fe3"
typography:
  display:
    fontFamily: Foundry Gridnik, Galano Grotesque, Century Gothic, sans-serif
    fontSize: 48px
    fontWeight: "700"
    lineHeight: 1.1
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Foundry Gridnik, Galano Grotesque, Century Gothic, sans-serif
    fontSize: 32px
    fontWeight: "700"
    lineHeight: 1.2
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Foundry Gridnik, Galano Grotesque, Century Gothic, sans-serif
    fontSize: 24px
    fontWeight: "700"
    lineHeight: 1.3
  headline-sm:
    fontFamily: Foundry Gridnik, Galano Grotesque, Century Gothic, sans-serif
    fontSize: 20px
    fontWeight: "600"
    lineHeight: 1.4
  body-lg:
    fontFamily: Arial, Helvetica, sans-serif
    fontSize: 18px
    fontWeight: "400"
    lineHeight: 1.6
  body-md:
    fontFamily: Arial, Helvetica, sans-serif
    fontSize: 16px
    fontWeight: "400"
    lineHeight: 1.6
  body-sm:
    fontFamily: Arial, Helvetica, sans-serif
    fontSize: 14px
    fontWeight: "400"
    lineHeight: 1.5
  label-lg:
    fontFamily: Arial, Helvetica, sans-serif
    fontSize: 14px
    fontWeight: "600"
    lineHeight: 1.4
    letterSpacing: 0.01em
  label-sm:
    fontFamily: Arial, Helvetica, sans-serif
    fontSize: 12px
    fontWeight: "600"
    lineHeight: 1.3
    letterSpacing: 0.04em
  code:
    fontFamily: "JetBrains Mono, Fira Code, Consolas, monospace"
    fontSize: 14px
    fontWeight: "400"
    lineHeight: 1.6
rounded:
  none: 0
  sm: 2px
  md: 4px
  lg: 8px
  full: 9999px
spacing:
  xs:  4px
  sm:  8px
  md:  16px
  lg:  32px
  xl:  64px
  2xl: 96px
  gutter: 24px
  page-margin: 48px
  content-max: 1200px
  prose-max: 720px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.md}"
    padding: 10px 20px
    height: 44px
  button-primary-hover:
    backgroundColor: "#1e2a6e"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.md}"
    padding: 10px 20px
    height: 44px
  button-secondary-hover:
    backgroundColor: "{colors.primary-container}"
  button-destructive:
    backgroundColor: transparent
    textColor: "{colors.error}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.md}"
    padding: 10px 20px
  card:
    backgroundColor: "#ffffff"
    rounded: "{rounded.lg}"
    padding: "{spacing.lg}"
  card-hover:
    backgroundColor: "#ffffff"
  input-field:
    backgroundColor: "#ffffff"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 10px 14px
    height: 44px
  input-field-focus:
    backgroundColor: "#ffffff"
  badge-info:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.on-primary-container}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 2px 10px
  badge-success:
    backgroundColor: "{colors.success-container}"
    textColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 2px 10px
  badge-warning:
    backgroundColor: "{colors.warning-container}"
    textColor: "{colors.warning}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 2px 10px
  badge-error:
    backgroundColor: "{colors.error-container}"
    textColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 2px 10px
  nav-item:
    backgroundColor: transparent
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 8px 12px
  nav-item-active:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.on-primary-container}"
  table-header:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
    padding: 10px 16px
  table-row:
    backgroundColor: "#ffffff"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-sm}"
    padding: 12px 16px
  table-row-hover:
    backgroundColor: "{colors.surface-container-low}"
---

## Overview

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.

Kainos brand traits applied here: **Honest** (no spin, state reality), **Humble** (the interface does not boast), **Confident** (empowered expertise without arrogance). The product speaks like a trusted colleague, not a vendor.

## Colors

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.

- **Primary (Kainos Blue #283583):** The single brand colour. 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 (#f4f4f6):** The page canvas. Cards sit on a pure white surface above it, creating a single-step tonal elevation without any shadow.
- **On-surface (#1a1a2e):** All primary text. A near-black with a cool blue undertone to harmonise with the Kainos Blue brand.
- **On-surface-variant (#44445a):** Secondary text — metadata, timestamps, placeholder labels. Noticeably softer than primary text but never so faint as to fail contrast at normal sizes.
- **Semantic colours:** Error (red), Warning (amber), Success (green) follow conventional meaning. Each has a container variant for backgrounds and a full-saturation variant for foreground text. Never use colour alone — always pair with an icon or label.

The full Kainos brand palette is available as `brand-*` tokens for secondary use:

| Token | Hex | Use |
|-------|-----|-----|
| `brand-mid-blue` | `#41679f` | Secondary backgrounds, gradient steps, chart series 2 |
| `brand-dark-green` | `#004631` | Divider sections, dark hero backgrounds |
| `brand-grey` | `#575756` | Body text in documents and presentation slides |
| `brand-orange` | `#ec6608` | Accent highlights, chart series 5 |
| `brand-bright-green` | `#cfd600` | Accent highlights, chart series 4 |
| `brand-bright-blue` | `#009fe3` | Accent highlights, chart series 3 |

Data visualisation chart series order: Blue → Green → Bright Blue → Bright Green → Orange. Secondary colours are accents only — never use them as a primary UI colour or page background.

## Typography

Two families, strictly separated by role.

**Heading stack:** Foundry Gridnik → Galano Grotesque → Century Gothic → sans-serif. Foundry Gridnik and Galano Grotesque are licensed brand fonts for digital channels and marketing. Century Gothic is the required fallback, embedded in all Kainos Office templates and available on every PC and Mac. Do not substitute other fonts outside this stack. Its geometric construction reads as modern British institutional — confident without being aggressive.

**Arial** carries the information. It appears in body text, labels, form fields, and interface metadata. It is not glamorous. It is legible at 11px on a crowded table and at 18px in a long-form content panel. Both matter.

- **Headings:** Foundry Gridnik Bold (fallback to Century Gothic Bold). Sizes step from display (48px, -0.02em tracking) down to headline-sm (20px). Tracking tightens at large sizes, relaxes at smaller ones.
- **Body:** Arial Regular at 16px, 1.6 line-height for comfortable reading. 18px for feature introductions.
- **Labels:** Arial Semibold at 14px (UI labels) and 12px (table headers, badges). Letter-spacing 0.04em on caps-treated labels.
- **Code:** JetBrains Mono or Fira Code. Always in the code component, never inline in body text.

Body prose should not exceed 720px (`prose-max`). Wide content areas should use the `body-md` column width and place supporting content in a side panel rather than stretching the prose line.

## Layout

The layout follows a **fixed sidebar, fluid content** model for application pages, and a **centred single-column** model for document and form pages.

- Page margin: 48px on desktop, collapsing to 16px on mobile.
- Content maximum: 1200px, centred.
- Prose maximum: 720px for readability.
- Spacing is drawn exclusively from the 8px scale. No arbitrary values.
- The sidebar (navigation) has a fixed pixel width — never a grid percentage — so it remains stable as the viewport changes.
- Content regions use flexbox or CSS grid. Column counts change at breakpoints; sidebar presence changes at a single breakpoint (typically 768px).

Start with generous white space. The instinct to fill space is wrong — empty margins communicate confidence.

## Elevation & Depth

Depth is achieved through **tonal layers**, not shadows. This is appropriate for a tool used in high-ambient-light environments where subtle shadows can disappear.

- **Level 0 (Page):** `surface` (#f4f4f6). The canvas.
- **Level 1 (Cards, panels):** Pure white (#ffffff). Separated from the page by tonal contrast alone.
- **Level 2 (Dropdowns, floating elements):** White with a single `1px solid outline-variant` border and a minimal box-shadow (`0 4px 16px rgba(26,26,46,0.08)`).
- **Level 3 (Modals):** White with `outline-variant` border, `0 8px 32px rgba(26,26,46,0.12)` shadow, and a scrim overlay on the page at `rgba(26,26,46,0.4)`.

No glassmorphism. No backdrop blur. No gradients in functional UI regions. These are decoration; this product does not decorate.

## Shapes

The shape language is **Architectural Minimal**. Small border radii signal precision and formality, consistent with a public-sector tool.

- Buttons and inputs: `4px` (rounded-md). Enough to feel modern; not enough to feel playful.
- Cards and panels: `8px` (rounded-lg). Slightly more relaxed to signal containment.
- Badges and tags: `9999px` (rounded-full). Pills are the only fully rounded element — their distinctive shape marks them as status indicators, not interactive elements.
- Do not mix rounded-lg and rounded-none in the same component. Decide once per component and hold the line.

## Components

### Buttons

There is **one primary button per screen**. It uses Kainos Blue, solid fill. Secondary actions use an outlined or ghost treatment in the same Blue. Tertiary actions (cancel, dismiss, go back) are unstyled links.

Destructive actions (delete, revoke, deactivate) are **never** styled as primary buttons unless they are the sole action in a confirmation dialog. In all other contexts, they appear as secondary or tertiary buttons. The red styling appears only at the moment of final confirmation.

Button height: 44px minimum for touch targets.

### Forms and Inputs

Input fields: white background, `outline-variant` border at rest, `primary` border on focus (2px). Error state replaces the border with `error` colour and adds an error message below the field — never inside it.

Labels appear above the field, not as placeholders. Placeholder text is helper text only, and disappears on entry — it is not a label replacement.

Helper text appears below the field in `on-surface-variant` at `body-sm`. Error messages replace helper text in `error` colour.

### Tables

Data tables use a `surface-container` header row with `label-sm` all-caps column headers (letter-spacing 0.04em). Data rows alternate between white and `surface-container-low` for scanability when row count exceeds 10. Below 10 rows, white rows with `outline-variant` dividers.

All columns align by content type: numbers right-align; text and status badges left-align.

### Status Badges

Four semantic variants: info (blue), success (green), warning (amber), error (red). Each uses its container colour for the background and the full-saturation colour for the text, meeting 4.5:1 contrast. Always include an icon alongside the label — never colour alone.

### Navigation

Active navigation items use `primary-container` background and `on-primary-container` text. Inactive items are `on-surface-variant` on transparent background. The hover state is `surface-container`.

The left sidebar never exceeds 240px. The top navigation uses the full page width.

## Do's and Don'ts

- **Do** use one primary action per screen. If you feel the need for two, one of them is secondary.
- **Do** let format carry meaning — "3 items selected" not "Selected items: 3".
- **Do** design the empty state before designing the filled state.
- **Do** use tonal layers (not shadows) as the first tool for elevation.
- **Do** write in British English throughout: centre, colour, organisation, licence (noun).
- **Do** apply the Kainos brand traits — be honest (state reality), humble (no boasting), and confident (no apology for system state).
- **Do** use the heading font stack in order: Foundry Gridnik → Galano Grotesque → Century Gothic. Never skip straight to Century Gothic in code unless the licensed fonts are genuinely unavailable.
- **Do** expose `--k-blue`, `--k-green`, and the full `--k-*` CSS custom properties on `:root` in every Kainos web project.
- **Don't** use Kainos Blue as a decorative colour, background fill, or border accent. It signals action.
- **Don't** use Kainos Green for primary actions. Green means go, complete, positive — not click here.
- **Don't** place two bold primary actions side by side. One primary, one secondary, always.
- **Don't** use font-weight below 400 in any UI text.
- **Don't** use glassmorphism, gradients, or backdrop blur in functional UI regions.
- **Don't** write "Oops!" or use exclamation marks in error messages. State what happened and what the user can do.
- **Don't** rely on colour alone for any status or error state.
- **Don't** use a red delete button unless it is the only action in a confirmation dialog.
- **Don't** stretch a form to fill the viewport. Set `max-width: 600px` and let the margin breathe.
- **Don't** use off-brand colours (purple, teal, pink, yellow outside the brand palette). Always stay within the defined Kainos colour system.
- **Don't** use generative-AI imagery. Kainos brand standards prohibit it.