Skip to content

REDESIGN_BRIEF.md

Latest commit

 

History

History
221 lines (177 loc) · 7.12 KB

REDESIGN_BRIEF.md

File metadata and controls

221 lines (177 loc) · 7.12 KB

Website Redesign Brief for Claude Code

Current State

JoePro.ai is a Next.js 14 AI platform that's functionally complete but visually bland and generic. It has:

  • Working neural network canvas background (mouse-interactive, subtle)
  • Clean but boring blue/gray color scheme
  • Basic rounded corners and soft shadows
  • Simple fade-in animations
  • Generic hero section
  • Plain service cards

The problem: It looks like every other Next.js template site. No personality, no energy, no memorable visual identity.

Design Goals

DO

  • Refined & Professional - This is a business AI platform, not a gaming site
  • Subtle Speed/Motion - Suggest velocity through design, not literal speed lines
  • Modern & Confident - Strong typography, clear hierarchy
  • Memorable - Unique visual identity that stands out
  • Performance-focused - Fast loading, smooth 60fps animations
  • Sophisticated Color - Interesting but tasteful palette

DON'T

  • ❌ Neon cyberpunk aesthetic
  • ❌ Excessive glow effects
  • ❌ Rainbow gradients everywhere
  • ❌ Over-animated UI (motion sickness)
  • ❌ Literal speed lines background
  • ❌ Generic blue/gray Next.js template look

Design Inspiration (Reference These)

Typography & Layout

  • Linear (linear.app) - Bold sans-serif, tight tracking, strong hierarchy
  • Vercel (vercel.com) - Clean, spacious, confident
  • Stripe (stripe.com) - Professional gradients, smooth animations

Motion & Energy

  • Apple (apple.com) - Smooth scroll-triggered animations, subtle parallax
  • Stripe (stripe.com/payments) - Grid animations, subtle motion
  • Railway (railway.app) - Dark mode done right, subtle accents

Color Palettes (Choose ONE direction)

Option A: Deep Purple + Electric Blue

  • Base: Very dark navy/black (#0a0a14)
  • Primary: Deep purple (#6366f1)
  • Accent: Electric blue (#3b82f6)
  • Success: Teal (#14b8a6)

Option B: Slate + Amber

  • Base: Charcoal (#0f1419)
  • Primary: Slate blue (#64748b)
  • Accent: Warm amber (#f59e0b)
  • Contrast: Cool white (#f8fafc)

Option C: Monochrome + One Bold Color

  • Base: True black (#000000)
  • Grays: Multiple shades (#1a1a1a, #333, #666, #999)
  • Accent: Single bold color (coral #ff6b6b or violet #7c3aed)
  • Clean, high contrast

Specific Design Requests

1. Typography

  • Use a modern sans-serif (Inter, Geist, or SF Pro)
  • Headlines: Very bold (font-weight: 700-900), tight letter-spacing (-0.03em)
  • Body: Medium weight (500), comfortable line-height (1.6)
  • Create clear size hierarchy (h1: 4-5rem, h2: 2.5rem, body: 1.125rem)

2. Hero Section

  • Large, bold headline - make it hit hard
  • Short, punchy subheadline (not a paragraph)
  • Two contrasting CTAs (primary gradient button, secondary outline)
  • Consider diagonal composition or offset grid
  • Subtle gradient background (not solid color)

3. Service Cards

  • Clean card design with subtle border
  • Hover effect: Gentle lift + border color change
  • Icon or emoji at top
  • Title and short description
  • Arrow or "→" that appears on hover
  • No heavy shadows or glows

4. Animation Philosophy

  • On load: Subtle fade-up with slight Y translation (20px)
  • On hover: Scale slightly (1.02) or translate up (-4px)
  • On scroll: Optional fade-in for elements below fold
  • Duration: 0.3-0.5s for interactions, 0.6-0.8s for page load
  • Easing: cubic-bezier(0.4, 0.0, 0.2, 1) or ease-out

5. Layout & Spacing

  • Generous whitespace (don't cram content)
  • Max-width container: 1280px
  • Consistent spacing scale (4, 8, 16, 24, 32, 48, 64, 96px)
  • Grid system: 12 columns on desktop, single column on mobile

6. Neural Network Background

  • Keep it subtle and muted (already good)
  • Ensure it doesn't compete with foreground content
  • Maybe reduce opacity or node count if too busy

Technical Requirements

Files to Modify

  1. app/globals.css - Color variables, utilities, base styles
  2. components/Hero.tsx - Main hero section redesign
  3. app/page.tsx - Homepage layout (if needed)
  4. tailwind.config.ts - Custom colors, fonts, spacing (if exists)

Keep These Features

  • ✅ Neural network canvas (already good)
  • ✅ Dark/light mode support
  • ✅ All existing links and CTAs
  • ✅ Responsive design
  • ✅ Accessibility (reduced motion support)

Performance Constraints

  • No additional dependencies
  • Use Framer Motion for animations (already installed)
  • Optimize for 60fps
  • Keep bundle size small

Example Design Pattern

Hero Section Structure

[Subtle Badge: "AI-Powered Platform" with icon]

[MASSIVE HEADLINE]
Build Faster with AI
[/MASSIVE HEADLINE]

[Subheadline]
Transform your workflow with intelligent agents, 
analytics, and cloud dev environments.
[/Subheadline]

[Primary CTA] [Secondary CTA]

[3-Column Service Grid Below]

Card Pattern

┌──────────────────────────┐
│ 🎯 Icon                  │
│                          │
│ Service Name             │
│ Short description text   │
│                          │
│                    →     │ (appears on hover)
└──────────────────────────┘

Success Criteria

The redesigned site should:

  1. ✅ Look professional and modern (like Vercel, Linear, Stripe)
  2. ✅ Feel confident and bold (strong typography)
  3. ✅ Suggest speed/efficiency (through design, not literal speed effects)
  4. ✅ Be memorable (unique enough to stand out)
  5. ✅ Stay clean (not visually overwhelming)
  6. ✅ Perform well (smooth 60fps animations)

What This Is NOT

This is NOT:

  • A cyberpunk gaming site
  • A crypto/web3 landing page
  • An over-animated portfolio site
  • A generic Bootstrap template
  • A neon-soaked nightclub

This IS:

  • A serious business AI platform
  • Designed for enterprise customers
  • Professional but not boring
  • Modern but not trendy
  • Fast-feeling but not literally fast

Color Usage Guidelines

Whatever color palette you choose:

  • Background: Very dark (near black) or very light (near white)
  • Primary color: Use for CTAs, links, important UI elements (10-20% of screen)
  • Accent color: Use sparingly for highlights (5% of screen)
  • Text: High contrast (white on dark, or very dark gray on light)
  • Borders: Subtle, low opacity (10-20% opacity of primary color)

Typography Scale

h1: 4rem (64px)    - Hero headline
h2: 2.5rem (40px)  - Section titles
h3: 1.75rem (28px) - Card titles
body: 1.125rem (18px) - Main text
small: 0.875rem (14px) - Labels

Animation Timing

Micro interactions: 150-200ms (hover states)
UI transitions: 300-400ms (modals, dropdowns)
Page load animations: 600-800ms (hero fade-in)
Scroll animations: 400-600ms (element reveals)

Final Notes

  • Less is more - Remove elements rather than add
  • Hierarchy matters - Make the important things big
  • Consistency wins - Use the same spacing/sizing everywhere
  • Test in dark mode - Most users will use it
  • Mobile first - Design for small screens, enhance for large

This is a B2B AI platform for serious customers. Make it look expensive, confident, and professional - not like a gaming site or crypto project.