2a - Design System, Tokens and Core Components
Contractor: TBA
Main Contact: TBA
Start date: 1 November 2026
End data: 31 January 2027
Abstract
By delivering the design tokens and foundational components first, this milestone creates the shared vocabulary that every other part of the programme builds on. Making these decisions early and getting them right prevents inconsistency from multiplying across the later milestones. The design tokens ensure that contrast ratios, focus styles, and spacing meet WCAG 2.2 AA across any template or framework choice.
Milestone 2a depends on the prioritised remediation backlog produced in Milestone 1b and on the test protocols and acceptance criteria established in Milestone 1a. Its outputs unblock Milestones 2b, 3a, and 6 by making an initial versioned alpha of the design system available for integration work before the complex components in Milestone 2b are complete.
Scope of Work
Deliverable 1: Design Tokens
Define design tokens as a CSS-framework-agnostic abstraction layer that is not tied to Bootstrap or any other specific framework, covering:
- Spacing
- Typography
- Colour, with documented contrast constraints (WCAG 2.2 AA)
- Border radius
- Focus styles
Tokens must be documented with their accessibility rationale, including the contrast thresholds and focus-visibility requirements they enforce.
Deliverable 2: Core Accessible UI Components
Define and implement the core accessible UI components based on the remediation plan from Milestone 1b like:
- Buttons
- Form controls (inputs, selects, checkboxes, radio groups)
- Data tables (non-sortable)
Each component must implement proper focus management, ARIA attributes, keyboard interactions, and labelling in accordance with WAI-ARIA Authoring Practices. All components must support RTL layouts, responsive mobile behaviour, and reduced-motion preferences. All components must be tested with the browser/assistive technology matrix defined in M1a, and shown to work correctly (Deliverable 5).
Components are explicitly split into core (this milestone) and complex (Milestone 2b) so that parallel downstream work can begin earlier. The boundary: core components are those with no overlay, portal, or complex focus-trap behaviour.
Deliverable 3: Component Documentation and Examples
Produce documentation and example pages for each core component delivered in this milestone, showing:
- Correct usage
- Accessibility requirements
- Common mistakes to avoid
Deliverable 4: Initial Versioned Alpha Release
Publish an initial versioned alpha release of the design-system package to GitHub, covering the tokens and core components from this milestone. This release allows Milestones 6 and 3a to begin integration work without waiting for Milestone 2b to complete.
Deliverable 5: Validation Against MS1a Test Protocols
Validate all core components against the test protocols and the AT/browser combinations defined in Milestone 1a (minimum matrix: NVDA + Chrome, JAWS + Edge, VoiceOver + Safari). Results must be recorded against the acceptance criteria for each component.
Deliverable 6: Documentation and Milestone Report
Maintain the programme documentation framework and produce the milestone completion report in the format agreed to at milestone kick-off.