Brand tokens & foundations

96 colour tokens
Poppins type system
style.apliteni.com
apliteni/design-system
tokens.css tokens.json logo.svg logo-dark.svg logo-mark.svg logo-email-light.png logo-email-dark.png
Logos
Wordmark — white Wordmark · for dark backgrounds
Wordmark — dark Wordmark · for light backgrounds
Mark Seedling mark · standalone
Colour 96 tokens
Violet #914dff --color-apliteni-primary-violet
Black #121212 --color-apliteni-primary-black
White #ffffff --color-apliteni-primary-white
Supporting
Red #ff453a
Yellow #ffd12f
Orange #f79027
Green #62c862
Blue #3a86ff
Pink #fa6c8f
Neutral
1 #121212
2 #191919
3 #434240
4 #6a6866
5 #928f8b
6 #b9b5b1
7 #e0dcd7
8 #f1efed
9 #ffffff
Ramps
Violet
1
2
3
4
5
6
7
8
Red
1
2
3
4
5
6
7
8
Orange
1
2
3
4
5
6
7
8
Yellow
1
2
3
4
5
6
7
8
Green
1
2
3
4
5
6
7
8
Blue
1
2
3
4
5
6
7
8
Pink
1
2
3
4
5
6
7
8
Semantic roles
Dark theme
--color-apliteni-theme-dark-background #121212
--color-apliteni-theme-dark-surface #191919
--color-apliteni-theme-dark-surface-raised #434240
--color-apliteni-theme-dark-border #333130
--color-apliteni-theme-dark-border-subtle #2a2826
--color-apliteni-theme-dark-text-primary #ffffff
--color-apliteni-theme-dark-text-muted #928f8b
--color-apliteni-theme-dark-text-disabled #6a6866
--color-apliteni-theme-dark-accent #914dff
--color-apliteni-theme-dark-accent-hover #9b5dff
--color-apliteni-theme-dark-accent-subtle #e5d8f5
Light theme
--color-apliteni-theme-light-background #f1efed
--color-apliteni-theme-light-surface #ffffff
--color-apliteni-theme-light-surface-raised #ffffff
--color-apliteni-theme-light-border #e0dcd7
--color-apliteni-theme-light-border-subtle #f1efed
--color-apliteni-theme-light-text-primary #121212
--color-apliteni-theme-light-text-muted #928f8b
--color-apliteni-theme-light-text-disabled #b9b5b1
--color-apliteni-theme-light-accent #914dff
--color-apliteni-theme-light-accent-hover #914dff
--color-apliteni-theme-light-accent-subtle #efe1ff
Typography Poppins
display 56px
Apliteni Design
h1 40px
Apliteni Design
h2 28px
Apliteni Design
h3 20px
Apliteni Design
h4 16px
Apliteni Design
body 15px
Apliteni Design
small 13px
Apliteni Design
caption 11px
Apliteni Design
Ag
Regular
400
Ag
Medium
500
Ag
Semibold
600
Ag
Bold
700