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#FBFCFD

gray.5main/gray/5#F4F5F7

gray.10main/gray/10#E6E7EB

gray.15main/gray/15#D9DDE3

gray.20main/gray/20#CBD1D8

gray.25main/gray/25#BEC5CF

gray.30main/gray/30#AFB7C3

gray.35main/gray/35#A0ABB9

gray.40main/gray/40#939EAE

gray.45main/gray/45#8390A3

gray.50main/gray/50#728196

gray.55main/gray/55#647184

gray.60main/gray/60#5B6778

gray.65main/gray/65#525D6C

gray.70main/gray/70#495260

gray.75main/gray/75#414955

gray.80main/gray/80#383F4A

gray.85main/gray/85#30363F

gray.90main/gray/90#272C33

gray.95main/gray/95#1F2329

gray.100main/gray/100#191C21

Alpha Black

alpha.black.3alpha/black/3rgba($gray.100, $opacity.3)

alpha.black.5alpha/black/5rgba($gray.100, $opacity.5)

alpha.black.10alpha/black/10rgba($gray.100, $opacity.10)

alpha.black.20alpha/black/20rgba($gray.100, $opacity.20)

alpha.black.30alpha/black/30rgba($gray.100, $opacity.30)

alpha.black.40alpha/black/40rgba($gray.100, $opacity.40)

alpha.black.50alpha/black/50rgba($gray.100, $opacity.50)

alpha.black.60alpha/black/60rgba($gray.100, $opacity.60)

alpha.black.70alpha/black/70rgba($gray.100, $opacity.70)

alpha.black.80alpha/black/80rgba($gray.100, $opacity.80)

alpha.black.90alpha/black/90rgba($gray.100, $opacity.90)

alpha.black.95alpha/black/95rgba($gray.100, $opacity.95)

Alpha White

alpha.white.3alpha/white/3rgba($gray.0, $opacity.3)

alpha.white.5alpha/white/5rgba($gray.0, $opacity.5)

alpha.white.10alpha/white/10rgba($gray.0, $opacity.10)

alpha.white.20alpha/white/20rgba($gray.0, $opacity.20)

alpha.white.30alpha/white/30rgba($gray.0, $opacity.30)

alpha.white.40alpha/white/40rgba($gray.0, $opacity.40)

alpha.white.50alpha/white/50rgba($gray.0, $opacity.50)

alpha.white.60alpha/white/60rgba($gray.0, $opacity.60)

alpha.white.70alpha/white/70rgba($gray.0, $opacity.70)

alpha.white.80alpha/white/80rgba($gray.0, $opacity.80)

alpha.white.90alpha/white/90rgba($gray.0, $opacity.90)

alpha.white.95alpha/white/95rgba($gray.0, $opacity.95)

Blue

blue.milkmain/blue/milk#F5FAFF

blue.0main/blue/0#E5F3FF

blue.10main/blue/10#ADD9FF

blue.20main/blue/20#75C0FF

blue.30main/blue/30#3DA6FF

blue.40main/blue/40#008AFF

blue.50main/blue/50#0075D9

blue.60main/blue/60#0061B3

blue.70main/blue/70#004C8C

blue.80main/blue/80#003766

blue.90main/blue/90#002340

blue.100main/blue/100#001526

Green

green.milkmain/green/milk#F7FDF8

green.0main/green/0#EAF9EE

green.10main/green/10#BEEDCA

green.20main/green/20#91E1A5

green.30main/green/30#65D481

green.40main/green/40#34C759

green.50main/green/50#2CA94C

green.60main/green/60#248C3E

green.70main/green/70#1D6D31

green.80main/green/80#155024

green.90main/green/90#0D3216

green.100main/green/100#081E0D

Light Blue

lightblue.milkmain/lightBlue/milk#F5FDFF

lightblue.0main/lightBlue/0#E5FAFF

lightblue.10main/lightBlue/10#ADF0FF

lightblue.20main/lightBlue/20#75E6FF

lightblue.30main/lightBlue/30#3DDCFF

lightblue.40main/lightBlue/40#00D1FF

lightblue.50main/lightBlue/50#00B2D9

lightblue.60main/lightBlue/60#0093B3

lightblue.70main/lightBlue/70#00738C

lightblue.80main/lightBlue/80#005466

lightblue.90main/lightBlue/90#003440

lightblue.100main/lightBlue/100#001F26

Orange

orange.milkmain/orange/milk#FFFBF5

orange.0main/orange/0#FFF5E5

orange.10main/orange/10#FFE0AD

orange.20main/orange/20#FFCA75

orange.30main/orange/30#F7BA53

orange.40main/orange/40#FF9E00

orange.50main/orange/50#D98600

orange.60main/orange/60#B36F00

orange.70main/orange/70#8C5700

orange.80main/orange/80#663F00

orange.90main/orange/90#402800

orange.100main/orange/100#261800

Red

red.milkmain/red/milk#FEF7F7

red.0main/red/0#FCEAE9

red.10main/red/10#F6BCBB

red.20main/red/20#F08E8D

red.30main/red/30#EA605E

red.40main/red/40#E42E2C

red.50main/red/50#C22725

red.60main/red/60#9F201F

red.70main/red/70#7D1918

red.80main/red/80#5B1212

red.90main/red/90#390C0B

red.100main/red/100#220707

Gold

gold.milkmain/gold/milk#FFFCF5

gold.0main/gold/0#FFF7E5

gold.10main/gold/10#FFE7AD

gold.20main/gold/20#FFD675

gold.30main/gold/30#FFC63D

gold.40main/gold/40#FFB400

gold.50main/gold/50#D99900

gold.60main/gold/60#B37E00

gold.70main/gold/70#8C6300

gold.80main/gold/80#664800

gold.90main/gold/90#402D00

gold.100main/gold/100#261B00

Yellow

yellow.milkmain/yellow/milk#FFFDF5

yellow.0main/yellow/0#FFFBE5

yellow.10main/yellow/10#FFF2AD

yellow.20main/yellow/20#FFE975

yellow.30main/yellow/30#FFE13D

yellow.40main/yellow/40#FFD700

yellow.50main/yellow/50#D9B700

yellow.60main/yellow/60#B39700

yellow.70main/yellow/70#8C7600

yellow.80main/yellow/80#665600

yellow.90main/yellow/90#403600

yellow.100main/yellow/100#262000

Lime

lime.milkmain/lime/milk#FBFFF5

lime.0main/lime/0#F6FFE5

lime.10main/lime/10#E1FFAD

lime.20main/lime/20#CDFF75

lime.30main/lime/30#B9FF3D

lime.40main/lime/40#A3FF00

lime.50main/lime/50#8BD900

lime.60main/lime/60#72B300

lime.70main/lime/70#598C00

lime.80main/lime/80#416600

lime.90main/lime/90#294000

lime.100main/lime/100#182600

Teal

teal.milkmain/teal/milk#F5FDFC

teal.0main/teal/0#E5F9F6

teal.10main/teal/10#ADEDE3

teal.20main/teal/20#75E1D0

teal.30main/teal/30#3DD4BE

teal.40main/teal/40#00C7A9

teal.50main/teal/50#00A990

teal.60main/teal/60#008C77

teal.70main/teal/70#006D5D

teal.80main/teal/80#005044

teal.90main/teal/90#00322A

teal.100main/teal/100#001E19

Purple

purple.milkmain/purple/milk#FAF5FF

purple.0main/purple/0#F2E5FF

purple.10main/purple/10#D6ADFF

purple.20main/purple/20#BA75FF

purple.30main/purple/30#9E3DFF

purple.40main/purple/40#8000FF

purple.50main/purple/50#6D00D9

purple.60main/purple/60#5A00B3

purple.70main/purple/70#46008C

purple.80main/purple/80#330066

purple.90main/purple/90#200040

purple.100main/purple/100#130026

Violet

violet.milkmain/violet/milk#FBF5FF

violet.0main/violet/0#F5E5FF

violet.10main/violet/10#DFADFF

violet.20main/violet/20#C975FF

violet.30main/violet/30#B33DFF

violet.40main/violet/40#9B00FF

violet.50main/violet/50#8400D9

violet.60main/violet/60#6D00B3

violet.70main/violet/70#55008C

violet.80main/violet/80#3E0066

violet.90main/violet/90#270040

violet.100main/violet/100#170026

Pink

pink.milkmain/pink/milk#FEF7FF

pink.0main/pink/0#FEEBFF

pink.10main/pink/10#FBC0FF

pink.20main/pink/20#F895FF

pink.30main/pink/30#F56AFF

pink.40main/pink/40#F23BFF

pink.50main/pink/50#CE32D9

pink.60main/pink/60#AA29B3

pink.70main/pink/70#85208C

pink.80main/pink/80#611866

pink.90main/pink/90#3D0F40

pink.100main/pink/100#240926

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

brand.accentSubtlemain/blue/20$blue.20

brand.accentSubtlestmain/blue/milk$blue.milk

Dark

Brand

brand.logomain/gray/0$gray.0

brand.actionmain/red/30$red.30

brand.accentmain/blue/30$blue.30

brand.accentSubtlemain/blue/50$blue.50

brand.accentSubtlestmain/blue/100$blue.100

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/95$gray.95

fg.subtlemain/gray/60$gray.60

fg.subtlesmain/gray/35$gray.35

fg.mutedmain/gray/20$gray.20

fg.onEmphasismain/gray/0$gray.0

fg.stateEmphasismain/gray/0$gray.0

Link

fg.linkmain/blue/50$blue.50

fg.linkOnEmphasismain/blue/20$blue.20

Roles

fg.infomain/blue/60$blue.60

fg.infoOnEmphasismain/blue/30$blue.30

fg.successmain/green/60$green.60

bg.successEmphasismain/green/30$green.30

fg.warningmain/orange/70$orange.70

fg.warningOnEmphasismain/orange/40$orange.40

fg.dangermain/red/60$red.60

fg.dangerOnEmphasismain/red/30$red.30

Dark

Base

fg.defaultmain/gray/0$gray.0

fg.subtlemain/gray/40$gray.40

fg.subtlesmain/gray/60$gray.60

fg.mutedmain/gray/80$gray.80

fg.onEmphasismain/gray/95$gray.95

fg.stateEmphasismain/gray/0$gray.0

Link

fg.linkmain/blue/20$blue.20

fg.linkOnEmphasismain/blue/50$blue.50

Roles

fg.infomain/blue/20$blue.20

fg.infoOnEmphasismain/blue/30$blue.30

fg.successmain/green/20$green.20

fg.successOnEmphasismain/green/30$green.30

fg.warningmain/orange/20$orange.20

fg.warningOnEmphasismain/orange/40$orange.40

fg.dangermain/red/20$red.20

fg.dangerOnEmphasismain/red/30$red.30

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

Depth layer

bg.basemain/gray/10$gray.10

bg.groundmain/gray/5$gray.5

Surface

bg.defaultmain/gray/0$gray.0

bg.layer1main/gray/0$gray.0

bg.layer2main/gray/0$gray.0

Additional

bg.defaultAlphaalpha/black/3alpha.black.3

bg.subtleAlphaalpha/black/5alpha.black.5

Inverted

bg.inversemain/gray/95$gray.95

bg.onInversemain/gray/90$gray.90

bg.OnInverseSubtlemain/gray/80$gray.80

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.groundmain/gray/90$gray.90

Surface

bg.defaultmain/gray/95$gray.95

bg.layer1main/gray/90$gray.90

bg.layer2main/gray/85$gray.85

Additional

bg.defaultAlphaalpha/white/3alpha.white.3

bg.subtleAlphaalpha/white/5alpha.white.5

Inverted

bg.inversemain/gray/10$gray.10

bg.onInversemain/gray/5$gray.5

bg.OnInverseSubtlemain/gray/0$gray.0

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.subtlestmain/gray/5$gray.5

border.subtlemain/gray/10$gray.10

border.defaultmain/gray/20$gray.20

border.emphasismain/gray/30$gray.30

Additional

border.subtleAlphaalpha/black/5alpha.black.5

border.defaultAlphaalpha/black/10alpha.black.10

border.emphasisAlphaalpha/black/20alpha.black.20

Inverted

border.inversemain/gray/90$gray.90

border.onInversemain/gray/50$gray.50

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.subtlestmain/gray/90$gray.90

border.subtlemain/gray/85$gray.85

border.defaultmain/gray/80$gray.80

border.emphasismain/gray/70$gray.70

Additional

border.subtleAlphaalpha/white/5alpha.white.5

border.defaultAlphaalpha/white/10alpha.white.10

border.emphasisAlphaalpha/white/20alpha.white.20

Inverted

border.inversemain/gray/10$gray.10

border.onInversemain/gray/40$gray.40

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