Design Consistent Components
The new FCDO Design System will introduce a structured approach to designing and creating components, ensuring consistency, accessibility, and efficiency across all digital services.
Component design process
New components in the FCDO Design System will follow a structured lifecycle, including:
Research and discovery
Identifying user needs, accessibility requirements, and ensuring alignment with existing GOV.UK standards.
Wireframing and prototyping
Creating low-fidelity and high-fidelity designs to visualize the component's look and behavior.
Testing and accessibility reviews
Ensuring compliance with WCAG 2.2 accessibility standards and testing with real users.
Development and documentation
Writing scalable, reusable CSS & JavaScript, with detailed documentation in the FCDO Design System.
Iterative updates
Based on user feedback, data insights, and emerging best practices.
Component structure
Each component will have:
HTML Structure
Identifying user needs, accessibility requirements, and ensuring alignment with existing GOV.UK standards.
CSS Styling
Using FCDO specific styling (e.g., fcdo-color-primary, fcdo-spacing-m) layered on top of GOV.UK styles.
JavaScript (if needed)
Lightweight, progressive enhancement-based functionality for interactive elements.
New and enhanced UI components
The system will introduce new and customised versions of common GOV.UK components, including:
- Header
- Navigation Bar
- Sub Navigation
- Counter
- Progress Bar
- Sortable Table and Filter
- Add Another Item
- Date Picker
- Notification Badge