Design reference · reviewed 22 September 2026

Kettle style guide

Small local tools, with work you can see, check and finish.

A guide to the app’s visual language and behaviour, using Kettle’s existing GOV.UK theme. These examples render with the website’s own theme; the app source remains authoritative for each tool’s layout and behaviour.

Principles

Start with the task

Say what the person can finish. Name the models and their jobs separately, where people can inspect them.

Make work explicit

Choosing a file does not start reading it. Label the action that starts work, show its status and provide Stop when cancellation is supported.

Keep the source close

Put the original beside the draft. Let people correct values and preserve empty cells, rather than filling gaps with guesses.

Review before saving

Make review an explicit step. Changes to a reviewed result must clear its review state before another reviewed export.

Local operation, setup downloads and any configured source fetching need accurate, separate explanations. State what the tool actually reads and writes.

Marks and motion

The kttl wordmark and geometric cup identify the app. Keep icons subordinate to visible labels. The existing header above uses the site’s lockup at a 40px height.

Nothing leaves this computer.

Animate the logo

Preview the working state. If your device requests reduced motion, the steam stays still.

App header specimen: the wordmark, cup and the local-operation sentence on navy. This sentence describes the local tool, not the website. Setup downloads are explained separately.

In the app, steam is hidden at rest and animates while work is running. Reduced motion shows static steam during work. Status must also appear in words; motion alone never explains what is happening.

Icons

The Kettle icon set uses angular shapes on a 32 × 32 grid, with navy and supporting grey shades. These are available for app design; an icon here does not mean a tool or feature is available.

Just boiled kettle-boiled.svg
Steeping kettle-steeping.svg
Cup kttl-mini-cup-animated.svg
Letter letter.svg
A pile pile.svg
Drop it here drop-here.svg
Done done.svg
Needs you needs-you.svg
Stays local stays-local.svg
Takes a while takes-a-while.svg
Read read.svg
Spreadsheet spreadsheet.svg
Voice memo voice-memo.svg
Speak aloud speak-aloud.svg
Calendar calendar.svg
Stop stop.svg

One for each Cup

Tables cups/tables.svg
Meeting Notes cups/meeting-notes.svg
Text cups/text.svg
Share Copy cups/share-copy.svg
Regulars cups/regulars.svg
Media cups/media.svg
Local cups/local.svg
Geo cups/geo.svg
Sort cups/sort.svg

Select an icon’s name to open its SVG. These previews are static; the logo above demonstrates motion. Pair icons with visible action or status text, and hide decorative icons from assistive technology when the adjacent text supplies their meaning.

Colour

Navy text on pale blue and white, with one blue for actions. Swatches below use the live theme tokens, not a separate palette.

Ground #edf2f7 · --k-ground App background
Paper #ffffff · --k-paper Cards and working surfaces
Ink #16335b · --k-ink Primary text and dark chrome
Grey #54677f · --k-grey Secondary text
Rule #c9d3e0 · --k-rule Dividers, never text
Interactive #2f6fd0 · --k-interactive Primary buttons and focus
Interactive text #1d55b0 · --k-interactive-text Links on light surfaces
Tint #e0eafa · --k-tint Quiet notices and tags
Highlight #00e5e5 · --k-highlight Cyan details on navy
Boundary #00e5e5 · --k-boundary Privacy rule on navy

Colour supports meaning. Use words such as “Needs review” or “Could not read the image”. Keep cyan on navy and use the grey token for muted text, rather than reducing opacity.

Errors use the theme’s GOV.UK error treatment ($k-error: #b02a2a). The theme also retains success and pending colours for evidence states. Ordinary uncertainty is a review instruction; it is not automatically an error or a claim of confidence.

Typography

Use system fonts: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif. Use the monospace stack for filenames, elapsed time and raw values. No downloaded font is needed.

Read this table

--k-t-display · about 37–49px

Check the cells

--k-t-title · about 26–31px

Keep the original in view

--k-t-section · about 22–25px

Correct the draft before saving your CSV.

--k-t-body · 18–20px

Changing a cell clears the review checkbox.

--k-t-small · 15–16px

ruled.png · source image

--k-t-tiny · about 12.5–12.8px

Utopia interpolates between 360px and 1240px viewports using rem-based values. These approximate pixel sizes assume the browser’s default font size. The app caps its main heading at 2.25rem (36px at the default); this site uses the full display scale.

Keep prose to the theme’s 66ch measure where practical. Pair size and line height through k-font(); use real headings in document order.

Space and shape

Use the existing fluid space scale for gaps and padding. Prefer k-stack() for vertical groups and k-cluster() for controls that wrap.

--k-space-3xs

--k-space-2xs

--k-space-xs

--k-space-s

--k-space-m

--k-space-l

--k-space-xl

--k-space-2xl

Cards

White paper, a soft border, a light shadow and --k-radius (16px).

Inner panels

--k-radius-soft (10px) for inset surfaces. Buttons and tags use --k-radius-pill.

Keep the task’s width bounded. Let controls wrap, stack source and result when space is tight, and contain wide tables in a labelled scroll region.

Components

Use GOV.UK markup and Kettle’s settings bridge and skin. These are small specimens of the existing theme, not a running Cup.

Actions

See Tables View the source

The links navigate. The disabled save button illustrates an unavailable action. In the app, explain the requirement nearby: check the cells and confirm review before saving.

State in words

Done Waiting Needs review

Tags label a state; they are not controls. During work, show the actual stage and elapsed time. Do not invent a percentage or a promised completion time.

Where this example came from

The table below is authored synthetic content for this guide. It is not a model result or an accuracy check.

Synthetic table example
Item	Quantity	Price
Notebook	2	£4.50
Pencil	6	£0.80

Table rows have dividing rules. The last body row has no bottom border, including its row header cells.

File selection and correction

Use the established file-picker pattern: a real, labelled file input with an optional drop target. State accepted types and limits. Keep previews, validation and unsaved-work decisions with the tool.

Correction fields need visible labels or precise accessible names, such as row and column coordinates. Show errors near the field and use a summary for failures that need attention. Keep the source available throughout review.

Voice

Plain British English. Lead with the person’s task, name the consequence of an action and distinguish a draft from something reviewed.

Actions: “Read this table”, “Stop”, “Save reviewed CSV”. Use a verb and its object where that makes the result clearer.
Uncertainty: “Check this cell against the image.” Explain what needs attention; do not invent a confidence score.
Failures: Say what failed, what happened to the person’s work and what they can do next. Only promise preserved work when that behaviour is established.
Models: Name active models, their jobs and exact sources. A tool without a model says “Models used: none”.

Accessibility

GOV.UK provides the foundation. Kettle’s adaptations and complete task flows still need checking.

Use the keyboard to reach every control, open details, choose files and correct results. Keep focus visible and in a useful place after actions.
The theme uses a 3px blue focus outline, a 2px offset and a white inner edge so focus remains visible on navy.
Keep labels, hints and errors associated with their controls. Do not rely on colour, an icon or motion alone.
Announce changing status politely and make failures available to assistive technology. Static examples need no live announcements.
Check zoom, narrow windows, reduced motion and forced colours. Controls should have at least a 44px hit area; long filenames and wide tables must not widen the page.
Check contrast on the actual surface, including hover, focus, disabled and error states. Do not assume a theme adaptation inherits an accessibility result.

Sources and maintenance

The supplied desktop design guide informed the sections on this page. The current app and site theme determine the defaults: system fonts, fluid scales, existing GOV.UK components and task-specific behaviour.

Update the app source first when changing app behaviour, then review this guide and its examples. The site owns its theme copy and builds independently; this page introduces no shared runtime or additional component library.