Hero Section

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:

[Optional: Badge / Announcement]
[Headline: Value Proposition]
[Subheadline: Supporting Detail]
[CTA Button(s)]
[Trust Signals]
[Visual: Image, Mockup, or Illustration]

Headline Rules

• One sentence. Maximum 10 words.
• State the benefit, not the feature. "Ship faster" > "CI/CD pipeline tool".
• Use text-4xl sm:text-5xl lg:text-6xl scale.
• font-extrabold tracking-tight leading-[1.1] for impact.

Subheadline Rules

• 1–2 sentences expanding on the headline.
• text-lg sm:text-xl text-gray-600 max-w-2xl.
• Answer: "What is this, and why should I care?"

---

2. Hero Pattern: Centered with Gradient Background

The most versatile hero. Works for SaaS, tools, and platforms.

  
  
    
    
  

  
    
    
      
      Announcing our Series A
      
        
      
    

    
    
      Build products that
      users love
    

    
    
      The design-to-code platform that turns your ideas into production-ready
      interfaces in minutes, not weeks.
    

    
    
      
        Start building free
      
      
        
          
        
        Watch demo
      
    

    
    
      
        
          
        
        No credit card required
      
      
        
          
        
        Free for individuals
      
      
        
          
        
        Setup in 2 minutes
      
    

    
    
      
        
      
      
      
    
  

---

3. Hero Pattern: Split (Text Left, Image Right)

Best for products with a strong visual (app screenshots, mockups).

  
    
      
      
        
          New: AI assistant is here
        
        
          Your finances, finally simple
        
        
          Track spending, set budgets, and reach your goals with an app that
          actually makes sense. No jargon, no complexity.
        
        
          
            Download the app
          
          
            See how it works
            
              
            
          
        
        
        
          
            
            
            
            
          
          
            4,000+ happy users
          
        
      

      
      
        
          
        
        
        
      
    
  

---

4. Hero Pattern: Video / Animated Background

  
  
    
  

  
  

  
  
    
      Experience the future
    
    
      Immersive technology that transforms how you create.
    
    
      
        Get early access
      
    
  

  
  
    
      
    
  

Video Hero Rules

• Keep video 5–15 seconds, looping.
• File size under 5MB. Use WebM + MP4 for compatibility.
• Always provide a poster image for LCP.
• Use playsinline for iOS.
• Text must have sufficient contrast against the overlay.

---

5. Hero Pattern: Minimal Typography

For premium brands, agencies, and portfolios.

  
    
      We design
      digital
      experiences
    
    
      
        View our work
      
      
        Contact us
      
    
  

---

6. Background Techniques

Mesh Gradient

.mesh-gradient {
  background-color: oklch(97% 0.01 265);
  background-image:
    radial-gradient(at 20% 20%, oklch(90% 0.12 280 / 0.4) 0px, transparent 50%),
    radial-gradient(at 80% 10%, oklch(90% 0.10 320 / 0.3) 0px, transparent 50%),
    radial-gradient(at 50% 80%, oklch(90% 0.12 200 / 0.3) 0px, transparent 50%);
}

Animated Gradient

.animated-gradient {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Dot Grid Pattern

.dot-grid {
  background-image: radial-gradient(circle, #d1d5db 1px, transparent 1px);
  background-size: 24px 24px;
}

Noise Texture

.noise {
  position: relative;
}
.noise::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
}

---

7. Responsive Hero Strategy

Breakpoint Adjustments

Mobile (
  
  
  

---

8. LCP Performance

The hero is almost always the Largest Contentful Paint element. Optimize it.

Rules

1. Preload the hero image: ``
2. Use fetchpriority="high" on the hero image tag.
3. Never lazy-load the hero image.
4. Inline critical CSS for the hero section.
5. Use WebP/AVIF format with fallback.
6. Size appropriately: Don't serve a 4000px image for a 1200px container.

---

Hero Section Checklist

• [ ] Headline is under 10 words and states the benefit
• [ ] Subheadline expands on the value in 1–2 sentences
• [ ] Primary CTA is large, high-contrast, and action-oriented
• [ ] Secondary CTA is visually subordinate
• [ ] Trust signals appear near the CTA
• [ ] Hero image/visual is preloaded with fetchpriority="high"
• [ ] Responsive: text scales, layout adapts, images swap
• [ ] Background adds visual interest without competing with content
• [ ] Animation respects prefers-reduced-motion
• [ ] Above the fold loads in under 2.5s (LCP target)

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: ArnavPuri
• Source: ArnavPuri/designskills
• License: MIT

Install and usage instructions live in the source repository linked above.