Design System Showcase

Colors

blue-100

blue-200

blue-300

blue-400

blue-500

blue-600

blue-700

blue-800

blue-900

teal-100

teal-200

teal-300

teal-400

teal-500

teal-600

teal-700

teal-800

teal-900

Spacing

p-xs

p-sm

p-md

p-lg

p-xl

Border Radius

rounded-sm

rounded-lg

rounded-xl

Opacity

low / md / high

Typography

Heading (font-heading)

Body (font-body). The quick brown fox jumps over the lazy dog.

Tracking increased

Tracking decreased

Buttons

Card

Custom boxShadow from theme.extend.boxShadow.default applied.

test