Frontend Design

Tech Stack

• Next.js 14+ App Router
• TypeScript
• Tailwind CSS
• Mobile-first breakpoints (sm → md → lg → xl)

Mobile-First Rules

1. Default styles = mobile. No breakpoint prefix means phone.
2. Scale up: text-sm md:text-base lg:text-lg
3. Touch targets: Minimum 44x44px for interactive elements
4. Stack by default: Use flex-col then md:flex-row
5. Test at 375px width first, then 320px for edge cases
6. Thumb zones: Place primary actions in bottom 60% of screen

Low-Bandwidth & Emerging Markets

Design for users with slow 3G, data caps, and older devices.

Performance Budget

• First paint: Under 1.5s on 3G
• Total page weight: Under 500KB ideal, 1MB maximum
• JavaScript: Minimize client-side JS, prefer Server Components
• Images: Under 100KB each, use WebP/AVIF with fallbacks

Asset Optimization

1. Use Next.js <Image> — never raw <img> tags
2. Lazy load below-fold content — loading="lazy" or dynamic imports
3. Subset fonts — only characters you need, prefer font-display: swap
4. Compress aggressively — quality 75-80 is usually indistinguishable
5. Avoid decorative images — every image must earn its bytes

Code Splitting

1. Dynamic imports for routes/modules — next/dynamic with ssr: false when appropriate
2. Split by interaction — don't load modal code until modal opens
3. Analyze bundle — run next build and check chunk sizes regularly

Offline-Tolerant Patterns

1. localStorage for progress — save state so users can resume
2. Graceful degradation — app works if analytics/fonts fail to load
3. Optimistic UI — show success immediately, sync when possible
4. Cache static assets — configure proper Cache-Control headers

Reduce Third-Party Scripts

1. One analytics tool — not three
2. Defer non-critical scripts — strategy="lazyOnload" in next/script
3. Self-host when possible — fonts, icons, critical libraries
4. Audit regularly — each external script = potential failure point

Device Constraints

1. Older Android phones — test on Chrome DevTools throttling (4x CPU slowdown)
2. Limited RAM — avoid memory-heavy animations, large state objects
3. Small screens — some users still on 320px width devices
4. Touch-only — no hover states as primary interaction

Design Principles

Before coding, commit to a BOLD aesthetic direction:

• Tone: Pick one extreme—brutally minimal, maximalist, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, soft/pastel, industrial
• Differentiation: What makes this UNFORGETTABLE?

Typography

• Choose distinctive fonts, never Inter/Arial/Roboto/system fonts
• Pair a display font with a refined body font
• Use Google Fonts or next/font for optimization
• For low-bandwidth: Consider system font stacks as fallback-first

Color & Theme

• Use CSS variables in globals.css
• Dominant color + sharp accent beats evenly-distributed palettes
• Commit to light OR dark, don't hedge
• High contrast — many users outdoors on dim screens

Motion

• CSS-only when possible
• One orchestrated page load > scattered micro-interactions
• Use animation-delay for staggered reveals
• Respect prefers-reduced-motion — some devices struggle with animations

Layout

• Unexpected compositions: asymmetry, overlap, grid-breaking
• Generous negative space OR controlled density
• Never center everything
• Single-column default — complexity only at larger breakpoints

File Structure

src/
  components/    # Reusable components
  app/           # Pages and layouts
  styles/        # Global CSS

Anti-Patterns (NEVER)

• Generic gradients on white backgrounds
• Cookie-cutter card layouts
• Predictable hero + 3-column features
• Space Grotesk (overused)
• Purple/blue tech gradients
• Heavy client-side rendering for static content
• Multiple analytics scripts loading synchronously
• Unoptimized images or raw <img> tags
• Assuming fast, stable internet