colors

brand / yellow

primary

daffodil light

:normal

#fffbd5

daffodil light

:hover

#fff9c0

daffodil light

:active

#fff496

daffodil

:normal

#fff281

daffodil

:hover

#fff06c

daffodil

:active

#ffee57

daffodil dark

:normal

#fffbd5

daffodil dark

:hover

#fff9c0

daffodil dark

:active

#fff496

brand / leather

secondary

leather light

:normal

#ffffff

leather light

:hover

#fafafa

leather light

:active

#f5f5f5

leather

:normal

#e8e8e8

leather

:hover

#d9d9d9

leather

:active

#bfbfbf

leather dark

:normal

#8c8c8c

leather dark

:hover

#595959

leather dark

:active

#262626

Neutral / Ink

Text, Elements On-Surface

ink light

:normal

#acb8c3

ink light

:hover

#9aa8b6

ink light

:active

#8999a9

ink

:normal

#5a6672

ink

:hover

#4c5761

ink

:active

#3f4750

ink dark

:normal

#26292c

ink dark

:hover

#171a1c

ink dark

:active

#090a0b

neutral / porcelain

Surface(Backgrounds, Border, Skeleton,...)

porcelain light

:normal

#e5f0f9

porcelain light

:hover

#cee2f3

porcelain light

:active

#b6d3ed

porcelain

:normal

#005baa

porcelain

:hover

#005299

porcelain

:active

#005baa

porcelain dark

:normal

#00396b

porcelain dark

:hover

#003461

porcelain dark

:active

#002e57

semantic / blue

Information: Accent, Information, New, Help, Interactive, Focus

blue light

:normal

#e5eef9

blue light

:hover

#cedef3

blue light

:active

#b6cded

blue

:normal

#147aff

blue

:hover

#006fff

blue

:active

#0066eb

blue dark

:normal

#005dd6

blue dark

:hover

#0054c2

blue dark

:active

#004bad

semantic / green

Positive: Confirm, Success, Available

green light

:normal

#e5f9e7

green light

:hover

#cef3d2

green light

:active

#b6edbb

green

:normal

#28ba36

green

:hover

#25b133

green

:active

#22a02f

green dark

:normal

#00ad11

green dark

:hover

#00990f

green dark

:active

#00850d

semantic / orange

Notice: Warning, Undefined

orange light

:normal

#f9f1e5

orange light

:hover

#f3e3ce

orange light

:active

#edd6b6

orange

:normal

#ff9c11

orange

:hover

#fa9200

orange

:active

#e58600

orange dark

:normal

#d17a00

orange dark

:hover

#bd6e00

orange dark

:active

#a86200

semantic / red

Negative: Remove, Error, Failed, Critical

red light

:normal

#f9e7e5

red light

:hover

#f3d1ce

red light

:active

#edbab6

red

:normal

#ff3c2b

red

:hover

#ff1f0a

red

:active

#eb1400

red dark

:normal

#cc1100

red dark

:hover

#b80f00

red dark

:active

#a30e00

typography

manrope

ag

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

0123456789!@#$%^&*()

Display 2xl

Font size: 72px / 4.5rem | Line height: 90px / 5.625rem | Tracking: -2%

Display xl

Font size: 60px / 3.75rem | Line height: 72px / 4.625rem | Tracking: -2%

Display lg

Font size: 48px / 3rem | Line height: 60px / 3.75rem | Tracking: -2%

Display md

Font size: 36px / 2.25rem | Line height: 44px / 2.75rem | Tracking: -2%

Headline

Font size: 30px / 1.875rem | Line height: 38px / 2.375rem

Title

Font size: 24px / 1.5rem | Line height: 32px / 2rem

Text xl

Font size: 20px / 1.25rem | Line height: 30px / 1.875rem

Text lg

Font size: 18px / 1.125rem | Line height: 28px / 1.75rem

text-md

Font size: 16px / 1rem | Line height: 24px / 1.5rem

Text sm

Font size: 14px / 0.875rem | Line height: 20px / 1.25rem

Text xs

Font size: 12px / 0.75rem | Line height: 18px / 1.125rem

components

button colors:

button size:

text link:

text only

icon right

icon left