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

Project Name*

Enter a descriptive name for your project

Description

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

Success!

Your project has been created successfully.

Warning

Please review your settings before proceeding.

Information

This feature is currently in beta. Please provide feedback.

Error

Something went wrong. Please try again later.

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

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