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. Use HeroUI for UI: HeroUI Pro (@heroui-pro/react) first, then HeroUI OSS (@heroui/react)
2. Use composition via wrapper components
3. Styling changes go in CSS or wrapper components
4. Use cn() from @heroui/react for conditional classes

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