Design System

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;
  --radius: 0.5rem;
}

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
             "Helvetica Neue", Arial, sans-serif;

<h1 className="text-4xl font-bold">Heading 1</h1>
<h2 className="text-3xl font-semibold">Heading 2</h2>
<h3 className="text-2xl font-semibold">Heading 3</h3>
<p className="text-base">Body text</p>
<span className="text-sm text-muted-foreground">Small text</span>
<span className="text-xs">Extra small</span>

<div className="p-4 space-y-4">
  <Card className="p-6">
    <CardContent className="space-y-2">
      {/* Content */}
    </CardContent>
  </Card>
</div>

<div className="rounded-md">Default radius</div>
<div className="rounded-lg">Large radius</div>
<div className="rounded-full">Circular</div>

<div className="shadow-sm">Subtle shadow</div>
<div className="shadow">Default shadow</div>
<div className="shadow-md">Medium shadow</div>
<div className="shadow-lg">Large shadow</div>

import { cva, type VariantProps } from "class-variance-authority";
 
const buttonVariants = cva(
  // Base styles
  "inline-flex items-center justify-center rounded-md font-medium transition-colors",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline: "border border-input bg-background hover:bg-accent",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-9 px-4 py-2",
        sm: "h-8 px-3 text-xs",
        lg: "h-10 px-8",
        icon: "h-9 w-9",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
);

<div className="
  grid 
  grid-cols-1 
  md:grid-cols-2 
  lg:grid-cols-3 
  gap-4
">
  {/* Responsive grid */}
</div>
 
<nav className="
  hidden 
  md:flex 
  items-center 
  space-x-4
">
  {/* Hidden on mobile, flex on tablet+ */}
</nav>

import { motion } from "framer-motion";
 
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  exit={{ opacity: 0, y: -20 }}
  transition={{ duration: 0.3 }}
>
  Animated content
</motion.div>

<div className="animate-spin">Spinner</div>
<div className="animate-pulse">Loading skeleton</div>
<div className="animate-bounce">Bouncing element</div>

<button className="
  transition-colors 
  duration-200 
  hover:bg-primary/90
">
  Hover me
</button>
 
<div className="
  transition-all 
  duration-300 
  ease-in-out
  hover:scale-105
">
  Scale on hover
</div>

<GlassCard className="p-6">
  <h2>Glass Effect</h2>
  <p>Content with blur background</p>
</GlassCard>

.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius);
}

<button className="
  focus-visible:outline-none 
  focus-visible:ring-2 
  focus-visible:ring-ring 
  focus-visible:ring-offset-2
">
  Accessible button
</button>

// ✅ Good contrast
<p className="text-foreground">High contrast text</p>
 
// ⚠️ Check contrast
<p className="text-muted-foreground">Muted text - verify contrast</p>

<button aria-label="Close dialog">
  <XIcon className="h-4 w-4" aria-hidden="true" />
</button>
 
<span className="sr-only">Loading...</span>

import { cn } from "@/lib/utils";
 
// Merge classes with conflict resolution
cn("px-4 py-2", "px-6") // → "py-2 px-6"
 
// Conditional classes
cn("base-class", isActive && "active-class")
 
// With className prop
cn(buttonVariants({ variant, size }), className)