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

Typestyle
Font
Weight
Size
Line Height
Letter Spacing
$table-value
Montserrat
Montserrat
$body
Montserrat
$heading
Montserrat
$table-title
Montserrat
$body-small
Montserrat
$heading-small
Montserrat
$display-small
Montserrat
$label-optional
Montserrat
$heading-xsmall
Montserrat
$body-xsmall
Montserrat
$display-medium
Montserrat
$highlight
Montserrat
$label
Montserrat
$label-big
Montserrat
$heading-light
Montserrat
$highlight-small
Montserrat
$display-large
Montserrat

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
Last Updated: 8/29/2022, 12:19:43 PM