Design Tokens
Jim Glodkowski — Visual identity reference
Regenerate when token values change
Colours
uxC__greys
0
#FFFFFF
50
#FAFAFA
100
#F5F5F5
200
#EEEEEE
300
#E0E0E0
400
#BDBDBD
500
#9E9E9E
600
#757575
700
#616161
800
#424242
900
#212121
uxC__confirm
uxC__dark
#2E7D32
uxC__neutral
#66BB6A
uxC__light
#C8E6C9
uxC__error
uxC__dark
#8B1A1A
uxC__neutral
#E57373
uxC__light
#FFCDD2
uxC__warning
uxC__dark
#8A6000
uxC__neutral
#FFC107
uxC__light
#FFF8E1
uxC__info
uxC__dark
#0D2B72
uxC__neutral
#2196F3
uxC__light
#BBDEFB
Typography — Families
font.family.display — Playfair Display
The quick brown fox jumps over the lazy dog
font.family.body — Droid Sans
The quick brown fox jumps over the lazy dog
Typography — Sizes
font.size.-1 — 13px
Sample text at 13px
font.size.0 — 16px
Sample text at 16px
font.size.1 — 18px
Sample text at 18px
font.size.2 — 20px
Sample text at 20px
font.size.3 — 23px
Sample text at 23px
font.size.4 — 26px
Sample text at 26px
font.size.5 — 29px
Sample text at 29px
font.size.6 — 32px
Sample text at 32px
font.size.7 — 36px
Sample text at 36px
font.size.8 — 41px
Sample text at 41px
font.size.9 — 46px
Sample text at 46px
Typography — Weights
font.weight.regular — 400
Playfair Display
Droid Sans
font.weight.bold — 700
Playfair Display
Droid Sans
font.weight.extrabold — 800
Playfair Display
Droid Sans
font.weight.black — 900
Playfair Display
Droid Sans
Typography — Line Heights
font.lineHeight.tight — 1.15
This paragraph demonstrates a line-height of 1.15. Enough text to wrap so you can see the vertical rhythm between lines in a real reading context.
font.lineHeight.normal — 1.3
This paragraph demonstrates a line-height of 1.3. Enough text to wrap so you can see the vertical rhythm between lines in a real reading context.
Spacing
spacing.space-zero
0px
spacing.space-S
2px
spacing.space-M
4px
spacing.space-L
8px
spacing.space-XL
16px
spacing.space-2L-DEFAULT
32px
spacing.space-3XL
64px
Borders
border.width.default: 1px | border.style.default: solid
Page (Print Context)
Token
Value
page.size
A4
page.margin.top
90pt
page.margin.side
34pt
page.margin.bottom
28.3pt
page.maxWidth
527.2pt