Samples

COLORS

100

200

300

400

500

600

700

800

900

1000

text

#f3f3f3

text-100

#e7e7e7

text-200

#cecece

text-300

#aaaaaa

text-400

#858585

text-500

#7e7777

text-600

#746e6e

text-700

#676161

text-800

#524d4d

text-900

#373434

text-1000

brand

#f1e6ff

brand-100

#e3ccff

brand-200

#c899ff

brand-300

#9e4dff

brand-400

#7500ff

brand-500

#6c00eb

brand-600

#6300d9

brand-700

#5800bf

brand-800

#460099

brand-900

#2f0066

brand-1000

primary

#e6f4ff

primary-100

#cce9ff

primary-200

#99d3ff

primary-300

#4db1ff

primary-400

#0090ff

primary-500

#0084eb

primary-600

#007ad9

primary-700

#006cbf

primary-800

#005699

primary-900

#003a66

primary-1000

secondary

#fcfdfe

secondary-100

#f8fafd

secondary-200

#f1f6fc

secondary-300

#e7eff9

secondary-400

#dde8f7

secondary-500

#cad5e4

secondary-600

#bbc5d3

secondary-700

#a5aeba

secondary-800

#848b95

secondary-900

#585d63

secondary-1000

basic

#fefefe

basic-100

#fcfdfe

basic-200

#fafbfd

basic-300

#f6f7fb

basic-400

#f2f4f9

basic-500

#dfe0e5

basic-600

#cecfd4

basic-700

#b6b7bb

basic-800

#919295

basic-900

#616264

basic-1000

light

white

light-100

white

light-200

white

light-300

white

light-400

white

light-500

#ebebeb

light-600

#d9d9d9

light-700

#bfbfbf

light-800

#999999

light-900

#666666

light-1000

dark

#f0f0f0

dark-100

#e1e1e1

dark-200

#c3c3c3

dark-300

#979797

dark-400

#6a6a6a

dark-500

#645f5f

dark-600

#5d5858

dark-700

#524d4d

dark-800

#413e3e

dark-900

#2c2929

dark-1000

gray

#fafafa

gray-100

whitesmoke

gray-200

#ebebeb

gray-300

#dbdbdb

gray-400

#cccccc

gray-500

#bebaba

gray-600

#afacac

gray-700

#9b9898

gray-800

#7c7979

gray-900

#525151

gray-1000

success

#e6faf2

success-100

#ccf5e4

success-200

#99ebc9

success-300

#4ddba1

success-400

#01cc78

success-500

#00bd6e

success-600

#00ae66

success-700

#009a5a

success-800

#007b48

success-900

#005230

success-1000

info

#e6f4ff

info-100

#cce9ff

info-200

#99d3ff

info-300

#4db1ff

info-400

#0090ff

info-500

#0084eb

info-600

#007ad9

info-700

#006cbf

info-800

#005699

info-900

#003a66

info-1000

warning

#fef7e8

warning-100

#feeed2

warning-200

#fcdda4

warning-300

#fac460

warning-400

#f8aa1c

warning-500

#e89d16

warning-600

#d69114

warning-700

#bd8012

warning-800

#97670e

warning-900

#65440a

warning-1000

danger

#ffecee

danger-100

#ffd8dc

danger-200

#ffb2b9

danger-300

#ff7885

danger-400

#ff3e51

danger-500

#eb394b

danger-600

#d93545

danger-700

#bf2f3d

danger-800

#992531

danger-900

#661920

danger-1000

BUTTON

brand

primary

secondary

basic

light

dark

gray

success

info

warning

danger

fill

outline

ghost

INPUT

brand

primary

secondary

basic

light

dark

gray

success

info

warning

danger

fill

outline

ghost

LINK

brand

primary

secondary

basic

light

dark

gray

success

info

warning

danger

fill

outline

ghost