Design System v1.0 · 2026-05-24
Midtown.
Tokens, components, and patterns that make every page on midtownprinter.com feel like one cohesive shop. Anything you build from here forward composes from these parts.
01 · Foundation
Color tokens
Surfaces
Ink
Accent & CTA
Gold = signature/supportive. Blue = action. Never compete at the same visual weight.
Status
02 · Foundation
Type scale
Single family: Montserrat. No second typeface.
Eyebrow / Kicker
Hero headline — built for Florida weather.
Section H2 — Build your banner.
Card H3 — Standard 5-panel hat
Lede — Full-color print on heavy-duty outdoor vinyl. Hems and grommets standard.
Body text — A real print shop in midtown Tallahassee. Shirts, hats, stickers, signs — priced online in 60 seconds, made by hand, picked up locally or shipped nationwide. No setup fees. No hidden art fees.
Micro — for captions, fine print, contextual annotations
03 · Foundation
Spacing scale
4-based scale. Components compose from these. No magic numbers.
04 · Components
Buttons
One dominant primary per page. Secondary is supporting. Ghost is tertiary.
Primary — the action of the page
Secondary — supporting action
Ghost — tertiary
Pill — for anchor / shortcut CTAs
Build Yours05 · Components
Announcement bar
Sits above the header. Top-bar trust messaging — pick one message, let it carry the moment.
06 · Components
Trust strip (mini)
Sits between H1 and configurator. Addresses "is this real?" before "what's the price?"
07 · Components
Spec bullets
Tight 3-bullet skim list under the lede. Gold checkmarks. For the customer who reads in 2 seconds.
- 13oz outdoor vinyl standard · 18oz heavy + mesh available
- Hemmed edges + grommets every 2 ft, no upcharge
- Any size from 2 ft × 2 ft up
08 · Components
Price anchor + Build CTA
Sits above the fold. Anchors price for scanners; offers a one-click skip to the configurator for buyers ready to act.
09 · Components
Ship-by indicator (the speed pillar)
Live ship-by + pickup-by dates. Computed from today + production days, skipping weekends + shop holidays. Goes on every product page.
10 · Components
Tile picker (Sticker Mule pattern)
Preset option tiles instead of dropdowns when option count is 4–8. Better mobile UX, clearer scan.
Choose Material
11 · Components
Dimensions input + measure help
Number inputs with units. "How to measure" link reveals a popover for customers who don't have a tape measure handy.
Size ↗ How to measure
How to measure
- Width = horizontal across · Height = top to bottom.
- Measure the SPACE you're hanging in, not the banner itself.
- Round UP — we can trim down, can't add.
12 · Components
Toggle buttons
Multi-select chip toggles for finishing options + add-ons. Click to toggle on/off.
Finishing
13 · Components
Live price card + price breaks
Price card = total + per-unit + qualitative trust tag (no cost-basis exposure). Price breaks ladder shows "buy more, save more" with savings labels.
Save more on multiples
14 · Components
CTA row + trust micro-row
Primary CTA names what's next. Trust micro-row sits directly under for last-second reassurance.
15 · Components
Custom request affordance
Escape hatch for "didn't see what I need" customers. Auto-tags with product context. Lives at bottom of configurator, not in the hero.
Tell us about your project
16 · Components
FAQ accordion (teach-in-the-configurator)
Predicts customer questions inline. Gold + indicator rotates 45° on open. Use this pattern wherever customers need education at the decision moment.
What size banner do I actually need?
Most common sizes:
• 2'×4' — small storefront window, sandwich board
• 3'×6' — outdoor sale, event signage
• 4'×8' — trade show backdrop, fence banner (our most popular)
Not sure? Tell us what it's for and we'll size it. No charge to ask.
What's the difference between 13oz and 18oz vinyl?
13oz is our standard outdoor vinyl — durable, weatherproof, good for 1–2 years of outdoor use. Right for 95% of banner jobs.
18oz is heavier, more rigid, better for long-term outdoor runs (3+ years) or banners that get a lot of handling/rehanging. Pro-grade.
What if it doesn't look right?
You'll get a digital proof to approve before we print anything.
If something prints wrong (color shift, smudge, anything off-spec), we'll reprint at no charge. That's the deal.
17 · Patterns
The Midtown Promise
Single named guarantee, plain English. Sits on every product page, on the homepage hero supporting text, and in order confirmation emails. One promise, repeated everywhere.
The Midtown Promise
The products you need. The quality you want. The service you deserve.
Welcome to Midtown, where we do big shop quality with local shop care. We're glad you're here. You're going to love what we make for you.
18 · Patterns
Concierge launcher (floating)
AI concierge entry point. Floating bottom-right. Approved Layer 1 mockup integrates here. Conversational help for browsers — distinct from the "didn't see what you need" form which is for specific asks.
Scroll to the bottom-right of this page → blue pill button "Help me pick" is the launcher.