Colores del Sistema

Colores Primitivos

A continuación se muestran los colores base extraídos directamente del Design System en Figma.

Copiado

Brand (Primario)

10

HEX #E0EBEB TOKEN CSS

brand-pri-0

#E0EBEB

HEX #CCDFDE TOKEN CSS

brand-pri-1

#CCDFDE

HEX #99BFBD TOKEN CSS

brand-pri-2

#99BFBD

HEX #669F9C TOKEN CSS

brand-pri-3

#669F9C

HEX #408C86 TOKEN CSS

brand-pri-4

#408C86

HEX #337F7B TOKEN CSS

brand-pri-5

#337F7B

HEX #005F5A TOKEN CSS

brand-pri-6(b)

#005F5A

HEX #003430 TOKEN CSS

brand-pri-7

#003430

HEX #002421 TOKEN CSS

brand-pri-8

#002421

HEX #001413 TOKEN CSS

brand-pri-9

#001413

Brand (Secundario)

10

HEX #FAFCEB TOKEN CSS

brand-sec-0

#FAFCEB

HEX #F2F7D5 TOKEN CSS

brand-sec-1

#F2F7D5

HEX #E5F2B8 TOKEN CSS

brand-sec-2

#E5F2B8

HEX #C0D67C TOKEN CSS

brand-sec-3

#C0D67C

HEX #AECC52 TOKEN CSS

brand-sec-4

#AECC52

HEX #99BA3D TOKEN CSS

brand-sec-5

#99BA3D

HEX #7B9931 TOKEN CSS

brand-sec-6

#7B9931

HEX #516927 TOKEN CSS

brand-sec-7(base)

#516927

HEX #222E0A TOKEN CSS

brand-sec-8

#222E0A

HEX #131C03 TOKEN CSS

brand-sec-9

#131C03

Neutros

2

HEX #FFFFFF TOKEN CSS

white

#FFFFFF

HEX #000000 TOKEN CSS

black

#000000

Primary

14

HEX {Brand.brand-pri-0} TOKEN CSS

primary-color-0

{Brand.brand-pri-0}

HEX {Brand.brand-pri-1} TOKEN CSS

primary-color-1

{Brand.brand-pri-1}

HEX {Brand.brand-pri-2} TOKEN CSS

primary-color-2

{Brand.brand-pri-2}

HEX {Brand.brand-pri-3} TOKEN CSS

primary-color-3

{Brand.brand-pri-3}

HEX {Brand.brand-pri-4} TOKEN CSS

primary-color-4

{Brand.brand-pri-4}

HEX {Brand.brand-pri-5} TOKEN CSS

primary-color-5

{Brand.brand-pri-5}

HEX {Brand.brand-pri-6(b)} TOKEN CSS

primary-color-6(b)

{Brand.brand-pri-6(b)}

HEX {Brand.brand-pri-7} TOKEN CSS

primary-color-7

{Brand.brand-pri-7}

HEX {Brand.brand-pri-8} TOKEN CSS

primary-color-8

{Brand.brand-pri-8}

HEX {Brand.brand-pri-9} TOKEN CSS

primary-color-9

{Brand.brand-pri-9}

HEX #005F5A TOKEN CSS

primary-color-light-10

#005F5A

HEX #005F5A TOKEN CSS

primary-color-light-12

#005F5A

HEX #005F5A TOKEN CSS

primary-color-light-15

#005F5A

HEX #005F5A TOKEN CSS

primary-color-light-20

#005F5A

Secondary

14

HEX {Brand.brand-sec-0} TOKEN CSS

sencondary-color-0

{Brand.brand-sec-0}

HEX {Brand.brand-sec-1} TOKEN CSS

sencondary-color-1

{Brand.brand-sec-1}

HEX {Brand.brand-sec-2} TOKEN CSS

sencondary-color-2

{Brand.brand-sec-2}

HEX {Brand.brand-sec-3} TOKEN CSS

sencondary-color-3

{Brand.brand-sec-3}

HEX {Brand.brand-sec-4} TOKEN CSS

sencondary-color-4

{Brand.brand-sec-4}

HEX {Brand.brand-sec-5} TOKEN CSS

sencondary-color-5

{Brand.brand-sec-5}

HEX {Brand.brand-sec-6} TOKEN CSS

sencondary-color-6

{Brand.brand-sec-6}

HEX {Brand.brand-sec-7(base)} TOKEN CSS

sencondary-color-7(base)

{Brand.brand-sec-7(base)}

HEX {Brand.brand-sec-8} TOKEN CSS

sencondary-color-8

{Brand.brand-sec-8}

HEX {Brand.brand-sec-9} TOKEN CSS

sencondary-color-9

{Brand.brand-sec-9}

HEX #7B9931 TOKEN CSS

sencondary-color-light-10

#7B9931

HEX #7B9931 TOKEN CSS

sencondary-color-light-12

#7B9931

HEX #7B9931 TOKEN CSS

sencondary-color-light-15

#7B9931

HEX #7B9931 TOKEN CSS

sencondary-color-light-20

#7B9931

blue

10

HEX #E7F5FF TOKEN CSS

blue-0

#E7F5FF

HEX #D0EBFF TOKEN CSS

blue-1

#D0EBFF

HEX #A5D7FF TOKEN CSS

blue-2

#A5D7FF

HEX #68ACE2 TOKEN CSS

blue-3

#68ACE2

HEX #4599DE TOKEN CSS

blue-4

#4599DE

HEX #2D8AD8 TOKEN CSS

blue-5

#2D8AD8

HEX #1878CB TOKEN CSS

blue-6(base)

#1878CB

HEX #1971C0 TOKEN CSS

blue-7

#1971C0

HEX #1665AE TOKEN CSS

blue-8

#1665AE

HEX #155999 TOKEN CSS

blue-9

#155999

cyan

10

HEX #E5FCFF TOKEN CSS

cyan-0

#E5FCFF

HEX #C8FAFF TOKEN CSS

cyan-1

#C8FAFF

HEX #A1F5FF TOKEN CSS

cyan-2

#A1F5FF

HEX #5BC3D0 TOKEN CSS

cyan-3

#5BC3D0

HEX #35B4C5 TOKEN CSS

cyan-4

#35B4C5

HEX #1EA5BA TOKEN CSS

cyan-5

#1EA5BA

HEX #1298AB TOKEN CSS

cyan-6

#1298AB

HEX #0B8295 TOKEN CSS

cyan-7(base)

#0B8295

HEX #067284 TOKEN CSS

cyan-8

#067284

HEX #096677 TOKEN CSS

cyan-9

#096677

dark

10

HEX #DDDDDD TOKEN CSS

dark-0

#DDDDDD

HEX #CACACA TOKEN CSS

dark-1

#CACACA

HEX #8F8F8F TOKEN CSS

dark-2

#8F8F8F

HEX #5E5E5E TOKEN CSS

dark-3

#5E5E5E

HEX #3B3B3B TOKEN CSS

dark-4

#3B3B3B

HEX #353535 TOKEN CSS

dark-5

#353535

HEX #292929 TOKEN CSS

dark-6(base)

#292929

HEX #202020 TOKEN CSS

dark-7

#202020

HEX #1B1B1B TOKEN CSS

dark-8

#1B1B1B

HEX #121212 TOKEN CSS

dark-9

#121212

grape

10

HEX #FAF2FF TOKEN CSS

grape-0

#FAF2FF

HEX #F7DDFF TOKEN CSS

grape-1

#F7DDFF

HEX #F2C1FF TOKEN CSS

grape-2

#F2C1FF

HEX #CE89DE TOKEN CSS

grape-3

#CE89DE

HEX #C46BD9 TOKEN CSS

grape-4

#C46BD9

HEX #B753D0 TOKEN CSS

grape-5

#B753D0

HEX #AA43C5 TOKEN CSS

grape-6(base)

#AA43C5

HEX #9C37B4 TOKEN CSS

grape-7

#9C37B4

HEX #8C30A2 TOKEN CSS

grape-8

#8C30A2

HEX #78298C TOKEN CSS

grape-9

#78298C

gray

10

HEX #F5F5F5 TOKEN CSS

gray-0

#F5F5F5

HEX #E0E0E0 TOKEN CSS

gray-1

#E0E0E0

HEX #CCCCCC TOKEN CSS

gray-2

#CCCCCC

HEX #B3B3B3 TOKEN CSS

gray-3

#B3B3B3

HEX #939393 TOKEN CSS

gray-4

#939393

HEX #707070 TOKEN CSS

gray-5

#707070

HEX #606060 TOKEN CSS

gray-6

#606060

HEX #4D4D4D TOKEN CSS

gray-7

#4D4D4D

HEX #232323 TOKEN CSS

gray-8(base)

#232323

HEX #161515 TOKEN CSS

gray-9

#161515

green

10

HEX #EEFFF1 TOKEN CSS

green-0

#EEFFF1

HEX #BEE0C2 TOKEN CSS

green-1

#BEE0C2

HEX #90C598 TOKEN CSS

green-2

#90C598

HEX #68AD72 TOKEN CSS

green-3

#68AD72

HEX #489856 TOKEN CSS

green-4

#489856

HEX #348641 TOKEN CSS

green-5

#348641

HEX #277635 TOKEN CSS

green-6

#277635

HEX #1F682C TOKEN CSS

green-7(base)

#1F682C

HEX #1B5B27 TOKEN CSS

green-8

#1B5B27

HEX #185023 TOKEN CSS

green-9

#185023

indigo

10

HEX #EDF2FF TOKEN CSS

indigo-0

#EDF2FF

HEX #DBE4FF TOKEN CSS

indigo-1

#DBE4FF

HEX #BAC8FF TOKEN CSS

indigo-2

#BAC8FF

HEX #8296E5 TOKEN CSS

indigo-3

#8296E5

HEX #6880E2 TOKEN CSS

indigo-4

#6880E2

HEX #506DDF TOKEN CSS

indigo-5(base)

#506DDF

HEX #4462DC TOKEN CSS

indigo-6

#4462DC

HEX #3856CF TOKEN CSS

indigo-7

#3856CF

HEX #2C4AC3 TOKEN CSS

indigo-8

#2C4AC3

HEX #243BA7 TOKEN CSS

indigo-9

#243BA7

lime

10

HEX #F6FFE5 TOKEN CSS

lime-0

#F6FFE5

HEX #EDFFCC TOKEN CSS

lime-1

#EDFFCC

HEX #E0FFA8 TOKEN CSS

lime-2

#E0FFA8

HEX #ACD369 TOKEN CSS

lime-3

#ACD369

HEX #98CC43 TOKEN CSS

lime-4

#98CC43

HEX #85C228 TOKEN CSS

lime-5

#85C228

HEX #74B41A TOKEN CSS

lime-6

#74B41A

HEX #68A513 TOKEN CSS

lime-7(base)

#68A513

HEX #5B970D TOKEN CSS

lime-8

#5B970D

HEX #51830B TOKEN CSS

lime-9

#51830B

orange

10

HEX #FFF4E6 TOKEN CSS

orange-0

#FFF4E6

HEX #FFE8CC TOKEN CSS

orange-1

#FFE8CC

HEX #FFD8A8 TOKEN CSS

orange-2

#FFD8A8

HEX #E5AC6C TOKEN CSS

orange-3

#E5AC6C

HEX #E59845 TOKEN CSS

orange-4

#E59845

HEX #E58326 TOKEN CSS

orange-5

#E58326

HEX #E37111 TOKEN CSS

orange-6

#E37111

HEX #DE5C06 TOKEN CSS

orange-7

#DE5C06

HEX #D3450D TOKEN CSS

orange-8(base)

#D3450D

HEX #C3400D TOKEN CSS

orange-9

#C3400D

pink

10

HEX #FFF0F6 TOKEN CSS

pink-0

#FFF0F6

HEX #FFDEEA TOKEN CSS

pink-1

#FFDEEA

HEX #FFC4D9 TOKEN CSS

pink-2

#FFC4D9

HEX #E191AD TOKEN CSS

pink-3

#E191AD

HEX #DE759A TOKEN CSS

pink-4

#DE759A

HEX #D85A86 TOKEN CSS

pink-5

#D85A86

HEX #CF4173 TOKEN CSS

pink-6(base)

#CF4173

HEX #C02D61 TOKEN CSS

pink-7

#C02D61

HEX #AE2152 TOKEN CSS

pink-8

#AE2152

HEX #951B45 TOKEN CSS

pink-9

#951B45

red

10

HEX #FFF5F5 TOKEN CSS

red-0

#FFF5F5

HEX #FFE3E3 TOKEN CSS

red-1

#FFE3E3

HEX #FFC9C9 TOKEN CSS

red-2

#FFC9C9

HEX #E59797 TOKEN CSS

red-3

#E59797

HEX #E57979 TOKEN CSS

red-4

#E57979

HEX #E56060 TOKEN CSS

red-5

#E56060

HEX #E14949 TOKEN CSS

red-6

#E14949

HEX #D83737 TOKEN CSS

red-7(base)

#D83737

HEX #C92C2C TOKEN CSS

red-8

#C92C2C

HEX #B41E25 TOKEN CSS

red-9

#B41E25

shadow

1

HEX #000000 TOKEN CSS

Black-20%

#000000

teal

10

HEX #E8FFF7 TOKEN CSS

teal-0

#E8FFF7

HEX #C6FFEC TOKEN CSS

teal-1

#C6FFEC

HEX #9EFFE2 TOKEN CSS

teal-2

#9EFFE2

HEX #59CFAB TOKEN CSS

teal-3

#59CFAB

HEX #32C398 TOKEN CSS

teal-4

#32C398

HEX #1CB487 TOKEN CSS

teal-5

#1CB487

HEX #10A578 TOKEN CSS

teal-6

#10A578

HEX #0A956C TOKEN CSS

teal-7

#0A956C

HEX #08835D TOKEN CSS

teal-8(base)

#08835D

HEX #077251 TOKEN CSS

teal-9

#077251

violet

10

HEX #F3F0FF TOKEN CSS

violet-0

#F3F0FF

HEX #E5DBFF TOKEN CSS

violet-1

#E5DBFF

HEX #D0BFFF TOKEN CSS

violet-2

#D0BFFF

HEX #9F87E2 TOKEN CSS

violet-3

#9F87E2

HEX #8769E1 TOKEN CSS

violet-4

#8769E1

HEX #7F60DB TOKEN CSS

violet-5(base)

#7F60DB

HEX #6F4BDF TOKEN CSS

violet-6

#6F4BDF

HEX #6641D7 TOKEN CSS

violet-7

#6641D7

HEX #5C3AC4 TOKEN CSS

violet-8

#5C3AC4

HEX #5535B0 TOKEN CSS

violet-9

#5535B0

yellow

10

HEX #FFF9DB TOKEN CSS

yellow-0

#FFF9DB

HEX #FFF3BF TOKEN CSS

yellow-1

#FFF3BF

HEX #FFEC99 TOKEN CSS

yellow-2

#FFEC99

HEX #E5C95B TOKEN CSS

yellow-3

#E5C95B

HEX #E5BE35 TOKEN CSS

yellow-4

#E5BE35

HEX #E2B016 TOKEN CSS

yellow-5

#E2B016

HEX #C48800 TOKEN CSS

yellow-6

#C48800

HEX #B07200 TOKEN CSS

yellow-7

#B07200

HEX #AD6500 TOKEN CSS

yellow-8(base)

#AD6500

HEX #9C5000 TOKEN CSS

yellow-9

#9C5000

---

Actualización automática

Si cambias un color en Figma, solo debes exportar el JSON a la carpeta /schema y ejecutar npm run build:tokens.