The system, being built in the open.
One page to watch every piece land. Foundations are locked first because every marketing and dashboard surface inherits them. Each atom ships as a rendered proof you review before the next.
Foundations — locked
The pixel-resolution law + brand rules every surface reads from. These do not get rebuilt.
tokens.css ported from the live repo + reconciled: Poppins display, --badge-sunset, dark-mode block deleted, navy CTA focus ring..clay-surface is the fallback only.Shared atoms
The primitives both families inherit. These already exist in components.css — we harden finish only where a live primitive falls short of FINISH-SPEC. Fix once, fixed in forty places.
.wv-listrow workhorse. Grouped .wv-list ghost frame: one elevation, inset hairline dividers, unified --mist hover, avatars locked to one 34px size, status pills carry small Material icons, event glyphs de-circled, read/unread = fade-the-read + sage dot. Leads, reviews, notifications, and the team roster all read from it.Card + elevation ladder
Rendered live from the real tokens.css + components.css. I hardened only where the live primitive fell short of FINISH-SPEC — the ladder itself (white lips, grounded --e0, clean e1→e2→e3) was already sound and untouched.
--e0
--e1
--e2
--e3
--depth-raise
--e-cta
--e1 gives the lift. Both together — the card sits on the cream instead of dissolving into it..wv-card--hairlineNEW · list + table row dividers--bordercard + input edge · was neutral grey, now navy .12--border-stronginput hover · active-tab base · navy .18What changed, exactly: added the missing --hairline token · retuned --border / --border-strong from neutral grey to navy-tinted (§2) · gave .wv-card the paired edge it lacked. Nothing in the elevation ladder was rebuilt. Round-trips to the live repo when Batch 1 locks.
Button system — Pick A
Rendered live from the real components.css using the actual .wv-btn classes. Audited against FINISH-SPEC and Pick A — the live primitive already met the bar, so I rebuilt nothing. One honest nit flagged at the bottom for your call.
Primary = the single sunset pill (the one bright thing your eye and click land on). Secondary = filled-tonal navy, same raised bevel, no gradient. Tertiary = flat text. Exactly Pick A: sunset means "the thing to do," headlines and everything else stay navy.
Hover lifts translateY(-2px) + the glow blooms; press sinks +1px + the glow contracts; keyboard focus draws the navy ring (the coral-on-coral fix) over the resting bevel — hover/focus one to see it. Disabled drops all depth; loading swaps the label for a spinner and blocks input.
What I hardened: nothing in components.css — the button system already implemented Pick A, the navy CTA focus ring (FINISH-SPEC §3), the white lip, and the press/hover depth. Per "don't rebuild what works," I left it. One nit flagged (not changed): .wv-btn--tertiary hovers to a faint danger-red tint (--status-danger-bg), which reads as destructive on a neutral text action like "Maybe later." The one-line fix is to hover to a neutral --mist tint instead. Say the word and I'll apply it; otherwise it stays as-is.
Form + lead card
The conversion surface — the floating white capture card from the hero, now a real primitive. Two genuine gaps filled: the progress / step bar (didn't exist) and the lead card itself (was an un-formalized composition). The field / input / checkbox / toggle primitives were already strong, so they're shown here as-is, not rebuilt. Everything below renders live from the hardened components.css.
.wv-leadcardWhere should we send it?
Two minutes now, a booked-ready site back to you.
What changed, exactly: added .wv-progress + .wv-stepbar (new — recessed track, thin sunset fill, tabular-nums counter) · added .wv-leadcard (formalizes the floating --e2 capture card at a capped 420px so it never sprawls). The tertiary-button hover was also corrected from a danger-red tint to neutral --mist. Nothing in the input / checkbox / toggle primitives was rebuilt. Round-trips to the live repo when Batch 1 locks.
Inputs
The field family was already strong (recessed depth, error, the spring-driven toggle, the checkbox), so almost nothing was rebuilt. Two real shortfalls against FINISH-SPEC were hardened: the focus treatment was heavier than the locked spec (full-strength coral border + a 0.35 glow → the spec's .55 coral border + soft .16 glow — active at a glance, precise up close), and there was no disabled state (now a finished --surface-sunken well per §5, never a bare bright rectangle). Everything below renders live from the hardened components.css.
--eyebrow #3F6B62 (calm, not the intimidating red) and the stale Manrope labels scrubbed to Poppins across the system — both landed this pass.What changed, exactly: input focus reconciled to FINISH-SPEC §3 (rgba(232,72,85,.55) border + rgba(232,72,85,.16) glow, was full --primary + .35) · rest border 1.5px → 1px to match the card edge · added the :disabled sunken-well state (§5) + a focused-error ring. The textarea, select, toggle, and checkbox primitives were not rebuilt. Round-trips to the live repo when Batch 1 locks.
Badges & pills
Status pills already existed and read clean, so the harden was the role-badge set the team roster (§9.4) needs plus one scarcity fix. Owner now wears the soft --badge-sunset TINT with --coral-deep text (not the loud gradient), so a person's role never spends the scarce color. The loud gradient badge stays, but is now reserved for one job: marking a recommended plan tier. Everything below renders live from components.css.
What changed, exactly: added .wv-badge--owner (soft --badge-sunset tint) · --staff (sage) · --viewer (neutral + hairline edge) for the roster · reserved the loud .wv-badge--sunset gradient for plan-tier only. Also this pass: toggles + checkboxes are now interactive (click + keyboard flip aria-checked) in the gallery Forms section, and the .wv-herosearch hero bar was folded into components.css as a real form primitive. Round-trips to the live repo when Batch 1 locks.
Surfaces — queued
Composed from the hardened atoms above. Batch 1 is locked — Batch 2 (marketing molecules) is next.
mx-compare · testimonial · pricing · FAQ · final CTA · light footer.dx-notify · team/org (3-user cap) · billing plan-compare.mx-adkit creative formats (1:1 · 9:16 · leaderboard) and the brand email template. Reuse the motif, define nothing new.Color
One loud color: the sunset gold to coral gradient, spent scarcely. Everything else is cream, off-white, navy, and quiet sage. Blue, teal, sky, and steel are dead on this brand.
The gradient (the one loud color)
Brand anchors
Status (warm-tuned, never cold)
Typography
Poppins for display (geometric, confident, modern), Figtree for body (warm, the friendly neighbor voice). EB Garamond italic for scarce pull-quotes. The contrast of polished display and warm body is the "approachable quality" thesis.
Display scale — Poppins
Body — Figtree · accent — EB Garamond italic
Lead. You run your business. We run the website. lead · 18px
Body. Real plain-spoken copy a busy home-service owner reads on their phone between jobs. Short sentences. Benefit first. base · 15px · 1.55
"I never touch it. It just books me jobs."
Spacing & Radius
4px grid. Curves by default — a square-cornered card is an error on this brand.
Spacing scale (4px grid)
Radius
Elevation
Soft warm clay shadows — a white top lip catching the upper-left key light, over a warm-tinted drop. Never cold neutral grey.
Logo
4-point sunset-gradient mark + "webvegas" navy wordmark. Always the real SVG from brand/Logo, never text. Size it as brand presence, not a tiny icon — build to the context target (nav 48px, sidebar 56px, hero 88px), never the floor (signature ≥44px / 120px wide). If the wordmark reads smaller than the nav text, it's too small.
Monty
The locked mascot and AI chat persona. Consume these assets; never redesign. WebVegas-owned surfaces only; never on a client spec site or the client AI Front Desk.
Monty × QR · scan-me pose
Two canonical Monty-with-QR poses (CEO-locked 2026-07-03), both transparent cutouts with their own soft render shadow. Phone pose (matte-clay phone + orange SCAN ME pill) is the hero for big placements — ads, social, web, print. Card pose (front-on, plain white QR card, no pill) is for small / code-first placements: at thumbnail size the code fills the frame and reads first, so the SCAN ME label is dropped as unreadable clutter. Plus the reusable standalone QR alone.
Both codes encode https://webvegas.io/qr (scan-verified) — a stable link whose destination is swapped server-side (302, no re-print). The standalone code ships as vector (assets/webvegas-qr-code.svg, scales to any size) plus a webp convenience copy. Pick the phone pose when the graphic is large enough for the SCAN ME pill to read; pick the card pose when it runs small.
- QR recolor rule: recolor freely, but keep the DATA modules dark for scan contrast — brand navy
#222F3Eis ideal (reads as "black", on-brand). Coral#E84855clears contrast if you want color. Branded-but-safe option: color only the three corner finder eyes gold/coral and leave the data field dark. Never put light gold#FFAB50on white for the data field (flaky scans). Keep the quiet-zone margin; test-scan at print size in low light before shipping. - Editable sources live in the brand folder, not here: the layered PSDs (
brand/mascot/poses/qr/monty-qr-phone.psdandmonty-qr-card.psd) are source-only — swap the on-screen / on-card code there, then export a fresh webp. The PSDs are intentionally not shipped to the site. - Scope: WebVegas-owned surfaces only (ads, emails, dashboard, webvegas.io, social). Never on a client spec site or the client AI Front Desk.
- Coming next: a blank-screen twin (same pose, empty phone screen) so per-business shell-URL codes drop in.
Chat avatar states
Default chat avatar is the CEO-approved 3/4 playful tilt (both coral eyes open, forked tongue out) — canonical source brand/mascot/poses/chat/monty-avatar.webp (+ -alpha for colored bubbles). Constrain to a circle (border-radius:50%;object-fit:cover). Typing / thinking are alt states; lips cover the teeth in every state (no individual teeth, ever).
Motion — "Building your site" loader
Transparent looping clip for the spec-site generation screen. Monty raises his phone to appraise the work, then settles back — one seamless ~5s loop. He floats on any surface (matted, no box, no fade). Decorative motion, not a real progress bar.
Assets: assets/monty-loader-alpha.webm (Chrome/FF/Edge) · .mov (Safari/iOS HEVC) · -poster.png (reduced-motion still). List the webm source first — Chrome decodes HEVC but cannot render its alpha. Drop-in React component + re-key recipe: mascot/motion/loader/.
Social media · Monty in motion
Our differentiator: the carousels move. Each slide is a looping video, built as a designed HTML slide with Monty animating as a layer (not raw AI video, which cannot render clean type). The scroll-stopper is the depth-layered hero: Monty animates over the headline (the text passes behind his crown), purple tongue flapping, on a sharp neon plate. Full system + the exact prompts: brand/mascot/social/motion-carousels/ (SYSTEM-monty-in-motion.md, PROMPTS-USED.md).
How the depth layer is built: render Monty on a green screen, chroma-key him transparent (green never touches his charcoal body, so nothing fades), then stack background → headline → transparent Monty (bottom-anchored, enlarged so his crown breaks the text plane) → logo/CTA. One reusable transparent Monty loop works over infinite themed backgrounds. Meat slides reuse a small corner-loop library, so additional slides cost $0 in credits.
[MASTER LOCK BLOCK] SCENE: Monty gleefully driving a sleek matte-clay Formula 1 race car, both charcoal-black clawed hands gripping the wheel, leaning into the speed; his deep-VIOLET FORKED tongue lolls OUT to ONE SIDE of his mouth and flaps back in the wind. BACKGROUND: flat solid chroma-key green #00b140, even lighting, soft contact shadow under the car. Full body and car, centered. No text, no logos, no watermark. [EXPRESSIVE beat — tongue OUT is intended here (fun social/motion). ATTACH a face-ref from face-refs/ so the purple tongue does not wash out. On non-expressive poses the tongue stays IN.]
Loop it: Seedance image-to-video, start_image = end_image = the still, prompt the cyclical motion only (tongue flaps, subtle bob, locked camera, seamless loop). Then chroma-key the clip and composite. Worked example: social/motion-carousels/slides/final/MOVING-leadgen-layered.mp4.
Pose library
Marketing scenes
Special editions
WebVegas-owned brand-fun only. Costume layers over the canon character; never on client surfaces.
Usage rules (canon)
- Two colors only: charcoal-black base + sunset gold-to-coral (#FFAB50 to #E84855). Purple shows only on the forked tongue, and only on expressive beats (see the tongue rule below).
- Tongue — default IN, reserved OUT (CEO 2026-07-03): Monty's default face is a soft warm closed-or-slightly-open smile with the deep-violet tongue kept INSIDE his mouth — even an open-mouth presenting/greeting pose keeps the tongue in. The forked violet tongue OUT is reserved for expressive beats only (playful, goofy/derpy, celebratory/booked, stickers, fun social). You only see his forked tongue when he's doing something expressive. Supersedes the old "force the tongue out on every open mouth" protocol.
- Bare black front: belly, chest and throat stay solid charcoal-black. No orange across the front.
- Lips cover the teeth. No individual teeth, ever. "Especially smiley" comes from the eyes, cheeks and mouth shape, never a tooth row. Teeth read crocodilian/dino and break trust.
- Beaded pebble texture (never "scales"). Blocky blunt Gila head; never gecko, dino, croc or dragon.
- One loud color per scene: the sunset gradient is the only loud object (phone screen, booked cell, stars, pin, awning).
- Scope: WebVegas-owned surfaces only. Never on a client spec site or the client AI Front Desk.
Full canon: ART-DIRECTION-SYSTEM.md §9. To generate new on-model assets: MONTY-PROMPT-LIBRARY.md (image-to-image from the canonical reference, Nano Banana Pro).
Prompt library (lock Monty in place)
Generate every new Monty asset image-to-image FROM the canonical reference, never fresh text-to-image. Paste the master lock block into every prompt, then add one pose or scene clause. Click any box to copy.
matte clay 3D render of the EXACT mascot character in the reference image (clay Gila monster 'Monty'), identical look, proportions, colors and markings. Blocky blunt Gila head (never gecko, dino, croc or dragon). Warm coral-orange eyes with a single catchlight. Two-color system only: charcoal-black base plus sunset gold-to-coral orange (#FFAB50 to #E84855). BARE solid charcoal-black belly, chest and throat (NO orange across the front). Orange ONLY on: crown cap, 5 geometric snout dots, sides and back (one connected organic shape), outer arms, and banded tail. Soft beaded PEBBLE texture (never scales). Lips COVER the teeth: no individual teeth, ever. Matte clay toy finish, warm key light upper-left, soft contact shadow, seamless off-white #f9f9fc background. No text, no logos, no watermark.
CRITICAL BELLY/FRONT RULE: the entire FRONT (belly, chest, throat, inner arms) is COMPLETELY BARE solid charcoal-black, with ABSOLUTELY NO orange stripes, bands, or spots crossing the front. Orange appears ONLY on the crown cap, the 5 snout dots, the SIDES and BACK, the OUTER upper arms, and the BANDED tail. From the front he reads as a clean solid-black belly with orange only at the outer side edges.
[MASTER LOCK BLOCK] [CRITICAL BELLY CLAUSE if full-body] POSE/SCENE: [one clause, the only thing that changes]. centered, full body OR head-and-shoulders as needed. No text, no logos, no watermark.
POSE: THREE-QUARTER VIEW, head and body turned about 30 to 45 degrees to one side, face angled toward viewer. Especially happy, big warm smile with strongly lifted cheeks and crinkled sparkling coral eyes; lips COVER the teeth (no tooth row, no fangs), smooth friendly mouth. Head-and-shoulders, centered.
SCENE: gesturing toward a floating clay smartphone; the SCREEN is a solid sunset gold-to-coral gradient with ONE blank rounded card, NO text, NO letters, NO numbers, NO symbols, NO logo. The gradient screen is the ONLY loud color in frame; everything else cream and off-white.
His expression is a soft, warm, closed or slightly-open friendly smile, lips covering the teeth; his deep-violet tongue stays inside his mouth — not sticking out.
His mouth is open in a playful grin with his deep-VIOLET FORKED tongue (two-pronged, matte purple, the only purple anywhere) clearly out to one side.
Tongue rule (CEO 2026-07-03): default face keeps the tongue IN; the forked violet tongue is reserved for expressive beats (playful, goofy, celebratory/booked, stickers, fun social). For an expressive tongue-out prompt, also attach a face-ref from brand/mascot/face-refs/ (monty-face-tongue-3q.png or -blep.png) so the purple does not wash out. After every generation, QA the front for a clean bare-black belly before saving. Action poses are where the orange-belly regression hides, so the critical belly clause is mandatory for them.
Vertical ad set
One locked Monty base, dressed per vertical, for static per-vertical ads (swap the headline; Monty cut-out stays) and the website. Three shots each: A 3/4 holding a phone showing a site, B front-on presenting the phone, C a dynamic signature-prop hero. Every image is transparent (PNG-alpha webp). Click Show prompt under any asset for the exact, reproducible prompt.
Housekeeping
Show prompt
matte clay 3D render of the EXACT mascot character in the reference image (clay Gila monster 'Monty'), identical head shape, proportions, orange crown cap, 5 orange snout dots, warm coral-orange eyes, soft beaded PEBBLE texture (never scales), blocky blunt Gila head (never gecko, dino, croc or dragon). Two-color body: charcoal-black base with sunset gold-to-coral orange ONLY on crown cap, snout dots, sides and back, outer arms and banded tail; any visible belly/chest/throat is BARE solid charcoal-black with NO orange across the front. Lips cover the teeth, no individual teeth; if the tongue shows it is a deep violet FORKED tongue. matte clay toy finish, warm key light upper-left, soft contact shadow, seamless off-white #f9f9fc background. Wearing a clean cleaning apron and rubber gloves. THREE-QUARTER VIEW standing, holding up a clay smartphone in one hand and gesturing to it with the other; the phone screen shows a simple clean website mockup (a header bar, a hero image block, and a button) in soft sunset-orange and cream, NO readable text. Friendly confident closed-lip smile. Full body, centered. No text, no logos, no watermark.
Show prompt
matte clay 3D render of the EXACT mascot character in the reference image (clay Gila monster 'Monty'), identical head shape, proportions, orange crown cap, 5 orange snout dots, warm coral-orange eyes, soft beaded PEBBLE texture (never scales), blocky blunt Gila head (never gecko, dino, croc or dragon). Two-color body: charcoal-black base with sunset gold-to-coral orange ONLY on crown cap, snout dots, sides and back, outer arms and banded tail; any visible belly/chest/throat is BARE solid charcoal-black with NO orange across the front. Lips cover the teeth, no individual teeth; if the tongue shows it is a deep violet FORKED tongue. matte clay toy finish, warm key light upper-left, soft contact shadow, seamless off-white #f9f9fc background. Wearing a clean cleaning apron and rubber gloves. FRONT VIEW facing the camera, proudly holding a clay smartphone UP toward the viewer; the phone screen shows a simple clean website mockup (header bar, hero block, button) in soft sunset-orange and cream, NO readable text. Big friendly closed-lip smile. Full body, centered. No text, no logos, no watermark.
Show prompt
matte clay 3D render of the EXACT mascot character in the reference image (clay Gila monster 'Monty'), identical head shape, proportions, orange crown cap, 5 orange snout dots, warm coral-orange eyes, soft beaded PEBBLE texture (never scales), blocky blunt Gila head (never gecko, dino, croc or dragon). Two-color body: charcoal-black base with sunset gold-to-coral orange ONLY on crown cap, snout dots, sides and back, outer arms and banded tail; any visible belly/chest/throat is BARE solid charcoal-black with NO orange across the front. Lips cover the teeth, no individual teeth; if the tongue shows it is a deep violet FORKED tongue. matte clay toy finish, warm key light upper-left, soft contact shadow, seamless off-white #f9f9fc background. Wearing a clean cleaning apron and rubber gloves, playfully flourishing a feather duster with flair in a fun confident action pose, mid-sweep, full of personality. Full body, centered. No text, no logos, no watermark.
Handyman
Show prompt
matte clay 3D render of the EXACT mascot character in the reference image (clay Gila monster 'Monty'), identical head shape, proportions, orange crown cap, 5 orange snout dots, warm coral-orange eyes, soft beaded PEBBLE texture (never scales), blocky blunt Gila head (never gecko, dino, croc or dragon). Two-color body: charcoal-black base with sunset gold-to-coral orange ONLY on crown cap, snout dots, sides and back, outer arms and banded tail; any visible belly/chest/throat is BARE solid charcoal-black with NO orange across the front. Lips cover the teeth, no individual teeth; if the tongue shows it is a deep violet FORKED tongue. matte clay toy finish, warm key light upper-left, soft contact shadow, seamless off-white #f9f9fc background. Wearing a handyman tool belt and a yellow hard hat. THREE-QUARTER VIEW standing, holding up a clay smartphone in one hand and gesturing to it with the other; the phone screen shows a simple clean website mockup (a header bar, a hero image block, and a button) in soft sunset-orange and cream, NO readable text. Friendly confident closed-lip smile. Full body, centered. No text, no logos, no watermark.
Show prompt
matte clay 3D render of the EXACT mascot character in the reference image (clay Gila monster 'Monty'), identical head shape, proportions, orange crown cap, 5 orange snout dots, warm coral-orange eyes, soft beaded PEBBLE texture (never scales), blocky blunt Gila head (never gecko, dino, croc or dragon). Two-color body: charcoal-black base with sunset gold-to-coral orange ONLY on crown cap, snout dots, sides and back, outer arms and banded tail; any visible belly/chest/throat is BARE solid charcoal-black with NO orange across the front. Lips cover the teeth, no individual teeth; if the tongue shows it is a deep violet FORKED tongue. matte clay toy finish, warm key light upper-left, soft contact shadow, seamless off-white #f9f9fc background. Wearing a handyman tool belt and a yellow hard hat. FRONT VIEW facing the camera, proudly holding a clay smartphone UP toward the viewer; the phone screen shows a simple clean website mockup (header bar, hero block, button) in soft sunset-orange and cream, NO readable text. Big friendly closed-lip smile. Full body, centered. No text, no logos, no watermark.
Show prompt
matte clay 3D render of the EXACT mascot character in the reference image (clay Gila monster 'Monty'), identical head shape, proportions, orange crown cap, 5 orange snout dots, warm coral-orange eyes, soft beaded PEBBLE texture (never scales), blocky blunt Gila head (never gecko, dino, croc or dragon). Two-color body: charcoal-black base with sunset gold-to-coral orange ONLY on crown cap, snout dots, sides and back, outer arms and banded tail; any visible belly/chest/throat is BARE solid charcoal-black with NO orange across the front. Lips cover the teeth, no individual teeth; if the tongue shows it is a deep violet FORKED tongue. matte clay toy finish, warm key light upper-left, soft contact shadow, seamless off-white #f9f9fc background. Wearing a handyman tool belt and a yellow hard hat, confidently raising a hammer overhead in a triumphant heroic pose, full of personality. Full body, centered. No text, no logos, no watermark.
Plumber
Show prompt
matte clay 3D render of the EXACT mascot character in the reference image (clay Gila monster 'Monty'), identical head shape, proportions, orange crown cap, 5 orange snout dots, warm coral-orange eyes, soft beaded PEBBLE texture (never scales), blocky blunt Gila head (never gecko, dino, croc or dragon). Two-color body: charcoal-black base with sunset gold-to-coral orange ONLY on crown cap, snout dots, sides and back, outer arms and banded tail; any visible belly/chest/throat is BARE solid charcoal-black with NO orange across the front. Lips cover the teeth, no individual teeth; if the tongue shows it is a deep violet FORKED tongue. matte clay toy finish, warm key light upper-left, soft contact shadow, seamless off-white #f9f9fc background. Wearing blue plumber work overalls. THREE-QUARTER VIEW standing, holding up a clay smartphone in one hand and gesturing to it with the other; the phone screen shows a simple clean website mockup (a header bar, a hero image block, and a button) in soft sunset-orange and cream, NO readable text. Friendly confident closed-lip smile. Full body, centered. No text, no logos, no watermark.
Show prompt
matte clay 3D render of the EXACT mascot character in the reference image (clay Gila monster 'Monty'), identical head shape, proportions, orange crown cap, 5 orange snout dots, warm coral-orange eyes, soft beaded PEBBLE texture (never scales), blocky blunt Gila head (never gecko, dino, croc or dragon). Two-color body: charcoal-black base with sunset gold-to-coral orange ONLY on crown cap, snout dots, sides and back, outer arms and banded tail; any visible belly/chest/throat is BARE solid charcoal-black with NO orange across the front. Lips cover the teeth, no individual teeth; if the tongue shows it is a deep violet FORKED tongue. matte clay toy finish, warm key light upper-left, soft contact shadow, seamless off-white #f9f9fc background. Wearing blue plumber work overalls. FRONT VIEW facing the camera, proudly holding a clay smartphone UP toward the viewer; the phone screen shows a simple clean website mockup (header bar, hero block, button) in soft sunset-orange and cream, NO readable text. Big friendly closed-lip smile. Full body, centered. No text, no logos, no watermark.
Show prompt
matte clay 3D render of the EXACT mascot character in the reference image (clay Gila monster 'Monty'), identical head shape, proportions, orange crown cap, 5 orange snout dots, warm coral-orange eyes, soft beaded PEBBLE texture (never scales), blocky blunt Gila head (never gecko, dino, croc or dragon). Two-color body: charcoal-black base with sunset gold-to-coral orange ONLY on crown cap, snout dots, sides and back, outer arms and banded tail; any visible belly/chest/throat is BARE solid charcoal-black with NO orange across the front. Lips cover the teeth, no individual teeth; if the tongue shows it is a deep violet FORKED tongue. matte clay toy finish, warm key light upper-left, soft contact shadow, seamless off-white #f9f9fc background. Wearing blue plumber work overalls, leaning casually and confidently against a giant oversized pipe wrench taller than him, relaxed cool pose. Full body, centered. No text, no logos, no watermark.
Pest control
Show prompt
matte clay 3D render of the EXACT mascot character in the reference image (clay Gila monster 'Monty'), identical head shape, proportions, orange crown cap, 5 orange snout dots, warm coral-orange eyes, soft beaded PEBBLE texture (never scales), blocky blunt Gila head (never gecko, dino, croc or dragon). Two-color body: charcoal-black base with sunset gold-to-coral orange ONLY on crown cap, snout dots, sides and back, outer arms and banded tail; any visible belly/chest/throat is BARE solid charcoal-black with NO orange across the front. Lips cover the teeth, no individual teeth; if the tongue shows it is a deep violet FORKED tongue. matte clay toy finish, warm key light upper-left, soft contact shadow, seamless off-white #f9f9fc background. Wearing a buttoned khaki short-sleeve pest-control work shirt with a collar and chest pocket, and a matching khaki cap. THREE-QUARTER VIEW standing, holding up a clay smartphone in one hand and gesturing to it with the other; the phone screen shows a simple clean website mockup (a header bar, a hero image block, and a button) in soft sunset-orange and cream, NO readable text. Friendly confident closed-lip smile. Full body, centered. No text, no logos, no watermark.
Show prompt
matte clay 3D render of the EXACT mascot character in the reference image (clay Gila monster 'Monty'), identical head shape, proportions, orange crown cap, 5 orange snout dots, warm coral-orange eyes, soft beaded PEBBLE texture (never scales), blocky blunt Gila head (never gecko, dino, croc or dragon). Two-color body: charcoal-black base with sunset gold-to-coral orange ONLY on crown cap, snout dots, sides and back, outer arms and banded tail; any visible belly/chest/throat is BARE solid charcoal-black with NO orange across the front. Lips cover the teeth, no individual teeth; if the tongue shows it is a deep violet FORKED tongue. matte clay toy finish, warm key light upper-left, soft contact shadow, seamless off-white #f9f9fc background. Wearing a buttoned khaki short-sleeve pest-control work shirt with a collar and chest pocket, and a matching khaki cap. FRONT VIEW facing the camera, proudly holding a clay smartphone UP toward the viewer; the phone screen shows a simple clean website mockup (header bar, hero block, button) in soft sunset-orange and cream, NO readable text. Big friendly closed-lip smile. Full body, centered. No text, no logos, no watermark.
Show prompt
matte clay 3D render of the EXACT mascot character in the reference image (clay Gila monster 'Monty'), identical head shape, proportions, orange crown cap, 5 orange snout dots, warm coral-orange eyes, soft beaded PEBBLE texture (never scales), blocky blunt Gila head (never gecko, dino, croc or dragon). Two-color body: charcoal-black base with sunset gold-to-coral orange ONLY on crown cap, snout dots, sides and back, outer arms and banded tail; any visible belly/chest/throat is BARE solid charcoal-black with NO orange across the front. Lips cover the teeth, no individual teeth; if the tongue shows it is a deep violet FORKED tongue. matte clay toy finish, warm key light upper-left, soft contact shadow, seamless off-white #f9f9fc background. Wearing a pest-control technician uniform shirt and cap, holding a pest-control sprayer wand pointed forward like a secret agent holding a gun, cool confident spy stance. Full body, centered. No text, no logos, no watermark.
Landscaping
Show prompt
matte clay 3D render of the EXACT mascot character in the reference image (clay Gila monster 'Monty'), identical head shape, proportions, orange crown cap, 5 orange snout dots, warm coral-orange eyes, soft beaded PEBBLE texture (never scales), blocky blunt Gila head (never gecko, dino, croc or dragon). Two-color body: charcoal-black base with sunset gold-to-coral orange ONLY on crown cap, snout dots, sides and back, outer arms and banded tail; any visible belly/chest/throat is BARE solid charcoal-black with NO orange across the front. Lips cover the teeth, no individual teeth; if the tongue shows it is a deep violet FORKED tongue. matte clay toy finish, warm key light upper-left, soft contact shadow, seamless off-white #f9f9fc background. Wearing a landscaper work shirt and cap. THREE-QUARTER VIEW standing, holding up a clay smartphone in one hand and gesturing to it with the other; the phone screen shows a simple clean website mockup (a header bar, a hero image block, and a button) in soft sunset-orange and cream, NO readable text. Friendly confident closed-lip smile. Full body, centered. No text, no logos, no watermark.
Show prompt
matte clay 3D render of the EXACT mascot character in the reference image (clay Gila monster 'Monty'), identical head shape, proportions, orange crown cap, 5 orange snout dots, warm coral-orange eyes, soft beaded PEBBLE texture (never scales), blocky blunt Gila head (never gecko, dino, croc or dragon). Two-color body: charcoal-black base with sunset gold-to-coral orange ONLY on crown cap, snout dots, sides and back, outer arms and banded tail; any visible belly/chest/throat is BARE solid charcoal-black with NO orange across the front. Lips cover the teeth, no individual teeth; if the tongue shows it is a deep violet FORKED tongue. matte clay toy finish, warm key light upper-left, soft contact shadow, seamless off-white #f9f9fc background. Wearing a landscaper work shirt and cap. FRONT VIEW facing the camera, proudly holding a clay smartphone UP toward the viewer; the phone screen shows a simple clean website mockup (header bar, hero block, button) in soft sunset-orange and cream, NO readable text. Big friendly closed-lip smile. Full body, centered. No text, no logos, no watermark.
Show prompt
matte clay 3D render of the EXACT mascot character in the reference image (clay Gila monster 'Monty'), identical head shape, proportions, orange crown cap, 5 orange snout dots, warm coral-orange eyes, soft beaded PEBBLE texture (never scales), blocky blunt Gila head (never gecko, dino, croc or dragon). Two-color body: charcoal-black base with sunset gold-to-coral orange ONLY on crown cap, snout dots, sides and back, outer arms and banded tail; any visible belly/chest/throat is BARE solid charcoal-black with NO orange across the front. Lips cover the teeth, no individual teeth; if the tongue shows it is a deep violet FORKED tongue. matte clay toy finish, warm key light upper-left, soft contact shadow, seamless off-white #f9f9fc background. Wearing a landscaper work shirt and cap, wielding a leaf blower with action and flair, a few clay leaves swirling around, dynamic confident pose. Full body, centered. No text, no logos, no watermark.
Pool service
Show prompt
matte clay 3D render of the EXACT mascot character in the reference image (clay Gila monster 'Monty'), identical head shape, proportions, orange crown cap, 5 orange snout dots, warm coral-orange eyes, soft beaded PEBBLE texture (never scales), blocky blunt Gila head (never gecko, dino, croc or dragon). Two-color body: charcoal-black base with sunset gold-to-coral orange ONLY on crown cap, snout dots, sides and back, outer arms and banded tail; any visible belly/chest/throat is BARE solid charcoal-black with NO orange across the front. Lips cover the teeth, no individual teeth; if the tongue shows it is a deep violet FORKED tongue. matte clay toy finish, warm key light upper-left, soft contact shadow, seamless off-white #f9f9fc background. Wearing a BRIGHT BLUE pool-service polo shirt and a blue cap. THREE-QUARTER VIEW standing, holding up a clay smartphone in one hand and gesturing to it with the other; the phone screen shows a simple clean website mockup (a header bar, a hero image block, and a button) in soft sunset-orange and cream, NO readable text. Friendly confident closed-lip smile. Full body, centered. No text, no logos, no watermark.
Show prompt
matte clay 3D render of the EXACT mascot character in the reference image (clay Gila monster 'Monty'), identical head shape, proportions, orange crown cap, 5 orange snout dots, warm coral-orange eyes, soft beaded PEBBLE texture (never scales), blocky blunt Gila head (never gecko, dino, croc or dragon). Two-color body: charcoal-black base with sunset gold-to-coral orange ONLY on crown cap, snout dots, sides and back, outer arms and banded tail; any visible belly/chest/throat is BARE solid charcoal-black with NO orange across the front. Lips cover the teeth, no individual teeth; if the tongue shows it is a deep violet FORKED tongue. matte clay toy finish, warm key light upper-left, soft contact shadow, seamless off-white #f9f9fc background. Wearing a BRIGHT BLUE pool-service polo shirt and a blue cap. FRONT VIEW facing the camera, proudly holding a clay smartphone UP toward the viewer; the phone screen shows a simple clean website mockup (header bar, hero block, button) in soft sunset-orange and cream, NO readable text. Big friendly closed-lip smile. Full body, centered. No text, no logos, no watermark.
Show prompt
matte clay 3D render of the EXACT mascot character in the reference image (clay Gila monster 'Monty'), identical head shape, proportions, orange crown cap, 5 orange snout dots, warm coral-orange eyes, soft beaded PEBBLE texture (never scales), blocky blunt Gila head (never gecko, dino, croc or dragon). Two-color body: charcoal-black base with sunset gold-to-coral orange ONLY on crown cap, snout dots, sides and back, outer arms and banded tail; any visible belly/chest/throat is BARE solid charcoal-black with NO orange across the front. Lips cover the teeth, no individual teeth; if the tongue shows it is a deep violet FORKED tongue. matte clay toy finish, warm key light upper-left, soft contact shadow, seamless off-white #f9f9fc background. Wearing a BRIGHT BLUE pool-service polo shirt and a blue cap, carrying a LONG pool skimmer net (a flat net basket on the end of a long pole) resting over one shoulder, confident relaxed stride. Full body, centered. No text, no logos, no watermark.
Buttons
The primary CTA is a sunset-gradient pill with a glow and a soft lift. One primary per zone; secondary is ghost, tertiary is text.
Variants
Sizes
States
Frosted clay — experimental, parked (not in the system)
Neutral at rest; glows from within and lifts on hover, focus, or scroll-into-view. Kept here as a future option only — not part of the component system and undocumented. Hover them.
Badges & Pills
Badges are TEXT, not buttons — they label state and never invite a click.
Status pills
State labels. The dot variant carries a live signal; the neutral base is a plain tint.
Role badges (team roster · §9.4)
Owner wears the soft sunset TINT (never the loud gradient), Staff is sage, Viewer is neutral.
Plan tier
The one place the loud gradient is sanctioned on a badge. It marks a recommended plan tier, small and scarce.
Forms
Soft inputs, md radius, sunset focus ring. Field wraps label, hint, and error.
Hero search bar
The horizontal lead-capture form for the homepage hero — two fields (email + site), one sunset CTA. Stacks vertically under 640px.
Cards
Default surface, lg radius, e1 shadow. Warm variant for human content; feature for value props; interactive lifts on hover.
Default card
Surface white, lg radius, warm clay shadow.
Warm card
Cream tint for testimonials, founder, guarantee — the human content.
Interactive
Hover me — lifts to e2. Use for clickable tiles.
Feature card
xl radius, bigger pad, e2. Pairs a bespoke clay asset (or Monty) with a value prop.
Stat tiles
Dashboard KPI with trend. Big Poppins number, uppercase label, colored trend.
New leads
34
+12 this week Jobs booked
18
+5 Reviews
4.9
+3 new Site visits
1.2k
-4%Banners & Toasts
Inline banners for section-level status; toasts for transient confirmation (navy, spring pop).
Tables & Lists
Rounded outer frame, flat inner rows (the one intentional flat surface). List rows are the dense workhorse: standalone as a card, or grouped in a .wv-list ghost frame with hairline dividers.
Table
| Lead | Source | Status | When |
|---|---|---|---|
| MGMaria G. | Website chat | Booked | 2h ago |
| JTJames T. | Call | New | 5h ago |
| PNPriya N. | Form | Followed up | Yesterday |
List rows — standalone
A single row on its own is an --e1 card. Use standalone for a sparse, one-off feed item.
Grouped list — the dense workhorse
Many rows go in one .wv-list ghost frame: a single elevation, inset hairline dividers, hover tint on interactive rows. Leads feeds, reviews, notifications, and the team roster all read from this, never a stack of chunky cards.
Nav & Tabs
Floating pill header for marketing; segmented pill tabs for views.
Marketing header
Tabs
Modal
xl radius, e3 overlay shadow, spring pop. Shown inline here (not a live overlay) so the catalog renders it statically.
Cancel your plan?
Your site stays yours to keep. Hosting, the AI Front Desk, and management stop. You can turn it back on anytime.
Empty state
Clay art + warm copy + one action. Never a cold "no data" message.
No leads yet — that's about to change.
Your site is live and getting found. The first leads land here. Want to send your first review request?
Dashboard shell
Navy sidebar (active item is sunset), light main. Compose stat tiles, lists, and cards inside.
Desert Shine Cleaning
Leads
34
Booked
18
Rating
4.9