Foundations

Color Styles

Source: Figma Variables API · 0 colors found

Failed to fetch Figma colors

Figma API 401: {"status":401,"err":"Token has expired"}

Check the server console for the full API response. Verify your FIGMA_TOKEN and FIGMA_DS_FILE_ID in .env.local are correct.

Primitives

Raw brand, accent, neutral and status ramps.

brand / accent-1

state

accent(1)-base

#F59E0C

accent(1)-focused

#FDECCE

accent(1)-hover

#A36908

accent(1)-pressed

#523504

shades

accent(1)-10

#FEF7EB

accent(1)-20

#FDECCE

accent(1)-30

#FCDFAE

accent(1)-40

#FACE85

accent(1)-50

#F8BE5D

accent(1)-60

#F7AE35

accent(1)-70

#CC840A

accent(1)-80

#A36908

accent(1)-90

#7B4F06

accent(1)-100

#523504

brand / accent-2

state

accent(2)-base

#966BF7

accent(2)-focused

#EAE1FD

accent(2)-hover

#6447A5

accent(2)-pressed

#322452

shades

accent(2)-10

#F8F5FE

accent(2)-20

#EAE1FD

accent(2)-30

#DCCEFC

accent(2)-40

#CAB5FB

accent(2)-50

#B99CFA

accent(2)-60

#A784F8

accent(2)-70

#7D59CE

accent(2)-80

#6447A5

accent(2)-90

#4B367C

accent(2)-100

#322452

brand / accent-3

state

accent(3)-base

#34D399

accent(3)-focused

#D6F6EB

accent(3)-hover

#238D66

accent(3)-pressed

#114633

shades

accent(3)-10

#EEFBF7

accent(3)-20

#D6F6EB

accent(3)-30

#BBF0DD

accent(3)-40

#99E9CC

accent(3)-50

#78E2BB

accent(3)-60

#56DAAA

accent(3)-70

#2BB080

accent(3)-80

#238D66

accent(3)-90

#1A6A4D

accent(3)-100

#114633

brand / accent-4

state

accent(4)-base

#E76F51

accent(4)-focused

#FAE2DC

accent(4)-hover

#9A4A36

accent(4)-pressed

#4D251B

shades

accent(4)-10

#FDF0ED

accent(4)-20

#FAE2DC

accent(4)-30

#F7CFC5

accent(4)-40

#F3B7A8

accent(4)-50

#EF9F8B

accent(4)-60

#EB876E

accent(4)-70

#C05D44

accent(4)-80

#9A4A36

accent(4)-90

#743829

accent(4)-100

#4D251B

brand / accent-5

state

accent(5)-base

#F4A261

accent(5)-focused

#FDECDF

accent(5)-hover

#A36C41

accent(5)-pressed

#513620

shades

accent(5)-10

#FEF4EC

accent(5)-20

#FDECDF

accent(5)-30

#FBE0CA

accent(5)-40

#F9D0B0

accent(5)-50

#F8C196

accent(5)-60

#F6B17B

accent(5)-70

#CB8751

accent(5)-80

#A36C41

accent(5)-90

#7A5131

accent(5)-100

#513620

brand / accent-6

state

accent(6)-base

#264653

accent(6)-focused

#D4DADD

accent(6)-hover

#192F37

accent(6)-pressed

#0D171C

shades

accent(6)-10

#E8ECED

accent(6)-20

#D4DADD

accent(6)-30

#B7C1C6

accent(6)-40

#92A2A9

accent(6)-50

#6E848C

accent(6)-60

#4A6570

accent(6)-70

#203A45

accent(6)-80

#192F37

accent(6)-90

#13232A

accent(6)-100

#0D171C

brand / accent-7

state

accent(7)-base

#8C4F7B

accent(7)-focused

#E8DCE5

accent(7)-hover

#5D3552

accent(7)-pressed

#2F1A29

shades

accent(7)-10

#F3ECF1

accent(7)-20

#E8DCE5

accent(7)-30

#D9C4D3

accent(7)-40

#C5A7BD

accent(7)-50

#B28AA7

accent(7)-60

#9F6C91

accent(7)-70

#754267

accent(7)-80

#5D3552

accent(7)-90

#46283E

accent(7)-100

#2F1A29

brand / accent-8

state

accent(8)-base

#AACC85

accent(8)-focused

#EEF5E7

accent(8)-hover

#718859

accent(8)-pressed

#39442C

shades

accent(8)-10

#F5F9F1

accent(8)-20

#EEF5E7

accent(8)-30

#E3EED6

accent(8)-40

#D4E5C2

accent(8)-50

#C6DDAE

accent(8)-60

#B8D499

accent(8)-70

#8EAA6F

accent(8)-80

#718859

accent(8)-90

#556643

accent(8)-100

#39442C

brand / accent-9

state

accent(9)-base

#6B87F7

accent(9)-focused

#E1E7FD

accent(9)-hover

#475AA5

accent(9)-pressed

#242D52

shades

accent(9)-10

#ECEFFE

accent(9)-20

#E1E7FD

accent(9)-30

#CED7FC

accent(9)-40

#B5C3FB

accent(9)-50

#9CAFFA

accent(9)-60

#849BF8

accent(9)-70

#5971CE

accent(9)-80

#475AA5

accent(9)-90

#36447C

accent(9)-100

#242D52

brand / primary

state

primary-base

#3468E7

primary-focused

#D6E1FA

primary-hover

#23459A

primary-pressed

#11234D

shades

primary-10

#F6F8FE

primary-20

#E4EBFC

primary-30

#D1DDFA

primary-40

#99B3F3

primary-50

#789AEF

primary-60

#5681EB

primary-70

#2B57C0

primary-80

#23459A

primary-90

#1A3474

primary-100

#11234D

brand / secondary

state

secondary-base

#FF009B

secondary-focused

#FFCCEB

secondary-hover

#AA0067

secondary-pressed

#550034

shades

secondary-10

#FFF5FB

secondary-20

#FFE5F5

secondary-30

#FFCCEB

secondary-40

#FF80CD

secondary-50

#FF55BC

secondary-60

#FF2BAC

secondary-70

#D40081

secondary-80

#AA0067

secondary-90

#80004E

secondary-100

#550034

neutral

state

neutral-base

#121317

neutral-focused

#D0D0D1

neutral-hover

#0C0D0F

neutral-pressed

#060608

shades

neutral-10

#FFFFFF

neutral-20

#F6F6F6

neutral-30

#EEEEEF

neutral-40

#E3E3E3

neutral-50

#C6C6C7

neutral-60

#A5A5A7

neutral-70

#7F8082

neutral-80

#6C6D6F

neutral-90

#4D4E51

neutral-100

#121317

status / danger

state

danger-base

#DC3545

danger-focused

#F8D7DA

danger-hover

#93232E

danger-pressed

#491217

shades

danger-10

#FBE9EB

danger-20

#F8D7DA

danger-30

#F3BCC1

danger-40

#ED9AA2

danger-50

#E87883

danger-60

#E25764

danger-70

#B72C3A

danger-80

#93232E

danger-90

#6E1B23

danger-100

#491217

status / info

state

info-base

#42B0FF

info-focused

#D9EFFF

info-hover

#2C75AA

info-pressed

#163B55

shades

info-10

#EBF6FF

info-20

#D9EFFF

info-30

#C0E5FF

info-40

#A0D7FF

info-50

#81CAFF

info-60

#62BDFF

info-70

#3793D4

info-80

#2C75AA

info-90

#215880

info-100

#163B55

status / success

state

success-base

#28A745

success-focused

#D4EDDA

success-hover

#1B6F2E

success-pressed

#0D3817

shades

success-10

#EDF8EF

success-20

#D4EDDA

success-30

#B7E2C1

success-40

#93D3A2

success-50

#70C483

success-60

#4CB664

success-70

#218B3A

success-80

#1B6F2E

success-90

#145423

success-100

#0D3817

status / warning

state

warning-base

#FFC107

warning-focused

#FFF3CD

warning-hover

#AA8105

warning-pressed

#554002

shades

warning-10

#FFF9E5

warning-20

#FFF3CD

warning-30

#FFEAAC

warning-40

#FFE083

warning-50

#FFD65A

warning-60

#FFCB30

warning-70

#D4A106

warning-80

#AA8105

warning-90

#806104

warning-100

#554002

Tokens

Semantic aliases consumed by product surfaces.

content / brand / accent-1

accent-1/dark

#CC840A

accent-1/base

#F59E0C

accent-1/light

#FEF7EB

content / brand / accent-2

accent-2/dark

#7D59CE

accent-2/base

#966BF7

accent-2/light

#F8F5FE

content / brand / accent-3

accent-3/dark

#2BB080

accent-3/base

#34D399

accent-3/light

#EEFBF7

content / brand / accent-4

accent-4/dark

#C05D44

accent-4/base

#E76F51

accent-4/light

#FDF0ED

content / brand / accent-5

accent-5/dark

#CB8751

accent-5/base

#F4A261

accent-5/light

#FEF4EC

content / brand / accent-6

accent-6/dark

#203A45

accent-6/base

#264653

accent-6/light

#E8ECED

content / brand / accent-7

accent-7/dark

#754267

accent-7/base

#8C4F7B

accent-7/light

#F3ECF1

content / brand / accent-8

accent-8/dark

#8EAA6F

accent-8/base

#AACC85

accent-8/light

#F5F9F1

content / brand / accent-9

accent-9/dark

#5971CE

accent-9/base

#6B87F7

accent-9/light

#ECEFFE

content / brand / primary

primary/dark

#2B57C0

primary/base

#3468E7

primary/light

#F6F8FE

content / brand / secondary

secondary/dark

#D40081

secondary/base

#FF009B

secondary/light

#FFF5FB

content / neutral

neutral/dark

#121317

neutral/semi-dark

#4D4E51

neutral/base

#6C6D6F

neutral/light

#A5A5A7

neutral/white

#FFFFFF

content / state / danger

danger/dark

#B72C3A

danger/base

#DC3545

danger/light

#FBE9EB

content / state / info

info/dark

#3793D4

info/base

#42B0FF

info/light

#EBF6FF

content / state / success

success/dark

#218B3A

success/base

#28A745

success/light

#EDF8EF

content / state / warning

warning/dark

#D4A106

warning/base

#FFC107

warning/light

#FFF9E5