# Punch · Website Starter (Master) — Audit

*File: `kCLAc8PpvQMACemBzgmNRU` · 11 pages audited against the v0.7.3 plugin skills, `Figma-Starter-Spec.html`, and the current microsite. Replaces the earlier draft (which incorrectly reported only one page).*

---

## Status — May 2026 cleanup ✅ Complete

> **Phase 1 ✅** — Five legacy pages deleted: `▭ Standard-Tier Wires`, `▭ Showcase · Product / Solution`, `▭ Showcase · Service Page`, `▭ Showcase · About Page`, `🗂 Copy Composition`.
>
> **Phase 2a ✅** — Cover/README rewritten: eyebrow bumped to v0.2, lede + WHAT THIS IS card rewritten, WHAT'S INSIDE list trimmed and reordered.
>
> **Phase 2b ✅** — Handoff Checklist rewritten: 5 sections matching the 4 real handoffs in the current process (Before forking, ① Before Production runs amplifier, ② Before Dev starts CMS pilot, ③ Before every gate, ④ Before Dev migrates to CMS). All `punch-copy-sync` references swapped for `punch-copy-lint`. Item widths fixed so long copy wraps cleanly.
>
> **Phase 2c ✅** — Components page intro typo fixed (REKSINS → RESKINS).
>
> **Phase 3a ✅** — New `🪧 Brand Assets` page created with the canonical 5-variant Brand Marks group (Logo · Full Color, Logo · Reverse, Logo · White, Mark · Full Color, Mark · White), each with placeholder + filename caption. Usage notes frame at bottom. Cover WHAT'S INSIDE updated to include the new page. `punch-component-export` SKILL.md updated to document the new variant set + per-variant filenames.
>
> **Phase 3b ✅** — Line-break auto-layer section added to the bottom of Foundations · Tokens with eyebrow, one-line title, full description, and manual `<br>` override caveat.
>
> **Phase 3c ✅** — Diagnostic confirmed: 73 variables in the `Punch Tokens` collection (18 color, 51 numeric, 4 string), 18 local text styles matching the canonical set (one minor naming fix landed: `Blog Body` → `Blog Body 20` in the skill), Foundations swatches all variable-bound, Components 100% bound on Nav and Footer (the earlier "5 stray static fills" report was a false positive — re-scan confirmed all 5 were empty-fills-array descendants, i.e. invisible wrappers and text frames with no background fill, not unbound static fills).
>
> **Phase 4 ✅** — Pattern Archetypes page deleted. Components page covers every pattern at higher fidelity, eliminating the drift risk. Cover row removed, skill page-convention requirement updated, microsite docs swept.
>
> **Microsite sweep ✅** — `Designer-Onboarding.html` Module 2 updated (page count, list, exercise steps, self-check items reflect the new 5-page structure with Brand Assets). `Figma-Starter-Spec.html` updated (status banner, file row, pages grid, "Removed in v0.2" callout includes all 6 deleted pages). Historical references in `Whats-New-at-Punch.html` and `punch-skills/README.md` intentionally left as-is — they're changelog/retirement notes.
>
> **Final file state:** 5 content pages — `✦ Cover & README`, `◆ Foundations · Tokens`, `🪧 Brand Assets`, `⊟ Layout & Grid`, `🧱 Components`, `✅ Handoff Checklist` — plus the Thumbnail. Down from 11 content pages at the start. Bumped to v0.2 on the Cover eyebrow.

---

## TL;DR

The Figma master is in better shape than my first pass suggested — **Foundations · Tokens, Layout & Grid, Components, and Pattern Archetypes are all built out and broadly aligned with what the v0.7.3 skills expect.** The big problems are downstream of that:

- **The Cover/README is significantly out of date.** It claims things that aren't true (Components is "empty stubs") and omits things that are (extra showcase pages exist, no mention of mega-menu schema, etc.).
- **Five pages describe a workflow that doesn't exist anymore.** Three showcase scaffolds, the Standard-Tier Wires, and the Copy Composition page were all built assuming designers compose pages in Figma. The current process composes in Cowork + OMMA + the Claude Code amplifier — Figma's role is now token repository + exploration only.
- **The Handoff Checklist references a skill (`punch-copy-sync`) that doesn't exist** and is mapped to the old Figma-composition workflow throughout.
- **Pattern Archetypes overlaps significantly with Components.** Most patterns (Hero, Nav, Footer, CTA Strip, FeatureGrid, etc.) exist both as wireframe scaffolds *and* as fully-built components. Either one is the source of truth; right now they drift.

The good news: cleanup is mostly subtractive. Delete the showcase scaffolds and the standard-tier wires, simplify the Copy Composition page into a brief note about the current workflow, rewrite the Handoff Checklist using `Figma-Starter-Spec.html`'s replacement copy, and reconcile Pattern Archetypes ↔ Components. The Tokens and Components pages stay as the load-bearing assets.

---

## Page-by-page inventory

| # | Node ID | Page name | Status | Action |
|---|---|---|---|---|
| 1 | `0:1` | `✦ Cover & README` | **Out of date** — describes old workflow + non-existent state | Rewrite |
| 2 | `1:2` | `◆ Foundations · Tokens` | **Healthy** — 19 colors, full type scale (default + blog), 12 spacing tokens, 5 radii | Keep + add Brand Mark |
| 3 | `1:3` | `⊟ Layout & Grid` | **Healthy** — 1280 / 768 / 375 with correct grid configs | Keep |
| 4 | `1:4` | `⬚ Pattern Archetypes` | **Useful but overlaps with Components** | Consolidate or repurpose |
| 5 | `1:5` | `▭ Showcase · Product / Solution` | **Legacy** — cybersec-specific, composed-in-Figma workflow | Remove |
| 6 | `1:6` | `▭ Showcase · Service Page` | **Legacy** — same | Remove |
| 7 | `64:343` | `▭ Showcase · About Page` | **Legacy** — same | Remove |
| 8 | `1:7` | `▭ Standard-Tier Wires` | **Legacy** — replaced by `/website-design-amplifier:amplify` | Remove |
| 9 | `1:8` | `🗂 Copy Composition` | **Legacy** — describes a workflow superseded by `punch-wireframe` | Simplify or remove |
| 10 | `1:9` | `✅ Handoff Checklist` | **Outdated** — references non-existent skill, old workflow | Rewrite per `Figma-Starter-Spec.html` |
| 11 | `1:10` | `🧱 Components` | **Healthy + impressive** — 45+ components incl. full mega-menu system with JSON schema | Keep, rename, document |

---

## Detailed findings per page

### `✦ Cover & README` (Node 0:1) — out of date

The Cover lists nine sections under "WHAT'S INSIDE." The actual file has eleven pages. Three discrepancies:

- **"Component Stubs · Empty component slots designers fill in per project"** — wildly wrong. The Components page contains 45+ fully-built, token-bound components including a complete mega-menu system with a JSON data contract for Claude Code. Not stubs.
- **Misses the existence of `▭ Showcase · Product / Solution` and `▭ Showcase · About Page`** entirely. They're not in the WHAT'S INSIDE list.
- **The hero copy** ("The scaffold every Punch website project clones. Empty token slots, page-archetype wireframes, and naming conventions that mirror the sandbox spec.") was written when Figma was the composition surface for the whole site. Per `Figma-Starter-Spec.html` (May 2026 status update), Figma is now three things only: token repository, exploration surface, handoff staging.

**Recommended replacement hero copy:**

> *"The token + component scaffold every Punch website project forks from. Punch Tokens variable collection, named text styles, full component library (nav, button, footer, hero variants, mega menu, plus 40+ section patterns), and pattern archetypes for visual direction work. Full-page composition lives outside Figma — in Cowork for showcase pages, in `/website-design-amplifier:amplify` for the standard 80%. Fork this file per client and override the token values."*

### `◆ Foundations · Tokens` (Node 1:2) — healthy

Built out cleanly. Contains:

- **19 color tokens** in a consistent dotted-path schema: `color/brand/{primary,secondary,accent}`, `color/surface/{1,2,3,inverse}`, `color/text/{strong,muted,dim,inverse,accent}`, `color/border/{subtle,strong,accent}`, `color/status/{success,warning,error}`. Each shown as a swatch with hex value.
- **Full type scale** for default pages: H1 (56/Bold), H2 (40/Bold), H3 (28/SemiBold), H4 (22/SemiBold), H5 (18/SemiBold), H6 (14/SemiBold), Body 22/16/14, Eyebrow (12/SemiBold), Button (14/SemiBold).
- **Blog/resource type scale** scoped via `.blog` or `.resource` ancestor: Blog H1–H6 + Blog Body 20.
- **12 spacing tokens** on a 4pt scale (`space/1` through `space/12`, 4px through 160px).
- **5 radius tokens** (sm/md/lg/xl/full).

Maps cleanly to what `punch-token-export` expects. Two things to verify and add:

1. **Confirm the Punch Tokens variable collection actually has bindings.** The swatches and meta labels are present visually, but I couldn't introspect from the MCP whether each is bound to a real Figma variable in the `Punch Tokens` collection. If they're not bound (just static labels), `punch-token-export` will fail.
2. **No Brand Mark frame visible on this page.** `punch-component-export` requires a frame named `Brand Mark` (or `Logo`) with a vector logo, which it exports as `assets/logo.svg`. Either it lives on a different page I didn't see, or it needs to be added. The Foundations page is the right home for it.
3. **No mention of the line-break auto-layer.** Worth a short note in the Type section so designers know `text-wrap: balance` on h1–h4 travels into composition automatically and they don't fight it with manual `<br>` tags.

### `⊟ Layout & Grid` (Node 1:3) — healthy

Three breakpoints with grid configs:
- Desktop: 1280px · 12 cols · container 1120px · gutter 24px
- Tablet: 768px · 8 cols · container 720px · gutter 20px
- Mobile: 375px · 4 cols · container 327px · gutter 16px

Matches the breakpoints called out in `Figma-Starter-Spec.html` and the Punch QA gate spec. Nothing to change.

### `⬚ Pattern Archetypes` (Node 1:4) — useful but overlaps with Components

Contains wireframe-level scaffolds for: Hero (centered/split/oversize), Intro Statement, Feature Grid (3-up), Bento Grid, Stat Strip, Quote/Testimonial, Gallery, CTA Strip, Nav, Footer.

**The problem:** every one of these patterns also exists as a fully-built, token-styled component on the Components page (1:10). So we have two sources of truth for "what a hero is," "what a CTA strip is," etc.

**The decision to make:** is Pattern Archetypes a wireframing surface (low-fi, scaffold-level, for thinking through page structure) or is it a duplicate of Components? If it's a thinking surface, the labels should make that role explicit ("WIREFRAME · for sitemap/IA work") and the patterns should stay deliberately under-designed so they don't compete with Components. If it's a duplicate, it should be removed.

My recommendation: **rename to "Pattern Wireframes" and add a header banner clarifying its role.** Then keep it short — only the patterns that genuinely help with structural/IA thinking (hero variants, intro, CTA strip, basic content arrangement). Remove duplicates of patterns that are fully realized as components (FeatureGrid, BentoGrid, Quote, Gallery — these get used as the built component, not the wireframe stub).

### `▭ Showcase · Product / Solution` (Node 1:5) — legacy, remove

A cybersec-specific product page scaffold composed from Components (nav → hero → intro → features → integrations → compliance → stats → comparison → faq → demo → footer). The eyebrow text on the cover frame reads "SHOWCASE · PRODUCT / SOLUTION · CYBERSEC IA."

Three reasons to remove:

1. **It's sector-specific** (cybersec) in a master that's supposed to be sector-neutral.
2. **Per `Figma-Starter-Spec.html` it's legacy** — showcase pages now compose directly in Cowork against the live design system.
3. **It locks composition decisions** (section order, component choice, page rhythm) at the master level, when those decisions should be per-client.

The component library on page 1:10 already contains every component this page uses. If a designer wants to study section order in Figma before building in code, they can drop components into a new frame in a per-client fork — they don't need a pre-composed master scaffold.

### `▭ Showcase · Service Page` (Node 1:6) — legacy, remove

Same shape as Product / Solution: nav → hero → intro → what_we_do → process_or_capabilities → proof → cta → footer, all instances of components from page 1:10. Same legacy reasons. Remove.

### `▭ Showcase · About Page` (Node 64:343) — legacy, remove

Also cybersec-flavored ("SHOWCASE · TIER · ABOUT PAGE" with copy that says "About pages on cybersec marketing sites do real work"). Composed from: nav → hero (Split) → mission → story → metrics → team → values → founder_quote → cta → footer. Same legacy reasons. Remove.

### `▭ Standard-Tier Wires` (Node 1:7) — legacy, remove

Contains wireframes for Contact, Legal (Privacy/Terms), List Index (News/Insights), Demo Request, and Article/Insight Detail. Per `Figma-Starter-Spec.html`:

> *"Standard-tier pages are now generated by `/website-design-amplifier:amplify` from the homepage + sitemap. The amplifier writes the static HTML/CSS for these pages directly — no Figma wires required. Production runs the amplifier in Phase 2; designers don't touch the standard 80%."*

These wires now have no role in the current process. Remove.

### `🗂 Copy Composition` (Node 1:8) — legacy, simplify or remove

Describes a three-step workflow:
1. Designer skeletons the page in Figma (creates named section frames)
2. Claude composes copy *into those Figma frames*
3. Designer styles visually

This is the **old** workflow. The current process is:
1. Strategist writes content briefs (`punch-content-brief`)
2. `punch-wireframe` generates the entire content wireframe as interactive HTML (newspaper-greyscale, ARIA, light/dark toggle) — no Figma skeleton step
3. After client signs off on the wireframe, designed pages compose via `punch-omma-export` + omma.build (showcase) or `/website-design-amplifier:amplify` (standard)

The "punch-copy-sync" skill mentioned multiple times on this page **doesn't exist in v0.7.3.** Six rules at the bottom of the page (designer-naming conventions, "never rename text layers," etc.) describe the old composition contract.

Two options: (a) **remove the page entirely** since the workflow it documents is gone; or (b) **replace it with a one-paragraph note** that says "Copy composition moved out of Figma. See `punch-wireframe`, `punch-omma-export`, and the `/website-design-amplifier:amplify` Claude Code skill in the Punch microsite." If you keep it, the page name should change — `🗂 Copy Composition` reads like an active workflow surface, which it isn't.

### `✅ Handoff Checklist` (Node 1:9) — outdated, rewrite

Five checklist sections mapped to the old gate structure. Findings:

- **References `punch-copy-sync` in three places** — doesn't exist in v0.7.3. Remove.
- **"Before composing a showcase page (designer skeleton complete)"** — entire section assumes Figma-composition workflow. Removed in current process.
- **"After Claude composes copy (before designer styles)"** — same.
- **"components.html renders all 6–8 core components in every state"** — outdated; current Components page has 45+ components. The number lives in the file, not in a checklist.
- **"sample-page.html renders a complete page using the components"** — `sample-page.html` isn't a current Punch concept. The sandbox structure is documented in `punch-project-init` and `punch-component-export` outputs.

`Figma-Starter-Spec.html` has replacement copy under the "Handoff Checklist update" section that maps to the current six-gate workflow. Use that text wholesale.

### `🧱 Components` (Node 1:10) — healthy + impressive

The Cover calls this "Component Stubs · Empty component slots designers fill in per project." It is not. It contains:

**Primitives:** Button (Primary / Secondary / Ghost variants), Link, Input, Textarea, Tag, Avatar, Eyebrow, Icon, Quote.

**Structural:** Nav, Footer, SectionHeader, FeatureTile, Stat, ProjectCard, ProcessStep, MediaBlock.

**Hero variants:** Centered / Split / Oversize.

**Section patterns:** FeatureGrid, BentoGrid, StatStrip, Gallery, CTAStrip, IntroStatement, ServicesList, FeatureSplitRows, ProcessSteps, StickyLeadCards, StaggeredCards, ContentSplit, ManifestoBlock, EditorialDualImage.

**Specialist sections:** IntegrationGrid, ComplianceRow, ComparisonTable, FAQ, ResourceTeaser, NewsletterSignup, DemoForm, TeamMember, TeamGrid.

**Mega menu:** MenuLink, MenuColumn, MegaMenuFooter, MegaMenuPanel — plus a dedicated *"MegaMenuPanel · Schema (for Claude Code)"* frame that documents the JSON data contract Claude Code reads when implementing the mega menu (`type MenuLink = { label, href, icon? }; type MenuColumn = { title, links[] }; type AccentColumn; type MegaMenuPanel`). This is excellent.

**Three things to change:**

1. **Rename or relabel this page** so it's not called "Component Stubs · Empty" anywhere — the README description is wrong about its content.
2. **Add a note at the top about token binding.** The intro frame says "Every color, padding, and radius is bound to the Punch Tokens collection. When a client fork overrides token values, every instance reskins automatically." If that's true, it's a key thing for designers and Claude to know — make sure it's actually true (audit a few component fills to confirm). If it's aspirational, fix the bindings.
3. **Component coverage matches `punch-component-export`'s required minimums** (Nav, Button set, Footer) and exceeds them significantly. The skill should run cleanly against a fork of this file — no missing-component warnings.

---

## What's missing from the file entirely

- **Brand Mark frame** — `punch-component-export` exports this as `assets/logo.svg`. Should live on the Foundations · Tokens page (or a dedicated Brand Assets page). I didn't see one on Foundations.
- **Confirmation that named text styles exist as Figma local text styles** — the Foundations page shows the type scale visually with labels like `type/size/h1`, but those are text-frame labels, not necessarily defined as Figma's "Local Styles." If text styles are missing from the Local Styles panel, `punch-component-export` will warn or fall back to inline style inference. Need to confirm in Figma.
- **A line-break auto-layer note** — should live somewhere in the Foundations or Components context so designers know the CSS rule travels into composition automatically (don't add manual `<br>` tags as a substitute).

---

## Cross-reference matrix: file vs. current v0.7.3 skills

| Skill | What it expects | File status |
|---|---|---|
| `punch-token-export` | Punch Tokens variable collection bound to swatches | Likely present, needs binding verification |
| `punch-component-export` | Brand Mark frame | ❌ Not visible on any page I audited |
| `punch-component-export` | Named text styles | ❓ Visually present, but verify they're defined as Local Styles |
| `punch-component-export` | Nav, Button (set), Footer minimum | ✅ All present + many more |
| `punch-component-export` | Page conventions (Components, Foundations · Tokens, Pattern Archetypes) | ✅ All three pages exist |
| `punch-omma-export` | Punch Tokens collection | Same as token-export above |
| `punch-rebind` | Variable bindings on components | Same as token-export above |
| `punch-page-polish` | (No Figma dependency) | N/A |
| `punch-wireframe` | (No Figma dependency — runs against content briefs) | N/A |

---

## Recommended cleanup, in order

**Phase 1 — Subtractive (30-45 min of Figma work):**

1. **Delete the four legacy pages** — `▭ Showcase · Product / Solution`, `▭ Showcase · Service Page`, `▭ Showcase · About Page`, `▭ Standard-Tier Wires`. The Components page has every component these scaffolds used; per-client forks compose their own pages in Cowork now.
2. **Remove or simplify `🗂 Copy Composition`** — the workflow it documents doesn't exist. Either delete or replace with a one-paragraph "Copy composition moved out of Figma; see the Punch microsite" pointer.

**Phase 2 — Rewrites (~1 hour):**

3. **Rewrite the Cover/README** — strike the dead sections, add the missing ones, swap the hero copy. The "WHAT'S INSIDE" list should now have ~5 items: Foundations · Tokens, Layout & Grid, Pattern Wireframes, Components, Handoff Checklist.
4. **Rewrite the Handoff Checklist** — use `Figma-Starter-Spec.html`'s replacement copy under the "Handoff Checklist update" section. Remove all references to `punch-copy-sync`. Map to the current six-gate workflow.
5. **Relabel `🧱 Components`** — drop "stubs" wording. The README should describe what's actually there.

**Phase 3 — Additive (~1 hour):**

6. **Add the Brand Mark frame** to Foundations · Tokens (or create a small `🪧 Brand Assets` page if cleaner). Vector logo, plus variants if applicable. Required by `punch-component-export`.
7. **Verify and bind variables** on the Foundations page so swatches actually map to Punch Tokens variables. Same for Components page fills.
8. **Verify named text styles exist as Local Styles** in the file. Add a brief Type Specimen frame somewhere if needed to surface them.
9. **Add a one-line note about the line-break auto-layer** to the Type section.

**Phase 4 — Reconcile (~30 min):**

10. **Reconcile Pattern Archetypes ↔ Components.** Either rename Pattern Archetypes to "Pattern Wireframes" with a clear "for IA thinking only" header (and trim it to just the patterns where the wireframe stub is more useful than the built component), or remove it entirely if Components covers the role.

After all four phases, the file should be: Cover (rewritten) + Foundations · Tokens + Brand Assets + Layout & Grid + Pattern Wireframes (trimmed) + Components + Handoff Checklist (rewritten). Six pages instead of eleven, all aligned with v0.7.3 and the current process.