AZMX Brand Skill
Token Explorer
Interactive browser for AZMX design tokens. Explore colors, typography, spacing, borders, and effects across all themes and palettes.
Search & Filter
Search by token name or filter by collection and type. All filters can be combined.
Filter by Collection
Filter by Type
Color
340 color tokens
color/blue/50
#F0F5FF
color/blue/100
#DDE8FF
color/blue/200
#BFD5FF
color/blue/300
#93B6FF
color/blue/400
#5D8FFF
color/blue/500
#2661FF
color/blue/600
#001AFF
color/blue/700
#0200D3
color/blue/800
#01009B
color/blue/900
#01006E
color/blue/950
#010040
color/blue/1000
#040038
color/orange/50
#FEF7F4
color/orange/100
#FDECE5
color/orange/200
#FCD7C8
color/orange/300
#F9BAA0
color/orange/400
#F79A74
color/orange/500
#F47A48
color/orange/600
#C8643B
color/orange/700
#A1502F
color/orange/800
#7B3E24
color/orange/900
#5A2D1B
color/orange/950
#3C1E12
color/orange/1000
#2E170E
color/orange/role-tint
#FFF7F1
color/orange/role-border
#DDAD8D
color/orange/role-light
#F47A48
color/orange/role-mid
#CD5200
color/orange/role-deep
#842C09
color/green/50
#F2FBF6
color/green/100
#E0F7EB
color/green/200
#BDEDD4
color/green/300
#8CE0B4
color/green/400
#57D192
color/green/500
#22C36F
color/green/600
#1CA05B
color/green/700
#168049
color/green/800
#116238
color/green/900
#0D4829
color/green/950
#08301B
color/green/1000
#062515
color/green/role-tint
#E5F4EE
color/green/role-border
#88EFC7
color/green/role-light
#22C36F
color/green/role-mid
#00A060
color/green/role-deep
#012F02
color/yellow/50
#FFFCF4
color/yellow/100
#FFF9E4
color/yellow/200
#FFF2C6
color/yellow/300
#FEE89C
color/yellow/400
#FEDE6E
color/yellow/500
#FED340
color/yellow/600
#D3A92E
color/yellow/700
#AD831E
color/yellow/800
#895F0F
color/yellow/900
#693F02
color/yellow/950
#392201
color/yellow/1000
#251601
color/yellow/role-tint
#FFFCF4
color/yellow/role-border
#FEDE6E
color/yellow/role-light
#FED340
color/yellow/role-mid
#D3A92E
color/yellow/role-deep
#693F02
color/purple/50
#FCF8FF
color/purple/100
#F7EFFF
color/purple/200
#EEDDFF
color/purple/300
#E1C5FF
color/purple/400
#D4AAFF
color/purple/500
#C68FFF
color/purple/600
#9B66D4
color/purple/700
#7341AD
color/purple/800
#4F1F88
color/purple/900
#2E0068
color/purple/950
#190039
color/purple/1000
#100024
color/purple/role-tint
#FCF8FF
color/purple/role-border
#D4AAFF
color/purple/role-light
#C68FFF
color/purple/role-mid
#9B66D4
color/purple/role-deep
#2E0068
color/red/50
#FFF2F3
color/red/100
#FFE1E4
color/red/200
#FFBFC4
color/red/300
#FF919A
color/red/400
#FF5E6B
color/red/500
#FF2B3C
color/red/600
#D12331
color/red/700
#A81C27
color/red/800
#81161E
color/red/900
#5E1016
color/red/950
#3E0A0F
color/red/1000
#30080B
color/red/role-tint
#FDF2F3
color/red/role-border
#EB808A
color/red/role-light
#FF2B3C
color/red/role-mid
#DB0015
color/red/role-deep
#640000
color/neutral/25
#FCFCFD
color/neutral/50
#F9FAFB
color/neutral/100
#F3F4F6
color/neutral/200
#E5E7EB
color/neutral/300
#D2D6DB
color/neutral/400
#9DA4AE
color/neutral/500
#6C737F
color/neutral/600
#4D5761
color/neutral/700
#384250
color/neutral/800
#1F2A37
color/neutral/900
#111927
color/neutral/950
#0D121C
color/base/white
#FFFFFF
color/base/black
#000000
color/rag/red
#FF2B3C
color/rag/yellow
#FED340
color/rag/green
#22C36F
color/feedback/success/tint
#E5F4EE
color/feedback/success/border
#88EFC7
color/feedback/success/mid
#007D4B
color/feedback/success/deep
#012F02
color/feedback/warning/tint
#FFFCF4
color/feedback/warning/border
#FEDF90
color/feedback/warning/mid
#946C08
color/feedback/warning/deep
#693F02
color/feedback/danger/tint
#FDF2F3
color/feedback/danger/border
#EB808A
color/feedback/danger/mid
#DB0015
color/feedback/danger/deep
#430000
color/feedback/info/tint
#EDF5FF
color/feedback/info/border
#97C3F4
color/feedback/info/mid
#0061CF
color/feedback/info/deep
#01006E
color/feedback/caution/tint
#FFF7F1
color/feedback/caution/border
#DDAD8D
color/feedback/caution/mid
#C14D00
color/feedback/caution/deep
#5F2006
color/feedback/caution/light
#F47A48
color/alpha/white-4
#FFFFFF0A
color/alpha/white-8
#FFFFFF14
color/alpha/white-12
#FFFFFF1F
color/alpha/white-16
#FFFFFF29
color/alpha/white-20
#FFFFFF33
color/alpha/white-30
#FFFFFF4D
color/alpha/white-40
#FFFFFF66
color/alpha/white-48
#FFFFFF7A
color/alpha/white-60
#FFFFFF99
color/alpha/white-72
#FFFFFFB8
color/alpha/white-90
#FFFFFFE6
color/alpha/black-8
#00000014
color/alpha/black-12
#0000001F
color/alpha/black-20
#00000033
color/alpha/black-30
#0000004D
color/alpha/black-40
#00000066
color/alpha/black-60
#00000099
color/alpha/black-72
#000000B8
color/alpha/navy-40
#04003866
color/alpha/navy-72
#040038B8
color/alpha/electric-8
#001AFF14
color/alpha/electric-16
#001AFF29
color/alpha/success-8
#0FBC7708
color/alpha/warning-8
#BE8B0A08
color/alpha/danger-8
#DB001508
color/alpha/info-8
#0067DC08
color/alpha/caution-8
#F47A4814
color/alpha/caution-bg-8
#CD520008
color/alpha/caution-dark-10
#842C091A
brand/colab/electric-green
#34FF67
brand/colab/pine-green
#103A21
brand/colab/jade-green
#33FFC2
brand/colab/deep-jade
#011E14
brand/colab/olive-green
#5B6B3E
brand/colab/vivid-orange
#FF5A32
brand/colab/pale-sky-blue
#B1D9E8
brand/colab/grey
#BCBEC0
brand/majarah/purple-900
#210054
brand/majarah/purple-600
#380089
brand/majarah/purple-500
#4B0AA0
brand/majarah/purple-300
#6500E8
brand/majarah/purple-200
#B671FF
brand/majarah/subtle-grey
#D1D1D1
brand/majarah/grey
#231F20
brand/majarah/blue-300
#010CFF
brand/majarah/blue-600
#0000AD
brand/majarah/blue-900
#020068
accent/tint
#F0F5FF
accent/subtle
#DDE8FF
accent/soft
#93B6FF
accent/on-dark
#5D8FFF
accent/base
#001AFF
accent/text
#001AFF
accent/strong
#0200D3
accent/deep
#01006E
accent/ground
#000000
accent/ground-raised
#01006E
accent/ground-sunken
#000000
accent/on-ground
#DDE8FF
accent/on-ground-faint
#BFD5FF
accent/on-ground-quiet
#93B6FF
accent/on-base
#FFFFFF
accent/on-deep
#FFFFFF
accent/on-light
#040038
accent/role-light
#5D8FFF
accent/role-deep
#040038
surface/page
#FFFFFF
surface/raised
#F0F5FF
surface/sunken
#F3F4F6
surface/inverse
#000000
surface/accent
#001AFF
surface/accent-deep
#040038
surface/accent-light
#5D8FFF
surface/accent-inverse
#5D8FFF
surface/accent-subtle
#001AFF14
surface/accent-wash
#842C091A
surface/accent-wash-light
#F47A4814
surface/muted
#E5E7EB
surface/subtle
#F9FAFB
surface/lightest
#FCFCFD
surface/dark
#111927
surface/deep
#000000
surface/pale
#DDE8FF
surface/neutral
#6C737F
surface/tertiary
#384250
surface/black
#000000
surface/wash-light
#FFFFFF14
surface/wash-dark
#00000014
text/heading
#111927
text/logo
#040038
text/primary
#111927
text/secondary
#4D5761
text/strong
#384250
text/heavy
#1F2A37
text/muted
#6C737F
text/subtle
#6C737F
text/darkest
#0D121C
text/inverse
#FFFFFF
text/accent
#001AFF
text/accent-deep
#040038
text/accent-inverse
#5D8FFF
text/on-accent
#FFFFFF
text/on-accent-deep
#FFFFFF
text/on-accent-light
#FFFFFF
text/quiet-inverse
#BFD5FF
text/faint-inverse
#F0F5FF
text/on-image
#FFFFFF
text/on-image-body
#DDE8FF
text/on-image-eyebrow
#5D8FFF
text/on-dark-strong
#FFFFFFB8
text/on-dark-quiet
#FFFFFF99
icon/default
#111927
icon/accent
#001AFF
icon/secondary
#6C737F
icon/muted
#6C737F
icon/inverse
#FFFFFF
icon/on-image
#FFFFFF
status/success/text
#007D4B
status/success/bg
#E5F4EE
status/success/border
#88EFC7
status/success/wash
#0FBC7708
status/warning/text
#946C08
status/warning/bg
#FFFCF4
status/warning/border
#FEDF90
status/warning/wash
#BE8B0A08
status/danger/text
#DB0015
status/danger/bg
#FDF2F3
status/danger/border
#EB808A
status/danger/wash
#DB001508
status/info/text
#0061CF
status/info/bg
#EDF5FF
status/info/border
#97C3F4
status/info/wash
#0067DC08
status/caution/text
#C14D00
status/caution/bg
#FFF7F1
status/caution/border
#DDAD8D
status/caution/wash
#CD520008
status/dot/red
#FF2B3C
status/dot/yellow
#FED340
status/dot/green
#22C36F
action/primary/default
#001AFF
action/primary/hover
#0200D3
action/primary/pressed
#01006E
action/primary/disabled
#D2D6DB
action/secondary/default
#F0F5FF
action/secondary/hover
#DDE8FF
action/secondary/pressed
#93B6FF
action/on-primary
#FFFFFF
overlay/faint
#00000014
overlay/subtle
#0000001F
overlay/medium
#00000033
overlay/strong
#0000004D
overlay/scrim
#00000099
overlay/glass
#FFFFFFB8
overlay/accent
#001AFF14
gradient/start
#000000
gradient/mid
#01006E
gradient/mid-alt
#0200D3
gradient/end
#001AFF
card/surface
#F0F5FF
card/title
#111927
card/body
#4D5761
case-study/surface
#FFFFFF
case-study/eyebrow
#001AFF
case-study/title
#111927
case-study/lead
#111927
case-study/body
#111927
case-study/tags
#001AFF
case-study/logo
#111927
case-study/page-number
#001AFF
case-study/mockup
#E5E7EB
case-study/rule
#E5E7EB
case-study/frame
#FFFFFF
footer/logo
#040038
footer/rule
#E5E7EB
footer/page-number
#001AFF
footer/inverse/logo
#FFFFFF
footer/inverse/rule
#FFFFFF33
footer/inverse/page-number
#5D8FFF
slot/surface
#E5E7EB
slot/label
#111927
meter/track
#F3F4F6
meter/fill
#001AFF
meter/label
#4D5761
meter/value
#111927
star-tile/surface
#000000
star-tile/mark
#5D8FFF
star-tile/label
#FFFFFF
heat/low
#E5F4EE
heat/mid
#FFFCF4
heat/high
#FDF2F3
heat/text
#111927
logo/fill/default
#040038
logo/fill/inverse
#FFFFFF
logo/fill/accent
#001AFF
logo/fill/muted
#6C737F
logo-hamaa/fill/default
#040038
logo-hamaa/fill/inverse
#FFFFFF
logo-hamaa/fill/accent
#001AFF
logo-hamaa/fill/muted
#6C737F
logo-client/fill/default
#111927
logo-client/fill/inverse
#FFFFFF
bg/default
#FFFFFF
bg/inverse
#000000
bg/accent
#001AFF
Spacing
54 spacing tokens
0
size/space/0
0
2px
size/space/2
2px
4px
size/space/4
4px
8px
size/space/8
8px
12px
size/space/12
12px
16px
size/space/16
16px
20px
size/space/20
20px
24px
size/space/24
24px
32px
size/space/32
32px
40px
size/space/40
40px
48px
size/space/48
48px
64px
size/space/64
64px
80px
size/space/80
80px
96px
size/space/96
96px
120px
size/space/120
120px
160px
size/space/160
160px
200px
size/space/200
200px
20px
size/icon/20
20px
24px
size/icon/24
24px
32px
size/icon/32
32px
100px
size/doc/100
100px
120px
size/doc/120
120px
1080px
size/doc/1080
1080px
1920px
size/doc/1920
1920px
20px
icon/size/inline
20px
24px
icon/size/standalone
24px
32px
icon/size/feature
32px
0
space/0
0
2px
space/2
2px
4px
space/4
4px
8px
space/8
8px
12px
space/12
12px
16px
space/16
16px
20px
space/20
20px
24px
space/24
24px
32px
space/32
32px
40px
space/40
40px
48px
space/48
48px
64px
space/64
64px
80px
space/80
80px
96px
space/96
96px
120px
space/120
120px
160px
space/160
160px
200px
space/200
200px
24px
card/padding
24px
8px
meter/height
8px
24px
logo/clear-space
24px
40px
logo/height/sm
40px
64px
logo/height/md
64px
96px
logo/height/lg
96px
1920px
slide/width
1920px
1080px
slide/height
1080px
120px
slide/margin-x
120px
100px
slide/safe-area
100px
Typography
113 typography tokens
Ag
size/font/10
10px
Ag
size/font/12
12px
Ag
size/font/14
14px
Ag
size/font/16
16px
Ag
size/font/18
18px
Ag
size/font/20
20px
Ag
size/font/24
24px
Ag
size/font/28
28px
Ag
size/font/30
30px
Ag
size/font/36
36px
Ag
size/font/40
40px
Ag
size/font/48
48px
Ag
size/font/60
60px
Ag
size/font/72
72px
Ag
size/font/80
80px
Ag
size/font/100
100px
Ag
size/font/120
120px
Ag
size/font/160
160px
Ag
size/font/200
200px
Ag
size/font/240
240px
Ag
size/line/16
16px
Ag
size/line/18
18px
Ag
size/line/20
20px
Ag
size/line/22
22px
Ag
size/line/24
24px
Ag
size/line/28
28px
Ag
size/line/29
29px
Ag
size/line/30
30px
Ag
size/line/34
34px
Ag
size/line/36
36px
Ag
size/line/38
38px
Ag
size/line/42
42px
Ag
size/line/46
46px
Ag
size/line/50
50px
Ag
size/line/57
57px
Ag
size/line/64
64px
Ag
size/line/76
76px
Ag
size/line/84
84px
Ag
size/line/95
95px
Ag
size/line/106
106px
Ag
size/line/114
114px
Ag
size/line/126
126px
Ag
size/line/152
152px
Ag
size/line/168
168px
Ag
size/line/190
190px
Ag
size/line/210
210px
Ag
size/line/228
228px
Ag
size/line/252
252px
Ag
size/tracking/0
0
Ag
size/tracking/0-5
0.5px
Ag
size/tracking/1
1px
Ag
size/tracking/2
2px
Ag
size/tracking/3
3px
Ag
font/family/display
"thmanyah serif display"
Ag
font/family/body
"Azm X Variable"
Ag
font/weight/thin
100
Ag
font/weight/extralight
200
Ag
font/weight/light
300
Ag
font/weight/regular
400
Ag
font/weight/medium
500
Ag
font/weight/semibold
600
Ag
font/weight/bold
700
Ag
font/weight/black
900
Ag
font/weight/heavy
900
Ag
type/display/2xs/size
30px
Line 1
Line 2
type/display/2xs/line
29px
Ag
type/display/xs/size
36px
Line 1
Line 2
type/display/xs/line
34px
Ag
type/display/sm/size
48px
Line 1
Line 2
type/display/sm/line
46px
Ag
type/display/md/size
60px
Line 1
Line 2
type/display/md/line
57px
Ag
type/display/lg/size
80px
Line 1
Line 2
type/display/lg/line
76px
Ag
type/display/xl/size
100px
Line 1
Line 2
type/display/xl/line
95px
Ag
type/display/2xl/size
120px
Line 1
Line 2
type/display/2xl/line
114px
Ag
type/display/3xl/size
160px
Line 1
Line 2
type/display/3xl/line
152px
Ag
type/display/4xl/size
200px
Line 1
Line 2
type/display/4xl/line
190px
Ag
type/display/5xl/size
240px
Line 1
Line 2
type/display/5xl/line
228px
Ag
type/body/2xs/size
12px
Line 1
Line 2
type/body/2xs/line
18px
Ag
type/body/xs/size
14px
Line 1
Line 2
type/body/xs/line
22px
Ag
type/body/sm/size
16px
Line 1
Line 2
type/body/sm/line
24px
Ag
type/body/md/size
18px
Line 1
Line 2
type/body/md/line
28px
Ag
type/body/lg/size
20px
Line 1
Line 2
type/body/lg/line
30px
Ag
type/body/xl/size
24px
Line 1
Line 2
type/body/xl/line
36px
Ag
type/body/2xl/size
28px
Line 1
Line 2
type/body/2xl/line
42px
Aa
type/tracking/normal
0
Aa
type/tracking/slight
0.5px
Aa
type/tracking/wide
2px
Aa
type/tracking/wider
3px
Ag
font/heading
"thmanyah serif display"
Ag
font/text
"Azm X Variable"
Abc 123
weight/thin
100
Abc 123
weight/extralight
200
Abc 123
weight/light
300
Abc 123
weight/regular
400
Abc 123
weight/medium
500
Abc 123
weight/semibold
600
Abc 123
weight/bold
700
Abc 123
weight/black
900
Abc 123
weight/heavy
900
Border
43 border tokens
0
size/radius/0
0
4px
size/radius/4
4px
8px
size/radius/8
8px
12px
size/radius/12
12px
16px
size/radius/16
16px
24px
size/radius/24
24px
9999px
size/radius/full
9999px
0
size/border/0
0
0.5px
size/border/0-5
0.5px
1px
size/border/1
1px
1.5px
size/border/1-5
1.5px
2px
size/border/2
2px
4px
size/border/4
4px
8px
size/border/8
8px
#E5E7EB
border/subtle
#E5E7EB
#FFFFFF33
border/subtle-inverse
#FFFFFF33
#D2D6DB
border/default
#D2D6DB
#9DA4AE
border/strong
#9DA4AE
#111927
border/dark
#111927
#F3F4F6
border/faint
#F3F4F6
#001AFF
border/accent
#001AFF
#040038
border/accent-deep
#040038
#5D8FFF
border/accent-inverse
#5D8FFF
#000000
border/heading
#000000
#FFFFFF
border/inverse
#FFFFFF
#FFFFFF29
border/wash-light
#FFFFFF29
0
radius/none
0
4px
radius/xs
4px
8px
radius/sm
8px
12px
radius/md
12px
16px
radius/lg
16px
24px
radius/xl
24px
9999px
radius/full
9999px
0
border-width/none
0
0.5px
border-width/thin
0.5px
1px
border-width/hairline
1px
2px
border-width/medium
2px
4px
border-width/thick
4px
8px
border-width/heavy
8px
#E5E7EB
card/border
#E5E7EB
12px
card/radius
12px
9999px
meter/radius
9999px
8px
star-tile/radius
8px
Effects
14 effects tokens
0
size/opacity/0
0
0.05
size/opacity/5
0.05
0.2
size/opacity/20
0.2
0.4
size/opacity/40
0.4
0.6
size/opacity/60
0.6
0.8
size/opacity/80
0.8
1
size/opacity/100
1
0
opacity/hidden
0
0.05
opacity/faint
0.05
0.2
opacity/subtle
0.2
0.4
opacity/muted
0.4
0.6
opacity/dim
0.6
0.8
opacity/strong
0.8
1
opacity/full
1
Layout
37 layout tokens
ltr
direction/value
ltr
ltr
direction/text
ltr
ltr
direction/layout
ltr
left
align/text
left
left
align/start
left
right
align/end
right
center
align/center
center
left
float/start
left
right
float/end
right
margin-left
margin/inline-start
margin-left
margin-right
margin/inline-end
margin-right
margin-top
margin/block-start
margin-top
margin-bottom
margin/block-end
margin-bottom
padding-left
padding/inline-start
padding-left
padding-right
padding/inline-end
padding-right
padding-top
padding/block-start
padding-top
padding-bottom
padding/block-end
padding-bottom
border-left
border/inline-start
border-left
border-right
border/inline-end
border-right
border-top
border/block-start
border-top
border-bottom
border/block-end
border-bottom
left
inset/inline-start
left
right
inset/inline-end
right
top
inset/block-start
top
bottom
inset/block-end
bottom
border-top-left-radius
radius/start-start
border-top-left-radius
border-top-right-radius
radius/start-end
border-top-right-radius
border-bottom-left-radius
radius/end-start
border-bottom-left-radius
border-bottom-right-radius
radius/end-end
border-bottom-right-radius
scaleX(1)
transform/flip-x
scaleX(1)
rotate(0deg)
transform/rotate-icon
rotate(0deg)
›
chevron/forward
›
‹
chevron/backward
‹
→
arrow/forward
→
←
arrow/backward
←
"
quote/open
"
"
quote/close
"