A Figma source for the Webflow build.
A complete design system file with variables for tokens, variants for states, and auto-layout that matches the Webflow class structure 1:1. Built so design and code don't drift the moment the engineer opens the Designer.
Build order, in the open.
Four milestones, sequenced so each one is unblocked by the one before it. Progress updates land here weekly — not in a private Notion.
Tokens
Color, type, spacing, radius, and shadow variables. Mapped 1:1 to the Webflow build.
- 240+ variables
- Light + dark modes
- Two type ramps
Foundations
Buttons, inputs, badges, cards, dialogs — the smallest building blocks every component depends on.
- 18 of 29 atoms
- Auto-layout 1:1
- Variants for states
Sections
Heroes, navs, content blocks, CTAs, footers — matched to the Webflow component IDs.
- 3 of 24 sections
- Webflow ID parity
- Responsive frames
Templates
Full page compositions for marketing, docs, app, and content sites.
- 6 page types
- Pre-wired flows
- Annotated for hand-off
What ships in v1.
Six commitments the file has to keep before it leaves beta. None of them is negotiable — if one slips, the release slips.
Tokens, not styles
Every color, spacing, and radius value is a Figma variable. Themes swap without breaking layout.
Foundations first
Atoms before molecules. Buttons and inputs ship before any section that depends on them.
Sections that render
Each Figma section matches a real Webflow component ID — no design-only fantasies.
Templates that scale
Page templates that handle empty, loading, error, and overflow states — not just the happy path.
Responsive frames
Three breakpoints per component: mobile (375), tablet (834), desktop (1280). Auto-layout-aware.
Annotated for hand-off
Every component carries dev notes, states, accessibility callouts, and matching code snippets.
Get the file when it's done.
No marketing emails. One message when the file is ready, one when v1 ships, and that's it. Drop your email or follow along on the changelog.
