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.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.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