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.backgroundInverted`	`transparent`
	`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.backgroundDisabledInverted`	`transparent`
	`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`
	`forms.toggle.default.slideOff`	`#FFFFFF`
	`forms.toggle.default.slideOn`	`#FFFFFF`
	`forms.toggle.default.frameOff`	`#C6CDD4`
	`forms.toggle.default.frameOn`	`#096BDB`
	`forms.toggle.error.slideOff`	`#FFFFFF`
	`forms.toggle.error.slideOn`	`#FFFFFF`
	`forms.toggle.error.frameOff`	`#C6CDD4`
	`forms.toggle.error.frameOn`	`#FF5E05`
	`forms.toggle.disabled.slideOff`	`#F1F2F4`
	`forms.toggle.disabled.slideOn`	`#F1F2F4`
	`forms.toggle.disabled.frameOff`	`#F1F2F4`
	`forms.toggle.disabled.frameOn`	`#F1F2F4`
	`forms.datePicker.calendar.border`	`#C6CDD4`
	`forms.datePicker.calendar.borderHover`	`#C6CDD4`
	`forms.datePicker.calendar.borderRange`	`#9FC5F1`
	`forms.datePicker.calendar.borderSelected`	`#0750A4`
	`forms.datePicker.calendar.borderRangeHover`	`#9FC5F1`
	`forms.datePicker.calendar.background`	`#FFFFFF`
	`forms.datePicker.calendar.backgroundHover`	`#F1F2F4`
	`forms.datePicker.calendar.backgroundRange`	`#F1F7FD`
	`forms.datePicker.calendar.backgroundSelected`	`#096BDB`
	`forms.datePicker.calendar.backgroundRangeHover`	`#9FC5F1`
	`table.skeleton`	`#F1F2F4`
	`table.zebraStyles.backgroundSecondary`	`rgba(241, 242, 244, 0.4)`
	`table.zebraStyles.backgroundHover`	`#E4EFFB`
	`table.zebraStyles.backgroundActive`	`#D6E6F9`
	`table.linesStyles.backgroundHover`	`#F1F7FD`
	`table.linesStyles.backgroundActive`	`#E4EFFB`
	`table.linesStyles.border`	`#C6CDD4`
	`table.blank.backgroundHover`	`#F1F7FD`
	`table.blank.backgroundActive`	`#E4EFFB`
	`table.header.border`	`#637689`
	`dialog.dimming`	`rgba(0, 15, 31, 0.6)`