Skip to main content Skip to list of styles
Beta

This is a new service – give us your feedback to help improve it.

Styles

Colours

Use colours to add interest to your pages and content.

Contents

  1. Brand colours
  2. Themes
  3. Accent colours
  4. Block colours
  5. Colour contrast

Always use the provided TNA colour palette.

Colour Hex
Black #010101
Dark grey #26262a
Grey #8c9694
Light grey #d9d9d6
White #ffffff
Colour Main Darks Lights
Pink #fe1d57 #9c193a (Maroon) #fad3d4 (Pastel pink)
Orange #fd3f03 #8f3415 (Chestnut) #f9e1bc (Pastel orange)
Yellow #ffcc00 #654e37 (Brown) #f9f7e2 (Cream)
Green #86bc25 #00623b (Forest) #dde5d5 (Pastel green)
Blue #00b0ff #004c7e (Navy) #d4e5ef (Pastel blue)
Colour Light theme Dark theme
Page background #f4f4f4 #212223
Tinted background #d9d9d6 #323334
Contrasting background #1e1e1e #101112
Base font #343338 #ffffff
Keylines #26262a40 #ffffff40
Dark keylines #26262a #ffffffbf
Links #0062a8 #00b0ff
Visited links #4c2c92 #aa88ff

Ou full list of web colours can be found in the colour variables for TNA Frontend.

TNA Frontend has support for three themes:

The light theme is the default that comes with using the tna-template class if the dark or system themes are not specified.

Open this example in new tab

A dark theme can be used by adding the tna-template--dark-theme class to the <html> element.

Open this example in new tab

The system theme can be used with tna-template--system-theme and follows the operating system preference for prefers-color-scheme (MDN Web Docs - prefers-color-scheme) which can either be light or dark.

Using the system theme will either display the light theme or dark theme, depending on the preference set in the user’s operating system.

<html class="tna-template tna-template--system-theme">
  <head>
    <title>System theme</title>
  </head>
  <body class="tna-template__body">
    <p>Hello world</p>
  </body>
</html>

The high contrast themes are applied on top of the existing light and dark themes. All themes follow the preference for prefers-contrast which can be no-preference, more, less or custom. See MDN Web Docs - prefers-contrast.

TNA Frontend currently only supports the prefers-contrast values of no-preference and more.

The colour tools from TNA Frontend come with a mixin for high-contrast which enables you to add styles when high contrast mode is enabled:

@use "@nationalarchives/frontend/nationalarchives/tools/colour";

.my-component {
  @include colour.on-high-contrast {
    @include colour.colour-border("keyline-dark", 1px);
  }
}

Accent colours can be added on a per-page basis. Add one of the following classes to the .tna-template element:

Elements that can follow the accent colour such as tna-button--accent and the generic classes such as tna-background-accent will inherit the accent theme colours.

Accent colours can also be added on a per-element basis. Use one of the following classes to add the appropriate accent colour:

Open this example in new tab
Open this example in new tab
Open this example in new tab
Open this example in new tab
Open this example in new tab
Open this example in new tab
Open this example in new tab

The colours of all elements in an element can be controlled with background classes:

The appropriate colours for all child elements such as text and links will also be set. You do not have to change their colours independently.

Open this example in new tab
Open this example in new tab
Open this example in new tab
Open this example in new tab

On dark themes, a light accent block will change to an accent block.

You must make sure that the contrast ratio of text and interactive elements in your service meets level AA of the Web Content Accessibility Guidelines (WCAG 2.2).

In TNA Frontend, we check as many light colour combinations and dark colour combinations as we can for good contrast but there are still some combinations that should be avoided. For example the error summary component doesn't have enough contrast with its surroundings when used within an accented block.

Ensure you check for proper colour contrast in your service for both text and non-text elements:

Don't rely on using colour alone to indicate interactivity with elements and components. Interactions such as hovering and focusing should utilise a change of shape.

For example, adding an outline to a focused button or link is good but might not create enough contrast with the background to be able to be seen clearly. Consider changing the size of any text decorations (such as underlines) or changing the border and background colours to create a larger change in contrast between them.


Back to top