Punch Glossary

Principles & methodologies 10 terms

The philosophical core of how Punch makes things. These travel across every discipline.

Anti-hype

Punch's voice principle. We write for clarity, not for marketing exuberance. Words like "leverage," "world-class," "seamless," "robust" are flagged by punch-copy-lint automatically. See: How Punch Works · Principle 07

Big Idea

The single emotional truth a project carries. Not a tagline, not a value prop — a feeling the audience should leave with ("assurance," "earned trust," "control"). Set at end of Phase 0; the anchor every Fusion decision pulls toward. See: How Punch Works · Principle 02

Client-Facing posture

How Punch talks to clients. Calm, expert, opinionated. No "approval" language, no "final" until it's actually final, no "deliverables" or "batches" or "high-value pages." We're orchestrators; clients are partners pointing toward business goals. See: How Punch Works · Client-facing posture

Copy Brief

Punch's canonical voice + word-level reference for every project. Strategist-authored. Covers Big Idea, audience, brand personality, voice characteristics, banned and preferred words, punctuation rules, wording / term preferences, tone-by-context, and CTA strategy by page type. Every page of copy gets written against it; punch-copy-lint enforces the banned-word list automatically. Replaces the older brand-voice.md — same file, expanded scope, new canonical name. Lives at brand/copy-brief.md. See: Playbook · Files humans write by hand

Content-first

Punch's signature sequencing move. Copy gets written and delivered inside a clickable HTML wireframe BEFORE any page is designed. Clients validate the entire site as words before design enters. See: How Punch Works · Principle 08

Fusion

The headline of how Punch makes things. Design and content travel together — never sequenced, never siloed, never subordinated. They enter the work together, get shaped together, and ship together. The best Punch deliverables read and look like one decision, not two stitched together. See: How Punch Works · Principle 01

Pulse-check

Lightweight feedback artifact used at gates and during exploration phases. A few 0–10 sliders on dimensions that matter for that moment, gut-reaction words, optional flag for things needing real conversation. Avoids "approval" framing. See: How Punch Works · The pulse-check

Rich visual layer

The custom imagery, illustrations, photography curation, motion, video, and GIF moments the Lead Designer creates AFTER per-batch QA but BEFORE the client signs off on The Build (Phase 2, between G5 and G6). The creative work the automation frees up the Lead Designer's time for — what elevates pages from competent to distinctive. Without the rich visual layer, The Build is just structurally correct; with it, the site has a voice. See: Playbook step 22

The Build

Punch's client-facing name for the complete designed website hosted as functioning HTML — post-rich-visual-layer, pre-CMS. The artifact the client signs off on at Gate 6: every page, every breakpoint, every interaction working. CMS migration cannot begin until the client signs off on The Build. Designed to forward cleanly inside the client's organization: "Forwarding The Build for marketing's review." Replaces the technical-sounding "complete static site" and "static-site preview" in client-facing language. See: Playbook Gate 6

Values-fit

Punch is open to any project that aligns with the agency's values. Not sector-restricted — though most work has happened in cybersecurity, defense tech, B2B tech, GovCon, and nonprofits, that's where the depth is, not the limit. The filter is values, not industry. When a project conflicts with values, the move is to say so — not to stretch. See: How Punch Works · Principle 06

Roles & departments 22 terms

Five departments at Punch. The owners (Brian and Joe) sit above; everyone else lives in one of these.

ADDepartment head (Strategy / Client Services / Development / Product Management)

Associate Director. Functional head of a department or sub-discipline. Named per area: AD Strategy, AD Client Services, AD Development, AD Product Management.

Art DirectorDepartment head (Design sub-discipline)

Leads the Design sub-discipline within Creative. Senior visual oversight on bigger projects. Often the taste-and-judgment voice the lead designer runs decisions past.

CCOChief Creative Officer

Heads the Creative department. Owns the system — master Figma library, the punch-website plugin, methodologies, gates, cross-project standards. Senior creative voice on the bigger projects. See: How Punch Works · The team

Client ServicesDepartment

Project management, technical delivery, production execution. PMs, TDMs, and Production Artists all live here. The team running day-to-day of any project from kickoff to ship.

CopywriterStrategy department

Sr. Copywriter or Copywriter. The writing half of Strategy. Owns page copy, brand voice in practice, taglines, headlines, body. Copywriters live in Strategy (not Creative) because at Punch, words and strategy are inseparable.

CreativeDepartment

Visual craft across three sub-disciplines: Design, UX/Product, Motion + Video. Headed by the CCO.

Creative StrategistStrategy department

Hybrid role — strategy with strong creative chops. Bridges between Strategy and Creative when projects need someone who can think strategically about visual systems or speak design-fluently about messaging.

CTOChief Technology Officer

Heads the Technical department. Owns technical strategy across client work AND Punch's own products (including Punch CMS).

DesignerCreative department

Sr. Designer, Designer, or Jr. Designer. Visual craft — logos, identity systems, page design, illustration, motion direction, asset production. On showcase pages, the Lead Designer is the one who carries the chosen direction through Phase 1+.

DeveloperTechnical department

Sr. Developer, Developer, or Jr. Developer. Engineering work — branch infrastructure, CMS pilot and migration, third-party integrations, performance. Works in Claude Code. Partners with TDM on every website project.

Lead DesignerCreative department

The single designer accountable for visual quality across a project — from Phase 1 creative theme work in Figma, through showcase page composition, the design audit of amplified pages, and the rich visual layer (custom imagery, motion, video, GIFs) that elevates The Build before client review. On any given project there's one Lead Designer carrying the design decisions; assigned per project from the Designer pool. "Showcase designer" is not a separate role — that work is the Lead Designer's. When parallel work is needed (e.g., three creative theme designs at once), additional designers are pulled in on temporary assignment under the Lead Designer's direction.

OperationsDepartment

People operations and agency marketing. Head of People, Marketing Manager. How Punch runs as a company, not how it ships client work.

PMProject Manager — Client Services

Sr. Project Manager or Project Manager. Owns timeline, budget, gate calendar, Asana board, client relationship at operational level, and the team's protection from chaos. The most cross-cutting role at Punch. See: PM Onboarding

Production ArtistClient Services

Production-level execution. Runs /website-design-amplifier:amplify in Claude Code to expand the standard 80% of pages from the homepage. Does CMS-format polish after Dev migrates. Reports through TDM line. Distinct from Designer — does production execution, not visual exploration.

StrategistStrategy department

Sr. Strategist or Strategist. Owns Big Idea, brief, audience definition, content strategy. On website projects shapes information architecture; on brand projects owns strategic positioning. Senior strategists are often the lead client voice in early-phase conversations.

StrategyDepartment

Big Idea, briefs, audience definition, content strategy, copywriting, brand voice. The verbal half of Fusion. Includes Strategists, Creative Strategists, Copywriters.

TDMTech. Delivery Manager — Client Services

Manages technical delivery of website projects. Coordinates Production Artists, partners with Dev (in Technical), runs per-batch QA (Gate 5), partners with PM on The Build approval (Gate 6), owns Pre-Launch QA (Gate 7) + Post-Launch QA (Gate 9). TDMs live in Client Services, not Technical — their work is client-facing delivery.

TechnicalDepartment

Engineering and product management. Site infrastructure, CMS migration, performance, AND Punch's own products (Punch CMS, internal tools, plugin ecosystem). Headed by the CTO.

UX Design LeadCreative department (Product sub-discipline)

Leads the UX / Product sub-discipline within Creative. User research, IA, prototyping, interaction patterns, design systems for product work.

Video Producer / Video Editor / Motion DesignerCreative department (Motion sub-discipline)

The Motion + Video team within Creative, led by the Director of Interactive Design. Brand films, motion graphics, animated explainers, data visualizations.

Writer

Loose term — usually means Copywriter. Avoid in formal docs; use the specific role name (Copywriter, Strategist) instead.

Process & gates 16 terms

How a Punch project moves from kickoff to launch. Four phases, nine gates.

Brand project

An engagement focused on identity, naming, brand system. Phase 0 includes three creative theme directions. No website work (or website is a separate engagement).

Brand + Website project

Combined engagement. Brand work usually leads; website Phase 0 starts after brand foundation is locked. ~12–16 weeks typical.

Gate

A decision point between phases of work. Stop, verify, sign off in writing, then proceed. Punch has nine gates (G1–G9). Don't push work through a failed gate — fix in place and re-run. See: Punch Project Playbook

Gate 1 — Brief + sitemap

Client signs off on the abbreviated client-portal brief and the sitemap at end of Phase 0. The three Big Ideas pass to design — no verbal approval needed (client picks among them visually at Gate 2). Owner: PM + client.

Gate 2 — Creative theme pick

Client picks one of three creative theme designs. Design team has visualized each Big Idea as a real branded direction (palette, type, hero, illustration approach). The picked direction becomes the project's visual spine. Owner: PM + Lead Designer + client.

Gate 3 — Homepage variation pick

Client picks one of two homepage variations. With the chosen theme fleshed out, design team has built two homepage variations in HTML against real homepage copy — typically differing in hero treatment (interactive vs traditional). The picked hero dictates the rest of the site's styles. Owner: PM + Lead Designer + client.

Gate 4 — Remaining-pages wireframe

Client reads the content-first wireframe of all remaining pages (homepage already exists as designed HTML) and signs off on copy + structure. Once locked, design composition of remaining pages can begin. Owner: PM + Strategist + client.

Gate 5 — Per-batch QA

TDM verifies each batch of work (showcase pages + amplified pages) is brand-consistent, breakpoints solid, copy clean, assets correctly placed. Production Artists self-QA FIRST. Owner: TDM.

Gate 6 — The Build

Client reviews The Build end-to-end (every page, every breakpoint, every interaction) and signs off in writing. CMS migration cannot begin until this gate passes. The CMS pilot in Phase 2 is sandboxed feasibility, not production migration. Owner: PM + TDM + client.

Gate 7 — Pre-launch QA

TDM runs the comprehensive punch-pre-launch-qa orchestrator. Zero BLOCKERS or launch is blocked. Owner: TDM.

Gate 8 — Launch

Site is live, training delivered, retainer or maintenance handoff complete. Owner: PM + TDM + Dev.

Gate 9 — Post-launch (48hr)

Within 48 hours of launch, re-run pre-launch QA against the live production URL. Catches CMS migration regressions, third-party script issues, broken redirects, analytics that aren't firing. Owner: PM + TDM.

Phase 0 — Explore

Discovery, full creative brief (plus the abbreviated client-portal version), three Big Idea / theme directions, sitemap. Lock the spine before anyone commits to execution.

Phase 1 — Foundation

Theme picked from three explored in Figma, homepage picked from two HTML variations, then the content-first wireframe for the remaining pages locked. The foundational pieces every later page composes against.

Phase 2 — Expand

Compose the rest. Brand: collateral, templates, applications. Website: showcase pages composed, standard pages amplified, Lead Designer audits design quality, Lead Designer creates the rich visual layer (custom imagery, illustrations, motion, video, GIFs) that elevates the whole site.

Phase 3 — Ship

Polish, QA, optimize, migrate to CMS, launch, train, verify post-launch. The work moves from preview to production.

Files & folders 12 terms

Every file scaffolded by punch-project-init and the folders they live in. See the Playbook for which are human-authored vs skill-generated.

assets/

Exported images, icons, illustrations, videos. Logo lives at assets/logo.svg by convention. Every asset should be mapped in assets-manifest.yaml.

assets-manifest.yaml

Canonical map of every asset to the page + section where it belongs, plus alt text and source. Read by the amplifier, Cowork, Production Artists. Verified by punch-asset-audit at Gate 7. Catches the wrong-asset-wrong-section failure.

brand/

Brand-defining markdown files: copy-brief.md, theme-notes.md, visual-direction.md.

copy-brief.md (the Copy Brief)

Punch's canonical voice + word-level reference. Strategist-authored, no Claude. Covers Big Idea, audience, brand personality, voice characteristics, banned and preferred words, punctuation rules, wording and term preferences, tone-by-context, CTA strategy by page type, reference quotes. Read by punch-web-copywriter at every copywriting step; banned-word list is enforced automatically by punch-copy-lint. Replaces the older brand-voice.md — same file, expanded scope, new name. See: Playbook · Files humans write by hand

components.html

The design system in code. Real HTML + CSS for each Figma component (nav, button, card, footer, etc.). Lives in sandbox/. Generated by punch-component-export. Don't hand-edit.

content/

Content briefs (one per page) plus sitemap.yaml and assets-manifest.yaml.

decoded-references/

Shared library of decoded Webflow / reference templates, at the Process-folder level (not per-project). Each file is a named-idiom spec produced by punch-webflow-decode with screenshots.

homepage.md

The first content brief. All page sections — hero, intro, feature rows, integration grid, stat strip, etc. — as structured YAML. Copywriter + Strategist own.

sandbox/

The working website in code. Lives inside the client project folder. Contains tokens.css, text-styles.css, components.html, composed page HTML, and wireframe/ sub-folder. Cowork composes pages against this; Dev migrates from this.

sitemap.yaml

Every page on the site — URL, title, page-type, tier (showcase or standard), brief filename. Strategist owns and refines. Read by every other skill as input.

theme-notes.md

Visual direction notes from the chosen creative theme. Palette intent, type personality, illustration approach, motion direction, reference inspiration. Lead Designer + Strategist own.

tokens.css

Design tokens as CSS custom properties — color, type, space, radius, motion. Exported from the Figma fork by punch-token-export. The single source of truth for brand values in the build. Don't hand-edit.

visual-direction.md

Project-specific spec: idioms borrowed from decoded references, palette/surface/typography discipline, mode (light/dark/mixed), logo treatment. Cowork reads this on every compose call. Lead Designer + Strategist own.

wireframe/

The content-first HTML wireframe — one file per remaining page in the sitemap (homepage already exists as designed HTML), plus _wireframe.css. Generated by punch-wireframe. Sent to clients at Gate 4. Don't hand-edit.

Tools & skills 14 terms

The systems that run the work. See the Skill Reference for every individual skill.

Amplifier

Shorthand for /website-design-amplifier:amplify. The Claude Code skill that expands the homepage + sitemap into the standard 80% of pages. Production Artists run it.

Brand Mark

Required frame name in every Punch Figma fork. Contains the client logo as a vector. Read by punch-component-export and exported to assets/logo.svg. Variants (Lockup, Mark, Reversed) exported as separate files.

Claude Code

The terminal-based, repo-focused AI surface used by Production Artists and Developers. Runs the amplifier and conversion plugins. NOT used by designers / strategists / PMs / TDMs — they're on Cowork.

Cowork

The chat-based AI surface used by designers, strategists, copywriters, PMs, TDMs. Composes pages, drafts briefs, generates wireframes, runs QA. Has file tools and Figma MCP. No terminal involved.

Fork (Figma)

A copy of the Punch master Figma library, customized per client. Has a local "Punch Tokens" variable collection with the client's brand values. Subscribes to master for component definitions.

Master library (Figma)

The Punch Master Figma file. Contains canonical component definitions, master tokens (neutral defaults), and conventions. Owned by the CCO. Every fork subscribes to it.

MCP

Model Context Protocol — the integration layer that lets Cowork read and modify Figma files directly. Designers usually don't think about it; they just "open Cowork pointed at the Figma fork."

Orchestrator

A skill that calls other skills. punch-pre-launch-qa is the canonical example — it runs punch-copy-lint + punch-link-check + punch-asset-audit + accessibility-review and aggregates one unified report.

Plugin

Distributable bundle of skills. Punch has one main plugin: punch-website (currently v0.7.1). Installed once in Cowork; available across all projects. Plus parallel Claude Code plugins for Production / Dev.

Punch CMS

Punch's own AI-powered content management system, launching summer 2026. Deployed to Cloudflare edge. Best fit for clients who care about performance and clean editorial workflows over plugin ecosystems.

Rebind

Process of switching a Figma component instance's bound variables from master library values to the consumer fork's local "Punch Tokens" collection. Skill: punch-rebind.

Skill

A scoped capability invoked in Cowork or Claude Code, e.g., punch-wireframe or /website-design-amplifier. Punch-specific skills live in the punch-website plugin.

Sub-skill

A skill called by an orchestrator. punch-copy-lint, punch-link-check, and punch-asset-audit are sub-skills under punch-pre-launch-qa. Each can also run standalone.

Token / design token

An atomic design value (a color, a font size, a spacing increment) stored as a Figma variable and exported as a CSS custom property. Token names follow a path convention: color/brand/primary, type/size/h1, space/4, etc.

Visual & design language 12 terms

Specific vocabulary for talking about visual direction and design idioms.

Composed page

A page in sandbox/ that has been built (vs. just wireframed). Real design, real tokens, real components. Output of Phase 1 (homepage) and Phase 2 (rest).

Decoded reference

A markdown file in decoded-references/ that captures a Webflow or reference template's distinctive visual idioms by name (hairline-rule modular grid, vertical-rule stat strip, pill-shaped eyebrow tags, etc.). Produced by punch-webflow-decode with screenshots.

Direction (Phase 0 website)

Specifically: the two homepage takes presented for client choice at Gate 3 on website projects. Each is a real composed homepage anchored on the Big Idea, with the client picking one to carry forward.

Idiom

A named structural or visual pattern used during composition. "Hairline-rule modular grid," "vertical-rule stat strip," "pill-shaped colored eyebrow tag." Idioms are the unit of transfer from decoded references into compose calls — they're how you tell Cowork what to actually do.

Mode (light / dark / mixed)

The site's overall surface direction. Light mode (white surfaces), dark mode (near-black surfaces), or mixed (per-section). Specified in visual-direction.md; Cowork reads it on every compose call.

Polish phase

The iteration period after a page is composed but before it's signed off. Refining specific idioms, fixing animation race conditions, sharpening light/dark decisions. Skill: punch-page-polish.

Section key

The lowercase-underscore name used for each section in a content brief: hero, intro, feature_split_rows, integration_grid, stat_strip, cta, etc. Maps directly to components in the design system.

Showcase page

The 20% of site pages that earn the budget — homepage, flagship product page, brand-defining case study. Composed in Cowork by designers, not amplified by Production. Gets a real designer's pass.

Standard page

The 80% of site pages that are templated — service pages, list pages, generic content templates. Generated by Production using the amplifier. Designers don't touch these directly.

Text style

A bundle of typography properties (font family, weight, size, line-height, letter-spacing) as a single applyable CSS class. Punch's canonical set — default: .h1, .h2, .h3, .h4, .h5, .h6, .body (16px), .body-sm (14px), .body-lg (22px), .eyebrow (usually same as .h6), .button. Plus a separate set for blog and resource posts (scoped via .blog or .resource): .blog .h1–.blog .h6 and .blog .body (20px). Exported by punch-component-export.

Theme (creative theme)

Specifically: one of three creative theme directions presented during a brand project's Phase 0. Each anchored on a distinct Big Idea, with logo + taglines + palette + type + illustration + photography style. Client picks one to refine.

Wireframe styling

The intentionally minimal visual treatment of the content-first wireframe — system sans typeface, greyscale + muted accent, no imagery, generous spacing, visible section-key labels, banner at top of every page. Defined in _wireframe.css; never styled with the brand.

Punch IP & conventions 9 terms

Distinctive Punch-specific concepts, services, and conventions.

AEOAnswer Engine Optimization

Punch's content optimization service for LLMs (not just Google). Direct-answer-first paragraphs, JSON-LD schema, real buyer FAQs embedded in pages — so LLMs can extract canonical answers about the client. A distinctive Punch IP.

Comment artifact

Text in live copy that's actually a leaked review-tool comment. Patterns like "Is there a way to..." / "Can we..." / "TBD" / "Lorem ipsum". punch-copy-lint scans for these as BLOCKER severity.

Decoded references library

Punch's growing shared library at decoded-references/ — accumulated named-idiom decodes of Webflow templates and other references. Volio, Linear, and more. The agency's vocabulary of "patterns we've used."

Five sectors

Cybersecurity, defense tech, B2B tech, GovCon, nonprofits. Punch's areas of deepest expertise — where most client work has happened and where the agency is known. Not a hard limit; Punch accepts projects in any sector that align with the agency's values.

Hype words

Words on Punch's anti-hype banned list: "leverage," "synergize," "seamless," "robust," "world-class," "best-in-class," "innovative," etc. Master list at punch-copy-lint/assets/hype-words.txt, with per-project additions via copy-brief.md.

Sectors / verticals

Used interchangeably to mean industry areas where Punch has deep experience (cybersecurity, defense tech, B2B tech, GovCon, nonprofits). "Sectors" is more common in client-facing language. Not exclusive — projects outside these sectors are welcome if they align with Punch's values.

Site-llm

Compact site description (usually a markdown summary including voice, big idea, tone notes, blog content) that the amplifier reads as input when expanding standard pages from the homepage.

Two-take pattern

Punch's convention of presenting two homepage design directions to the client at Gate 3, both viable, both anchored on the same Big Idea. Different from the three-themes pattern used in brand-only projects.