Swatch

A <Swatch> is a colored block element. It highlights a particular color, and provides additional information to it.

#FF00FF

You can provide a meaningful name along with the color value. This helps users to correlate the color to names used outside of this documentation, for example in a design system.

Primary
#FF00FF

Use the secondary label to add a secondary explanation or reference.

Primary
#FF00FF
Red 700

In a Grid

@blue1
#0E5A8A
@blue2
#106BA3
@blue3
#137CBD
@blue4
#2B95D6
@blue5
#48AFF0

Another example

Access
#F58221
Orange 300
Use
#D9418D
Red 500
Innovation
#B87AF2
Violett 500
Jobs
#4188D9
Blue 500
Society
#4AE6CC
Trust
#1FD35B
Green 400
Market Openness
#C4D534