ReFlex Logo
ReFlex (Title)
Documentation
Navigation

Style Guide

Colors

Primary Color

ColorPrimary
#0071B7, Alpha: 100%
ColorPrimaryLight
#29A6DD, Alpha: 100%
ColorPrimaryLight2
#C0E0EE, Alpha: 100%

Grey

ColorBlack
#000000, Alpha: 100%
ColorGreyDark
#4D4D4D, Alpha: 100%
ColorGreyLight
#949494, Alpha: 100%
ColorGreyLight2
#C7C7C7, Alpha: 100%
ColorGreyLight3
#E1E1E1, Alpha: 100%
ColorGreyLight4
#EFEFEF, Alpha: 100%
ColorWhite
#FFFFFF, Alpha: 100%

Visualization

ColorDark1_100
#002338, Alpha: 100%
ColorDark1_75
#002338, Alpha: 75%
ColorDark2_100
#225473, Alpha: 100%
ColorDark2_75
#225473, Alpha: 75%
ColorDefault_100
#005B94, Alpha: 100%
ColorDefault_75
#005B94, Alpha: 75%
ColorLight2_100
#0071B7, Alpha: 100%
ColorLight2_75
#0071B7, Alpha: 75%
ColorLight1_100
#3F99D1, Alpha: 100%
ColorLight1_75
#3F99D1, Alpha: 75%
ColorLight0_100
#79D2FA, Alpha: 100%
ColorLight0_75
#79D2FA, Alpha: 75%

Signal Colors

ColorSuccess
#026331, Alpha: 100%
ColorSuccessLight
#008D45, Alpha: 100%
ColorError
#6D090C, Alpha: 100%
ColorErrorLight
#BC272D, Alpha: 100%
ColorCalibration
#FFAE18, Alpha: 100%
ColorCalibrationLight
#FFFFCC, Alpha: 100%

Text Styles

Sample Text

Button_Text

Barlow Semi Condensed
14px | 600

Sample Text

Form_Dropdown

Barlow
12px | 700

Sample Text

Form_GroupLabel

Barlow
16px | 700

Sample Text

Form_Input

Barlow Condensed
12px | 400

Sample Text

Form_Label

Barlow
14px | 700

Sample Text

Form_Label-Narrow

Barlow Condensed
14px | 700

Sample Text

Form_Unit

Barlow Condensed
12px | 500

Sample Text

Text

Barlow
12px | 700

Sample Text

Title

Barlow
12px | 700

Sample Text

Title_Label

Barlow
14px | 400

Sample Text

Toggle

Barlow
12px | 400