---
name: Supahero
slug: supahero
url: "https://dontmakeitugly.com/resources/supahero"
website: "https://supahero.io"
type: gallery
categories:
  - inspiration
tags:
  - hero
  - landing-pages
  - above-the-fold
  - gallery
  - headlines
  - layout
pricing: free
agentFriendly: limited
agentAccessMethods:
  - public_web
difficulty: any
dateAdded: "2026-09-03"
lastVerified: "2026-09-03"
---

# Supahero

Hundreds of website hero sections from real sites, nothing else.

- Type: Gallery
- Categories: Inspiration
- Pricing: Free

## What it is

Supahero is a gallery of hero sections only: the first screen of real websites and portfolios, from Figma, Linear and Stripe down to small studios and individual designers. Each one links to a detail view and the live site. It's now part of screensdesign, a larger app screen library, but the hero gallery is still browsable for free.

## Why it's here

The hero is the one part of a landing page everyone sees, and the part where "make it modern" produces the same centred headline every time. A page of nothing but heroes shows how much variety there is in layout, type size and what sits next to the copy. Use it to pick a shape before you write the prompt.

## Best for

- hero section layouts
- landing-page first screens
- headline and type sizing

## Links

- Website: https://supahero.io

## Can my agent use this?

As a reference only. Choose one or two heroes, give your agent the screenshot and the live URL, and describe the layout in words: headline width, where the visual sits, how many actions. That's enough for it to build a hero with the same bones.

Agent friendliness: Limited. Mainly a visual reference. Great for humans and for describing a direction, but there's little an agent can read or install.
Access methods: Public website.

## Prompt to hand your agent

```text
Use Supahero as a visual and design reference for this project.

What it is: Hundreds of website hero sections from real sites, nothing else.

Website: https://supahero.io

Use it specifically for:
- hero section layouts
- landing-page first screens
- headline and type sizing

How you can access it: Public website.

Study the visual direction: typography, spacing, colour, hierarchy and motion. Describe what makes the references work, then apply those principles to this project's existing visual language. Do not copy layouts or assets directly; build something consistent with our own brand and accessibility requirements.
```

## Related

- [SaaS Landing Page](https://dontmakeitugly.com/resources/saas-landing-page.md): Landing page examples organised by the exact section you're stuck on.
- [Navbar Gallery](https://dontmakeitugly.com/resources/navbar-gallery.md): 550+ real website navbars, sorted by type: mega menus, sidebars, tabs and the rest.
- [Land-book](https://dontmakeitugly.com/resources/land-book.md): A big, searchable gallery of landing pages, filterable by style, colour and industry.
- [Godly](https://dontmakeitugly.com/resources/godly.md): Astronomically good web design inspiration, hand-picked.

## In collections

- [Make your landing page better](https://dontmakeitugly.com/collections/better-landing-pages.md)

Supahero is an independent resource listed by Don't Make It Ugly. We link to it; we aren't affiliated with it. Pricing and licence details are as understood at the time of listing; check the official site.