Colors
Brand Colors
Elements that must reflect the FREE NOW brand should use the primary brand colors. Each color has darker and lighter shades.
Action Blue 1000
#0750A4
Action Blue 900
#096BDB
Action Blue 350
#9FC5F1
Action Blue 50
#F1F7FD
Freedom Red 1000
#BF0820
Freedom Red 900
#FF0A2B
Neutral Colors
Text, backgrounds, lines and borders should use neutral colors. There are additional darker and lighter shades of Authentic Blue, especially for certain backgrounds.
Authentic Blue 1100
#000F1F
Authentic Blue 900
#001E3E
Authentic Blue 550
#637689
Authentic Blue 350
#9CA7B4
Authentic Blue 200
#C6CDD4
Authentic Blue 50
#F1F2F4
White
#FFFFFF
UI Colors
Action buttons, alert messages, and form elements should use the main UI Colors. Input fields, for example, can get positive and negative feedback, whereas alert messages can have warning feedback.
Positive Green 1000
#05763B
Positive Green 900
#069D4F
Positive Green 350
#9ED9BB
Positive Green 50
#F1FAF5
Attention Yellow 900
#FFCC00
Attention Yellow 350
#FFEB9C
Attention Yellow 50
#FFFCF1
Negative Orange 1000
#BF4704
Negative Orange 900
#FF5E05
Negative Orange 350
#FFC09E
Negative Orange 50
#FFF6F1
Bumpy Magenta 1000
#BF00B9
Bumpy Magenta 900
#FF00F7
Bumpy Magenta 350
#FF9CFC
Bumpy Magenta 50
#FFF1FF
Functional Reference
In the table below you can find all functional colors with their name, and their color values. They can be accessed with
the themeGet
function which is exported directly from the library.
import { themeGet } from '@freenow/wave'const myTextColor = themeGet('semanticColors.text.secondary')
Color | Name | Hex Code |
---|