Design Tokens
Design tokens are the atoms of the system as Salesforce (opens new window) 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 |