A comprehensive demonstration of your custom color palette and all GOV.UK Design System components. Every element uses your WCAG 2.1 compliant 5-color palette plus white and black.
Click any color to copy its hex code to your clipboard.
Our design system provides CSS custom properties for easy access:
How your palette colors are assigned semantic meaning.
Main brand color for buttons, links, and primary actions.
Supporting elements, secondary buttons, and highlights.
Special content areas and accent elements.
Focus states, important highlights, and call-to-action elements.
Warnings, alerts, and important notifications.
GOV.UK typography styles with proper hierarchy and accessibility.
Large body text for lead paragraphs and important content.
Regular body text for most content. This is the standard paragraph style.
Small body text for less important information and metadata.
GOV.UK responsive grid system for creating flexible layouts.
Full width column (govuk-grid-column-full)
Two thirds column (govuk-grid-column-two-thirds)
One third column (govuk-grid-column-one-third)
Half column (govuk-grid-column-one-half)
Half column (govuk-grid-column-one-half)
Quarter (govuk-grid-column-one-quarter)
Quarter (govuk-grid-column-one-quarter)
Quarter (govuk-grid-column-one-quarter)
Quarter (govuk-grid-column-one-quarter)
Consistent spacing system based on GOV.UK Design System.
| Class | Size | Usage | Example |
|---|---|---|---|
| govuk-!-margin-0 | 0px | Remove spacing | |
| govuk-!-margin-1 | 5px | Minimal spacing | |
| govuk-!-margin-2 | 10px | Small spacing | |
| govuk-!-margin-4 | 20px | Standard spacing | |
| govuk-!-margin-6 | 30px | Large spacing |
All button variants using your color palette.
Form components with proper validation states and accessibility.
Radio buttons let users select one option from a list. Use radio buttons when users can only choose one option from a list of fewer than 5 options.
Checkboxes let users select one or more options from a list. Use checkboxes when users can select multiple options.
Use the date input component to help users enter a memorable date or one they can easily look up.
Help users select and upload files from their device.
Help users know how much content they can enter when there is a limit on the number of characters.
Use the summary list to summarise information, for example, a user's responses at the end of a form.
07700 900457
sarah.phillips@example.com
Help users go back to the previous page in a multi-page process.
Different contexts and styling:
Back to applicationTell users about cookies and give them control over non-essential cookies.
Status indicators using your full color palette.
12 pending tasks in your queue
Status: Approved
Priority: High
Panel components for highlighting important content and organizing information.
It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.
Colored accent boxes for organizing content.
Uses your primary blue color for the accent border.
Uses your secondary purple color for visual variety.
Uses your tertiary magenta for special content.
Expandable content sections for progressive disclosure and better user experience.
A National Insurance number is a unique identifier used by the UK government to track your National Insurance contributions and entitlements.
It's made up of 2 letters, 6 numbers and 1 letter, for example QQ 12 34 56 C.
Find your National Insurance number if you've lost it.
The application fee is £154 for most applications.
You may be eligible for a fee reduction or exemption in certain circumstances.
Your color palette consists of 5 carefully chosen colors that meet WCAG accessibility standards:
All colors in this palette have been tested for accessibility:
Use CSS custom properties for consistent color application:
Phase banners to communicate the development status of your service.
Breadcrumb navigation to show users where they are and help them navigate back.
| Color | Hex Code | Usage | Contrast Ratio | Status |
|---|---|---|---|---|
| Primary Magenta | #7130a6 | Buttons, Links | 7.85:1 | WCAG AAA |
| Secondary Purple | #5445d9 | Secondary Actions | 6.50:1 | WCAG AA |
| Tertiary Blue | #3D6DDB | Special Content | 4.76:1 | WCAG AA |
| Accent Pink | #a82d7d | Focus States | 6.29:1 | WCAG AA |
| Warning Coral | #b83241 | Warnings, Alerts | 5.88:1 | WCAG AA |
All links use your primary blue with proper focus states.
This is a paragraph with a link in the middle of the sentence.
Link at the start of a sentence.
Sentence ending with a link at the end.
Ready-to-use classes for applying your color palette.
Text in color 1
Text in color 2
Text in color 3
Text in color 4
Text in color 5
All color combinations in this palette meet or exceed WCAG 2.1 AA standards:
To ensure accessibility in your projects:
All components include:
Help users understand what they need to do to complete a process and track their progress.
Use warning text and inset text to help users understand important information.
Help users understand what went wrong and how to fix it.
Help keyboard and screen reader users skip to the main content.
Press Tab while focused on this page to see the skip link appear.
Complete guide to implementing this design system in your projects.
Follow these steps to implement the design system in your project:
Add the GOV.UK Frontend CSS and JavaScript to your project:
Define the color palette in your CSS:
Add utility classes for quick styling:
Use these classes for rapid prototyping:
.bg-color-1 to .bg-color-5 for backgrounds.text-color-1 to .text-color-5 for text.custom-badge--primary etc. for status indicators.custom-button-1 etc. for themed buttonsForms that show or hide content based on user selections, enhancing usability by reducing cognitive load.
data-aria-controls to link controls to conditional contentgovuk-radios__conditional--hidden classNavigation between pages of content, helping users understand where they are in a sequence.
Enhanced form grouping that provides semantic structure and improved accessibility for related form controls.
govuk-fieldset__legend--xl - Extra large (48px)govuk-fieldset__legend--l - Large (36px)govuk-fieldset__legend--m - Medium (24px)govuk-fieldset__legend--s - Small (19px)role="group" for complex fieldsetsaria-describedbyEmergency exit component for sensitive services, allowing users to quickly leave the page for safety reasons.
Service start pages that introduce users to your service and help them understand what they need to do.
Use this service to apply for a licence to import controlled goods into the UK.
You can use this service to:
You'll need:
The application takes around 15 minutes to complete.
Start nowYou can also apply by post. Send your completed application form to:
Different patterns for showing successful completion of tasks and positive feedback to users.
We have sent you a confirmation email.
We've sent your application to Hackney Electoral Register Office.
They will contact you either to confirm your registration, or to ask for more information.
Your profile has been updated.
contract.pdf (2.3 MB)
You can now receive notifications.
Different configurations of the GOV.UK header component to suit various service needs.
CSS optimizations for print media, ensuring your content looks good on paper.
Reference: APP-2024-001
Date: 23 June 2025
Try printing this page (Ctrl+P) to see the print styles in action.
Use .print-only class for content that should only appear in print.
Use .no-print class to hide elements from print.
Use .page-break to force page breaks in print.
Progressive enhancement patterns and JavaScript best practices for government services.
Service unavailable messaging that keeps users informed during maintenance periods.
We're currently updating the service. You'll be able to use it again soon.
Scheduled maintenance:
Start: Today at 11:00pm
End: Tomorrow at 2:00am
You can:
We apologise for any inconvenience.
Scheduled updates with advance notice
Duration: 3 hours
Urgent fixes with minimal notice
Status: In progress
Some features affected
Impact: Limited functionality
Highlighted text sections that draw attention to important information without using warning styles.
Helpful guidance text that appears below labels to assist users in completing form fields correctly.
aria-describedbyComprehensive patterns for form validation, error handling, and user feedback.
role="alert"aria-describedby to associate errors with inputs