# 3.3.2.1 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. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://specs.govstack.global/overview/23q4/govstack-ui-ux-guidelines/3-service-design-good-practice-guidelines/3.3-consistency/3.3.2.1-implement-a-consistent-style-guide.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.