Design Conventions

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