Build a GOV.UK-style question and check-answers journey with the current v6 type scale, responsive spacing, functional colours, linked validation and concrete Frontend integration.
Native GOV.UK Frontend 6.5.1 CSS, Button and ErrorSummary JavaScript, served locally. Alternative Helvetica font; original local-only form validation and review navigation. · Implementation reference
02
GOV.UK Design System Design Reference
GOV.UK Frontend 6.5.1 and current v6 documentation, checked 3 October 2026. Hex values are a reference snapshot; prefer named Sass functions in production. The preview loads the local official CSS and JavaScript with an alternative font and independent identity.
This reference uses the v6 documentation, including its larger small-screen type and revised functional colours. An older screenshot may therefore show different values. The table above records the current documented defaults rather than silently mixing releases.
The live study is a fictional community event enquiry. It uses no crown, GOV.UK wordmark, Transport font or real submission endpoint. Its task content and local validation rules are application choices; the component anatomy is grounded in the linked official examples.
For an eligible service.gov.uk service, GDS Transport belongs to the official implementation. Public services on other domains must use another typeface. This independent study follows the recommended Helvetica Neue, Helvetica, Arial, sans-serif alternative; changing the font does not require discarding the system’s hierarchy.
Use govuk-heading-l for the enquiry question and govuk-body for supporting copy. At small widths the heading is 27/30px; at larger widths it becomes 36/40px. Body copy remains 19/25px in v6. A small-screen body size of 16px would reproduce older behaviour rather than this reference.
The scale table includes both sizes because a screenshot of one viewport cannot establish the responsive rule. The production CSS uses relative units. A class such as govuk-heading-l controls appearance without determining whether the semantic element should be h1 or h2.
scss
.app-question-note {
@include govuk-font($size: 19);
}
// Size and line-height only, without changing the font family:
.app-existing-font { @include govuk-font-size($size: 19); }
Unit 6 is useful between question groups: it gives 20px on a narrow screen and 30px above the tablet boundary. The static helper govuk-spacing(6) returns 30px at every width. Choosing the helper therefore changes behaviour, even when both versions look identical on desktop.
The standard width container has a 1020px maximum. Inside it, a two-thirds grid column constrains the question flow while allowing the outer page structure to remain aligned. The small-screen presentation stacks naturally. Our preview keeps this reading hierarchy instead of spreading each field across a dashboard card.
html
<div class="govuk-width-container">
<main class="govuk-main-wrapper" id="main-content">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Tell us about the event</h1>
<!-- Question form -->
</div>
</div>
</main>
</div>
The v6 functional link colour is #1a65a6 and its error colour is #ca3535. Use govuk-functional-colour("link") and govuk-functional-colour("error") in a real Sass build so an upgrade can carry the upstream palette. These functional roles are different from choosing a general red or blue illustration colour.
Focus yellow is reserved for focus. It should not become the default selection or promotional accent. The preview pairs yellow with dark text and a visible dark edge; an error remains identified through text and placement, not red alone.
The input example combines govuk-form-group, govuk-label, govuk-hint and govuk-input. The label targets the input ID; aria-describedby points to the hint. When invalid, add the error message ID as well as the error classes. A visual red border without that relationship is an incomplete reproduction.
This enquiry keeps an event name and contact email together. They are separate labelled values within one short task, not an instruction to place every field on its own page. The preview requires both only to demonstrate validation; it does not establish any real permit requirement.
Persistent label: Event name.
Persistent hint: Use the name shown on your event information.
Native markup and application behaviour have different jobs
GOV.UK Frontend styles and enhances the components. It does not decide which email is acceptable for this service, save a draft, or receive an enquiry. In the preview, JavaScript validates the two fields and stores their values only in the current page. Reloading clears the study.
After an invalid Continue action, show the error summary before the form and move focus to it. Each list link targets the corresponding answer. A single text field targets its input ID; a grouped choice should target the appropriate first control as described by the official guidance.
The native summary uses data-module="govuk-error-summary" for enhancement. The preview inserts the summary only when validation fails, then constructs ErrorSummary from the local 6.5.1 module. The library handles focus and linked navigation; the application supplies the messages, retains values and removes obsolete errors.
Continue with both fields blank. Follow the event-name error, enter a fictional title, then enter an invalid email. Continue again: only the remaining error should appear and the title should remain. Correct the address to reach review. This makes the state contract visible rather than displaying a permanent specimen error.
The check-answers screen contains a govuk-summary-list. Each row has a dt key, dd value and dd actions region. A hidden label after Change identifies the particular answer. Long event names wrap in the value without concealing the edit route.
The change action restores the form and focuses the selected field. Continuing validates again and returns to the updated review. The return route is application code; the design system supplies the presentation structure.
This study ends at review because no service receives the data. A real check-answers page precedes the actual send action and must show the information that will be sent. An application with declarations or a backend confirmation needs additional service logic; a green panel cannot create that result.
Complete the two fictional answers and continue to review.
Choose Change event name; edit only that answer.
Continue and verify both the corrected title and preserved email.
The setup below uses govuk-frontend@6 and Dart Sass with the Node package importer. It compiles the documented unbranded font configuration and copies the browser JavaScript distribution. Commit the resolved lockfile so a real project records its exact release.
The sample does not load Transport or use government image assets. An eligible branded service must additionally serve the official assets through the documented asset path. Applications using another build tool can keep the same Sass module and initAll entry while adapting their bundling.
The standalone preview runs the official CSS and JavaScript copied locally at version 6.5.1. A narrowly scoped font override replaces Transport throughout the study. The form validation and review screen are application code, while Button and ErrorSummary enhancement come from the library. The separate Sass build recipe documents the preferred configurable setup; that compilation was not executed here.
Frontend initialisation supplies the summary focus behaviour in a native implementation.
The live study constructs a new ErrorSummary after inserting each failed-validation summary; application validation remains separate.
Check answers: a semantic summary list
A definition list pairs the answer label with its value and a targeted edit destination. The hidden suffix makes repeated Change links distinguishable.
The returnTo parameter is an application convention used here, not a Frontend API.
Return from editing to review, keeping all unrelated answers intact.
Complete standalone specimen
The full document includes its layout, controls and initialization. Extract the linked example archive to obtain the exact relative vendor assets, then serve it over HTTP.
html
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Event enquiry — OpenDesign component study</title><link rel="stylesheet" href="vendor/govuk-6.5.1/govuk-frontend.min.css"><style>
body{margin:0;background:#fff}body,body *,body *::before,body *::after{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important}[hidden]{display:none!important}.study-header{border-bottom:1px solid #cecece;padding:15px 0;background:#f3f3f3}.study-header p{margin:0}.study-header strong{display:block;margin-bottom:5px}.study-note{border-top:1px solid #cecece;padding-top:20px;margin-top:30px}.study-actions{display:flex;gap:20px;align-items:baseline;flex-wrap:wrap}.govuk-summary-list__value{overflow-wrap:anywhere}main:focus,h1:focus{outline:none}.govuk-width-container{max-width:1020px}.study-tools{margin:20px 0}.study-tools button{font:inherit;background:none;border:0;padding:0;color:#1a65a6;text-decoration:underline;cursor:pointer}.study-tools button:focus{outline:3px solid #ffdd00;background:#ffdd00;color:#0b0c0c}.study-header .govuk-body-s{max-width:75ch}
</style></head><body class="govuk-template__body"><script>document.body.className+=' js-enabled'+('noModule' in HTMLScriptElement.prototype?' govuk-frontend-supported':'');</script>
<a class="govuk-skip-link" href="#main-content">Skip to main content</a>
<header class="study-header"><div class="govuk-width-container"><p class="govuk-body-s"><strong>OpenDesign · Component study</strong>GOV.UK Frontend 6.5.1 with an alternative font. Fictional enquiry; no information is sent.</p></div></header>
<main class="govuk-width-container govuk-main-wrapper" id="main-content"><div class="govuk-grid-row"><div class="govuk-grid-column-two-thirds">
<section id="questions"><div id="errors"></div><h1 class="govuk-heading-l" id="question-title" tabindex="-1">Tell us about the event</h1><p class="govuk-body">Enter fictional details to try linked validation and the check-answers pattern.</p>
<form id="event-form" novalidate>
<div class="govuk-form-group" id="name-group"><label class="govuk-label" for="event-name">Event name</label><div class="govuk-hint" id="event-name-hint">Use the name shown on your event information.</div><input class="govuk-input" id="event-name" name="eventName" type="text" aria-describedby="event-name-hint"></div>
<div class="govuk-form-group" id="email-group"><label class="govuk-label" for="contact-email">Contact email</label><div class="govuk-hint" id="contact-email-hint">For example, [email protected]. Use a fictional address.</div><input class="govuk-input" id="contact-email" name="email" type="email" spellcheck="false" autocomplete="email" aria-describedby="contact-email-hint"></div>
<button class="govuk-button" data-module="govuk-button" type="submit">Continue to check answers</button>
</form><div class="study-tools govuk-body-s"><button id="fill" type="button">Use example details</button></div></section>
<section id="review" hidden><a class="govuk-back-link" href="#questions" id="back">Back</a><h1 class="govuk-heading-l govuk-!-margin-top-6" tabindex="-1" id="review-title">Check your answers</h1><dl class="govuk-summary-list"><div class="govuk-summary-list__row"><dt class="govuk-summary-list__key">Event name</dt><dd class="govuk-summary-list__value" id="review-name"></dd><dd class="govuk-summary-list__actions"><a class="govuk-link change" href="#event-name" data-field="event-name">Change<span class="govuk-visually-hidden"> event name</span></a></dd></div><div class="govuk-summary-list__row"><dt class="govuk-summary-list__key">Contact email</dt><dd class="govuk-summary-list__value" id="review-email"></dd><dd class="govuk-summary-list__actions"><a class="govuk-link change" href="#contact-email" data-field="contact-email">Change<span class="govuk-visually-hidden"> contact email</span></a></dd></div></dl><h2 class="govuk-heading-m">This example ends at review</h2><p class="govuk-body">Nothing has been submitted. Your answers stay in this page until it is reset or reloaded.</p><button class="govuk-button govuk-button--secondary" data-module="govuk-button" id="reset" type="button">Start again</button></section>
<aside class="study-note"><h2 class="govuk-heading-s">Try the recovery path</h2><ol class="govuk-list govuk-list--number"><li>Continue with empty fields to show the error summary.</li><li>Follow an error link, enter a title and an invalid email.</li><li>Correct the email, then change an answer from review.</li></ol><p class="govuk-body-s">Native component CSS and ErrorSummary behaviour. Local application logic only. No government logo, Transport font, external request or stored account.</p><p class="govuk-body-s"><a class="govuk-link" href="https://design-system.service.gov.uk/components/error-summary/" target="_blank" rel="noreferrer">Official error summary reference</a> · <a class="govuk-link" href="vendor/govuk-6.5.1/LICENSE.txt">Frontend licence</a></p></aside>
</div></div></main><script type="module">
import {initAll, ErrorSummary} from './vendor/govuk-6.5.1/govuk-frontend.min.js';
initAll();
const q=document.querySelector('#questions'),r=document.querySelector('#review'),form=document.querySelector('#event-form'),holder=document.querySelector('#errors');
const fields=[{id:'event-name',group:'name-group',empty:'Enter an event name'},{id:'contact-email',group:'email-group',empty:'Enter a contact email',invalid:'Enter an email address in the correct format, like [email protected]'}];
function clearErrors(){holder.replaceChildren();for(const f of fields){document.getElementById(f.group).classList.remove('govuk-form-group--error');const input=document.getElementById(f.id);input.classList.remove('govuk-input--error');input.removeAttribute('aria-invalid');input.setAttribute('aria-describedby',f.id+'-hint');document.getElementById(f.id+'-error')?.remove();}document.title='Event enquiry — OpenDesign component study';}
function edit(id='event-name'){r.hidden=true;q.hidden=false;document.getElementById(id).focus();}
form.addEventListener('submit',event=>{event.preventDefault();clearErrors();const errors=[];for(const f of fields){const input=document.getElementById(f.id);const value=input.value.trim();const message=!value?f.empty:(f.id==='contact-email'&&(!input.validity.valid||!value.includes('@'))?f.invalid:null);if(message){errors.push({id:f.id,message});document.getElementById(f.group).classList.add('govuk-form-group--error');input.classList.add('govuk-input--error');input.setAttribute('aria-invalid','true');input.setAttribute('aria-describedby',f.id+'-hint '+f.id+'-error');const p=document.createElement('p');p.id=f.id+'-error';p.className='govuk-error-message';const hidden=document.createElement('span');hidden.className='govuk-visually-hidden';hidden.textContent='Error: ';p.append(hidden,document.createTextNode(message));input.before(p);}}
if(errors.length){const summary=document.createElement('div');summary.className='govuk-error-summary';summary.dataset.module='govuk-error-summary';summary.innerHTML='<div role="alert"><h2 class="govuk-error-summary__title">There is a problem</h2><div class="govuk-error-summary__body"><ul class="govuk-list govuk-error-summary__list"></ul></div></div>';for(const err of errors){const li=document.createElement('li'),a=document.createElement('a');a.href='#'+err.id;a.textContent=err.message;li.append(a);summary.querySelector('ul').append(li);}holder.append(summary);new ErrorSummary(summary);document.title='Error: Event enquiry — OpenDesign component study';return;}
document.getElementById('review-name').textContent=document.getElementById('event-name').value;document.getElementById('review-email').textContent=document.getElementById('contact-email').value;q.hidden=true;r.hidden=false;document.getElementById('review-title').focus();document.title='Check your answers — OpenDesign component study';});
document.querySelectorAll('.change').forEach(a=>a.addEventListener('click',e=>{e.preventDefault();edit(a.dataset.field)}));document.getElementById('back').addEventListener('click',e=>{e.preventDefault();edit()});document.getElementById('fill').addEventListener('click',()=>{clearErrors();document.getElementById('event-name').value='Riverside community picnic';document.getElementById('contact-email').value='[email protected]';document.getElementById('event-name').focus()});document.getElementById('reset').addEventListener('click',()=>{form.reset();clearErrors();edit();document.getElementById('question-title').focus()});
</script></body></html>
Download the complete example from Sources. Its README gives the exact local launch command.
Keep vendor paths relative to this document; the archive includes the complete assets used by this preview.
04
GOV.UK Design System Agent Setup
Implementation Starting Point
Separate the shell commands, app.scss contents and HTML fragments into their indicated locations. The preview runs locally copied official 6.5.1 assets with a font override; this Sass build recipe is documented but has not been compiled in this workspace. The complete working-example ZIP in Sources also provides the exact preview dependencies and full document. Extract it, run python3 -m http.server 8080 in that directory, then open http://localhost:8080/gov-uk.html. Do not open module-based examples through file://.
sh / scss / html
# Run in a project directory
npm install [email protected]
npm install --save-dev sass
mkdir -p public/assets
# Save the following as app.scss
@use "pkg:govuk-frontend" as * with (
$govuk-font-family: ("Helvetica Neue", Helvetica, Arial, sans-serif)
);
# Compile, then copy the browser module
npx sass --pkg-importer=node app.scss public/assets/app.css
cp node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js public/assets/
<!-- In the HTML head -->
<link rel="stylesheet" href="/assets/app.css">
<!-- At the start of body -->
<script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
<!-- After the question / summary markup -->
<script type="module">
import { initAll } from '/assets/govuk-frontend.min.js';
initAll();
</script>
A Prompt for Your Project
Agent Prompt
Implement the two-field event enquiry using GOV.UK Frontend v6 and the unbranded Helvetica font configuration in this guide. Use the actual form-group/input/error-summary and summary-list structures, linked inline errors, retained answers, targeted Change links and review-only completion. Apply the documented responsive type and spacing through Frontend classes. Keep the real project identity and do not create an official submission or invented backend result. Verify blank, invalid-email, corrected, review and change-answer states.
05
GOV.UK Design System Sources and Scope
Independent OpenDesign application study using GOV.UK Frontend 6.5.1 component CSS and JavaScript. No government logo, Transport font, official service, real submission or compliance certification is implied. The form rules and review navigation are original application code.
