This is your
design preview
Every color, component, and interaction on this page uses your design tokens. Change them, and watch everything transform.
Production Ready
Typography
Aa
Font: System Sans
Weight: 100–900
Style: Variable
Display
Build the right thing, fast
Headline
Ship with confidence every time
Title
Components that scale with your team
Body
This is your body text. Readable, balanced, and comfortable for extended reading. Most of your interface will use this size. It's designed to be scannable while still being pleasant for longer passages.
Caption
Small text for labels, timestamps, and secondary information.
Color Palette
Primary
Brand color, CTAs, links
--primary-*
Secondary
Accents, highlights
--secondary-*
Tertiary
Supporting elements
--tertiary-*
Gray
Text, borders, backgrounds
--gray-*
Status Colors
Success
--success-500
Warning
--warning-500
Destructive
--destructive-500
Info
--info-500
const colors = {
primary: "var(--primary-500)",
secondary: "var(--secondary-500)",
success: "var(--success-500)",
};Spacing & Layout
Gap Scale
xs
0.25rem / 4px
sm
0.5rem / 8px
md
1rem / 16px
lg
1.5rem / 24px
xl
2rem / 32px
2xl
3rem / 48px
Usage
Stack / Row / Grid
gap="md"Tailwind
gap-4CSS Variable
var(--spacing-md)Gap in Action
gap="xs"
gap="sm"
gap="md"
gap="lg"
gap="xl"
Border Radius
none
sm
md
lg
xl
2xl
full
Container Widths
Container size="sm"
Container size="md"
Container size="lg"
Container size="xl"
Container size="2xl"
Components
Buttons
Badges
Form Controls
Progress & Sliders
Loading...
67%
Volume
Price Range
Avatars
Tabs
Overview content goes here
Alerts
Skeletons
Tooltips
States & Feedback
Loading States
Spinner animation
Bouncing dots
Pulse skeleton
Hover Effects
Border
Scale
Lift
Fill
Rotate
Expand
Focus States
Tab through these to see focus rings
Focus ring styles
Disabled States
Disabled elements have reduced opacity and cursor-not-allowed
Cards & Surfaces
Elevation Levels
Flat
No elevation
Raised
Subtle lift
Card
Standard cards
Dropdown
Menus, dialogs
Modal
Maximum depth
Card Styles
Default Card
Simple bordered card with subtle background. Great for listing content.
Gradient Card
Eye-catching gradient for featured content or CTAs.
Glass Card
Translucent glassmorphism effect for modern interfaces.
Interactive Cards
Analytics
Track your metrics
Developer
Build with APIs
Community
Connect with others
Shadows & Effects
Shadow Scale
shadow-sm
shadow
shadow-md
shadow-lg
shadow-xl
shadow-2xl
Colored Shadows
Primary
Color glow
Secondary
Color glow
Success
Color glow
Destructive
Color glow
Ring Effects
Gradients
to-r
to-br
to-t via
radial
Interactive Playground
Project Dashboard
Real-time metrics
Users
12.4k
+14%
Revenue
$89k
+23%
Bounce
24%
-8%
Sprint Progress
45%
Drag to see the progress bar update
Settings
Customize your experience
Notifications
Get alerts when things happen
AI Assistant
Let Claude handle the boring stuff
Public Profile
Let others see your activity
Dark Mode
Easy on the eyes
Activity Feed
PR #247 merged
Claude squashed 12 commits
Just now
All tests passing
147 tests in 2.3s
2m ago
Performance alert
Bundle size increased by 12kb
5m ago
New star on GitHub
Someone likes your work!
10m ago
Team Members
Alex Chen
Lead Developer
Sam Rivera
Designer
Jordan Park
Engineer
Taylor Kim
Advisor
Icon Library
Using Lucide Icons — 1000+ icons available