React Components for Figma Design System

Colors

Flexible palette based on 12 color tokens

Black, white and everything in between. The gray scale should be used for the main UI frame: containers, headers, sections, boxes, etc. If you need to call attention to a particular element (buttons, icons, tooltips, etc.), use one of the core colors.

#f7f7fa

#ededf0

#e1e1e3

#d2d2d6

#b4b4bb

#9696a0

#787885

#5a5b6a

#4a4b57

#3a3a44

#292a31

#19191d

#f5f8ff

#ebf2ff

#d8e6ff

#c4daff

#9dc2ff

#76a9ff

#4f91ff

#2979ff

#2264d1

#1b4ea3

#133774

#0c2146

Action Colors

Use green for successfull experience, yellow for attention and red for the warning / danger statements

#f5faf5

#ecf7ed

#dceddd

#cbe5cc

#a9d3ab

#87c289

#65b168

#43a047

#37833b

#2b662e

#1f4921

#132c14

#fff8eb

#ffefd1

#ffe5b3

#ffd98f

#f5ce84

#ebbf67

#e5ae40

#d6981b

#b88217

#8f6512

#66480d

#463209

#fef2f1

#fee8e7

#fddcda

#fccbc8

#faa9a3

#f8877f

#f6655a

#f44336

#c8372d

#9c2b23

#6f1f19

#43130f

Alternative Colors

You can replace or mix any of Action Colors with alternative

#f7f8fc

#eff0fa

#e1e4f3

#d2d6ed

#b4bbe2

#97a0d6

#7985cb

#5c6bc0

#4c589e

#3b457b

#2a3158

#1a1e35

#f0fafa

#e5f5f5

#d1ebec

#bbe2e2

#8dcfcf

#60bcbc

#33a9a9

#069697

#057b7c

#046061

#034545

#02292a

#fff6ed

#ffefde

#fee7cd

#fddcb9

#fdc68b

#fcaf5c

#fb982e

#fb8200

#ce6b00

#a05300

#733c00

#452400

#fff7fa

#fdedf2

#fbdce6

#f9cada

#f6a8c2

#f285aa

#ef6292

#ec407a

#c23564

#97294e

#6c1e38

#411222

Setproduct Design System

for Figma & React

Preview

License

Buy UI kit