---
id: "aw-site-63166"
source: https://www.awwwards.com/sites/mindmarket
author: "Louis Paquet (louispaquet)"
media: "photo, 1600x1200"
model: claude-opus-5-5
generated: 2026-10-31
---
# Playful Illustrated Green Card Hero

## Summary
A services hero on a sunflower-yellow page: a rounded grass-green card holds a white floating nav bar, a huge two-line grotesque headline and a crowd of flat cartoon characters surging forward and pointing, while white clouds and doodle lines spill out of the card onto the yellow. A cheerful example of pairing calm, large type with energetic flat illustration.

## Style
- Theme: light (yellow and green with white accents)
- Mood: cheerful, energetic, friendly, human, bold
- Tags: hero, flat-illustration, rounded-card, floating-nav, big-headline, doodles, colorful
- Category: Hero, Illustration

## Palette
| Role | Hex |
|---|---|
| Sunflower yellow | #F4E312 |
| Grass green card | #8DD461 |
| Cloud and nav white | #F3F1EF |
| Headline ink | #2F3B2A |
| Coral | #F3785A |
| Deep teal | #43716B |
| Leaf shade | #6E964F |
| Character blue | #3E7CF0 |

## Typography
- Headline: neo-grotesque medium (about 500), sentence case, two lines centred, tracking about -0.03em, leading 0.95; cap height about 8% of the frame (around 120px line height at 1200 tall). Closest free: Inter Tight 500 or Instrument Sans 500.
- Subtitle: same family, regular, about 20px, centred.
- Nav links: 13px regular with small chevrons on dropdown items; logo text in medium weight beside a squiggle mark (placeholder).

## Layout
- 4:3 (1600x1200). Yellow page; the green card is about 81% wide and 70% tall, centred slightly above the middle, radius about 28px, no border or shadow.
- Nav: a white bar about 690x50px with 6px radius inside the card's top, logo left, four links and a round green menu button right; a separate white box beside it (about 135x50px) holding a call-to-action label and a circular avatar.
- Headline centred at about 25% to 45% of the card height, subtitle about 40px below.
- Illustration anchored to the bottom of the card and cropped by it; a pointing hand reaches toward the top-right.
- Outside the card: white cloud shapes on the right and bottom-right, a coral blob on the left edge, a thin black hand-drawn squiggle and dot top-left.

## Elements
- Floating nav bar and separate CTA box with avatar.
- Headline and subtitle.
- Flat illustration: four characters with simple faces (blue, pink, peach skin tones), striped and flowered tops, big shoes, one shouting, one pointing with a huge hand; small yellow zigzag and blue dots as motion marks.
- Doodles: black line squiggle, solid dots, coral blob, white clouds that overlap the card edge.

## Motion
Static image. Suggested motion: let the characters bob in a loop (y +/- 6px, 1.6s, staggered 0.2s), drift the clouds horizontally (20px over 6s) and draw the squiggle on load with a 1.2s path animation.

## Rebuild it
1. Page `bg-[#F4E312] min-h-screen grid place-items-center` with the card `relative w-[81%] h-[70vh] rounded-[28px] bg-[#8DD461] overflow-hidden`.
2. Nav: `absolute top-3 left-1/2 -translate-x-1/2 flex gap-3`; the bar `bg-white rounded-md h-12 px-4 flex items-center gap-6 text-[13px]`, CTA box with a `size-8 rounded-full` avatar.
3. Headline: `text-[clamp(64px,9vw,140px)] font-medium tracking-[-0.03em] leading-[0.95] text-[#2F3B2A] text-center`.
4. Illustration: an SVG at the bottom (`absolute bottom-0 left-1/2 -translate-x-1/2 w-[55%]`), split into groups per character.
5. Decorations outside the card: absolutely positioned SVG clouds and squiggle with `z-10` so they overlap the card edge (keep `overflow-hidden` only on the illustration wrapper).
6. Motion: animate each character group with `animate={{ y: [0, -6, 0] }}`, `transition={{ repeat: Infinity, duration: 1.6, delay: i * 0.2 }}`; draw the squiggle with `pathLength` 0 to 1.

## Generation prompt
A cheerful website hero: a large rounded grass-green card on a bright sunflower-yellow background, a white floating navigation bar at the top, a huge dark olive sans-serif headline in two centred lines, and a flat vector illustration of a group of diverse cartoon characters in colourful clothes surging forward with one pointing a giant hand; white clouds, a coral blob and black squiggle doodles spill over the card edges; playful, friendly, bold.