Kleur

Brand schaal

brand-50#fff0f0

brand-100#ffd6d6

brand-200#ffaaaa

brand-300#ff7070

brand-400#e84050

brand-500#c01030

brand-600#9a0020

brand-700#720018

brand-800#480010

brand-900#1a0508

Semantisch

success#16a34a

warning#d97706

error#dc2626

info#2563eb

Spacing

space-1

0.25rem

space-2

0.5rem

space-3

0.75rem

space-4

1rem

space-5

1.25rem

space-6

1.5rem

space-8

2rem

space-10

2.5rem

space-12

3rem

space-16

4rem

space-20

5rem

space-24

6rem

Typografie

Tekstgroottes

Byzantium Design System--byz-text-xs0.75rem

Byzantium Design System--byz-text-sm0.875rem

Byzantium Design System--byz-text-base1rem

Byzantium Design System--byz-text-lg1.125rem

Byzantium Design System--byz-text-xl1.25rem

Byzantium Design System--byz-text-2xl1.5rem

Byzantium Design System--byz-text-3xl1.875rem

Byzantium Design System--byz-text-4xl2.25rem

Lettertypen

Cormorant Garamond--byz-font-serif

Syne--byz-font-sans

Fira Code--byz-font-mono

Motion

Durations

duration-fast100msKlik om te voelen

duration-normal200msKlik om te voelen

duration-slow300msKlik om te voelen

duration-slower500msKlik om te voelen

Easing curves

ease-defaultcubic-bezier(0.4, 0, 0.2, 1)

ease-incubic-bezier(0.4, 0, 1, 1)

ease-outcubic-bezier(0, 0, 0.2, 1)

ease-bouncecubic-bezier(0.34, 1.56, 0.64, 1)

Schaduwen

shadow-sm

shadow-md

shadow-lg

shadow-xl

Z-index

TokenWaarde

z-base0

z-raised10

z-dropdown1000

z-sticky1020

z-overlay1030

z-modal1100

z-toast1200

z-tooltip1453