Design System

Interactive Showcase

Explore our design system components, customize themes live, and test animations. This page demonstrates what we can build for your project.

Color Palette

Our design system uses HSL color values for consistent theming

Slate

0 0% 15%

Gray

0 0% 25%

Zinc

0 0% 35%

Neutral

0 0% 45%

Stone

0 0% 55%

Red

0 70% 50%

Orange

25 90% 55%

Amber

40 90% 55%

Yellow

45 95% 55%

Lime

75 70% 45%

Green

142 70% 40%

Emerald

145 60% 35%

Teal

165 60% 40%

Cyan

185 70% 45%

Sky

200 80% 50%

Blue

215 70% 55%

Indigo

240 70% 55%

Violet

265 70% 55%

Purple

280 65% 55%

Fuchsia

295 75% 55%

Pink

320 75% 55%

Rose

345 75% 55%

🎨 Live Customizer

Theme Editor

Adjust colors and styles to see live changes

Primary Element

Live preview with your color

Card with custom radius

Badge
Outline
✨ Interactive

Animation Playground

Test different animation effects and export the code

Animate

Usage Example

Copy this code to use our design system

import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';

export default function MyComponent() {
  return (
    <Card className="p-6 hover:shadow-lg transition-all">
      <h2 className="text-xl font-bold mb-2">Card Title</h2>
      <p className="text-muted-foreground mb-4">
        Beautiful card with hover effects
      </p>
      <Button>Get Started</Button>
    </Card>
  );
}