Skip to content

Colors

Persona use design tokens to collaborate between UI/UX designers and engineers. Design token is a way to manage user interface data such as color, spacing, shadow, etc. by storing it in a variable. The goal is to build a cross platform user interface.

Colors Tokens

Main
token-namefigma-style-namehex
Base
base.blackmain/base/black#000000
base.whitemain/base/white#FFFFFF
Gray
gray.0main/gray/0#FDFDFD
gray.5main/gray/5#F3F3F3
gray.10main/gray/10#E7E7E8
gray.15main/gray/15#DBDBDC
gray.20main/gray/20#CFCFD1
gray.25main/gray/25#C2C3C5
gray.30main/gray/30#B6B8B9
gray.35main/gray/35#AAACAE
gray.40main/gray/40#9EA0A2
gray.45main/gray/45#929497
gray.50main/gray/50#86888B
gray.55main/gray/55#7A7C7F
gray.60main/gray/60#6E7074
gray.65main/gray/65#626468
gray.70main/gray/70#56585D
gray.75main/gray/75#4A4D51
gray.80main/gray/80#3D4145
gray.85main/gray/85#2A2E33
gray.90main/gray/90#20242A
gray.95main/gray/95#14181E
gray.100main/gray/100#0D1117
Blue
blue.0main/blue/0#E5F0FA
blue.10main/blue/10#A8CBEF
blue.20main/blue/20#70A9E5
blue.30main/blue/30#3887DB
blue.40main/blue/40#0065D1
blue.50main/blue/50#0057B4
blue.60main/blue/60#004996
blue.70main/blue/70#003B79
blue.80main/blue/80#002C5C
blue.90main/blue/90#001E3F
blue.100main/blue/100#000F1F
Green
green.0main/green/0#E9F7EC
green.10main/green/10#B4E5BF
green.20main/green/20#84D495
green.30main/green/30#53C36C
green.40main/green/40#23B242
green.50main/green/50#1E9939
green.60main/green/60#198030
green.70main/green/70#146726
green.80main/green/80#0F4E1D
green.90main/green/90#0B3514
green.100main/green/100#051B0A
Light Blue
lightblue.0main/lightBlue/0#E6F7F9
lightblue.10main/lightBlue/10#A9E3EB
lightblue.20main/lightBlue/20#71D2DF
lightblue.30main/lightBlue/30#3AC0D2
lightblue.40main/lightBlue/40#02AEC5
lightblue.50main/lightBlue/50#0296A9
lightblue.60main/lightBlue/60#017D8E
lightblue.70main/lightBlue/70#016572
lightblue.80main/lightBlue/80#014D57
lightblue.90main/lightBlue/90#01343B
lightblue.100main/lightBlue/100#001A1E
Orange
orange.0main/orange/0#FEF6E9
orange.10main/orange/10#FCE1B4
orange.20main/orange/20#F9CD84
orange.30main/orange/30#F7BA53
orange.40main/orange/40#F5A623
orange.50main/orange/50#D38F1E
orange.60main/orange/60#B07819
orange.70main/orange/70#8E6014
orange.80main/orange/80#6C490F
orange.90main/orange/90#4A320B
orange.100main/orange/100#251905
Red
red.0main/red/0#FCEAEA
red.10main/red/10#F6B8B7
red.20main/red/20#F08A89
red.30main/red/30#EA5C5A
red.40main/red/40#E42E2C
red.50main/red/50#C42826
red.60main/red/60#A42120
red.70main/red/70#841B1A
red.80main/red/80#641413
red.90main/red/90#440E0D
red.100main/red/100#220707
Gold
gold.0main/gold/0#F8F5E5
gold.10main/gold/10#E7DDA8
gold.20main/gold/20#D7C670
gold.30main/gold/30#C7B038
gold.40main/gold/40#B79A00
gold.50main/gold/50#9D8400
gold.60main/gold/60#846F00
gold.70main/gold/70#6A5900
gold.80main/gold/80#514400
gold.90main/gold/90#372E00
gold.100main/gold/100#1B1700
Yellow
yellow.0main/yellow/0#FDFBEA
yellow.10main/yellow/10#FAF1B7
yellow.20main/yellow/20#F6E789
yellow.30main/yellow/30#F3DE5A
yellow.40main/yellow/40#EFD52C
yellow.50main/yellow/50#CEB726
yellow.60main/yellow/60#AC9920
yellow.70main/yellow/70#8B7C1A
yellow.80main/yellow/80#695E13
yellow.90main/yellow/90#48400D
yellow.100main/yellow/100#242007
Lime
lime.0main/lime/0#F6FCEB
lime.10main/lime/10#E0F7BA
lime.20main/lime/20#CBF18E
lime.30main/lime/30#B7EB61
lime.40main/lime/40#A3E635
lime.50main/lime/50#8CC62E
lime.60main/lime/60#75A626
lime.70main/lime/70#5F851F
lime.80main/lime/80#486517
lime.90main/lime/90#314510
lime.100main/lime/100#182208
Teal
teal.0main/teal/0#E7F8F5
teal.10main/teal/10#AEE7DD
teal.20main/teal/20#7AD7C8
teal.30main/teal/30#46C8B2
teal.40main/teal/40#12B89C
teal.50main/teal/50#0F9E86
teal.60main/teal/60#0D8470
teal.70main/teal/70#0A6B5A
teal.80main/teal/80#085145
teal.90main/teal/90#05372F
teal.100main/teal/100#031C17
Purple
purple.0main/purple/0#EFE5FA
purple.10main/purple/10#C8A8EF
purple.20main/purple/20#A570E5
purple.30main/purple/30#8138DB
purple.40main/purple/40#5E00D1
purple.50main/purple/50#5100B4
purple.60main/purple/60#440096
purple.70main/purple/70#370079
purple.80main/purple/80#29005C
purple.90main/purple/90#1C003F
purple.100main/purple/100#0E001F

Colors Semantics

In the development process, to maintain consistency, everything related to color must use color semantics. Because semantic colors are very easy to maintain. If at any time the parent-color-token of the semantic color changes, there is no need to change the code that has been written.

Semantics
token-namefigma-style-nameparent-token-name

Brand

Mostly used on logo and button cta

Light
Brand
brand.logomain/red/40$red.40
brand.actionmain/red/40$red.40
brand.accentmain/blue/40$blue.40
Dark
Brand
brand.logomain/gray/0$gray.0
brand.actionmain/red/30$red.30
brand.accentmain/blue/30$blue.30

Foregrounds

Mostly used on text and icons.

This semantic can be written to the tailwind class with the format: text-{semantic-foreground-name}. Example: text-default. And for the dark-mode version can be written as: text-dark-{semantic-foreground-name}. Example text-dark-default.

Light
Base
fg.defaultmain/gray/100$gray.100
fg.subtlemain/gray/60$gray.60
fg.subtlesmain/gray/35$gray.35
fg.mutedmain/gray/25$gray.25
fg.linkmain/blue/50$blue.50
fg.linkOnEmphasismain/blue/20$blue.20
fg.onEmphasismain/gray/0$gray.0
fg.stateEmphasismain/gray/0$gray.0
Roles
fg.infomain/blue/60$blue.60
fg.successmain/green/60$green.60
fg.warningmain/orange/60$orange.60
fg.dangermain/red/60$red.60
Dark
Base
fg.defaultmain/gray/0$gray.0
fg.subtlemain/gray/40$gray.40
fg.subtlesmain/gray/60$gray.60
fg.mutedmain/gray/75$gray.75
fg.linkmain/blue/30$blue.30
fg.linkOnEmphasismain/blue/40$blue.40
fg.onEmphasismain/gray/100$gray.100
fg.stateEmphasismain/gray/0$gray.0
Roles
fg.infomain/blue/20$blue.20
fg.successmain/green/20$green.20
fg.warningmain/orange/20$orange.20
fg.dangermain/red/20$red.20

Backgrounds

Mostly used on cards or overlay.

Semantic background can be written to the tailwind class with the format: bg-{semantic-background-name}. Example: bg-default. And for the dark-mode version can be written as: bg-dark-{semantic-background-name}. Example bg-dark-default.

Light
Base
bg.basemain/gray/5$gray.5
bg.defaultmain/gray/0$gray.0
bg.layer1main/gray/0$gray.0
bg.layer2main/gray/0$gray.0
bg.defaultAlphargba(main/gray/50, 0.05)rgba($gray.50, $opacity.5)
bg.inversemain/gray/100$gray.100
bg.subtlemain/gray/10$gray.10
bg.subtleAlphargba(main/gray/80, 0.1)rgba($gray.80, $opacity.10)
Roles
bg.infomain/blue/0$blue.0
bg.infoEmphasismain/blue/40$blue.40
bg.successmain/green/0$green.0
bg.successEmphasismain/green/40$green.40
bg.warningmain/orange/0$orange.0
bg.warningEmphasismain/orange/40$orange.40
bg.dangermain/red/0$red.0
bg.dangerEmphasismain/red/40$red.40
Dark
Base
bg.basemain/gray/100$gray.100
bg.defaultmain/gray/95$gray.95
bg.layer1main/gray/90$gray.90
bg.layer2main/gray/85$gray.85
bg.defaultAlphargba(main/gray/80, 0.1)rgba($gray.80, $opacity.10)
bg.inversemain/gray/0$gray.0
bg.subtlemain/gray/90$gray.90
bg.subtleAlphargba(main/gray/70, 0.1)rgba($gray.70, $opacity.10)
Roles
bg.infomain/blue/90$blue.90
bg.infoEmphasismain/blue/30$blue.30
bg.successmain/green/90$green.90
bg.successEmphasismain/green/30$green.30
bg.warningmain/orange/90$orange.90
bg.warningEmphasismain/orange/30$orange.30
bg.dangermain/red/90$red.90
bg.dangerEmphasismain/red/30$red.30

Borders

Mostly used on cards and form OR as divider beetween section such as data table.

This semantic can be written to the tailwind class with the format: border-{semantic-border-name}. Example: border-default. And for the dark-mode version can be written as: border-dark-{semantic-border-name}. Example border-dark-default.

Light
Base
border.defaultmain/gray/15$gray.15
border.defaultAlphargba(main/gray/100, 0.05)rgba($gray.100, $opacity.5)
border.subtlemain/gray/25$gray.25
border.subtleAlphargba(main/gray/100, 0.1)rgba($gray.100, $opacity.10)
border.mutedmain/gray/10$gray.10
border.inversemain/gray/100$gray.100
Roles
border.infomain/blue/10$blue.10
border.infoEmphasismain/blue/40$blue.40
border.successmain/green/10$green.10
border.successEmphasismain/green/40$green.40
border.warningmain/orange/10$orange.10
border.warningEmphasismain/orange/40$orange.40
border.dangermain/red/10$red.10
border.dangerEmphasismain/red/40$red.40
Dark
Base
border.defaultmain/gray/90$gray.90
border.defaultAlphargba(main/gray/0, 0.05)rgba($gray.0, $opacity.5)
border.subtlemain/gray/80$gray.80
border.subtleAlphargba(main/gray/0, 0.1)rgba($gray.0, $opacity.10)
border.mutedmain/gray/85$gray.85
border.inversemain/gray/0$gray.0
Roles
border.infomain/blue/100$blue.100
border.infoEmphasismain/blue/30$blue.30
border.successmain/green/100$green.100
border.successEmphasismain/green/30$green.30
border.warningmain/orange/100$orange.100
border.warningEmphasismain/orange/30$orange.30
border.dangermain/red/100$red.100
border.dangerEmphasismain/red/30$red.30

Released under the MIT License.