Home
About me
Work examples
Yayzy
NHS
Oakbrook Finance
Skills
Leadership
Approach
Design systems
Resources

Styles

Token naming framework

A consistent structure and order of token names helps understand and use the tokens.
Example tokens using framework

Token sets

Tokens are are building blocks of components
Global
Medium
Large
X large
ag
global
size
root
base
16
xx_small
{size.root.base}*0.25
x_small
{size.root.base}*0.5
small
{size.root.base}*0.75
regular
{size.root.base}
medium
{size.root.base}*1.5
x_medium
{size.root.base}*2
xx_medium
{size.root.base}*2.5
xxx_medium
{size.root.base}*3
large
{size.root.base}*4
x_large
{size.root.base}*5
xx_large
{size.root.base}*6
xxx_large
{size.root.base}*7
button
large
{size.xxx_medium}
small
{size.xx_medium}
spacing
button
large
padding_left_right
{size.regular}
small
padding_left_right
{size.medium}
text
heading
margin_bottom_small
{size.regular}
para
margin_bottom_small
{size.x_medium}
form
field_margin_bottom
{size.x_small}
section
field_margin_bottom
{size.x_large}
color
root
zinc
50
#F3F2F2
100
#E7E4E6
200
#CECACC
300
#B6AFB3
400
#9D9599
500
#857A80
600
#6A6266
700
#50494D
800
#353133
900
#1B181A
salmon
50
#ffeae5
100
#ffd5cc
200
#ffb7a8
300
#ff9580
400
#ff6242
500
#ff2a00
600
#c20
700
#991900
800
#610
900
#330900
blue
50
#ECF7F9
100
#C6E7EC
200
#B3E0E6
300
#8CD0D9
400
#66C0CC
500
#40B0BF
600
#338D99
700
#266A73
800
#1A474D
900
#0D2326
purple
50
#f4ebfa
100
#E8D6F5
200
#D1ADEB
300
#BA85E0
400
#A35CD6
500
#8731C4
600
#7029A3
700
#541F7A
800
#381452
900
#1C0A29
green
50
#ECF9F0
100
#C6ECD2
200
#B3E6C4
300
#8CD9A6
400
#66CC88
500
#40BF6A
600
#349D57
700
#267340
800
#1A4D2B
900
#0D2615
mono
800
#ffffff
900
#000000
brand
primary
{color.root.salmon.200}
secondary
{color.root.zinc.700}
scheme
one
light
{color.root.salmon.50}
mid
{color.root.salmon.100}
dark
{color.root.salmon.200}
accent
{color.root.salmon.300}
two
light
{color.root.blue.50}
mid
{color.root.blue.100}
dark
{color.root.blue.300}
accent
{color.root.blue.400}
three
light
{color.root.purple.50}
mid
{color.root.purple.100}
dark
{color.root.purple.200}
accent
{color.root.purple.300}
four
light
{color.root.green.50}
mid
{color.root.green.100}
dark
{color.root.green.300}
accent
{color.root.green.400}
semantic
alert
{color.root.salmon.500}
alert_negative
{color.semantic.alert}
alert_positive
{color.root.green.500}
neutral
dark
{color.root.zinc.300}
medium
{color.root.zinc.200}
light
{color.root.zinc.50}
border
regular
{color.neutral.dark}
light
{color.neutral.medium}
focus
{color.brand.primary}
Text
dark
{color.brand.secondary}
light
{color.root.mono.light}
subtle
{color.root.zinc.300}
icon
dark
foreground
{color.brand.secondary}
foreground_subtle
{color.root.zinc.300}
light
foreground
{color.root.mono.light}
page
background
light
{color.root.mono.light}
subtle
{color.neutral.light}
scheme_one
{color.scheme.one.light}
scheme_one
{color.scheme.one.light}
scheme_one
{color.scheme.one.light}
scheme_one
{color.scheme.one.light}
button
bg_scheme_one
{color.scheme.one.dark}
bg_scheme_two
{color.scheme.two.dark}
bg_scheme_three
{color.scheme.three.dark}
bg_scheme_four
{color.scheme.four.dark}
focus_scheme_one
{color.scheme.one.dark}
focus_scheme_two
{color.scheme.two.dark}
focus_scheme_three
{color.scheme.three.dark}
focus_scheme_four
{color.scheme.four.dark}
hover_scheme_one
{color.scheme.one.accent
hover_scheme_two
{color.scheme.two.accent}
hover_scheme_three
{color.scheme.three.accent}
hover_scheme_four
{color.scheme.four.accent}
text
{color.text.dark}
icon
{color.icon.dark.foreground}
input
default
background
{color.root.mono.light}
border
{color.border.regular}
icon
{color.icon.dark.foreground}
label_text
{color.text.dark}
field_text
{color.text.dark}
placeholder_text
{color.text.subtle}
error_text
{color.semantic.alert_negative}
hover
border
{color.border.focus}
focus
border
{color.border.focus}
disabled
label_text
{color.text.subtle}
icon
{color.icon.dark.foreground_subtle}
error
border
{color.semantic.alert_negative}
icon
{color.semantic.alert_negative}
label_text
{color.semantic.alert_negative}
field_text
{color.semantic.alert_negative}
placeholder_text
{color.semantic.alert_negative}
border_radius
root
full_rounded
{size.xxx_large}
rounded_corner
{size.x_small}
button
{border_radius.root.full_rounded}
form_field
{border_radius.root.rounded_corner}
form_select
{border_radius.root.rounded_corner}
form_radio
{border_radius.root.full_rounded}
search
{border_radius.root.full_rounded}
border_width
thin
1
regular
2
thick
{size.xx_small}
opacity
full
100%
subtle
48%
ghost
16%
box_shadow
regular
{"x":0,"y":8,"blur":16,"spread":0,"color":"#00000014","type":"dropShadow"}
ag
breakpoint_medium
size
xx_small
{size.root.base}*0.25
x_small
{size.root.base}*0.5
small
{size.root.base}*0.75
regular
{size.root.base}
medium
{size.root.base}*1.5
x_medium
{size.root.base}*2
xx_medium
{size.root.base}*3
xxx_medium
{size.root.base}*3.5
large
{size.root.base}*4.5
x_large
{size.root.base}*6
xx_large
{size.root.base}*8
xxx_large
{size.root.base}*10
ag
breakpoint_large
size
xx_small
{size.root.base}*0.25
x_small
{size.root.base}*0.5
small
{size.root.base}*0.75
regular
{size.root.base}
medium
{size.root.base}*1.5
x_medium
{size.root.base}*2
xx_medium
{size.root.base}*3
xxx_medium
{size.root.base}*4
large
{size.root.base}*5.5
x_large
{size.root.base}*8
xx_large
{size.root.base}*11.5
xxx_large
{size.root.base}*16
ag
breakpoint_large
size
xx_small
{size.root.base}*0.25
x_small
{size.root.base}*0.5
small
{size.root.base}*0.75
regular
{size.root.base}
medium
{size.root.base}*1.5
x_medium
{size.root.base}*2
xx_medium
{size.root.base}*3
xxx_medium
{size.root.base}*4
large
{size.root.base}*7.5
x_large
{size.root.base}*12
xx_large
{size.root.base}*18.5
xxx_large
{size.root.base}*26.5