Design Tokens
Design tokens are the atoms of the system as Salesforce describes them. In Geoblink Design System they are used instead of hard coded values to ensure a better consistency across any platform.
Color Palette
blue
RGB: #1464A5
SCSS: $color-blue
blue dark
RGB: #17293D
SCSS: $color-blue-dark
blue light
RGB: #6FA1D4
SCSS: $color-blue-light
blue readable background
RGB: #E7EFF6
SCSS: $color-blue-readable-background
blue readable border
RGB: #BCD3E5
SCSS: $color-blue-readable-border
link
RGB: #4A90E2
SCSS: $color-link
red
RGB: #FF594F
SCSS: $color-red
red dark
RGB: #e54f47
SCSS: $color-red-dark
red darker
RGB: #99352f
SCSS: $color-red-darker
red readable background
RGB: #FFE6E5
SCSS: $color-red-readable-background
red readable border
RGB: #FFBCB8
SCSS: $color-red-readable-border
yellow
RGB: #EFAE00
SCSS: $color-yellow
yellow dark
RGB: #d59d00
SCSS: $color-yellow-dark
yellow darker
RGB: #896400
SCSS: $color-yellow-darker
yellow highlight
RGB: yellow
SCSS: $color-yellow-highlight
yellow light
RGB: #FFDB7C
SCSS: $color-yellow-light
yellow readable background
RGB: #FFF6DE
SCSS: $color-yellow-readable-background
yellow readable border
RGB: #FFDB7C
SCSS: $color-yellow-readable-border
green
RGB: #3FAD4D
SCSS: $color-green
green dark
RGB: #369342
SCSS: $color-green-dark
green darker
RGB: #1a4720
SCSS: $color-green-darker
green light
RGB: #7ED321
SCSS: $color-green-light
green notification
RGB: #53C798
SCSS: $color-green-notification
green readable background
RGB: #EBF6ED
SCSS: $color-green-readable-background
green readable border
RGB: #B7DFBC
SCSS: $color-green-readable-border
black
RGB: #000000
SCSS: $color-black
dark
RGB: #17293D
SCSS: $color-dark
dark overlay
RGB: rgba(0, 0, 0, .8)
SCSS: $color-dark-overlay
grey
RGB: #D8D8D8
SCSS: $color-grey
grey backdrop
RGB: rgba(74, 74, 74, .4)
SCSS: $color-grey-backdrop
grey dark
RGB: #4F4F4F
SCSS: $color-grey-dark
grey darker
RGB: #4A4A4A
SCSS: $color-grey-darker
grey light
RGB: #9B9B9B
SCSS: $color-grey-light
white
RGB: #FFFFFF
SCSS: $color-white
white dark
RGB: #F4F4F4
SCSS: $color-white-dark
white darker
RGB: #EBEBEB
SCSS: $color-white-darker
white disabled
RGB: rgba(210, 210, 210, .4)
SCSS: $color-white-disabled
Fonts
Spacing
$space-xx-large (50px)
$space-x-large (40px)
$space-large (30px)
$space-base (20px)
$space-small (10px)
$space-x-small (5px)
All tokens
| Token Name | Value | Category |
|---|---|---|
$border-radius-circle | 50% | border-radius |
$border-radius-default | 3px | border-radius |
$box-shadow-button-hover | 0 2px 10px 0 rgba(0, 0, 0, 0.3) | box-shadow |
$box-shadow-focus | 0 0 0 2px rgba(#1464A5, 0.3) | box-shadow |
$box-shadow-focus-error | 0 0 0 2px rgba(#FF594F, 0.3) | box-shadow |
$box-shadow-focus-success | 0 0 0 2px rgba(#3FAD4D, 0.3) | box-shadow |
$box-shadow-regular | 0 14px 24px -12px rgba(0, 0, 0, 0.2) | box-shadow |
$box-shadow-small | 0 2px 5px -3px rgba(0, 0, 0, 0.5) | box-shadow |
$box-shadow-small-inset | inset 0 2px 5px 0 rgba(0, 0, 0, 0.3) | box-shadow |
$color-blue | #1464A5 | color_group_1 |
$color-blue-dark | #17293D | color_group_1 |
$color-blue-light | #6FA1D4 | color_group_1 |
$color-blue-readable-background | #E7EFF6 | color_group_1 |
$color-blue-readable-border | #BCD3E5 | color_group_1 |
$color-link | #4A90E2 | color_group_1 |
$color-red | #FF594F | color_group_3 |
$color-red-dark | #e54f47 | color_group_3 |
$color-red-darker | #99352f | color_group_3 |
$color-red-readable-background | #FFE6E5 | color_group_3 |
$color-red-readable-border | #FFBCB8 | color_group_3 |
$color-yellow | #EFAE00 | color_group_4 |
$color-yellow-dark | #d59d00 | color_group_4 |
$color-yellow-darker | #896400 | color_group_4 |
$color-yellow-highlight | yellow | color_group_4 |
$color-yellow-light | #FFDB7C | color_group_4 |
$color-yellow-readable-background | #FFF6DE | color_group_4 |
$color-yellow-readable-border | #FFDB7C | color_group_4 |
$color-green | #3FAD4D | color_group_5 |
$color-green-dark | #369342 | color_group_5 |
$color-green-darker | #1a4720 | color_group_5 |
$color-green-light | #7ED321 | color_group_5 |
$color-green-notification | #53C798 | color_group_5 |
$color-green-readable-background | #EBF6ED | color_group_5 |
$color-green-readable-border | #B7DFBC | color_group_5 |
$color-black | #000000 | color_group_6 |
$color-dark | #17293D | color_group_6 |
$color-dark-overlay | rgba(0, 0, 0, .8) | color_group_6 |
$color-grey | #D8D8D8 | color_group_6 |
$color-grey-backdrop | rgba(74, 74, 74, .4) | color_group_6 |
$color-grey-dark | #4F4F4F | color_group_6 |
$color-grey-darker | #4A4A4A | color_group_6 |
$color-grey-light | #9B9B9B | color_group_6 |
$color-white | #FFFFFF | color_group_6 |
$color-white-dark | #F4F4F4 | color_group_6 |
$color-white-darker | #EBEBEB | color_group_6 |
$color-white-disabled | rgba(210, 210, 210, .4) | color_group_6 |
$easing-base | ease-in-out | easing |
$body | body | font |
$body-small | body_small | font |
$body-xsmall | body_xsmall | font |
$display-large | display_large | font |
$display-medium | display_medium | font |
$display-small | display_small | font |
$heading | heading | font |
$heading-light | heading_light | font |
$heading-small | heading_small | font |
$heading-xsmall | heading_xsmall | font |
$highlight | highlight | font |
$highlight-small | highlight_small | font |
$label | label | font |
$label-big | label_big | font |
$label-optional | label_optional | font |
$table-title | table_title | font |
$table-value | table_value | font |
$font-family-heading | 'Montserrat', Times New Roman, serif | font-family |
$font-family-text | 'Lato', Helvetica, sans-serif | font-family |
$font-size-large | 24px | font-size |
$font-size-medium | 18px | font-size |
$font-size-regular | 14px | font-size |
$font-size-small | 12px | font-size |
$font-size-xlarge | 28px | font-size |
$font-size-xsmall | 10px | font-size |
$font-size-xxsmall | 8px | font-size |
$font-weight-bold | 700 | font-weight |
$font-weight-light | 300 | font-weight |
$font-weight-medium | 500 | font-weight |
$font-weight-regular | 400 | font-weight |
$font-weight-semi-bold | 600 | font-weight |
$letter-spacing-base | 0 | letter-spacing |
$letter-spacing-large | 1px | letter-spacing |
$letter-spacing-small | -0.5px | letter-spacing |
$letter-spacing-x-large | 2px | letter-spacing |
$letter-spacing-x-small | -1px | letter-spacing |
$line-height-base | 1.5 | line-height |
$line-height-heading | 1 | line-height |
$line-height-small | 1.3 | line-height |
$media-query-large | (min-width: 1024px) | media-query |
$media-query-medium | (min-width: 768px) | media-query |
$opacity-disabled | 0.5 | opacity |
$height-footer | 64px | size |
$size-medium | 18px | size |
$tappable-square | 44px | size |
$space-base | 20px | space |
$space-large | 30px | space |
$space-small | 10px | space |
$space-x-large | 40px | space |
$space-x-small | 5px | space |
$space-xx-large | 50px | space |
$duration-noticeable | 0.2s | time |
$duration-quickly | 0.08s | time |
$duration-slowly | 0.5s | time |
$z-index-modal | 9999 | z-index |
$z-index-over-modal | 10000 | z-index |
$z-index-sticky | 100 | z-index |
$z-index-tooltip | 10001 | z-index |