---

name: design-language-system description: Maintains visual consistency across portfolio UI components. Use when creating or modifying components, styling pages, or ensuring design consistency. Includes coral colour tokens (OKLCH), typography scale, spacing rules, animations, and component patterns.

Design Language System

Use this guide when creating or modifying UI components to ensure visual consistency across the portfolio.

---

Colour Tokens

Base Palette

Coral Accent (Primary)

---

Typography

Fonts

• Sans (Body): Figtree via --font-sans
• Mono (Code): Geist Mono via --font-mono

Scale

Heading Styles

• Letter-spacing: -0.03em on h1, h2
• Use tracking-tight class
• Colour: text-foreground

---

Spacing

Rules

• Use gap-* utilities for spacing between elements
• Avoid margin-top, prefer margin-bottom or gap
• Use even numbers only: gap-2, gap-4, gap-6, gap-8, gap-12
• Use gap-* instead of gap-x-*/gap-y-* (cleaner, same behaviour in flex containers)

Spacing Scale (Even Numbers Only)

Guidelines

• Default to gap-4 when unsure
• Icon + heading pairs: gap-2
• Card internal content: gap-4
• Section containers: gap-6 or gap-8

---

Background Effects (Moderate)

Gradient Orbs

Copy.gradient-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.15;
  pointer-events: none;
}

• Colour: bg-rose-400
• Primary orb: 600px, top-right
• Secondary orb: 500px, bottom-left (opacity * 0.7)

Noise Texture

Copy.noise-overlay {
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,...");
}

---

Animations

Priority: CSS First

Use CSS for all simple animations. Only use motion/react for scroll-triggered or complex sequenced animations.

CSS Specs

Hover Effects

• Cards: hover:-translate-y-0.5 + coral glow shadow
• Buttons: hover:scale-[1.02] + shadow lift
• Links: Underline slides in from left via ::after
• Icons: hover:scale-110 or subtle rotation

When to Use motion/react

• Scroll-triggered animations (fade-in on scroll)
• Complex multi-step sequences
• Gesture-based interactions

---

Component Patterns

Cards

CopyclassName="rounded-2xl border border-border bg-card p-6 shadow-sm
           transition-all duration-200 hover:-translate-y-0.5"
// Add coral glow on hover via inline style or CSS

Buttons

Copy// Primary
className="rounded-full bg-primary text-primary-foreground px-6 py-3
           font-medium transition-all duration-200 hover:scale-[1.02] hover:shadow-lg"

// Outline
className="rounded-full border-2 border-primary text-primary px-6 py-3
           font-medium transition-all duration-200 hover:scale-[1.02]"

Badges

CopyclassName="rounded-full bg-primary text-primary-foreground px-4 py-1.5
           font-medium text-sm transition-all duration-200 hover:-translate-y-0.5"

Header

CopyclassName="fixed top-0 left-0 z-50 w-full border-b border-border
           bg-background/90 backdrop-blur-lg px-8 py-3"

---

Component Rules

1. NEVER modify components/ui/* (shadcn/ui primitives)
2. Use composition via components/shared/ wrappers
3. Styling changes go in CSS or wrapper components
4. Use cn() utility for conditional classes
5. Use CVA for component variants

---

Quick Reference

Coral Glow Shadow

Copystyle={{ boxShadow: `0 8px 30px -10px oklch(0.60 0.18 25 / 0.4)` }}
// Or use: shadow-[0_8px_30px_-10px_theme(colors.primary/0.4)]

Semantic Colours

• Primary text: text-foreground
• Secondary text: text-muted-foreground
• Accent: text-primary
• Backgrounds: bg-background, bg-card, bg-muted
• Borders: border-border