Skip to main content Skip to list of styles
Service phase: 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

Brand colours

Always use the provided TNA colour palette.

The greys

The various shades of grey in the National Archives colour palette
Colour Hex
Black #010101
Dark grey #26262a
Grey #8c9694
Light grey #d9d9d6
White #ffffff

Primary colour palette

The primary colours in the National Archives colour palette
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)

Extra web colour palette

Extra National Archives colours for web use
Colour Light theme Dark theme
Page background #f4f4f4 #212223
Tinted background #d9d9d6 #323334
Contrast background #1e1e1e #101112
Light font #01010194 #ffffffa6
Base font #343338 #fffffff2
Dark font #010101 #ffffff
Keyline #26262a40 #ffffff40
Dark keyline #26262a #ffffffbf
Link #0062a8 #00b0ff
Visited link #4c2c92 #aa88ff
Form error border #c20000 #ff0000
Form error text #c20000 #ff6b6b

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

Themes

TNA Frontend has support for three themes:

Light theme

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

Dark theme

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

Open this example in new tab

System theme

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>

High contrast themes

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

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:

Default (no accent colour)

Open this example in new tab

Black

Open this example in new tab

Pink

Open this example in new tab

Orange

Open this example in new tab

Yellow

Open this example in new tab

Green

Open this example in new tab

Blue

Open this example in new tab

Block colours

The colours of all elements in an element can be controlled with block 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.

Avoid nesting block colours inside other block colours.

Tint

Open this example in new tab

Contrast

Open this example in new tab

Accent

Open this example in new tab

Light accent

Open this example in new tab

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

Using colours in SCSS

TNA Frontend includes tools for using the colours available in the web palette. 

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

div {
  // Colour text using a variable
  @include colour.colour-font("font-light");

  // Colour the background using a variable
  @include colour.colour-background("contrast-background");
  // ...or using a brand colour
  @include colour.colour-background-brand("pink");

  // Apply a coloured border using a variable
  @include colour.colour-border("keyline-dark", 1px);
  // ...or apply it to only one side
  @include colour.colour-border("keyline-dark", 1px, solid, top);

  // Colour an outline using a variable
  @include colour.colour-outline("keyline", 1px);

  // Apply a fill colour using a variable
  @include colour.colour-fill("font-dark", 1px);

  // Add a thick keyline border
  @include colour.thick-keyline();
  // ...or use the darker keyline
  @include colour.thick-keyline-dark();
  // ...or the current accent colour
  @include colour.thick-keyline-accent();
  // ...or the error colour
  @include colour.thick-keyline-error();
  // ...or a brand colour
  @include colour.thick-keyline-brand("", "pink");
  // Apply it to just one side (works on all "thick-keyline" variants)
  @include colour.thick-keyline(left);
  // ...or make it even thicker (works on all "thick-keyline" variants)
  @include colour.thick-keyline(left, true);
}

Colour contrast

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:

Check colour combinations of various different visual impairments with WhoCanUse.

Interactive 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.

Styles

Back to top