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

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

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