README.md

NHS FDP Design System Documentation

Welcome to the NHS FDP Design System documentation. This directory contains comprehensive guides, migration documentation, and technical references.

Directory Structure

Components (/docs/components/)

Component-specific implementation guides and patterns:

• ResponsiveDataGrid: Column widths and collapse
• ResponsiveDataGrid: Enhanced renderers
• ResponsiveDataGrid: Implementation guide

Migration (/docs/migration/)

Migration guides and progress tracking:

• Migration Guide
• SPC Settings V2 (grouped) Migration
• Migration Index

Design Tokens (/docs/tokens/)

Token system documentation and analysis:

• NHS Composite Tokens Guide

Testing (/docs/testing/)

Testing guides and visual testing documentation:

• TODO

Guides (/docs/guides/)

Development and workflow guides:

• SSR and Hydration Guide
• Next.js Integration Guide
• SSR updates (Sep 2025)

Quick Start

1. For Developers: Start with the Migration Guide
2. For Designers: Check out the Design Tokens Guide
3. For QA: See the Visual Testing Guide

Architecture

The NHS FDP Design System follows these principles:

• Token-based design: All visual properties are defined as design tokens
• Component-driven development: Reusable React components with TypeScript
• Accessibility-first: WCAG 2.1 AA compliance built-in
• Testing-focused: Comprehensive visual regression and unit testing
• Storybook integration: Component documentation and development environment

Related Resources

• Storybook - Component documentation
• Examples - Usage examples and demos
• Source Code - Component source code
• Tests - Test suites