{"id":20039394,"url":"https://github.com/defra/design-standards","last_synced_at":"2026-03-07T13:01:32.211Z","repository":{"id":67026981,"uuid":"264160770","full_name":"DEFRA/design-standards","owner":"DEFRA","description":"Design standards for the Department for Environment, Food and Rural Affairs.","archived":false,"fork":false,"pushed_at":"2022-11-30T16:09:34.000Z","size":423,"stargazers_count":7,"open_issues_count":0,"forks_count":5,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-03-02T06:31:53.632Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DEFRA.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-15T10:08:12.000Z","updated_at":"2025-01-30T09:50:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"64fef5af-3581-4b7b-8827-d4f723d6b852","html_url":"https://github.com/DEFRA/design-standards","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/DEFRA/design-standards","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DEFRA%2Fdesign-standards","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DEFRA%2Fdesign-standards/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DEFRA%2Fdesign-standards/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DEFRA%2Fdesign-standards/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DEFRA","download_url":"https://codeload.github.com/DEFRA/design-standards/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DEFRA%2Fdesign-standards/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30214604,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-07T12:15:00.571Z","status":"ssl_error","status_checked_at":"2026-03-07T12:15:00.217Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T10:37:23.254Z","updated_at":"2026-03-07T13:01:32.189Z","avatar_url":"https://github.com/DEFRA.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Defra design standards\n\nThe Department for Environment, Food \u0026 Rural Affairs (Defra) is the UK government department responsible for safeguarding our natural environment, supporting our world-leading food and farming industry and sustaining a thriving rural economy. \n\nDefra services are designed to meet user needs and to protect the environment.\n\n\nAll Defra's online services must:\n\n-   Be designed to meet the Government [service standard](https://www.gov.uk/service-manual/service-standard)\n\n-   Meet the [government accessibility requirements](https://www.gov.uk/service-manual/helping-people-to-use-your-service/making-your-service-accessible-an-introduction#meeting-government-accessibility-requirements)\n\n-   Be designed based on user needs\n\n* * * * *\n\nContents:\n\n-   [Defra design standards](#design-standards)\n-   [non-GOV.UK domains](#non-govuk-domains)\n-   [cookies and similar technologies](#cookies-and-similar-technologies)\n-   [inclusive design](#inclusive-design)\n-   [accessibility](#accessibility)\n-   [maps](#maps)\n-   [data and charts](#data-visualisation)\n-   [internal services](#internal-services)\n-   [components and patterns](#components-and-patterns)\n\n* * * * *\n\n\n## Non-GOV.UK domains\n\nServices and websites hosted on non-GOV.UK domain names must still meet the government [service standard](https://www.gov.uk/service-manual/service-standard).\n\nAll public-facing services should look and feel like part of GOV.UK, so users know they're in the right place.\n\nNon-GOV.UK domains should not use the:\n\n-   'New Transport' font\n-   GOV.UK Header or crown logo\n-   GOV.UK footer\n\n### Font\n\nUse the Helvetica or Arial CSS font stacks.\n\n### Colour\n\nColours should be consistent with the [GOV.UK front end kit](https://design-system.service.gov.uk/styles/colour/). \n\nAgency or department colours can be used sparingly, for example in headers or navigation.\n\nYou must make sure that the contrast ratio of text and interactive elements in\nyour service meets [level AA of the Web Content Accessibility Guidelines (WCAG 2.1)](https://www.w3.org/TR/WCAG21/#contrast-minimum).\n\n| Department         |          |                    |                       |\n|--------------------|----------|--------------------|-----------------------|\n| Defra              | \\#008938 | rgb\\(0, 163, 59\\)  | hsl\\(142, 100%, 32%\\) |\n| Environment Agency | \\#009E43 | rgb\\(0, 158, 67\\)  | hsl\\(145, 100%, 31%\\) |\n| Natural England    | \\#00AB52 | rgb\\(0, 173, 84\\)  | hsl\\(149, 100%, 34%\\) |\n| APHA               | \\#008938 | rgb\\(0, 163, 59\\)  | hsl\\(142, 100%, 32%\\) |\n| MMO                | \\#008938 | rgb\\(0, 163, 59\\)  | hsl\\(142, 100%, 32%\\) |\n| RPA                | \\#008938 | rgb\\(0, 163, 59\\)  | hsl\\(142, 100%, 32%\\) |\n\n### Header and Footer\n\nDefra or supporting agency page templates should be used in place of the GOV.UK templates for:\n\n-   internal facing services (case management systems, intranets etc)\n-   external facing services not hosted on GOV.UK\n\n![Defra header](/img/main-header.png)\n*Example Defra header*\n\n![Defra header version 2](/img/small-header.png)\n*Example Defra header*\n\n### Logo\n\nFor external facing sites not on Gov.uk a Defra or supporting agency logo must be used.\n\nOrganisation logos must be included as an SVG where possible. The crest image itself must be presentational and ignored by screen readers.\n\nLinks in the logo must:\n\n-   accept focus\n-   be focusable with a keyboard\n-   be usable with a keyboard\n-   indicate when they have focus\n-   change in appearance when touched (in the touch-down state)\n-   change in appearance when hovered\n-   be usable with touch\n-   be usable with [voice commands](https://www.w3.org/WAI/perspectives/voice.html)\n-   have visible text\n-   have meaningful text\n\n[View the organisation logo component](https://components.publishing.service.gov.uk/component-guide/organisation_logo)\n\n[View the component CSS](https://github.com/alphagov/govuk_publishing_components/blob/master/app/assets/stylesheets/govuk_publishing_components/components/_organisation-logo.scss)\n\n-------------\n\n## Cookies and similar technologies\n\nTo comply with the Privacy and Electronic Communications Regulations (PECR) you must:\n\n-   tell people if your site uses cookies or similar technologies\n-   clearly explain what the cookies do and why\n-   not store cookies for longer than is necessary  \n-   get a user's explicit consent before storing or retrieving non-essential cookies on their device\n-   save a user's consent preferences for 1 year only\n-   not store any unique identifiers in the consent preferences cookie\n\nA user must be able to:\n\n-   withdraw consent as easily as they give it\n-   make changes to their cookie settings\n-   use the service without consenting to the use of cookies\n\n[Read the full compliance guidance document](/Cookies-and-similar-technologies.md)\n\n-------------\n\n## Inclusive design\n\nAll Defra services must be designed to be inclusive. Inclusive design aims to remove barriers that create extra effort for some groups of users.\n\nIn general, inclusive design lets everyone participate equally, confidently and independently in everyday activities.\n\nPrinciples of inclusive design:\n\n-   inclusive -- so everyone can use it safely, easily and with dignity\n-   responsive -- taking account of what people say they need and want\n-   flexible -- so different people can use it in different ways\n-   convenient -- so everyone can use it without too much effort or separation\n-   accommodating for all people, regardless of their age, gender, mobility, ethnicity or circumstances\n-   welcoming -- with no disabling barriers that might exclude some people\n-   realistic -- offering more than one solution to help balance everyone's needs and recognising that one solution may not work for all\n\n-------------\n\n## Accessibility\n\nMaking a website or mobile app accessible means making sure it can be used by everyone, including those with:\n\n-   impaired vision\n-   motor difficulties\n-   cognitive impairments or learning disabilities\n-   deafness or impaired hearing\n\n[Public Sector Body Accessibility Regulations 2018](http://www.legislation.gov.uk/uksi/2018/852/contents/made) became UK law in September 2018, meaning public sector organisations have a legal duty to make sure websites and apps meet accessibility requirements.\n\nTo meet accessibility requirements, digital services must:\n\n-   meet level AA of the  [Web Content Accessibility Guidelines (known as WCAG 2.1)](https://www.gov.uk/service-manual/helping-people-to-use-your-service/understanding-wcag-20)  as a minimum\n-   work on the most commonly used [assistive technologies](https://www.gov.uk/service-manual/technology/testing-with-assistive-technologies) -- including screen magnifiers, screen readers and speech recognition tools\n-   include people with disabilities in [user research](https://www.gov.uk/service-manual/user-research/running-research-sessions-with-people-with-disabilities)\n-   publish an accessibility statement that explains how accessible your website or mobile app is\n\n### WCAG standards\n\nWCAG stands for Web Content Accessibility Guidelines and is the standard by which accessibility is measured regardless of whether the digital service is a website, product or app.\n\nWCAG 2.1 is an extension to WCAG 2.0. To be accessible, the guidelines say, services must be:\n\n-   perceivable - designed in ways that can be accessed by everyone\n-   Operable - designed in ways that can be operated by everyone\n-   Understandable - designed in ways that can be understood by everyone\n-   Robust - reliable and compatible with assistive technology and standards\n\n### Testing a service\n\nAll services must be manually tested against the WCAG 2.1 criteria.\n\n[View the Defra accessibility checklist](https://drive.google.com/file/d/1I9l_ImXjJMpR3tZY-1lN63Rub6SK2tdq/view?usp=sharing)[ ](https://www.gov.uk/government/publications/sample-accessibility-statement/sample-accessibility-statement-for-a-fictional-public-sector-website#technical-information-about-this-websites-accessibility)\n\nAutomated tools are available but tools alone are not able to to identify all accessibility issues. See the GDS accessibility team’s [audit of the most used accessibility tools](https://alphagov.github.io/accessibility-tool-audit/).\n\n\n### Accessibility statements\n\nAll public sector websites will need to publish an accessibility statement. The accessibility statement should:\n\n-   list any inaccessible parts of the website or app\n-   show how people with access needs can get alternatives to content that's not accessible\n-   provide details on who to contact to report accessibility issues\n-   provide information on the enforcement procedure if people are not happy with the response\n-   be published in a fully accessible form and comply with the [GOV.UK style guide](https://www.gov.uk/guidance/style-guide/a-to-z-of-gov-uk-style)\n-   follow a consistent format\n\n[View a sample accessibility statement](https://www.gov.uk/government/publications/sample-accessibility-statement/sample-accessibility-statement-for-a-fictional-public-sector-website#technical-information-about-this-websites-accessibility)\n\n\n###  Testing with assistive technologies\n\nAll Defra services must work with common assistive technologies.\n\nThis means:\n\n* testing with assistive technology \n\n* finding user research participants who use assistive technology\n\n* asking for assistive technology testing to be included in your accessiblity audit\n\n\n### Getting an accessibility audit\n\nYou must get an [accessibility audit](https://www.gov.uk/service-manual/helping-people-to-use-your-service/getting-an-accessibility-audit) and fix any issues before a service can move into public beta.  \n\n-------------\n\n## Maps \n\nAll essential geographic information must be available in non visual formats such as text or lists.\n\nMaps should be used as visual enhancements of this information for people who choose to use them.\n\nInteractive maps should only be used when there is a user need.\n\n[Read the full guidance on working with maps](/Maps.md)\n\n-------------\n\n## Data visualisation\n\n\nAll essential data and information must be available in non visual formats such as text or lists.\n\nCharts and graphs should be used as visual enhancements of this information for people who chose to use them.\n\n\u003c!-- Read the full guidance on working with maps (coming soon) --\u003e\n\n-------------\n\n## Internal services\n\nInternal facing services and case management tools need to be consistent across Defra.\n\nStandardisation increases usability and familiarity, making systems more efficient, easy to use and accessible. \n\n### Procurement\n\nAny products bought from external suppliers need to meet the [Technology code of practice](https://www.gov.uk/government/publications/technology-code-of-practice/technology-code-of-practice)\n\n\u003c!-- Read the full guidance on case management systems (coming soon) --\u003e\n\n-------------\n\n## Components and patterns\n\nDesign patterns solve common problems so teams can focus on the things unique to their service and its users.\n\nCheck the [GOV.UK Design System](https://design-system.service.gov.uk/) to see if the component or pattern you need is already being in government.\n\nIf you cannot find what you need in the GOV.UK Design System you can:\n\n1.  [see if it is being worked on by other teams across government ](https://design-system.service.gov.uk/community/backlog/)and add your findings\n\n2.  [see if it is being worked on by someone in Defra](https://github.com/DEFRA/design-discussions/issues) and add your findings\n\n3.  Check other departments for [design patterns and design resources](https://github.com/ctdesign/gov-design-systems-list)\n\n4.  [propose a new pattern in the Defra backlog](https://github.com/DEFRA/design-discussions/issues)\n\n5.  [propose a new pattern in the GOV.UK Design System](https://design-system.service.gov.uk/community/propose-a-component-or-pattern/)\n\nAll patterns must be [useful and unique](https://design-system.service.gov.uk/community/contribution-criteria/#new-proposals).\n\n### Iterating a component or pattern\n\nExisting design patterns can be used as starting points but may need to be iterated to suit the needs of users of a particular service.\n\nBefore iterating a component or pattern make sure there is a clear user need to do so. Share any changes you make or research findings to the [GOV.UK design system backlog](https://github.com/alphagov/govuk-design-system-backlog/issues).\n\nTo do this add a class to the component with a Defra namespace.\n\n#### Default\n\n```\n\n\u003cbutton type=\"submit\" class=\"govuk-button\"\u003e\n\n  Save and continue\n\n\u003c/button\u003e\n\n```\n\n#### New\n\n```\n\n\u003cbutton type=\"submit\" class=\"govuk-button defra-button\"\u003e\n\n  Save and continue\n\n\u003c/button\u003e\n\n```\n\n### New components\n\nTo create a new pattern, use a Defra namespace to avoid issues with CSS inheritance.\n\n```\n\n\u003cheader role=\"banner\" class=\"defra-internal-header\"\u003e\n\n   \u003cdiv class=\"defra-logo\"\u003e\n\n       \u003ca href=\"#\" title=\"#\" class=\"defra-logo__link\"\u003e\n\n           \u003cspan class=\"c-defra-logo__title\"\u003e Logo text\u003c/span\u003e\n\n       \u003c/a\u003e\n\n   \u003c/div\u003e\n\n   \u003cdiv class=\"defra-internal-service-name\"\u003e\n\n       \u003ca href=\"/\" title=\"Go to the homepage\" class=\"defra-internal-service-name__link\"\u003e\n\n         Internal service name\n\n       \u003c/a\u003e\n\n   \u003c/div\u003e\n\n\u003c/header\u003e\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdefra%2Fdesign-standards","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdefra%2Fdesign-standards","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdefra%2Fdesign-standards/lists"}