Foundations

The visual primitives that every component is built on.

Colors

Semantic color tokens defined as CSS custom properties. All colors adapt automatically for light and dark mode.

Brand
Primary--primary-color
Secondary--secondary-color
Semantic
Success--success-color
Warning--warning-color
Error--error-color
Background Depth
Depth 1--background-depth-one-color
Depth 2--background-depth-two-color
Depth 3--background-depth-three-color
Typography
Primary--font-primary-color
Secondary--font-secondary-color
Tertiary--font-tertiary-color

Typography

Poppins typeface with a fluid scale. Base size 24px, scaled down on smaller viewports.

kd-title-1The quick brown fox1.75rem / 700
kd-title-2The quick brown fox1.375rem / 700
kd-headline-1The quick brown fox jumps1.25rem / 600
kd-headline-2The quick brown fox jumps over1rem / 600
kd-headline-3The quick brown fox jumps over the lazy dog0.85rem / 600
kd-headline-4The quick brown fox jumps over the lazy dog0.75rem / 600
kd-headline-5The quick brown fox jumps over the lazy dog0.65rem / 600
kd-headline-6The quick brown fox jumps over the lazy dog0.55rem / 600
kd-body-1The quick brown fox jumps over the lazy dog1rem / 400
kd-body-2The quick brown fox jumps over the lazy dog0.85rem / 400
kd-body-3The quick brown fox jumps over the lazy dog0.75rem / 400
kd-body-4The quick brown fox jumps over the lazy dog0.65rem / 400
kd-body-5The quick brown fox jumps over the lazy dog0.55rem / 400
kd-caption-textUPPERCASE LABEL TEXT0.55rem / 600 / uppercase
kd-button-textBUTTON LABEL TEXT0.55rem / 600 / uppercase

Spacing Scale

All spacing uses rem units relative to the fluid base font size.

0.25rem · 6px
0.5rem · 12px
0.75rem · 18px
1rem · 24px
1.5rem · 36px
2rem · 48px
3rem · 72px
4rem · 96px