Prompt

“A bouldering gym with three locations: energetic, chalk and colour-coded grades, membership-led.”

The agent invented Chalkline - Three Bristol bouldering gyms, six colour circuits, one membership that works at all of them.

Toolchain: pure + inspo
Register: dark mode
Build effort: 11+ MCP calls · 4 sites studied
Self-score: 7.5 / 10

The page it shipped - live, scaledOpen full page ↗

The move

The grade section takes boldmonday's stacked type-specimen bands and makes them do a job: six full-bleed colour bands, green to black, each one the actual circuit colour a climber follows on the wall, with the name set as display type, the V range beside it and one honest sentence about what that colour feels like. The same six colours then reappear only where they mean a grade (the SVG holds in the hero, the ticker dots, the stripe on each gym card, the dots in the setting table) so the colour system on the page is the colour system in the gym.

What Inspo gave it

The captures it studied, and exactly what each one contributed.

General Condition Design Studio | Branding, Web Design in Europe - The whole hero register: near-black ground with a faint 64px grid, one hot warm accent doing headline and buttons, loud display type left with a visual anchoring right. I swapped its doodle border for a chalk-dust radial glow and an SVG wall.
Boldmonday - Five saturated full-width bands stacked edge to edge as content, not decoration. That became the six grade bands (green to black), each band a single colour with its name set as a specimen word.
Dropout Tv - Dark pricing row where only the centre card pops: accent border, accent pill tag, filled CTA, flanking cards stay outline-only. Also its "Select a plan" framing and the rounded card language.
Tempo Fit - Solid warm-red athletic marquee with sentence-case headline and white pill CTA; it confirmed the energetic-but-sentence-case direction and the idea of a full-bleed accent block, which became the £15 taster section.

How it was built

The actual MCP calls, in order.

recommend
```
brief verbatim, detail full
```
Picked feature-stack over marquee-hero and photographic; evidence packet said grotesk-sans 75 percent, paper mostly mid, accent split warm/chromatic-other. Exemplars were SaaS-heavy (clay-com, puzzle-io, arrows-to, dia-com, sourcegraph-com) so I searched further. Also returned the pricing table reference JSX and hero/spacing guidance.
search_screens
```
query "energetic bold sports gym climbing membership loud colourful", vibe loud, limit 8, detail full
```
boldmonday-com, stinkstudios-com, dropout-tv, kelseydake-com, idyllic-co-nz, generalcondition-com, alternativeaesthetics-co-uk, laugh-mind-co-jp. Gave me the stacked-band and dark-loud-accent directions.
search_screens
```
query "playful saturated colour blocks physical space community membership pricing", style playful, color saturated, limit 8, detail full
```
dropout-tv--plans, bunny-net--pricing, kelseydake-com, basecamp-com, typearture-com, amazon-com, lego-com, gusto-com. The Dropout pricing autopsy was the useful one.
find_examples_for_macrostructure
```
marquee-hero, limit 6, detail full
```
anchor-fm, audius-co, azure-microsoft-com, belmond-com, bittersoutherner-com, blackforestlabs-ai. Confirmed text-left, visual-right balance and 35/65 splits for marquee heroes.
find_reference_components
```
type pricing
```
Seven pricing archetypes with JSX; I took the three-card shape (accent rule marks the recommended tier, no badge chrome) and the toggle's radio semantics for the monthly/annual switch, and the thin-rule table for the setting schedule.
find_reference_components
```
type hero
```
Seven hero archetypes; used the marquee note (one thought set big, given air) and the split-screen note (atmospheric CSS panel instead of stock imagery) to justify drawing the wall in SVG.
get_screen
```
boldmonday-com
```
Full record; confirmed bands are roughly 20 percent of viewport each and that the nav sits above them, which is how the grade section is stacked.
get_screen
```
generalcondition-com
```
Full record; palette #fb1c0c on #0a0a0a, faint grid, spacing scale 5 to 20, type scale 5 steps, radius 0 to 5. Used the grid and the single-accent rule.
find_components
```
type footer, vibe loud, limit 6
```
Zero results; footer composed from the gym cards and the Dropout nav instead.
search_screens
```
query "fitness gym studio locations opening hours membership", industry health, limit 6, detail full
```
peloton-com, frequencybreathwork-com, joindawn-com, modernhealth-com, fitbod-me, tempo-fit. Tempo was the only one in register; fitbod-me's stat strip under the fold informed the hero meta line.
compare
```
generalcondition-com, boldmonday-com, dropout-tv--plans, tempo-fit
```
Per-site type/spacing/radius scales: 4 to 6 type steps, Dropout radii 6 to 24, Tempo spacing 12 to 120. Settled on one 14px radius, a five-step scale plus display, and a clamp(72px, 9vw, 128px) seam.

Palette, traced

Every token, and the reference it came from.

--paper#12110fPage ground. Warm near-black rather than pure black so chalk-white type reads as chalk on rubber, not white on void; sits between generalcondition's #0a0a0a and Dropout's #111.
--paper-2#1b1916Raised surfaces: ticker, gym cards, membership section. One step lighter so cards separate without borders doing all the work.
--ink#f4f0e6All body and display text. Slightly warm off-white, the colour of chalk, so it belongs with the orange instead of fighting it.
--muted#a69f91Ledes, hours labels, tags, small print. Warm grey derived from ink, keeps hierarchy without introducing a cool cast.
--accent#ff4d1fThe one hot colour: hero phrase, primary buttons, eyebrows, the recommended plan, the taster section ground. Orange-red because it sits between the orange and red circuits and reads as energy, not danger.
--g-green#5fd36bThe six circuit colours, used only where they mean a grade: the band section, the holds in the hero SVG, the ticker dots, the gym card stripes and the setting table. Chosen for legibility against both dark ground and each other.
--g-yellow#ffd23fThe six circuit colours, used only where they mean a grade: the band section, the holds in the hero SVG, the ticker dots, the gym card stripes and the setting table. Chosen for legibility against both dark ground and each other.
--g-orange#ff7a1aThe six circuit colours, used only where they mean a grade: the band section, the holds in the hero SVG, the ticker dots, the gym card stripes and the setting table. Chosen for legibility against both dark ground and each other.
--g-red#ef3b3bThe six circuit colours, used only where they mean a grade: the band section, the holds in the hero SVG, the ticker dots, the gym card stripes and the setting table. Chosen for legibility against both dark ground and each other.
--g-purple#9b5de5The six circuit colours, used only where they mean a grade: the band section, the holds in the hero SVG, the ticker dots, the gym card stripes and the setting table. Chosen for legibility against both dark ground and each other.
--g-black#2b2a28The six circuit colours, used only where they mean a grade: the band section, the holds in the hero SVG, the ticker dots, the gym card stripes and the setting table. Chosen for legibility against both dark ground and each other.
--rule#f4f0e624Hairlines, the hero grid, card borders, table rules. Derived from ink at 14 percent so every rule is the same warmth.

Built with the Inspo MCP - try it on your own brief.← All examples