| 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:
- Purpose — What does this section communicate? What action should the user take?
- Hierarchy — What's the most important element? Size, weight, and contrast must guide the eye.
- Tone — Dark theme: tech-forward, dramatic. Light theme: warm, premium.
- 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)
