Design System

A comprehensive showcase of our design system components and tokens.

Typography

Display Text
Large heading styles for hero sections

Display Large

Heading 1

Heading 2

Heading 3

Body Text
Standard text styles for content

Large body text for important content

Base body text for standard content

Lead text for introductory paragraphs

Buttons

Primary Actions
Secondary Actions
Special States

Form Components

Form Fields
Input components with consistent styling

Enter a descriptive name for your project

Provide a detailed description

Help & Feedback
Guidance and status components

💡 Pro Tips

  • Keep names concise and memorable
  • Use descriptive language
  • Avoid technical jargon

⚠️ Important Notes

  • Changes are saved automatically
  • Some fields are required

Alerts & Status

Badges & Status Indicators

Status Badges
Visual indicators for different states
Default
Secondary
Error
Outline
Success
Warning
Info

Layout System

Grid Layouts
Responsive grid examples

3-Column Grid

Column 1
Column 2
Column 3

2-Column Grid

Wide Column
Wide Column

Design Tokens

Spacing Scale
Consistent spacing system
xs0.25rem
sm0.5rem
md1rem
lg1.5rem
xl2rem
2xl3rem
3xl4rem
4xl6rem
Visual Tokens
Border radius and shadow styles

Border Radius

Shadows

Soft
Medium
Large
XL