Styles
Colours
Use colours to add interest to your pages and content.
Contents
Brand colours
Always use the provided TNA colour palette.
The greys
| Colour | Hex | Black | #010101 |
Dark grey | #26262a |
Grey | #8c9694 |
Light grey | #d9d9d6 |
White | #ffffff |
|---|
Primary 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
| 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.
Theme colours
Light theme
The light theme is the default that comes with using tna-template.
Dark theme
A dark theme can be used by adding the tna-template--dark-theme class.
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:
tna-template--black-accenttna-template--pink-accenttna-template--orange-accenttna-template--yellow-accenttna-template--green-accenttna-template--blue-accent
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:
tna-accent-blacktna-accent-pinktna-accent-orangetna-accent-yellowtna-accent-greentna-accent-blue
Default (no accent colour)
Black
Pink
Orange
Yellow
Green
Blue
Block colours
The colours of all elements in an element can be controlled with background classes:
tna-background-tint— a light, neutral background colour to highlight an area of the pagetna-background-contrast— a contrasting background and text colourtna-background-accent— a background colour based on the current template accent colourtna-background-accent-light— a lighter background colour based on the current template accent colour
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.
Tint
Contrast
Accent
Light accent
On dark themes, a light accent block will change to an accent block.
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: