frontend-design

name	frontend-design
description	Create distinctive, production-grade landing page interfaces. Use when building sections, pages, or polishing UI to achieve modern, memorable design that avoids generic AI aesthetics.

Frontend Design — Landing Page

Guide for creating polished, distinctive UI for FlowPilot's landing page.

Design Thinking

Before coding any section:

1. Purpose — What does this section communicate? What action should the user take?
2. Hierarchy — What's the most important element? Size, weight, and contrast must guide the eye.
3. Tone — Dark theme: tech-forward, dramatic. Light theme: warm, premium.
4. Differentiation — What makes this section memorable?

Visual Identity

Dark Theme

• Navy-black background #131A20 with crimson accents #FA2F4C
• Light silver text #CDD7DC for readability
• Dramatic, high-contrast, developer-oriented feel

Light Theme

• Cream background #EFE9DD with darkened gold accents #C4983B
• Dark charcoal text #2C2F33 for readability
• Warm, premium, approachable feel

Typography Rules

• One h1 per page (Hero only) — largest, boldest
• h2 per section — clear hierarchy below hero
• Body text at comfortable reading size (16-18px)
• Muted text for supporting content (secondary color token)
• Responsive scale: text-3xl md:text-4xl lg:text-5xl for headings

Spacing & Composition

• Generous vertical padding between sections (py-20 md:py-28 lg:py-32)
• Consistent horizontal containment (max-w-6xl mx-auto px-4 sm:px-6 lg:px-8)
• Breathing room between content blocks
• Cards/grids use consistent gap (gap-6 lg:gap-8)

Color Usage Rules

• Primary accent for CTAs and key interactive elements only
• Never use #E1BE7F gold as text on #EFE9DD cream (fails WCAG)
• #AB2B41 only as hover/pressed state, never standalone text
• Muted colors for secondary content, borders, and separators
• Accent-soft (10% opacity) for subtle background highlights

Microinteraction Patterns

• Hover: subtle scale (1.02-1.05) + shadow lift on cards
• Buttons: scale down on press (whileTap={{ scale: 0.97 }})
• Links: underline slide-in or color transition
• Cards: border-color transition on hover
• Never animate just for decoration — every motion must support meaning

Section Design Principles

Hero

• Full viewport height or near-full
• Strong headline hierarchy (product name + value prop)
• Two CTAs: primary (solid) + secondary (ghost/outline)
• Visual area for mockup/preview image
• Gradient or atmospheric background effect

Features

• 3+ feature blocks in responsive grid
• Icon + title + description per block
• Icons consistent in style and size (Lucide, 24px)
• Avoid generic placeholder text — specific FlowPilot value

Benefits

• Outcome-focused messaging (what the user achieves, not what the product does)
• Visual differentiation from Features (different layout: alternating, centered, or offset)

Social Proof

• Simulated company logos in grayscale row
• Testimonial cards with quote, name, role, optional avatar
• Usage stats with large numbers + descriptive labels

Final CTA

• Reinforces strongest value proposition
• Email capture or "Request Access" form
• Sense of urgency or exclusivity
• Visually distinct background (gradient or contrasting surface)

Footer

• Clean, minimal, visually consistent
• Navigation columns + social links + copyright
• No visual clutter

Anti-Patterns

• Generic purple gradients on white backgrounds
• Overused fonts (Inter as display font, system fonts for headings)
• Identical card layouts for every section
• Animations without purpose
• Low-contrast decorative text
• Missing visual hierarchy (everything same size/weight)