---
id: "aw-el-57682cd3-8818-4913-8cb1-2c902c490e0d"
source: https://www.awwwards.com/inspiration/desktop-mindmarket
author: "Louis Paquet (louispaquet)"
media: "photo, 1600x1200"
model: claude-opus-5-5
generated: 2026-10-31
---
# Leaping Runner Illustrated Hero

## Summary
A desktop hero for a market research company presented on a lime-green backdrop: a cream canvas filled by a flat vector runner mid-leap with a giant foreshortened shoe, a sweeping green blob, and a white text card in the lower right with a short headline, paragraph and lavender button. Worth studying for its bold editorial illustration scale and the floating, separated navigation pills.

## Style
- Theme: light (cream canvas on lime green)
- Mood: energetic, friendly, bold, optimistic
- Tags: flat-illustration, hero-section, floating-nav, oversized-character, organic-shapes, text-card, playful
- Category: Hero, Illustration

## Palette
| Role | Hex |
|---|---|
| Lime backdrop | #8ED562 |
| Canvas cream | #F5F0E3 |
| Card white | #FFFFFE |
| Skin sand | #DFC9A4 |
| Sun yellow | #F3B435 |
| Lavender grey | #D6D0D7 |
| Coral sole | #FF6B57 |
| Shirt blue | #2E8BEF |

## Typography
- Headline ("Global, for real."): neo-grotesk sans, medium, sentence case, tight tracking (about -0.03em), about 4 percent of frame height, near-black. Inter Tight (500).
- Body paragraph: regular sans, about 1.6 percent of frame height, near-black, six lines. Inter (400).
- Nav links ("Services", "Methodology", "Industry Sectors", "Network"): regular sans, small, with tiny chevrons on dropdowns. Inter (400).
- Buttons ("Get a quote", "Our Network"): medium sans, small. Inter (500).
- Placeholder wordmark: rounded sans with a green squiggle icon.

## Layout
- 4:3 frame (1600x1200) of lime green; the site canvas is a rounded rectangle (about 24px radius) occupying 83 percent of the width and 70 percent of the height, centred slightly low.
- Nav: a white bar (about 8px radius, 56px tall) inset from the top-left of the canvas, spanning about 70 percent width, with a separate white "Get a quote" pill to its right; both overlap the canvas top edge region.
- Illustration fills the left 60 percent; a large green blob sweeps from the top right down to the middle.
- Text card: white, about 40 percent of the canvas width, anchored bottom-right flush with the canvas edges, 12px top-left radius, 40px padding.
- No drop shadows; layering is flat colour overlap.

## Elements
- Runner: flat character with peach skin, blue polo with white stripe, green shorts with white side stripe, white socks, one fist raised; the near foot is a huge coral shoe with a yellow sole and squiggle tread, in strong foreshortening.
- Organic shapes: green blob, white cloud puffs, a yellow squiggle, a small blue dot, a lilac oval, a grey ball with green spots cut off at the left edge.
- Thin black line: a hand-drawn jagged line rising to a peak, ending in a black dot, like a chart sketch.
- Nav: logo, four links, a green circular "more" button with three dots.
- Quote pill: white with a "Get a quote" label and a blue round avatar face icon.
- Card button: lavender pill-rectangle "Our Network" with a white circle containing a chevron.

## Motion
Static image. Idea: loop the runner's leap with a gentle 3 second float, and draw the thin chart line in with a stroke animation on load.

## Rebuild it
1. Page: `bg-[#8ED562] min-h-dvh grid place-items-center p-8`; canvas `relative w-full max-w-6xl aspect-[16/10] rounded-3xl bg-[#F5F0E3] overflow-hidden`.
2. Nav: `absolute top-3 left-24 right-24 flex gap-4`; main bar `flex-1 h-14 rounded-lg bg-white px-4 flex items-center justify-between`; quote pill `h-14 rounded-lg bg-white px-4 flex items-center gap-3`.
3. Illustration: a single large SVG positioned `absolute inset-0` with the runner group on the left, the green blob as one path, and decorative shapes as separate groups for animation.
4. Text card: `absolute bottom-0 right-0 w-[40%] bg-white rounded-tl-xl p-10`; headline `text-5xl font-medium tracking-[-0.03em]`; button `rounded-lg bg-[#E7CBF6] px-4 h-12 flex items-center gap-3` with a white circle chevron.
5. Motion: float the runner group with `y: [0, -10, 0]` over 3s `repeat: Infinity`; draw the chart line with `pathLength` 0 to 1 (1.2s ease-out); pop decorative shapes in with a 60ms stagger and spring.
6. On scroll, parallax the blob slower than the runner using `useScroll` and `useTransform`.

## Generation prompt
A playful flat vector website hero on a cream rounded canvas set against a bright lime-green background: a cheerful runner in a blue shirt and green shorts leaping toward the viewer with a giant coral and yellow sneaker in dramatic foreshortening, a sweeping green blob, white cloud puffs, a yellow squiggle and a thin hand-drawn chart line, white floating navigation bar at the top and a white text card with a bold headline and lavender button at the bottom right, no real logos.