Punch Docs · Operating Manual
Library & Modes
How to turn the Punch Master from a scaffold into a real, subscribable design system. One-time setup that makes every future client fork take 30 seconds instead of an hour.
Why this matters
Right now, the master Figma file has 43 token-bound components on its Components page. The sample Cendrix fork has zero components — only tokens. That's because forks today are illustrative, not functionally tied to the master. If a designer started a real client project from a fork, they'd have to copy-paste components manually, and the components' token bindings would still point at the master's collection, not the client's.
Figma's Library + Modes features solve this. Once set up, every client fork inherits every component from the master automatically, and a single mode switch reskins the entire page to the client's brand.
Three concepts
You only need to understand these to follow the rest of the doc.
Library
A Figma file that's been published so other files can use its components and variables. The Punch master becomes a library. Every fork subscribes.
Subscription
A consumer file (a fork) opts into using a library's components and variables. Once subscribed, library components appear in the Assets panel; library variables appear in the Variables panel.
Mode
A column of values inside a Variables collection. One collection can have multiple modes. A page can be set to a mode, and every variable resolves to that mode's value. This is how the same components reskin per client — same variable names, different mode values.
Publishing the master
One-time action by a designer with edit access to the Punch master file. Takes about three minutes.
Open the master in Figma
File: Punch · Website Starter (Master). Make sure you have edit access. Move it into the Punch team space if it's still in someone's drafts — only team-space files can be published as libraries.
Open the Libraries panel
In the file, click the Assets panel on the left, then Libraries (book icon at the top). You'll see the current file listed at the top.
Publish
Click Publish next to the master file's name. Figma will list every component and every variable that will be published. Review the list — should include all 43+ components and the 54-token Punch Tokens collection. Add a brief version note like "v0.1 initial publish" and click Publish.
Confirm in a new file
Open any other Figma file in the Punch team. Open Assets → Libraries. You should see Punch · Website Starter (Master) listed as available. Toggle it on. Done.
Setting up a client fork
Repeats for every new client project. Takes about a minute once you've done it twice.
Create a new file
In the Punch team, create Punch · [Client] · Website. Don't duplicate the master — start fresh.
Subscribe to the library
Open Assets → Libraries → toggle on Punch · Website Starter (Master). All 43 components are now in the Assets panel; the Punch Tokens collection is now in the Variables panel.
Add a client mode
Open the Variables panel. Find Punch Tokens. To the right of Master · Neutral, click + to add a new mode. Name it after the client — e.g., Cendrix. The new mode starts with the same values as Master · Neutral; you'll override them next.
Override token values per the client's brand
In the new mode column, edit each token's value to match the brand guide. color/brand/primary, color/brand/accent, surfaces, text, type sizes, radii, etc. Claude can help — paste the brand guide into chat, ask for token values, paste them in. Or feed the brand guide JSON to Claude and have it write the values into the fork via the Figma MCP.
Set the page's mode
Select a page (or a top-level frame). In the right panel, find the Variable modes selector. Switch from Master · Neutral to the client mode. Every component instance on that page now uses the client's values.
Start building pages
Drag components from Assets onto the canvas. Compose pages from instances. The Phase 2 workflow (designer skeletons section frames → Claude composes copy → designer styles) runs exactly as documented. The difference now is the components are real, token-bound, and they reskin via the mode you set.
What happens to the Cendrix sample fork
The current Cendrix file is a standalone demo — its tokens live in their own collection (Cendrix Tokens) and don't connect to the master. After you publish, Claude can rebuild it on the proper architecture: subscribe to the library, recreate Cendrix's values as a mode inside the subscribed Punch Tokens collection, and add a real demo page composed from library component instances.
From there, Cendrix becomes the working example of what a real client fork looks like, not just what a populated fork visualization looks like. Estimated rebuild time once you've published: about 20 minutes.
Once it's set up
The payoff is biggest on project #2 and beyond.
Per-project setup time drops to ~5 minutes
Subscribe → add mode → fill in tokens → start designing. No copy-paste, no manual font/color hunts, no broken bindings.
Master upgrades cascade automatically
If you improve a component on the master — fix a bug, add a variant, tighten the spacing — every subscribed client file gets a small notification. One click and the client fork updates to the new version. Bug fixes, new patterns, accessibility improvements: they propagate.
Reskinning is one toggle
Client decides to switch their accent from cyan to amber? Change one variable in one mode. Every page in the client fork updates instantly.
Handoff is cleaner
Dev team's tokens.css gets generated from the same token names that drive the Figma file. Code Connect (Figma's component-to-code mapping) becomes possible — Claude Code reads the Figma component name and pulls the right React/Vue component from the codebase.
What stays the same
The 4-phase workflow doesn't change. Designer skeletons + Claude composes + designer styles still applies. The Path A copy composition pattern still applies. The QA gates still apply. The only thing that changes is the underlying plumbing — and only the designer who's setting up a new fork needs to think about it.