Hero Section Design

Pre-Flight: Check Design Context

Before generating hero section code:

1. Use get_design_context to check for existing brand colors, fonts, or design tokens.
2. If a Figma URL is provided, pull screenshots and metadata to match the design precisely.
3. Determine: What is the product? What is the primary CTA? What visual style fits?

1. Headline Hierarchy

Every hero follows this structure, top to bottom: