[App Name] UI Kit

Design system and component reference. Press D to toggle dark mode.

Colors

Brand Colors

Primary
Secondary
Accent

Status Colors

Success
Warning
Error
Info

Typography

text-4xl / 40px

Display Heading

text-3xl / 32px

Page Heading

text-2xl / 24px

Section Heading

text-xl / 20px

Subsection Heading

text-base / 16px

Body text - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

text-sm / 14px - secondary

Secondary text for descriptions, metadata, and supporting information.

Monospace const code = "example";

Buttons

Variants

Sizes

States

Inputs

Helper text goes here

This field is required

Cards

Card Title

This is a basic card component. Use it to group related content together.

Hover Card

This card has a hover effect. Hover over it to see the shadow and lift.

Badges

Primary Success Warning Error

Alerts

Info: This is an informational message.
Success: Your changes have been saved.
Warning: Please review before continuing.
Error: Something went wrong. Please try again.

Spacing Scale

--space-1
4px
--space-2
8px
--space-4
16px
--space-6
24px
--space-8
32px