---
id: "aw-site-60697"
source: https://www.awwwards.com/sites/navigate
author: "Resn (resn)"
media: "photo, 1600x1200"
model: claude-opus-5-5
generated: 2026-10-31
---
# Heavy Type Hero with Icon Tiles

## Summary
A startup hero inside a rounded black card on a bright orange page: an ultra-heavy, tightly tracked cream headline, a tiny subtitle, a dark nav pill with an arrow-shaped tail and a lime sign-up button, and a row of five big colourful icon tiles (music, film, ghost, shopping, clothing) along the bottom. A great example of chunky, game-like iconography paired with dense display type.

## Style
- Theme: dark (black card on a vivid orange page)
- Mood: punchy, playful, confident, gamified, bold
- Tags: hero, heavy-type, icon-tiles, rounded-card, pill-nav, colorful, startup
- Category: Hero, Illustration

## Palette
| Role | Hex |
|---|---|
| Page orange | #FF6D38 |
| Card black | #151515 |
| Headline cream | #F5F0E6 |
| Sign-up lime | #CBF56B |
| Tile violet | #7B78FF |
| Tile green | #02994D |
| Tile yellow | #F2BE18 |
| Tile blue | #4C8DFF |

## Typography
- Headline: ultra-heavy grotesque (about 900), sentence case, two lines centred, extremely tight tracking (about -0.06em, letters nearly touching), leading 0.9; cap height about 6% of the frame (around 95px line height). Closest free: Inter Tight 900 or Archivo Black.
- Subtitle: sans medium 12px, two lines, centred, cream.
- Nav labels: sans semibold 9px; sign-up label 9px semibold black.

## Layout
- 4:3 (1600x1200). The orange page frames a black card about 79% wide and 52% tall, centred, radius about 24px.
- Nav: centred at the top of the card, a dark grey (#2A2A2A) pill about 260x30px whose right end is cut into an arrow point, holding a 28px orange square logo (placeholder monogram) and four links; the lime sign-up pill sits just after the arrow.
- Headline at about 18% to 35% of the card height; subtitle about 30px below.
- Tile row along the bottom edge: five shapes about 205px each with about 8px gaps, flush to the card's bottom padding.
- Flat: no gradients, shadows or borders.

## Elements
- Arrow-tailed nav pill and lime CTA pill.
- Headline and subtitle.
- Tile 1: violet circle with a black music note.
- Tile 2: green rounded square (radius about 24px) with a black clapperboard.
- Tile 3: orange arrow-shaped tag (rounded rectangle with a pointed right side) with a black ghost with orange eyes.
- Tile 4: yellow rounded square with a black shopping bag.
- Tile 5: blue circle with a black t-shirt.
- All icons are solid black, chunky, with rounded corners and no outlines.

## Motion
Static image. Suggested motion: pop the tiles in from below with a staggered spring (y 60px to 0, 80ms stagger, slight overshoot) and give each icon a small wiggle on hover.

## Rebuild it
1. Page `bg-[#FF6D38] min-h-screen grid place-items-center`; card `w-[79%] rounded-3xl bg-[#151515] px-4 pt-4 pb-4 text-[#F5F0E6]`.
2. Nav pill: a flex row with `bg-neutral-800 rounded-l-full h-8 pl-1 pr-6` and `clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%)` for the arrow tail; the CTA `rounded-full bg-[#CBF56B] text-black px-4 h-8`.
3. Headline: `text-[clamp(56px,7.5vw,120px)] font-black tracking-[-0.06em] leading-[0.9] text-center`.
4. Tiles: `grid grid-cols-5 gap-2 mt-16`; each `aspect-square` with its own shape class (`rounded-full`, `rounded-3xl`, or a clip-path arrow) and a centred black SVG icon at 55% size.
5. Entrance: Motion variants on the grid with `staggerChildren: 0.08`, children from `y: 60, opacity: 0` with `type: "spring", stiffness: 260, damping: 18`.
6. Hover: `whileHover={{ rotate: [0, -6, 6, 0] }}` over 0.4s on each icon.

## Generation prompt
A bold startup website hero: a rounded black card on a vivid orange background, an ultra-heavy tightly tracked cream headline in two centred lines, a tiny subtitle, a dark arrow-shaped navigation pill with a lime sign-up button, and a row of five big flat colourful tiles along the bottom (violet circle with a music note, green square with a clapperboard, orange arrow tag with a ghost, yellow square with a shopping bag, blue circle with a t-shirt), chunky black icons; playful, punchy, game-like.