Design Language System

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

.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

.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

className="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

// 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

className="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

className="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

style={{ 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