How Punch Works
First doc to read, regardless of role. By the end you'll know what Punch does, who we do it for, how we ship work, who you'll be working with, and where to go next.
The Agency
Who Punch is
Punch is a creative agency founded in 2014 by Brian Tillman and Joe DePalma, based in Arlington, Virginia. 50+ team — designers, writers, developers, strategists, multimedia creatives. 400+ clients shipped. We do brand, websites, UX/UI, video and motion, and campaigns — for a specific set of industries we know deeply.
The short version of what makes us different: we're a creative agency that specializes. Most agencies sell breadth — "we can do anything for anyone." Punch sells depth — we know how cybersecurity buyers think, we know how GovCon procurement reads a pitch, we know what a B2B tech founder needs from a homepage when the product is technical and the audience is skeptical. That sector knowledge shapes the work in ways generalist agencies can't fake.
The longer version: we operate the way a small studio operates inside the body of a mid-sized agency. Tight teams, deliberate decisions, opinionated direction. We don't have a 30-person "creative pool" we throw at random briefs. Projects get assigned to small named teams who own them end-to-end — strategist, designer, writer, PM, plus whoever the work needs (motion, dev, UX, etc.). When the work crosses disciplines, the team picks up those disciplines; the team doesn't fragment.
The five disciplines
If someone asks "what does Punch do?", here's the honest answer. These aren't service tiers — they're craft areas we hire for and ship in.
Brand
Naming, identity, visual systems, brand architecture, brand strategy. New brands, rebrands, refreshes, sub-brands. Our signature brand engagement explores three creative themes — three distinct visual + verbal directions built around the same Big Idea — so the client picks from real, viable alternatives rather than design-by-committee. Each theme gets logo, taglines, palette, typography, illustration approach, and photo style.
Websites
Marketing sites, product sites, content sites, microsites. Cybersec, defense tech, B2B, GovCon, nonprofit — careful audiences, long buying cycles. Our signature: copy is written first and delivered inside a working HTML wireframe the client can click through. Then two homepage design directions get explored in Figma. AI-assisted development, SEO + Answer Engine Optimization baked in, CMS mapping at the end.
UX / UI
Product UX, application UI, interaction design for SaaS and tech products. Information architecture, user research, design systems, prototyping. Often inside a larger website or brand engagement, sometimes standalone for product clients.
Video & Motion
Brand films, product videos, animated explainers, motion graphics, data visualizations. Standalone projects and motion-as-a-layer inside web and campaign work. Live action, animation, mixed. Modern and engaging without theatrics — the same restraint that defines the design work.
Campaigns
Integrated marketing campaigns. Concept, creative, messaging, media. Typically pulls from all four other disciplines — a campaign is rarely just "ads."
Cross-discipline reality
Most projects don't sit cleanly in one discipline. A rebrand drives a new website. A campaign needs a microsite. A product launch needs identity + UI + video + a launch site. The team scales to the work.
Who we work with
Five sectors where Punch has the deepest experience, in rough order of how much of the work they represent today. Not exclusive — Punch is open to any project that aligns with the agency's values. The filter is values-fit, not industry.
| Sector | What we do for them |
|---|---|
| Cybersecurity | The biggest slice. Brand and websites for security vendors — identity platforms, threat detection, network security, governance, application security. Technical audiences, long sales cycles, intense skepticism. Our cyber work is the reason Punch is known. |
| Defense Tech | Companies building for defense and intelligence end-users. Often dual-use tech (commercial + defense), often pre-IPO, often selling to procurement officers who buy careful brands. Adjacent to cyber but with its own audience constraints. |
| B2B Tech | Enterprise SaaS, dev tools, infrastructure, data platforms. Similar buyer profile to cyber — technical, careful, ROI-focused. We build for the buyer who reads docs before they take a demo. |
| GovCon | Government contractors — defense primes and subs, intelligence community vendors, federal civilian contractors. Very specific marketing constraints (no exuberance, no overpromise, frequent compliance review). Branding and sites that signal credibility to procurement audiences. |
| Nonprofits | Mission-driven organizations. Often the work we're most personally invested in. Different success metrics — donations, awareness, advocacy — than the commercial sectors. |
What unites them: complex things to communicate to careful audiences. None of our sectors reward marketing exuberance. The brands we build need to feel earned, credible, and clear. That constraint shapes everything from how we write to how we design.
What we believe
Six principles that travel across every discipline. You'll see these referenced everywhere — in role-specific onboardings, in the workflow docs, in how the work gets reviewed. Internalize these early; the rest of Punch makes more sense once you do.
Design and content fuse
This is the Punch methodology in one line. Design and content are never sequenced and never siloed — they enter the work together, get shaped together, and ship together. Neither is more important; neither is decoration on top of the other. Every Punch deliverable answers the same question: does the design and the words land the same point? If a section reads great but the visual loses the thread, it's not done. If the visual is striking but the copy fights it, it's not done. Both halves are the bar, every time. The best work we ship is fused work.
Big Idea is the anchor
Fusion needs something to fuse toward. Each engagement carries one Big Idea — a single emotional truth the work is trying to land. Not a tagline, not a value prop. A feeling we want the audience to leave with: "Assurance." "Earned trust." "Control." It's set early, and every downstream decision (design and copy in lockstep) asks: does this make the Big Idea land harder?
AI-assisted, never AI-replaced
We use a lot of AI tooling — Cowork, Claude Code, plugins, skills. None of it auto-ships work. Humans direct, review, judge, and approve every step. AI buys back time so we can spend it on the parts that need taste and brand judgment. We don't trust AI; we direct it. The phrase that travels with us in client conversations: "AI-assisted development" — we're explicit about how we work.
Client-facing posture is calm and expert
How we talk to clients matters as much as what we make. We don't use anxious language ("final," "approval," "deliverable," "batches"). We don't position the client as the boss who hands down verdicts. We're the expert orchestrators; clients are partners pointing toward business goals. The Client-Facing Team training documents this in depth.
The system is the leverage
We've built a real system — design tokens, plugins, methodologies, gates, naming contracts. Lean on it. When you find yourself doing something the system already does, you're spending your day on the wrong work. The judgment of when to follow the system vs break it on purpose — that's what we hire for.
Values-fit, not stretch
Punch is open to any project that aligns with the agency's values — not sector-restricted. Cybersecurity, defense tech, B2B tech, GovCon, and nonprofits are where we have the deepest experience, but that's where we know, not where we're limited. When a project conflicts with our values, the move is to say so. Stretching into wrong-fit work is how agencies lose their edge.
Write for clarity, against hype
Our sectors don't reward exuberance. Cyber buyers see through hype. GovCon procurement filters it out. Technical audiences trust restrained, accurate writing more than punchy taglines. We write for what's true, not what's loud. This isn't a style preference; it's how our work earns trust with the audiences our clients sell to.
Content-first, design-second
Most agencies write copy after design — and end up reshaping copy to fit layout decisions made in a vacuum. We do the opposite. Copy gets written first, delivered in a clickable HTML wireframe the client can read end-to-end before a single page is designed. Then design enters with full knowledge of what it's framing. This is one of the most distinctive Punch moves.
How a project runs at Punch
There are two views of any Punch project. The client-facing view is the structure they see in the proposal — neatly numbered sections, clear deliverables, calendar-friendly milestones. The internal view is how we actually run the work — phases, gates, pulse-checks, parallel tracks, and the moments where a decision can blow up or save a week. Both views are valid. You need to know both.
The internal shape: four phases
Every Punch project — brand, website, or both — runs through four internal phases. The phases scale to the discipline. A brand project's Phase 0 is three creative themes; a website project's Phase 0 is exploring homepage direction. The names map differently but the rhythm is the same: explore wide, narrow, build, ship.
Explore
Discovery, full creative brief (and the abbreviated client-portal version), three Big Idea / theme directions, sitemap. Lock the spine before anyone commits to execution.
Foundation
Theme picked from three explored in Figma, homepage picked from two HTML variations, remaining-pages wireframe locked. The foundational pieces every later page composes against.
Expand
Showcase pages composed, standard pages amplified, Lead Designer audits design quality, Lead Designer creates the rich visual layer (custom imagery, motion, video, GIFs) — all of it converging into The Build the client signs off on at Gate 6.
Ship
Polish, QA, optimize, migrate, launch, train. The work moves from preview to production.
What's in each phase, by discipline
| Phase | Brand project | Website project |
|---|---|---|
| 0 · Explore | Discovery — kickoff, stakeholder interviews, competitive landscape. Brief locks the Big Idea. Three creative themes drafted by three designers in parallel: each gets logo, taglines, color, type, illustration style, photo direction. | Discovery + Information Architecture — sitemap, audit, analytics review, content strategy. Two homepage direction options drafted in parallel. Big Idea locks at end of phase. |
| 1 · Foundation | Client picks a theme. Lead designer refines it into a full brand system: final logo + variants, type system, color tokens, illustration kit, photography direction, brand voice guide. | Content-first wireframe: strategist + writer compose the full site copy and deliver it in a clickable HTML wireframe. Homepage design picks a direction and gets built in code. Design system in sandbox/ is real. |
| 2 · Expand | Brand application: templates (decks, docs), marketing collateral (business cards, social profiles, email signatures), brand applications (event materials, internal templates). | Standard pages amplified from the homepage by Production. Showcase pages composed in Cowork by designers. Dev pilots the CMS in parallel. Blog and thought-leadership content migrated. |
| 3 · Ship | Brand guide finalized. Files delivered. Optional brand-launch support (internal rollout, partner kits, launch announcement assets). | SEO + AEO pass, accessibility audit, 301 redirects, CMS migration, user training, launch day support. |
Nine gates to ship
Between and inside the phases, nine gates structure how a project advances. A gate is a moment where we stop, check the work against the brief, and decide: move forward, fix and re-check, or escalate. Gates are internal first — we run them before any client review — and they're our defense against shipping work that we ourselves haven't QA'd. Most gates have automated machinery behind them now (the punch-website plugin's QA skills run the deterministic checks; the gate owner's judgment goes toward triage).
| Gate | What gets checked | Owner | Automated by |
|---|---|---|---|
| Gate 1 · Brief + sitemap | Client signs off on the abbreviated client-portal brief and the sitemap. The three Big Ideas pass to design (no verbal approval needed — client picks among them visually at Gate 2). The project is real and ready to start. | Strategist + PM + client | — |
| Gate 2 · Creative theme pick | Design team has visualized each of the three Big Ideas as a real creative theme (palette, type, hero treatment, illustration approach). Client picks one of three. The picked direction becomes the brand's visual spine for the rest of the project. | Lead Designer + PM + client | — |
| Gate 3 · Homepage variation pick | With the chosen theme fleshed out, design team has built two homepage variations in HTML against real homepage copy. Variations differ in hero treatment (typically interactive vs traditional). Client picks one. The picked hero dictates the rest of the site's styles. | Lead Designer + PM + client | — |
| Gate 4 · Remaining-pages wireframe | Client reads the content-first wireframe of all remaining pages end-to-end. Copy and structure locked before any of these pages get designed. Homepage already exists as designed HTML so the wireframe covers everything except it. | PM + Strategist + client | punch-wireframe generates the wireframe; pulse-check captures client signoff. |
| Gate 5 · Per-batch QA | Each batch of expansion work passes the QA checklist before client sees it. Brand consistent. Copy current (no comment leaks, no double spaces, no placeholder text). Breakpoints solid. No hardcoded values. Links resolve. Assets in the right sections. | TDM (website) or Lead designer (brand). Production Artists run their own self-QA FIRST before handing to TDM. | punch-production-artist-qa (artist self-QA), then punch-copy-lint + punch-link-check + punch-asset-audit (TDM verifies) |
| Gate 6 · The Build | Client signs off on The Build — the complete designed website hosted as functioning HTML, every page, every breakpoint, every interaction working, with the rich visual layer applied. CMS migration cannot begin until this gate passes. This is the firebreak between "we built it" and "we move it into production." Without it, CMS migration consumes time on copy/structure issues the client would have flagged. | PM + TDM + client | Pulse-check feedback artifact for client; internal sign-off captured by PM. |
| Gate 7 · Pre-ship | Comprehensive pre-launch QA across the entire site. Copy clean, links resolve, assets correctly placed per the manifest, accessibility passes WCAG 2.1 AA, SEO + AEO baseline in place, performance budget hit, 301 redirects ready, training prepared. | TDM + Dev | punch-pre-launch-qa orchestrator — runs every check, produces unified report with severity tiers. Blocks launch if any BLOCKERS exist. |
| Gate 8 · Launch | Site is live, CMS migration complete, training delivered, retainer or maintenance handoff complete. The work has shipped. | PM + TDM | — |
| Gate 9 · Post-launch (48hr) | Within 48 hours of launch — verify what's actually live in production. CMS migration often introduces issues that only surface post-CMS (broken redirects, missing assets in CMS-format, performance regressions from third-party scripts, analytics not firing). Re-run the pre-launch-qa orchestrator against the live URL. Catch issues before the client does. | PM + TDM (PM owns the calendar window; TDM owns the technical re-check) | punch-pre-launch-qa re-run against production URLs, plus manual smoke-test of analytics, contact forms, search, and any third-party integrations |
The pulse-check
Inside a project, especially during exploration phases, we use a lightweight feedback artifact called a pulse-check. It's how we collect client (and internal) feedback without resorting to "approval" language or "is this final?" framing.
A pulse-check is small: a few 0–10 sliders on the dimensions that matter for that moment (e.g., "how aligned does this feel with the Big Idea?", "how distinctive does this feel vs your competitors?", "how on-strategy does this read?"), a few gut-reaction words, and an optional flag for things that need a real conversation. It takes 5 minutes to fill out. We send it after every meaningful direction reveal — themes, homepage takes, brand applications — and we read the patterns, not the individual scores.
Why this matters: it surfaces drift early. If three out of four stakeholders are scoring a direction 4/10 on "feels like us," you don't need a meeting to know it's not landing. Pulse-checks catch that before it becomes a Phase 2 rework.
Client-facing posture
How we talk to clients is its own craft. The Client-Facing Team training documents this in depth, but the headline rules:
- No "approval" language. We don't ask clients to "approve." We ask for direction, reaction, alignment. Approval framing makes the client feel like the boss judging the work, which leads to anxious, conservative feedback. We want them as partners pointing toward business goals.
- No "final" language until something is actually final. "Final" is a high-stakes word. We use "current," "live," "in preview," "ready for direction." Save "final" for the version that's actually shipping.
- No "deliverables." Internal word, not a client word. Clients don't want deliverables; they want outcomes. We talk about what the work does for their business, not what gets handed over.
- No "batches." Sounds like factory output. We talk about phases of work, moments of review, or named milestones.
- No "high-value" pages or content. Implies the rest is low-value. Everything we ship is intentional or it doesn't get shipped.
- We're the expert orchestrators. Clients hired us because they don't know how to do this. The posture is calm, confident, opinionated — not subservient. We bring options and recommend; we don't ask clients to design the work.
The team and who does what
Punch is 50+ people organized into five departments. The two owners sit above; everyone else lives in one of these. Knowing which department a role lives in tells you a lot about how Punch thinks about that role.
| Department | What it owns | Headed by |
|---|---|---|
| Strategy | Big Idea, briefs, audience definition, content strategy, copywriting, brand voice. The verbal half of Fusion. Copywriters live here — at Punch, words and strategy are inseparable. | AD, Strategy |
| Client Services | Project management, technical delivery, production execution. The team that runs the day-to-day of a project from kickoff to ship. TDMs and Production Artists live here — client-facing delivery, not back-end engineering. | AD, Client Services |
| Creative | Visual craft across three sub-disciplines: Design, UX/Product, Motion + Video. The visual half of Fusion. | CCO |
| Technical | Engineering work and product management. Site infrastructure, CMS migration, performance, and Punch's own products — including Punch CMS, internal tools, and the plugin ecosystem. | CTO |
| Operations | People operations and agency marketing. How Punch runs as a company, not how it ships client work. | Head of People |
Projects run with small named teams — usually 4–8 people pulled from these departments depending on scope and discipline mix. Below: every role you might work with, grouped by department.
The roles, by department
Strategy
Client Services
/website-design-amplifier:amplify in Claude Code to expand the standard 80% of a site from the homepage. Does CMS-format content polish after Dev migrates. Reports through the TDM line. Production Artists are distinct from Designers — they do production execution, not visual exploration or showcase design work.
You'll work with them: website projects, Phase 2–3.
Creative
Technical
Operations
How roles cluster by project type
Three common project shapes and the teams they tend to draw:
Brand-only project
PM, strategist, copywriter, 3 designers (Phase 0 themes), lead designer (Phase 1+), Art Director. ~4–8 weeks. Brand-heavy team, tighter than a website project. Strategy and Creative are the two main departments in play.
Website-only project
PM, strategist, copywriter, 3 designers (Phase 0 homepage exploration + standard page assets), lead designer, TDM, 1–2 Production Artists, 1–2 Developers. ~8 weeks. Cross-department: Strategy (brief + copy), Creative (designers), Client Services (PM + TDM + Production Artists), Technical (Developers). The TDM is the seam between Client Services and the dev team in Technical.
Brand + Website together
Everyone above, plus a Creative Strategist often added for the cross-discipline thinking. ~12–16 weeks. The brand work usually leads (Phase 0 brand themes → Phase 1 brand foundation → then website Phase 0 starts with the brand foundation in hand). PMs orchestrate the handoff between practices.
Tools and surfaces
You'll use a handful of tools daily. Knowing which is which on day one saves you a week.
The surfaces we use
| Surface | What it's for | Who uses it |
|---|---|---|
| Cowork | Designer-facing chat + file tools + Figma MCP. Where you direct Claude to compose pages, iterate sections, draft content briefs, generate themes. Natural-language interface; no terminal. | Designers, strategists, writers, PMs |
| Claude Code | Terminal-based, repo-focused Claude. Where Production runs the amplifier, Dev does the CMS pilot and migration. Powerful but not designer-friendly. | Production, Dev, TDM |
| Figma | Token source of truth (each client fork has its local Punch Tokens collection). Image and asset production (hero illustrations, photography compositions, icons, custom moments — exported to the project repo for the build to use). Hero and visual exploration in Phase 0. Optional structural staging for showcase work that needs review before code. | Designers (primary), strategists (review) |
| Asana | Project tracking. Phases as sections, tasks for the real milestones (not micro-steps), gates as checkpoints. PMs own the board; everyone reads it. | Everyone |
| Slack | Fast questions, async coordination, channels per project. Big decisions get written down somewhere durable; Slack is for the conversation around them. | Everyone |
| Google Drive | Client-facing documents, brand voice docs, content briefs in early drafts before they move to the repo, proposal artifacts. | Strategists, PMs, account leads |
| Project repo (git) | Where the website actually lives — sandbox/ folder with the design system, content briefs, tokens, exported assets, dev infrastructure. |
Designers (mostly read), Production + Dev (read + write) |
The Punch plugin
Every Punch person installs a single Cowork plugin called punch-website on day one (the CCO handles this). The plugin contains all the Punch-specific Claude skills: brand voice tools, content brief writers, sitemap generators, Figma compose/rebind/token-export, page content writers, copy-sync, and more. Once installed, every Punch client project you work on has every skill automatically available. No per-project copying. No setup ritual.
There's also a parallel set of Claude Code skills used by Production and Dev — /website-design-amplifier, /website-to-static, and others coming. Those live in a separate plugin; you don't install them unless you're on the engineering side.
For the full "I need to do X, which skill?" reference, see the decision tree in Part 5.
Decision tree
One-page working-memory cheat sheet. When you're in the middle of a project and your hands are on the keyboard, this is the doc you Cmd+F. Pin it in the team Slack. Update it when a new skill lands.
sandbox/. See Designer Onboarding Module 4./website-design-amplifier:amplify in Claude Code. Designers don't touch these.punch-token-export → commit tokens.css.assets/ folder → reference from the sandbox HTML.punch-content-brief skill. Strategist + writer collaborate.punch-sitemap skill.punch-web-copywriter skill (page-level draft) or punch-page-content (full page).punch-theme-taglines skill.creative-qa skill.design:accessibility-review skill (WCAG 2.1 AA).design:design-critique skill.design:design-handoff skill./website-to-static:convert in Claude Code.Where to go next
This doc is the orientation. The deeper material is split by role. Start with your role's onboarding; the rest are useful for cross-team understanding when you have time.