Arc

Design Principles

• Use warm multi-color gradients to inject personality without overwhelming content
• Center all primary content to create focused, narrative-driven scrolling
• Show the actual product interface early to ground abstract AI claims in reality
• Keep navigation minimal and unobtrusive with subtle text links
• Layer soft gradients behind content sections for depth without harsh borders

Signature Moves

Key Strengths

• Immediate product demonstration grounds abstract AI claims in tangible interface
• Gradient color story creates distinctive brand recognition across touchpoints
• Minimal navigation keeps focus on the core value proposition
• Testimonial section with gradient text maintains visual interest below the fold
• CTA button design incorporates brand identity through gradient icon

Steps

1. 01Set up a single-column centered layout with max-width ~1000px and generous vertical padding (~120px sections)
2. 02Create a multi-stop linear gradient (blue → purple → pink → peach) for top and bottom sections
3. 03Add a wavy SVG divider between gradient and white content areas
4. 04Style headlines in a bold sans-serif at ~48px with tight letter-spacing
5. 05Create a pill-shaped CTA button with dark background, white text, and gradient icon
6. 06Build a browser mockup component with subtle shadow and familiar app grid
7. 07Apply gradient text effect to testimonial or accent sections
8. 08Keep navigation text-only in the header with subtle hover states

Key Decisions

• Choosing warm rather than cold gradients to signal friendliness
• Showing real product UI early rather than abstract illustrations
• Using organic wavy borders instead of hard geometric dividers
• Centering all content rather than using an offset grid
• Keeping the CTA button prominent with high contrast

Pitfalls to Avoid

• ✕Don't let gradients become too saturated or psychedelic—keep them soft
• ✕Avoid cluttering the hero with too many CTAs or secondary messaging
• ✕Don't use generic stock mockups—the product demo must feel authentic
• ✕Avoid hard shadows that conflict with the soft gradient aesthetic

CSS Variables

:root {
  --primary: #4f46e5;
  --secondary: #f97316;
  --accent: #ec4899;
  --bg: #ffffff;
  --text: #0f172a;
  --radius: ~16px;
  --font-body: GT America, system-ui, sans-serif;
  --gradient-start: #4f46e5;
  --gradient-mid: #a855f7;
  --gradient-end: #fcd34d;
}

Key Techniques

• Multi-stop CSS linear gradients for background sections
• SVG path for wavy section dividers
• CSS background-clip: text for gradient text effects
• Box-shadow with low opacity for floating card elements
• Flexbox centering for single-column layout