Six directions for the pre-launch site

Grown from the inspiration references

Clay, Weave, Lightspark + Pipdot and Ardor, each pushed into a complete world of its own rather than combined into one page.

01 · TidyClay world: grainy toy dioramas in seamless video loops

Open prototype Brand board Annotated full page

Idea

The trade business as a tiny tactile toy world, in matte clay, painted plastic and heavy grain, alive in seamless loops under crisp real HTML.

Comes from

Clay (grainy loops, hero overlay, footer echo) + Pipdot (scroll story)

Type

Bricolage Grotesque, chunky for display and calm at text sizes

Palette

Ink #1b2340Clay #f2703dGrass #2e7b4dSky #a9d2eaButter #f7dc7aPink #f8cdc9

Assets made

11 clay stills, 6 transparent clay props, 3 seamless video loops (hero, reviews, footer; 190–370 KB each)

Honest risk

The closest to a 'cool tech brand' look, and near Clay's own world. It may read as software for someone else to some tradespeople, and every new scene needs a matching generated loop.

02 · PatchA needle-felted tradesperson and stitched workflows

Open prototype Brand board Annotated full page

Idea

"We look after your patch." A felted character is the warm human centre; running-stitch thread joins the services together.

Comes from

Weave (character, playful flow illustration)

Type

Gabarito (chunky geometric display) + Rethink Sans (reading)

Palette

Charcoal #24211fCobalt #2440c4Mustard #d6a024Cobalt wash #eef1fdTomato #d8452fMessage pink #f6d3d8

Assets made

9 transparent character poses (very consistent), 3 felt props, 2 textures, 2 seamless loops (wave, tea break)

Honest risk

A mascot can feel cute rather than capable to some trades. The character pipeline works, but every future scene needs the same reference-led discipline.

03 · PlumbAiry white, gradient windows, glass UI over real photography

Open prototype Brand board Annotated full page

Idea

True, straight, done properly. Each benefit gets its own gradient window, with glass interface elements over realistic trade photography, and a product-grade scroll story.

Comes from

Lightspark (white + gradient showcases + glass) + Pipdot (UI choreography)

Type

Schibsted Grotesk, tight display tracking

Palette

Ink #0c0e12Cobalt #2f5bffViolet #7a3cffJade #2fcf8fRose #ffa9c6Planned fog #d9d7e6

Assets made

8 realistic trade photos, 1 clean cut-out, blurred-photo gradient plates, 1 seamless loop (pressure washing)

Honest risk

The most familiar shape of the six: polished and credible, but the least ownable. Glass over gradient is a common look in 2026 software marketing.

04 · KerbAn isometric miniature street with the business at its centre

Open prototype Brand board Annotated full page

Idea

Your business at the centre of its street. Each service is a place around the yard, and planned features are buildings still under scaffolding.

Comes from

Ardor (isometric connected scene)

Type

Archivo, display stretched along its width axis (112–125)

Palette

Slate #2b3440Traffic cone #ff6b1aLawn #5f9e3cTarmac #65707eKerbstone #e3e6e9Pavement #eef0f2

Assets made

12 transparent isometric tiles and props (yard, van, house, shopfront, K6 phone box, noticeboard, scaffolded planned buildings…), 1 composed scene

Honest risk

It explains the connected offer clearly but is cooler emotionally. New tiles must match the set exactly, and on phones the street becomes static cards.

Grown from the trade's own world

Visual languages every tradesperson already knows by heart: the duplicate job pad and the signwritten van.

05 · SortedThe duplicate job pad: carbon copies, biro and rubber stamps

Open prototype Brand board Annotated full page

Idea

"We'll get it sorted." The brand speaks fluent trade paperwork, and registering interest is filling in a job sheet.

Comes from

The duplicate job pad every tradesperson carries

Type

Barlow Condensed (pre-printed caps) + Barlow + Reenie Beanie (biro) + Courier Prime (sheet numbers)

Palette

Process blue #1f45c8Biro #1b2a78Canary copy #fbe27aPink copy #f7b9cbNumbering red #d4202cStamp green #127a48

Assets made

6 documentary job photos (phone-camera feel), bulldog clip and biro cut-outs; paper, stamps and handwriting built in HTML/SVG

Honest risk

Very ownable and trade-native, but paperwork can mean 'admin hassle'. It has to feel 'handled for you', never 'more forms'. Handwriting needs care for legibility.

06 · ProperThe signwritten van: livery, drop-shaded lettering, coachlines

Open prototype Brand board Annotated full page

Idea

Your van already does your marketing. We do the rest. The site is built like a signwritten van side, and its livery builds up as you scroll.

Comes from

Van livery and signwriting

Type

Alfa Slab One (block letters, drop shade) + Mr Dafoe (signwriter script) + Libre Franklin (body)

Palette

Racing green #0f4a36Gold shade #d9a43aCoachline red #c3302aVan white #f8f9f7Ink #16211cPrimer #c3c6c1

Assets made

Blank side-on van cut-out (the livery is live HTML), ladder cut-out, 4 realistic photos (signwritten van, signwriter at work, lettering, roofer), 1 seamless street loop

Honest risk

The boldest and most trade-native, but signwriting can read as nostalgic. The livery green should never compete with each customer's own brand on their site.