Design System Demo
Complete component showcase with light/dark theme testing
Color Palette
Surface Hierarchy
shadcn defaults (zinc) with clear visual hierarchy
Background#FAFAF9
Card#FFFFFF
Secondary#F5F5F4
Muted#E7E5E4
Border#D6D3D1
Foreground#1C1917
Brand Accent
Purple accent for highlights and features
Purple#7C3AED
Purple Muted#EDE9FE
DestructiveErrors
Ring (Focus)Focus states
Primary Action
Strong black CTA with inverted dark mode
PrimaryBlack → White
Ring (Focus)#7C3AED
Typography
Heading 1 (Nunito Sans)
Heading 2 (Nunito Sans)
Heading 3 (Nunito Sans)
Heading 4 (Nunito Sans)
Body text (Inter) - The quick brown fox jumps over the lazy dog.
Muted text - Secondary information goes here.
Code (Geist Mono)Buttons
Alerts
Default Alert
This is a default alert with some helpful information.
Error
Something went wrong. Please try again later.
Avatar
CNVCJDAB
Badges
DefaultSecondaryOutlineDestructive
PurplePurple Solid
Breadcrumb
Cards
Feature Card
Cards with brand color accents for feature highlights.
Card content goes here.
Notifications
Stay updated with real-time alerts.
Configure your notification preferences.
Completed
Success states with neutral accent.
All tasks have been completed.
Dialog
Dropdown Menu
Form Elements
Pagination
Progress
Sheet
Skeleton
Table
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
Tabs
Account Settings
Manage your account settings and preferences here.
Toast (Sonner)
Tooltip
Container Queries
These cards adapt based on their container width, not viewport.
Container Query Card
Stacks vertically in small containers, horizontal when wider.
Responsive Component
Same component, different container sizes.
Toggle the theme with the button in the top right to test light/dark mode.