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.
Themes
TNA Frontend has support for three themes:
- light theme
- dark theme
- system theme (which uses either the light or dark theme)
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.
Dark theme
A dark theme can be used by adding the tna-template--dark-theme
class to the <html>
element.
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-accent
tna-template--pink-accent
tna-template--orange-accent
tna-template--yellow-accent
tna-template--green-accent
tna-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-black
tna-accent-pink
tna-accent-orange
tna-accent-yellow
tna-accent-green
tna-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:
- Understanding Success Criterion 1.4.3: Contrast (Minimum)
- Understanding Success Criterion 1.4.11: Non-text Contrast
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.