The Field
Manual.
How Wagonboy works. What we believe. Why our shit looks the way it does.
A letter from the studio.
Most agency work looks the same because most agencies think the same.
If you've ever wondered why most agency websites blur together — same hero phrases, same gradients, same vague claims about “digital transformation” — it's because most agencies are running the same process, optimizing for the same risk-tolerance, and writing for the same imaginary buyer. The result is web design as beige wallpaper: technically there, emotionally absent.
Wagonboy was built in deliberate opposition to that. We're a senior-only studio that takes fewer clients and goes harder on each one. AI augments our work; it doesn't replace the human craft. The result, when it works, is a website that closes — one that turns curious visitors into qualified buyers and forgettable brands into ones people remember the name of.
This Field Manual is the artifact of how we think. It's our voice, our visual system, the unspoken vibe we apply to every project, and the standards we won't compromise on. It's customer-facing because we have nothing to hide and a lot to teach. Steal what helps. Argue with us where you disagree. Send us your version — we'll read it.
The three pillars.
Everything we make is built on three things. Get all three right and the work stops being noticeable as design and starts being noticeable as that brand.
Voice.
Three tenets, applied to every word that ships under our name — and to every word we write for a client.
- 01
Specific over abstract.
Numbers, names, dates, dollar amounts. Specificity is the anti-slop signal. When you can't be specific (early case studies, NDAs), name what you can share. Vague claims read as filler; specific claims read as proof.
- 02
Confident, not loud.
Make the strong claim once, in plain language, and stop. Don't hedge it with “we believe” or “arguably.” Don't shout it with exclamation marks. The confidence comes from the position, not the volume.
- 03
Anti-platitude.
If a sentence could appear on any agency site, delete it and write something only we could say. “Digital transformation,” “solutions,” “cutting-edge,” “synergy” — banned. If a phrase has worn a groove in the industry, walk around it.
“In today’s fast-paced digital landscape, user experience is paramount to driving meaningful business outcomes.”
“Most agency sites lose 60% of qualified visitors in the first 8 seconds. The fix isn’t more features. The fix is being interesting.”
“Our team of seasoned professionals leverages cutting-edge AI to deliver innovative solutions tailored to your unique needs.”
“We’re three senior people who use AI to do the boring parts faster. The thinking stays human. That’s the whole pitch.”
“Let’s discuss how we can help you achieve your business goals.”
“Tell us about the company. The work. The thing you wish your current site did. We’ll tell you whether we can help in 24 hours.”
Visual.
Every color, every typeface, every motion has a why. Beige is a hate crime against curiosity.
The palette.
Five tokens. That's the whole system. Every color on every Wagonboy surface is one of these or a transparent value of one of these. Discipline is what makes a small palette feel like a system instead of a constraint.
The type scale.
The aurora.
The gradient that wraps every hero is the brand's emotional fingerprint. Brand blue at the top (clarity), bleeding into purple (intuition), settling into char (gravity). It represents the studio's belief that good design is discipline plus instinct, not aesthetics on top of strategy. Whenever we ship something, the aurora is in it — the way a watermark is in money.
The cursor.
Yes, the rocket trail follows your cursor. Yes, it turns pink when you hover something interactive. Yes, it's intentional. The cursor is the smallest, most personal piece of brand language we have — we make it earn its presence. (No, we won't add a fallback for users who'd rather have a stock arrow. That's not who we're for.)
The mark, the wordmark, & how to use them.
Two pieces of identity work together: the mascot (our standalone mark — Apple's apple, Nike's swoosh) and the full lockup (mascot + wordmark). Each gets earned in different contexts, and both get the same protection.
The mark.
The head from the WAGONBOY STUDIO logo, used alone. It's the brand's most compressed form — the version that survives at favicon size and still reads as Wagonboy. Use it standalone where the brand is already understood (avatars, app icons, lapel pins, sign-offs) and as the lead element in the full lockup everywhere else.
The wordmark.
The full lockup pairs the mascot with the wordmark in all caps. The mascot anchors the left, the wordmark earns the rest. Together they're the studio's most public-facing surface — site headers, business cards, partner co-brands, anything signed.
WAGONBOY STUDIOClearspace.
The lockup gets a clearspace zone equal to the cap-height of the “W” on all four sides. Nothing crosses into this zone — no text, no graphics, no edges. The exception is the aurora gradient on hero compositions; the aurora is part of the brand and may bleed underneath.
WAGONBOY STUDIOColor variations.
WAGONBOY STUDIOWAGONBOY STUDIOWAGONBOY STUDIOSizing minimums.
Below a 120px lockup width on screen (or 1″ in print), the wordmark loses its weight relationship with the mascot. Drop down to mark-only below that floor — the mascot reads cleanly down to 24px.
WAGONBOY STUDIOWAGONBOY STUDIODon't do this.
Eight things we won't do with the lockup — and won't authorize anyone else to do either. If you see one of these in the wild, it's not us.
- No stretching, condensing, or skewing either the mascot or the wordmark.
- No recoloring outside the four approved variants.
- No rotating the lockup off the baseline.
- No drop shadows, glows, or other effects on either element.
- No outlining, hollowing, or filtering the mascot.
- No separating the mascot from the wordmark in the full lockup — that's what mark-only is for.
- No co-locking with other brand marks without an interlock rule.
- No placing the lockup over busy photography without a contrast scrim.
Vibe.
The unspoken stuff. Three principles that don't show up in spec sheets but show up in every project.
Tempo
Things should feel quick without feeling rushed. Page transitions land at ~425ms — long enough to be intentional, short enough to never feel like a wait. We tune motion to the brand: serious studios run slower; energetic ones run faster. Wagonboy runs taut.
Density
Whitespace is the most undervalued tool in web design. We give every piece of content room to breathe, then we cut everything that's not earning its space. The result feels editorial — like a magazine that respects your time. No infinite-scroll filler. No tab bars 14 items deep.
Surprise
Every site we ship has at least one moment that wasn't on the spec sheet. A hidden detail. A clever hover. A copy joke that lands on the third visit. Surprise is what turns visitors into return visitors. The day a site has no surprises is the day it becomes furniture.
The components.
An elite design system isn't a Figma file; it's a set of parts that live in code, get used in production, and stay in lockstep across every surface. This is the working registry — each card is a real component, demoed live, with a note on where it shows up.
- Wagonboy StudioThe StudioMay 2026, Chicago
- rocketr0ckxtm1$s!lemissile
- PrimaryWagonboy#4561F5
- 01
Voice
How we talk. Specific over abstract. Confident, not loud. Allergic to platitudes.
Read → - Chapter 05 · Live preview
A section heading.
- Move your cursor onto this card to see the real thing.
Every component on this page is a working unit in src/brand/components/. As we extract the rest, this index updates. That's the rule:if it's not here, it's not yet a system — it's just code waiting to become one.
This is a living document. Last updated May 12, 2026.
Find something contradictory, wrong, or worth arguing with? Tell us.We'll either fix it or change our minds.