Skip to main content

Design Tokens

Design Tokens

The colour foundation of the site: brand colours, link colours and the button palette. Components reference these tokens, so the site stays consistent — when a token changes, everything follows.

Live example

Brand colours
brand
#1F4F8A — Primary brand
accent
#2DD4BF — Accent (teal)
accent-darker
#14B8A6 — Accent darker
accent-lighter
#5EEAD4 — Accent lighter
background
#FFFFFF — Default background
background-light
#E5E7EB — Light background
text
#1F2937 — Default text
border
#E5E7EB — Borders
success
#16A34A — Success
danger
#DC2626 — Danger
Link colours
link
#14B8A6 — Default link
link-hover
#0D9488 — Hover
link-active
#E0115F — Active (click)
link-focus
#0D9488 — Keyboard focus
link-visited
#4A2441 — Visited

The 19 brand gradients have their own page: Gradients.

<!-- Gradient background on any container: -->
<div class="topics-grid-container gradient-himmel-kornblume">…</div>

<!-- Coloured logo-grid lines: -->
<div class="logo-grid-container logo-grid-lines-preussen">…</div>
Brand colours
TokenHexNote
brand#1F4F8APrimary brand
accent#2DD4BFAccent (teal)
accent-darker#14B8A6Accent darker
accent-lighter#5EEAD4Accent lighter
background#FFFFFFDefault background
background-light#E5E7EBLight background
text#1F2937Default text
border#E5E7EBBorders
success#16A34ASuccess
danger#DC2626Danger
Link colours
TokenHexNote
link#14B8A6Default link
link-hover#0D9488Hover
link-active#E0115FActive (click)
link-focus#0D9488Keyboard focus
link-visited#4A2441Visited
Button palette
TokenHexNote
button-inactive#E5E7EBBackground, resting
button-hover#14B8A6Background, hover
button-active#2DD4BFBackground, active
button-ring#5EEAD4Focus ring
button-text#1F2937Label
button-text-disabled#9CA3AFLabel, disabled