+
+

Design Tokens

What are design tokens?

Design tokens are a way to define atomic style items in an agnostic way. This helps to use Harmonium not only in sass and the web, but to other platforms such as native mobile.

For more information on design tokens, check out the post here

Blur

TokenValue
Token:
$blur-disabled
Value:
blur(0)
Token:
$blur-enabled
Value:
blur(8px)

Border Radius

TokenValue
Token:
$border-radius-small
Value:
3px
Token:
$border-radius-rounded
Value:
100000px

Colors

TokenValue
Token:
$color-black
Value:
#000000
Token:
$color-black-0
For animation purposes
Value:
rgba(0, 0, 0, 0)
Token:
$color-black-03
Value:
rgba(0, 0, 0, 0.03)
Token:
$color-black-06
Value:
rgba(0, 0, 0, 0.06)
Token:
$color-black-10
Value:
rgba(0, 0, 0, 0.1)
Token:
$color-black-20
Value:
rgba(0, 0, 0, 0.2)
Token:
$color-black-30
Value:
rgba(0, 0, 0, 0.3)
Token:
$color-black-40
Value:
rgba(0, 0, 0, 0.4)
Token:
$color-black-50
Value:
rgba(0, 0, 0, 0.5)
Token:
$color-black-60
Value:
rgba(0, 0, 0, 0.6)
Token:
$color-black-70
Value:
rgba(0, 0, 0, 0.7)
Token:
$color-black-80
Value:
rgba(0, 0, 0, 0.8)
Token:
$color-black-90
Value:
rgba(0, 0, 0, 0.9)
Token:
$color-brand-primary
Value:
#295de5
Token:
$color-brand-secondary
Value:
#6422eb
Token:
$color-brand-tertiary
Value:
#501bbc
Token:
$color-dark-gray
Value:
#565656
Token:
$color-darker-gray
Value:
#2a2a2a
Token:
$color-disabled
Value:
#ababab
Token:
$color-divider
Value:
rgba(0, 0, 0, 0.1)
Token:
$color-divider-dark
Value:
rgba(0, 0, 0, 0.2)
Token:
$color-divider-light
Value:
rgba(255, 255, 255, 0.1)
Token:
$color-gray
Value:
#818181
Token:
$color-light-gray
Value:
#ababab
Token:
$color-lighter-gray
Value:
#d5d5d5
Token:
$color-lightest-gray
Value:
#f4f4f4
Token:
$color-muted
Value:
#d5d5d5
Token:
$color-ui-alert
Value:
#d94011
Token:
$color-ui-error
Value:
#d10034
Token:
$color-ui-primary
Value:
#295de5
Token:
$color-ui-success
Value:
#00a67f
Token:
$color-ui-warning
Value:
#d10034
Token:
$color-very-muted
Value:
#f4f4f4
Token:
$color-white
Value:
#ffffff
Token:
$color-white-0
For animation purposes
Value:
rgba(255, 255, 255, 0)
Token:
$color-white-03
Value:
rgba(255, 255, 255, 0.03)
Token:
$color-white-06
Value:
rgba(255, 255, 255, 0.06)
Token:
$color-white-10
Value:
rgba(255, 255, 255, 0.1)
Token:
$color-white-20
Value:
rgba(255, 255, 255, 0.2)
Token:
$color-white-30
Value:
rgba(255, 255, 255, 0.3)
Token:
$color-white-40
Value:
rgba(255, 255, 255, 0.4)
Token:
$color-white-50
Value:
rgba(255, 255, 255, 0.5)
Token:
$color-white-60
Value:
rgba(255, 255, 255, 0.6)
Token:
$color-white-70
Value:
rgba(255, 255, 255, 0.7)
Token:
$color-white-80
Value:
rgba(255, 255, 255, 0.8)
Token:
$color-white-90
Value:
rgba(255, 255, 255, 0.9)

Fonts

TokenValue
Token:
$font-family-monospace
Value:
'Montserrat', sans-serif
Harmonium
Token:
$font-family-serif
Value:
'Georgia', serif
Harmonium
Token:
$font-family-sans-serif
Value:
'Roboto', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif
Harmonium

Fonts Sizes

TokenValue
Token:
$font-size-tiny
the smallest size of the font
Value:
1rem
Harmonium
Token:
$font-size-smaller
a smaller font size
Value:
1.2rem
Harmonium
Token:
$font-size-small
the small size of the font
Value:
1.4rem
Harmonium
Token:
$font-size-medium
the medium size of the font
Value:
2rem
Harmonium
Token:
$font-size-large
the large size of the font
Value:
2.4rem
Harmonium
Token:
$font-size-larger
a larger font size
Value:
3.6rem
Harmonium
Token:
$font-size-largest
the largest size of the font
Value:
4.2rem
Harmonium
Token:
$font-size-base
the base size of the font
Value:
1.6rem
Harmonium

Font Weights

TokenValue
Token:
$font-weight-light
Value:
300
The quick brown fox jumped over the lazy dog.
Token:
$font-weight-normal
Value:
400
The quick brown fox jumped over the lazy dog.
Token:
$font-weight-bold
Value:
700
The quick brown fox jumped over the lazy dog.

Grid

TokenValue
Token:
$grid-column-padding
Value:
12px
Token:
$grid-columns
Value:
12
Token:
$grid-gutter
Value:
12px * 2
Token:
$grid-row-width
Value:
1024px

Icon Sizes

TokenValue
Token:
$icon-size-base
Value:
24px
Token:
$icon-size-large
Value:
48px
Token:
$icon-size-larger
Value:
64px
Token:
$icon-size-largest
Value:
128px
Token:
$icon-size-medium
Value:
24px
Token:
$icon-size-small
Value:
16px
Token:
$icon-size-tiny
Value:
8px

Line Heights

TokenValue
Token:
$line-height-base
Value:
2.4rem
Token:
$line-height-global
Value:
1.5
Token:
$line-height-header
Value:
1.1

Opacity

TokenValue
Token:
$opacity-disabled
Value:
0.35

Screen Widths

TokenValue
Token:
$screen-width-full
Value:
100%
Token:
$screen-width-large
Value:
1024px
Token:
$screen-width-medium
Value:
768px
Token:
$screen-width-nav
Value:
768px
Token:
$screen-width-small
Value:
0
Token:
$screen-width-xlarge
Value:
1200px
Token:
$screen-width-xxlarge
Value:
1440px

Shadows

TokenValue
Token:
$box-shadow-default
Value:
0 1px 4px 0 rgba(0, 0, 0, 0.3)
Token:
$box-shadow-hover
Value:
0 2px 6px 0 rgba(0, 0, 0, 0.5)
Token:
$box-shadow-active
Value:
0 1px 2px 0 rgba(0, 0, 0, 0.3)

Spacing

TokenValue
Token:
$spacing-tiny
Value:
6px
Token:
$spacing-small
Value:
12px
Token:
$spacing-medium
Value:
24px
Token:
$spacing-large
Value:
48px
Token:
$spacing-larger
Value:
72px
Token:
$spacing-base
Value:
24px

Z-Index

TokenValue
Token:
$z-index-above
Value:
1
Token:
$z-index-above-everything
Value:
1000
Token:
$z-index-above-most
Value:
10
Token:
$z-index-below
Value:
-1
Token:
$z-index-below-everything
Value:
-1000
Token:
$z-index-below-most
Value:
-10
Token:
$z-index-default
Value:
0