Design Tokens

SCSS Variable Value Examples

palette

$flx-palette-storm-11 #E8EAEC
$flx-palette-storm-17 #DCDFE1
$flx-palette-storm-28 #C5C9CE
$flx-palette-storm-50 #969EA7
$flx-palette-storm-72 #687480
$flx-palette-storm-83 #515E6D
$flx-palette-storm-100 #2E3E4F
$flx-palette-storm-06 #F3F4F5
$flx-palette-thunder #1B2830
$flx-palette-dusk-70 #A476C1
$flx-palette-dusk-100 #8241AA
$flx-palette-dusk-05 #F9F5FB
$flx-palette-dusk-dark #582c73
$flx-palette-dusk-darker #201029
$flx-palette-azure #2B74DF
$flx-palette-azure-light #98BAEC
$flx-palette-berry #CE2554
$flx-palette-berry-light #E796AC
$flx-palette-golf #00AA65
$flx-palette-golf-light #66D7A9
$flx-palette-pineapple #E6C543
$flx-palette-pineapple-light #EBD068
$flx-palette-crown #806D25
$flx-palette-white #ffffff

color

$flx-color-text #687480
Text colour
$flx-color-text-darker #2E3E4F
Text colour
$flx-color-headings #2E3E4F
Text colour
$flx-color-headings-darker #1B2830
Text colour
$flx-color-table-data #2E3E4F
Text colour
$flx-color-table-data-darker #1B2830
Text colour
$flx-color-link #8241AA
Text colour
$flx-color-link-hover #582c73
Text colour
$flx-color-link-focus #201029
Text colour
$flx-color-alert-text #515E6D
Text colour
$flx-color-alert-info-link #2B74DF
Text colour
$flx-color-alert-success-link #00AA65
Text colour
$flx-color-alert-warning-link #806D25
Text colour
$flx-color-alert-error-link #CE2554
Text colour
$flx-color-reverse-table-data #ffffff
Text colour
$flx-color-reverse-headings #ffffff
Text colour
$flx-color-reverse-text #ffffff
Text colour

fill

$flx-fill-info-icon #98BAEC
$flx-fill-success-icon #66D7A9
$flx-fill-warning-icon #EBD068
$flx-fill-error-icon #E796AC

background

$flx-background-color-button-primary #00AA65
$flx-background-color-button-secondary #ffffff
$flx-background-color-button-destructive #CE2554
$flx-background-color-card #ffffff
$flx-background-color-modal #ffffff
$flx-background-color-alert #ffffff
$flx-background-color-alert-info-icon #2B74DF
$flx-background-color-alert-success-icon #00AA65
$flx-background-color-alert-warning-icon #806D25
$flx-background-color-alert-error-icon #CE2554
$flx-background-color-popover #ffffff
$flx-background-color-tooltip rgba(46, 62, 79, .90)
$flx-background-color-modal-backdrop rgba(46, 62, 79, .85)
$flx-background-color-modal-header #F3F4F5
$flx-background-color-modal-footer #F3F4F5
$flx-background-color-table-row-default #ffffff
$flx-background-color-table-row-selected #F9F5FB
$flx-background-color-table-row-expanded #515E6D
$flx-background-color-checkbox-default #ffffff
$flx-background-color-checkbox-selected #8241AA
$flx-background-color-application #ebeef1

font-family

$flx-font-family 'NeutroMYOB', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

font-size

$flx-font-size-text 1.3rem
Feelix Design System
$flx-font-size-text-small 1.2rem
Feelix Design System
$flx-font-size-button 1.3rem
Feelix Design System
$flx-font-size-heading-x-small 1.3rem
Feelix Design System
$flx-font-size-heading-small 1.4rem
Feelix Design System
$flx-font-size-heading-medium 1.6rem
Feelix Design System
$flx-font-size-heading-large 1.8rem
Feelix Design System
$flx-font-size-heading-x-large 2.4rem
Feelix Design System

line-height

$flx-line-height-reset 1
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
$flx-line-height-text 1.5
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
$flx-line-height-heading 1.25
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

border

$flx-border-thin 1px solid #E8EAEC
$flx-border-thick 2px solid #E8EAEC
$flx-border-button-secondary 1px solid #DCDFE1
$flx-border-modal-header 1px solid #DCDFE1
$flx-border-modal-footer 1px solid #DCDFE1
$flx-border-horizontal-rule 1px solid #E8EAEC
$flx-border-table-row-outline 1px solid #DCDFE1
$flx-border-table-row-selected 2px solid #A476C1
$flx-border-alert-info 2px solid #98BAEC
$flx-border-alert-success 2px solid #66D7A9
$flx-border-alert-warning 2px solid #EBD068
$flx-border-alert-error 2px solid #E796AC

border-radius

$flx-border-radius-card 0.4rem
$flx-border-radius-table-row-selected 0.4rem
$flx-border-radius-alert 0.4rem
$flx-border-radius-popover 0.4rem
$flx-border-radius-modal 0.4rem
$flx-border-radius-button 0.4rem
$flx-border-radius-badge 1.2rem
$flx-border-radius-label 0.2rem
$flx-border-radius-tag 0.2rem

spacing

$flx-spacing-xx-tiny 0.2rem
$flx-spacing-x-tiny 0.4rem
$flx-spacing-tiny 0.8rem
$flx-spacing-x-small 1.2rem
$flx-spacing-small 1.6rem
$flx-spacing-medium 2.0rem
$flx-spacing-large 2.4rem
$flx-spacing-x-large 3.2rem
$flx-spacing-xx-large 4.8rem
$flx-spacing-base 2.4rem
$flx-spacing-clear 0

padding

$flx-padding-card-body 1.6rem
$flx-padding-alert 1.2rem

shadow

$flx-shadow-card 0 1px 2px 0 rgba(46,62,79,0.10)
$flx-shadow-popover 0 0 6px 0 rgba(46,62,79,0.25)
$flx-shadow-modal 0 6px 16px 0 #2E3E4F
$flx-shadow-alert 0 2px 4px 0 rgba(104,116,128,0.10)
$flx-shadow-aside 0 0 6px 0 rgba(46,62,79,0.25)

zindex

$flx-zindex-modal 1050