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
text.primary#001E3E
text.primaryInverted#FFFFFF
text.secondary#637689
text.secondaryInverted#C6CDD4
text.tertiary#9CA7B4
text.tertiaryInverted#9CA7B4
text.disabled#C6CDD4
text.disabledInverted#637689
text.link#096BDB
text.linkInverted#FFFFFF
text.linkHover#0750A4
text.linkHoverInverted#F1F7FD
text.danger#BF4704
text.dangerInverted#FF5E05
text.success#069D4F
text.warning#FFCC00
background.primary#FFFFFF
background.secondary#F1F2F4
background.info#F1F7FD
background.danger#FFF6F1
background.success#F1FAF5
background.warning#FFFCF1
background.primaryEmphasized#001E3E
background.secondaryEmphasized#637689
background.infoEmphasized#096BDB
background.dangerEmphasized#FF5E05
background.successEmphasized#069D4F
background.warningEmphasized#FFCC00
icon.primary#001E3E
icon.primaryInverted#FFFFFF
icon.secondary#637689
icon.secondaryInverted#C6CDD4
icon.tertiary#9CA7B4
icon.tertiaryInverted#9CA7B4
icon.disabled#C6CDD4
icon.disabledInverted#637689
icon.action#096BDB
icon.danger#FF5E05
icon.success#069D4F
icon.warning#FFCC00
border.primary#C6CDD4
border.info#9FC5F1
border.danger#FFC09E
border.success#9ED9BB
border.warning#FFEB9C
border.infoEmphasized#096BDB
border.dangerEmphasized#FF5E05
border.successEmphasized#069D4F
border.warningEmphasized#FFCC00
button.primary.text#FFFFFF
button.primary.icon#FFFFFF
button.primary.background#001E3E
button.primary.border#001E3E
button.primary.textHover#FFFFFF
button.primary.iconHover#FFFFFF
button.primary.backgroundHover#000F1F
button.primary.borderHover#000F1F
button.primary.textDisabled#FFFFFF
button.primary.iconDisabled#FFFFFF
button.primary.backgroundDisabled#C6CDD4
button.primary.borderDisabled#C6CDD4
button.primary.textInverted#096BDB
button.primary.iconInverted#096BDB
button.primary.backgroundInverted#FFFFFF
button.primary.borderInverted#FFFFFF
button.primary.textHoverInverted#FFFFFF
button.primary.iconHoverInverted#FFFFFF
button.primary.backgroundHoverInverted#096BDB
button.primary.borderHoverInverted#096BDB
button.primary.textDisabledInverted#9CA7B4
button.primary.iconDisabledInverted#9CA7B4
button.primary.backgroundDisabledInverted#637689
button.primary.borderDisabledInverted#637689
button.secondary.text#001E3E
button.secondary.icon#001E3E
button.secondary.background#FFFFFF
button.secondary.border#C6CDD4
button.secondary.textHover#001E3E
button.secondary.iconHover#001E3E
button.secondary.backgroundHover#F1F2F4
button.secondary.borderHover#C6CDD4
button.secondary.textDisabled#C6CDD4
button.secondary.iconDisabled#C6CDD4
button.secondary.backgroundDisabled#FFFFFF
button.secondary.borderDisabled#C6CDD4
button.secondary.textInverted#FFFFFF
button.secondary.iconInverted#FFFFFF
button.secondary.backgroundInvertedtransparent
button.secondary.borderInverted#FFFFFF
button.secondary.textHoverInverted#001E3E
button.secondary.iconHoverInverted#001E3E
button.secondary.backgroundHoverInverted#FFFFFF
button.secondary.borderHoverInverted#FFFFFF
button.secondary.textDisabledInverted#637689
button.secondary.iconDisabledInverted#637689
button.secondary.backgroundDisabledInvertedtransparent
button.secondary.borderDisabledInverted#637689
button.danger.text#FFFFFF
button.danger.icon#FFFFFF
button.danger.background#FF5E05
button.danger.border#FF5E05
button.danger.textHover#FFFFFF
button.danger.iconHover#FFFFFF
button.danger.backgroundHover#BF4704
button.danger.borderHover#BF4704
button.danger.textDisabled#FFFFFF
button.danger.iconDisabled#FFFFFF
button.danger.backgroundDisabled#C6CDD4
button.danger.borderDisabled#C6CDD4
button.danger.textInverted#FFFFFF
button.danger.iconInverted#FFFFFF
button.danger.backgroundInverted#FF5E05
button.danger.borderInverted#FF5E05
button.danger.textHoverInverted#FFFFFF
button.danger.iconHoverInverted#FFFFFF
button.danger.backgroundHoverInverted#BF4704
button.danger.borderHoverInverted#BF4704
button.danger.textDisabledInverted#FFFFFF
button.danger.iconDisabledInverted#FFFFFF
button.danger.backgroundDisabledInverted#C6CDD4
button.danger.borderDisabledInverted#C6CDD4
textButton.primary.text#096BDB
textButton.primary.icon#096BDB
textButton.primary.textHover#0750A4
textButton.primary.iconHover#0750A4
textButton.primary.textDisabled#C6CDD4
textButton.primary.iconDisabled#C6CDD4
textButton.primary.textInverted#FFFFFF
textButton.primary.iconInverted#FFFFFF
textButton.primary.textHoverInverted#9CA7B4
textButton.primary.iconHoverInverted#9CA7B4
textButton.primary.textDisabledInverted#637689
textButton.primary.iconDisabledInverted#637689
textButton.danger.text#FF5E05
textButton.danger.icon#FF5E05
textButton.danger.textHover#BF4704
textButton.danger.iconHover#BF4704
textButton.danger.textDisabled#C6CDD4
textButton.danger.iconDisabled#C6CDD4
textButton.danger.textInverted#FF5E05
textButton.danger.iconInverted#FF5E05
textButton.danger.textHoverInverted#BF4704
textButton.danger.iconHoverInverted#BF4704
textButton.danger.textDisabledInverted#637689
textButton.danger.iconDisabledInverted#637689