Clawviyo
Design system · v0.1 · drafted for review
04 / 20 / 2026Warm, grown-up, a little plushy.
§ 01
Wordmark & mascot
A deep plum ground lets the coral sunset type glow. The mascot carries all the warmth — the type stays tight and confident.
clawviyo.
display / Inter Tight 800
tracking −5.5%
gradient #FFE3D6 → #F26B6B
Clawviyo
Clawviyo
Clawviyo
Clawviyo
Hero · landing
Portrait · product moments
§ 02
Colors
Warm coral + deep plum carry the brand. Peach, butter, and sky appear only in mascot / celebration moments.
Coral 500 / Primary
#F26B6Boklch(0.69 0.18 25)
Plum 700 / Ink
#2B2340oklch(0.27 0.06 300)
Paper / Cream
#FFF4ECoklch(0.97 0.03 60)
Peach 500 / Warmth
#FF9472oklch(0.75 0.16 40)
Coral · primary scale50 → 700
50
100
200
300
400
500
600
700
900
Plum · ink scale100 → 900
100
200
300
400
500
600
700
800
900
Plush accents · used sparingly in whimsy momentspeach / butter / sky
peach 300
peach 500
butter 300
butter 400
sky 300
sky 400
§ 03
Typography
A single neo-grotesque carries the whole system. Tight tracking, heavy display weights, pretty wrap.
Display XLInter Tight 800
‑4.5% · 96–144
‑4.5% · 96–144
Get found by ChatGPT, Claude, and Gemini.
Display LGInter Tight 700
‑4% · 64–96
‑4% · 64–96
Built for the post-SEO internet.
Display MDInter Tight 700
‑3.5% · 48–64
‑3.5% · 48–64
Your trust page, one link.
H1650 · 40
Connect your profile
H2650 · 28
Inbound inquiries from AI
H3600 · 20
What AI assistants will read
Body420 · 16
Clawviyo gives your business a page AI assistants can actually read, so ChatGPT, Claude, and Gemini find your services, confirm your credentials, and send qualified inquiries straight to your inbox.
MonoJetBrains Mono
POST /c/acme-plumbing/mcp · method: post_inquiry · tier: T2
Overline600 · 11 · 14% track
Step 03 · Write your trust page
§ 04
Shape & elevation
Everything is soft — pill buttons, generous radii, and one signature plush shadow for the mascot and primary CTAs.
Radii6 → 36 + pill
xs · 6
sm · 10
md · 14
lg · 20
xl · 28
2xl · 36
pill
Shadowsxs · sm · md · lg · plush
xs
sm
md
lg
plush
§ 05
Components
Core primitives used across landing, dashboard, and public trust pages.
Buttons
Pills
DraftLiveVerifiedAI-readyConnectedNeeds review
Tier badges · T0 → T3
T0 · PublicT1 · SignedT2 · VerifiedT3 · Trusted
Auth tiers on each MCP tool — stamped, monospaced, outline style.
Inputs
Inquiry card
PE
Perplexity · Travel
2m ago
“I need a licensed plumber in Oakland for an emergency water heater replacement tomorrow.”
T2 · VerifiedHot lead
Setup checklist · dashboard module
✓
Claim slug
clawviyo.com/c/acme-plumbing
✓
Verify business
License · CA #841029
3
Write trust page
In progress · 60%
4
Enable inquiries
Open your inbox
§ 06
AI assistant auth tiers
Every tool on a trust page carries a tier. The same badge appears on the landing, in the dashboard, and on the public .well-known/mcp.json.
| Tier | Who | Auth | Typical tools | Rate |
|---|---|---|---|---|
| T0 · Public | Any crawler, any AI | none | get_profile · list_services · get_hours | 60 / min |
| T1 · Signed | AI runtimes with a registered key | HMAC header | check_availability · get_quote | 30 / min |
| T2 · Verified | AI assistants representing a verified human user | OAuth + user sig | post_inquiry · book_consultation | 10 / min |
| T3 · Trusted | Partner AI assistants on an allow-list | mTLS + contract | initiate_payment · sign_contract | unlimited |
§ 07
Tone & voice
Warm, specific, slightly irreverent — never cutesy in the product. The mascot does the waving; the copy stays sharp.
Do ✓
- “AI assistants found you 47 times this week.”
- “One link. Machine-readable. Goodbye SEO.”
- “We caught three inquiries while you were asleep.”
- “Verified in 4 minutes.”
Don’t ✗
- “Our little lobster friend can’t wait to help!”
- “Harness the power of AI to 10x your leads.”
- “Unleash your business potential.”
- “Join thousands of happy customers 🦞”
§ 08
Principles
Three commitments the system holds us to.
01 / whimsy in moments
The mascot is a guest, not a host.
Plush, pastel, rainbow-cloud energy lives on the landing hero, in empty states, and on wins. The product itself is calm cream + plum.
02 / human + AI
Design for two readers.
Every page has a human audience and an AI audience. The human sees a warm layout; the AI gets structured data. Tier badges tell both the same truth.
03 / tight type, soft shape
Chunky grotesque, gummy containers.
Contrast comes from a single heavy typeface against pill buttons, generous radii, and one signature plush shadow. No gradients beyond the wordmark.