design-conventions

name	design-conventions
description	Golden Anniversary design system with OKLCH color palette, typography (Inter, Playfair Display, Dancing Script), component states, Framer Motion patterns, and accessibility requirements. Use when working on styling, UI components, or visual changes.

Design Conventions

Golden Colors (OKLCH)

:root {
  --gold-50: oklch(98% 0.02 85);
  --gold-100: oklch(95% 0.04 85);
  --gold-200: oklch(88% 0.08 85);
  --gold-300: oklch(82% 0.12 85);
  --gold-400: oklch(75% 0.15 85);
  --gold-500: oklch(68% 0.18 85);
  --gold-600: oklch(60% 0.15 85);
  --gold-700: oklch(52% 0.12 85);
  --gold-800: oklch(44% 0.09 85);
  --gold-900: oklch(36% 0.06 85);
  --gold-950: oklch(28% 0.04 85);
}

Validated contrast combinations (>= 4.5:1):

• gold-600 + white (4.8:1)
• gold-700 + white (6.2:1)
• gold-800 + gold-50 (4.6:1)
• Avoid: gold-400 + white (3.8:1)

Typography

// Inter - Body text, UI elements
const inter = Inter({ subsets: ["latin"], variable: "--font-sans" });

// Playfair Display - Section titles
const playfair = Playfair_Display({ subsets: ["latin"], variable: "--font-serif" });

// Dancing Script - Couple names, special text
const dancingScript = Dancing_Script({ subsets: ["latin"], variable: "--font-script" });

Usage:

<h1 className="font-script text-gold-500">Iria e Ari</h1>
<h2 className="font-heading text-gold-700">Golden Anniversary</h2>
<p className="font-body text-muted-foreground">Body text</p>

Breakpoints (mobile-first)

• Mobile: 375px+ (base)
• Tablet: 768px+ (md:)
• Desktop: 1024px+ (lg:)

Component States

Buttons:

bg-primary → bg-primary/90 + scale-105 → bg-primary/80 → bg-muted
// Default → Hover → Active → Disabled

Cards:

border-border → border-gold-200 + shadow-lg → ring-2 ring-ring
// Default → Hover → Focus

Images:

skeleton gold-100 → normal → scale-105 + brightness-110 → bg-muted + icon
// Loading → Default → Hover → Error

Framer Motion Patterns

• Scroll animations: useInView for gradual appearance
• Hover effects: whileHover={{ y: -4, scale: 1.02 }}
• Loading states: Pulse animation on skeletons
• Success feedback: Checkmark animation

Accessibility Requirements

• Touch targets: min 44px (min-h-11)
• Focus visible: ring-2 ring-ring
• Contrast: >= 4.5:1
• Keyboard navigation: logical tab order
• Text scaling: functional up to 200% zoom

Shadcn/ui Components Used

Base: Button, Card, Input, Textarea, Badge, Dialog, Tabs, Tooltip, Select, Checkbox, Avatar

Custom: TimeCard, PhotoCarousel, MessageCard, TimelineItem