Style settings create the shared visual language for every service in a library. They control typography, colours, header and footer presentation, logos, buttons, focus treatment and advanced style overrides. A change that looks small in the preview can affect validation, navigation and accessibility throughout many services, so treat this page as a library-wide release.

Open the library, select Library settings, then Style settings.

Use the preview-to-release workflow

The screen includes a style preview and separate controls for applying the configuration to environments.

flowchart LR
  A[Edit shared style] --> B[Preview representative content]
  B --> C[Apply to Prototype]
  C --> D[Test services and states]
  D --> E[Apply to QA]
  E --> F[Review and approve]
  F --> G[Apply to Production]
  E -->|Problem found| H[Revert QA style]
  G -->|Urgent presentation problem| I[Revert Production style]

Apply to Prototype updates the style used by prototypes and is intended for iteration. Prototype style changes are not recorded as an environment deployment. QA and Production show who last applied the style and when, and provide environment-specific revert controls.

Choose how the brand is defined

The Brand source area lets you import style cues from a website or configure the style manually. Treat an imported result as a starting point: inspect it for contrast, legibility and consistency before applying it.

Brand mode selects the starting theme. Screen width controls the maximum content presentation. A wider screen may help data-heavy services, but it can make ordinary questions harder to scan. Check long paragraphs, tables, grids and narrow screens before changing the shared width.

Configure typography

The font area includes:

• the default typeface, a listed typeface or an imported custom font;
• overall font-size scaling from the smallest to the largest preset;
• regular, bold and link font weights.

Use a typeface that is licensed for web use and includes the characters required by every supported language. Test bold labels, error summaries, hint text, code-like values and browser zoom. Avoid using weight alone to communicate meaning.

Build the header

Header settings control:

• header and optional sub-header colours;
• header and sub-header text colours;
• the brand image, image height and alternative text;
• the brand link destination and brand title;
• title offset and vertical alignment;
• navigation-link alignment;
• whether the brand title collapses beside the service header;
• the service-name offset.

The image uploader accepts common raster and vector formats and enforces a file-size limit. Use a crisp source image, keep its proportions intact and enter alternative text that communicates the image’s purpose. If the image is purely decorative and the adjacent text already names the brand, avoid duplicating the same words unnecessarily.

The header preview is useful for alignment, but also open real services with long names and multiple navigation links. Test at narrow widths and high zoom, where a header that fits on a large screen may wrap or overlap.

Set the favicon

Choose the platform default, upload a dedicated favicon or use the header brand image. A dedicated square asset usually produces the clearest browser-tab icon. Check the preview at its small rendered size; fine detail and long text will disappear.

Set colour groups

The screen groups colour choices by purpose:

Do not check a colour in isolation. Test each foreground and background pair, hover and focus states, disabled controls, validation errors and visited links. Colour must not be the only way a state is communicated.

Choose button and focus treatments

Button styles range from square and rounded treatments to compact, spacious, outline, tonal, gradient and raised variants. Choose one that remains recognisable as an action across mobile, desktop and high-zoom layouts. Test long labels and button groups as well as a single short button.

Focus style controls whether focus is shown as a border or a fill. Focus on click determines whether a pointer click also shows the focus treatment. Keyboard focus must always remain clearly visible. Check links, inputs, radios, checkboxes, accordions, file controls and destructive buttons.

Configure the footer

Footer content can include:

• the automatically generated or a custom accessibility-statement link;
• a cookies link;
• repeatable custom links;
• an optional platform attribution;
• an optional footer image and footer text;
• other optional platform footer items where available.

Keep links relevant across all services in the library. Use descriptive link text, valid destinations and current policy pages. If services require different legal or support destinations, configure those at service level where the option exists rather than forcing one misleading library-wide link.

Use advanced styling only when necessary

The advanced customisation area supports CSS and Sass. These overrides are powerful enough to undo standard spacing, hide content, weaken focus indicators or break layouts after a platform update.

Before adding an override:

1. Confirm that a standard control cannot meet the need.
2. Record the selector, purpose, owner and affected components.
3. Keep the rule narrowly scoped.
4. Test common components, errors, review pages, task lists and mobile layouts.
5. Recheck the override after platform updates.

Never hide required content or validation solely with CSS. Do not rely on generated class names that may change.

Style release checklist

• The header works with short and long service names.
• Text, links, controls, errors and focus states have sufficient contrast.
• Content remains usable at 200% zoom and on a narrow screen.
• Uploaded images are sharp, appropriately sized and have useful alternative text.
• Buttons are recognisable in normal, hover, focus and disabled states.
• Footer links are valid and appropriate for every service.
• Representative question, task-list, check-answers, error and completion pages have been checked.
• QA was reviewed before Production was updated.
• A revert approach and owner are known.

Related guides

• Library settings
• Service content, branding and languages
• Design accessible services
• Service environments and deployments