Configured colours
This page shows the background colours and their matching text and link colours from _config.yml. Alert types have separate border, background, text, and link settings, shown below.
Sample text
How colours are used
Primary colours
- Background
primary_color- Value
#354F52- Text
primary_text_color: #FFFFFF- Link
primary_link_color: #FFFFFF
Sample text
How colours are used
Secondary colours
- Background
secondary_color- Value
#C3D5C7- Text
secondary_text_color: #354F52- Link
secondary_link_color: #354F52
Sample text
How colours are used
Background colours
- Background
background_color- Value
#F4F6F3- Text
background_text_color: #354F52- Link
background_link_color: #354F52
Sample text
How colours are used
Surface colours
- Background
surface_color- Value
#FFFFFF- Text
surface_text_color: #354F52- Link
surface_link_color: #354F52
Sample text
How colours are used
Note colours
- Background
note_background_color- Value
#EDF2EF- Left border
note_color: #354F52- Text
note_text_color: #354F52- Link
note_link_color: #354F52
Sample text
How colours are used
Important colours
- Background
important_background_color- Value
#E7F0EA- Left border
important_color: #527C66- Text
important_text_color: #354F52- Link
important_link_color: #354F52
Sample text
How colours are used
Warning colours
- Background
warning_background_color- Value
#FBECEB- Left border
warning_color: #C83B35- Text
warning_text_color: #354F52- Link
warning_link_color: #922C27
Sample text
How colours are used
Caution colours
- Background
caution_background_color- Value
#FFF3E0- Left border
caution_color: #A86A2B- Text
caution_text_color: #354F52- Link
caution_link_color: #75471A
How these colours are used
- Primary is used for the shared header, primary background bands, primary buttons, and structural rules.
- Secondary is used for secondary background bands, coloured content blocks, and table headers.
- Background is used for the main page and open content areas.
- Surface is used for cards, panels, menus, and neutral buttons.
- Note, Important, Warning, and Caution each have a configured background, left-border colour, and matching text and link colours. These settings are shared by YAML and Markdown alert blocks.
heading_color controls headings on the normal page background, and border_color controls subtle borders. The older text_color setting remains a fallback for background_text_color in existing site configurations.