Warden Design System
A comprehensive, utility-first design system for building professional SaaS dashboards
Typography
Font Family
Inter - Optimized for readability at all sizes
Headings
Heading 1
Heading 2
Heading 3
Heading 4
Body Text
Body Large - The quick brown fox jumps over the lazy dog
Body Small - The quick brown fox jumps over the lazy dog
Body Extra Small - The quick brown fox jumps over the lazy dog
Font Weights
Normal
font-normal (400)
Medium
font-medium (500)
Semibold
font-semibold (600)
Bold
font-bold (700)
Color Palette
Brand Colors
Primary brand identity colors
Navy
#14213d
Used for navigation and primary UI elements
Orange
#fca311
Used for primary actions and highlights
Status Colors
System feedback and state indicators
Success
#10b981
Warning
#f59e0b
Error
#ef4444
Gray Scale
Neutral colors for text, borders, and backgrounds
Slate 50
Backgrounds
Slate 100
Subtle backgrounds
Slate 400
Disabled text
Slate 600
Secondary text
Slate 900
Primary text
Spacing Scale
Shadows & Elevation
None
shadow-none
Level 0
Subtle
shadow-sm
Level 1
Default
shadow
Level 2
Buttons
Variants
Primary, secondary, ghost, and danger button styles
Sizes
Small, medium, and large button sizes
States
Loading, disabled, and interactive states
Form Components
Input Fields
Text inputs with labels and helper text
This field is required
Checkboxes
Selection controls for multiple options
Cards
Default Card
Standard card with border
This is the default card variant with a subtle border.
Elevated Card
Card with shadow elevation
This card has a subtle shadow for depth.
Outlined Card
Card with prominent border
This card uses a thicker border for emphasis.
Status Badges
Loading States
Small
Medium
Large
Empty States
No items found
Get started by creating your first item. It will appear here once created.
Data Display
Data Table
Structured data presentation with status indicators
| Project | Owner | Status | Last Updated |
|---|---|---|---|
| Authentication System | Sarah Chen | Active | 2 hours ago |
| Payment Gateway | Marcus Johnson | Pending | 1 day ago |
| API Integration | Alex Rivera | Failed | 3 days ago |
| Dashboard Redesign | Emma Wilson | Active | 5 hours ago |
| Mobile App | David Kim | Active | 1 hour ago |