Design System
Elegant design system optimized for light mode environments with enhanced contrast and reduced eye strain.
For more details on how to integrate this to your project, visit this repository.
Color Palette
A carefully curated color system focusing on essential shades for optimal design consistency and usability.
Primary
Light
#ede9fe | violet-100
Backgrounds, subtle accents
Primary
#8b5cf6 | violet-500
Main actions, links
Dark
#7008e7 | violet-700
Hover states, emphasis
Neutral
Light
#f8fafc | slate-50
Page backgrounds
Medium
#314158 | slate-700
Secondary text, borders
Dark
#0f172b | slate-900
Headlines, body text
Status
Success
#10b981 | emerald-500
Positive actions
Warning
#f59e0b | amber-500
Caution states
Error
#fb2c36 | red-500
Destructive actions
Typography
Headings
H1 - 48px / 52px leading / 700 weight
The quick brown fox
H2 - 36px / 40px leading / 700 weight
The quick brown fox
H3 - 30px / 36px leading / 700 weight
The quick brown fox
H4 - 24px / 32px leading / 600 weight
The quick brown fox
Body Text
Large - 20px / 30px leading / 400 weight
The quick brown fox jumps over the lazy dog. This pangram contains every letter of the alphabet and demonstrates proper line height.
Base - 16px / 24px leading / 400 weight
The quick brown fox jumps over the lazy dog. This pangram contains every letter of the alphabet and demonstrates proper line height.
Small - 14px / 20px leading / 400 weight
The quick brown fox jumps over the lazy dog. This pangram contains every letter of the alphabet and demonstrates proper line height.
Button Components
A complete button system with various states and interactions designed for clarity and accessibility.
Primary Buttons
Default States
With Icons
Secondary Buttons
Outline Variants
Ghost Variants
Card Components
Basic Card
This is a well-designed card component with proper spacing, visual hierarchy, and hover states for enhanced user experience.
Feature Card
A premium featured card with beautiful gradients and glass morphism effects to highlight your most important content.
Analytics Overview
1,234
Total Users
vs last month
Status Indicators
Alert Styles
Success
Your changes have been saved successfully.
Information
New features are available in the latest update.
Warning
Please review your settings before proceeding.
Error
Something went wrong. Please try again.