Implement a consistent style guide

Understanding style guide, frontend framework, and design system

  • Style Guide: A style guide is a reference tool that establishes design and writing standards. It includes branding elements (logos, colour schemes), UI components, and coding standards, ensuring consistency across a product or set of products.

  • Frontend Framework: This is a structured package of standardised code (HTML, CSS, JS documents, etc.) that forms the foundation for designing a website or web application. Examples include React, Vue.js, and Angular.

  • Design System: A design system is an overarching guide that includes the style guide and coded UI components (often from a frontend framework). It houses design principles, visual design rules, coded components, and other standards guiding the creation of a range of products or services.

Creating a style guide is a crucial first step in building a comprehensive design system. It defines the visual aspect of the system which can later be expanded to include coded components, UX patterns, and more.

Steps to create a style guide

If a style guide does not exist already, here are the steps for its creation:

  • Audit Existing Designs - Review current services to identify common components and styles.

  • Create and Document Components - Develop reusable design components (like buttons or headers) and write clear guidelines for their use.

  • Define Visual Styles - Document your colour palette, typography, grid system, spacing, and other visual styles.

  • Ensure Accessibility - Incorporate guidelines to ensure your digital services are usable by all citizens, for example, colour contrast between text and backgrounds.

Including style guide in a supplier's Request for Qualifications (RFQ)

If you do not have a consistent style guide across government the creation, usage and, contribution to a common style guide should be included as a requirement for suppliers. This ensures the supplier's work aligns with the existing style guide and contributes to its improvement or expansion, leading to a more collaborative, efficient, and cohesive design ecosystem. As part of the RFQ:

  • Include a copy of the style guide if it exists - Make sure that suppliers have a copy of the existing style guide to understand its current state and requirements.

  • Require adherence to the style guide - Suppliers should demonstrate an understanding of the style guide and show how they will adhere to it.

  • Encourage contributions - Request that suppliers identify potential improvements or expansions to the style guide during their work, and include a process for proposing and implementing these changes.

Last updated