TCBB Creative Agency — Open Studio
Every build starts the same way. Someone tells us what they do.
Watch it happen, for real. This is the actual first move in our process: a plain description of a business, and the design system that falls out of it. Nothing on this page is invented for the occasion — it's three real briefs our pipeline has already produced, replayed here exactly as they came out.
See how the system decides ↓> A neighborhood coffee roaster in Northeast Minneapolis.|
✎ click to try your own business — we'll guess a starting palette
SMALL-BATCH · NORTHEAST MPLS
Roast & Fold
Coffee roasted a few blocks from where you'll drink it.
Order AheadStation 01 — The Palette Wall
The design system isn't a template. It's a decision.
Every TCBB build gets its own palette, type pairing, and layout logic — chosen for a reason we can point to, not a default we reached for because it was already loaded. Tap a brief to see its system take over the panel below, live.
SMALL-BATCH · NORTHEAST MPLS
Roast & Fold
Coffee roasted a few blocks from where you'll drink it.
Order AheadWhy this system — Roast & Fold
- Quicksand for headings gives the warm-approachable rounded letterforms that feel like a neighborhood cafe — not corporate, not trendy, genuinely friendly
- Lora for body copy adds a subtle editorial/craft quality, echoing the 'small batch' intentionality of the roasting process
- The primary red-terracotta (#af3e30) reads as the warm interior of a roaster — ember, clay, espresso crema — and avoids the generic brown coffee cliche
- Section surfaces use the off-white card tone (#f8efee) to simulate warm ambient cafe light without heavy shadows
- Gold accent (#b07100) is used for micro-details (star ratings, divider rules, pricing) — echoes the caramelized sugars in a well-developed roast
Try the real engine — pick any color, any mode
This is TCBB's actual color engine, running right here in your browser — the same math that builds every real concept's palette. It's computing a genuinely accessible palette live, not pulling from a list of preset looks.
Station 02 — The Drafting Table
For every brand, we sketch two signature moves. We ship one.
Roast & Fold's brief carried two real candidates for its one signature interaction. Here's what each actually does — not just its name on a slide.
ROAST & FOLD
LIVE-TICKER — a seamless auto-scrolling marquee strip between hero and services displays rotating coffee names, roast levels, and neighborhood phrases. Perfect for a cafe/roaster brand where the rotating menu and neighborhood identity ARE the product.
Station 03 — The Case File
Here's literally what we hand back.
One full brief, unedited — the kind of document that sits behind every TCBB build before a single line of code gets written.
Exhibit A — Type
FORGE FITNESS STUDIO
Coached strength training in small groups, real programming — not a crowded floor and a TV screen.
→ Barlow Condensed for headings — compressed, athletic letterforms that fill the viewport without feeling decorative, pure strength-training energy.
Exhibit B — Palette
→ Deep near-black page background (#170c0d) with the primary rose-red creates a forge/ember atmosphere, visceral and intentional. Secondary accent orange (#e38d3d) echoes molten metal.
Exhibit C — Signature Interaction: Cursor Spotlight
THE FORGE IS LIT.
→ CURSOR-SPOTLIGHT — chosen because the 100vh dark hero is exactly the canvas this mechanic needs; the molten-ember radial spotlight follows the cursor and reveals a subtle iron-texture pattern under the headline.
Station 04 — The Strategist's Notepad
Notes get taken. Scroll to watch them land.
Once the system is set, the actual content plan gets written down — what the site needs to do, and what it should say. Greenline Lawn & Landscape's real working notes, below.
Greenline Lawn & Landscape — working notes
What it needs
- Seasonal service package builder
- Photo gallery of Coon Rapids yards we've done
- Spring cleanup booking calendar
- Snow removal route map for Coon Rapids neighborhoods
- Customer portal for service history and invoices
- Referral reward program landing page
- Google Reviews feed embed
What we'd write about
- "Coon Rapids Lawn Care Guide" blog post for local SEO
- Before/after project gallery page
- Snow removal FAQ (when do you come, how do I mark my property)
- Free yard assessment booking page
- Seasonal checklist downloadable PDF lead magnet
Station 05 — The Test Bench
Every brief gets one thing nobody asked for.
TCBB's briefs always include a "beyond the brief" value-add — a small tool that does real work for the visitor. These three are genuinely functional, not screenshots.
Roast & Fold
"Interactive pour-over ratio calculator — the user picks a brew method and enters how many cups, and the calculator outputs the exact coffee and water amounts."
Forge Fitness Studio
"Interactive class-pack comparison panel — three real tiers with a toggle that highlights which tier saves most per session." (illustrative pricing — Forge is a sample brief)
Greenline Lawn & Landscape
"Interactive process stepper: 'What happens after you call us' — a 4-step tap-through specific to Greenline's residential workflow."
We walk your property together and talk through what's actually possible — no pressure, no clipboard sales pitch.
Station 06 — The Darkroom
A build, developing.
An illustrated composite of a typical TCBB build — not one specific client, no real photos, just the actual shape the work takes.
SMALL-BATCH · NORTHEAST MPLS
Your neighborhood has a better cup waiting.
Real copy, real palette, real signature mechanic — not a placeholder with a new logo.
Get Your Free ConceptA description on a phone call
It starts as a sentence, not a website — usually said out loud on a discovery call, sometimes typed into a form at midnight. At this stage every business looks the same: a name, a rough idea, and a deadline.
The system takes hold
Palette, type, and layout logic get decided together, on purpose, and written down so we — and you — can point to why. This is the part visitors never see, and the part that decides whether everything after it holds together.
A site that argues its own case
What ships isn't a generic template with a new logo. It's a specific argument for why someone should trust this specific business — made in how it looks, before a single word gets read.
Station 07 — The Gallery Wall
Drag it. This is the real Smart Gallery interaction.
Smart Gallery is TCBB's photo-management add-on — a client uploads a phone's camera roll and it comes out sorted, tagged, and ready to publish. This is the actual before/after slider technique from that product, standing on its own with illustrative visuals so you can try it without a client login.
47 unsorted photos ←→ sorted by room, automatically
Station 08 — The Storefront
This isn't a recreation. It's the real thing, running live.
Remember Roast & Fold from the Palette Wall? Below is their actual storefront — the real Smart Gallery, Catalog, Menu, and Events components, pointed at a real (disposable, demo-only) backend. Nothing in these four panels was rebuilt or faked for this page.
Real photos, auto-categorized by Claude Vision on upload — Roastery / Cafe Life / Beans & Bags.
These names, descriptions, and categories were extracted automatically from a photo — nobody typed them in.
Same coffee names from the ticker back at Station 02 — one continuous brand, not four disconnected examples.
Cupping Night, every Thursday — first mentioned all the way back at the Drafting Table.
This is the exact same component a real TCBB client's site gets. No re-skin, no mockup.
Station 09 — The Shop Window
A small, honest, live detail.
Not every live thing on a TCBB site needs to be dramatic. Sometimes it's just true. This is TCBB's own window — Ham Lake, Minnesota, right now.
A single real fetch, client-side, to TCBB's own weather endpoint for its home base — nothing simulated, nothing about you or your location.
This is TCBB's weather in Ham Lake, MN — not necessarily yours.
Station 10 — The Service Bay
Launch day is day one, not the finish line.
Most agency relationships end at handoff. TCBB's Living Site Program keeps a build monitored, growing, and quietly adapting afterward. Illustrative examples of what that actually looks like:
Pulse
82/100
Performance, SEO, accessibility, and best-practices — checked automatically, not just at launch.
Illustrative example score
Grow
"Add a before/after gallery to the Landscaping page — competitors ranking above you already have one."
Illustrative example suggestion
Adaptive
Returning visitor → sees "Welcome back" and their last-viewed service pinned to the top.
Illustrative example personalization
Station 11 — The Wall of Frames
Not concepts. Live, real, in use.
Everything on this page up to now has been a sample or a mechanism. These four are not — they're real work, live right now.
Jacobs Construction
A full site build and DNS migration for a real Ham Lake–area construction company — live, indexed, still growing.
jacobsconstructionmn.com ↗House Vision AI
A custom room-visualizer app TCBB built and embedded live inside Jacobs Construction's site — sketch a room, see it rendered.
See it live on Jacobs' site ↗RMAN
TCBB's own product — a real Android app, live on Google Play, built and shipped the same way.
Get it on Google Play ↗PeoplePractice Co.
TCBB's own HR-tech platform pages — with a real licensee, SMC People Strategies, using the platform today.
See the platform ↗Front Desk
Ready to see your own version of this?
Tell us what your business actually does. A real person reads it, and you get a real concept back — not a live demo, not a bot, a design. Usually within three days.
Get Your Free Concept →No account. No credit card. No generator running behind this page.