15,209 lines of CSS, and no way to restyle it
LINEAR is VYNE Creative’s internal Webflow system (buildwithlinear.com), and VYNE is taking it public this fall. Version 1.0 was one exported stylesheet with no dark mode, corner radii baked into individual classes, and breakpoints that only scaled down. Indexed, it held 1,990 variables and classes, and 1,037 of them were spacing. That’s not a system. That’s sediment.
VYNE wanted 2.0 flexible: dark mode, project-wide corner “levels” from soft to sharp, and an ultrawide breakpoint.
Constraints: everything designed in Figma had to land as working Webflow classes, and the six other people at VYNE had to build pages with it without me in the room. I was the only designer and engineer. AI agents connected to Figma and Webflow handled repetitive population; I designed the system and set the guardrails.
Four decisions that turned it into a system
1. Delete, don’t translate
The first plan mapped every v1 class to a cleaner 2.0 name, but a 1:1 map preserves the mess: 1,990 entries with nicer names. When the same type-scale label showed up twice in one card on the first spec pages, I ran a duplicate audit that cut the system to roughly 400 classes before anything else went in.
2. Components never touch primitives
Primitives hold raw values, semantic tokens carry the themes and are named by role (--radius-card, --color-surface-canvas), and components read only semantic tokens. That’s what turns “soft to sharp” into one switch: five radius modes, light and dark color, and six icon-stroke weights, all project-wide.
3. The Figma layer name is the Webflow class
BEM-style names didn’t fit Webflow’s base-class-plus-combo model, so I switched to a hybrid scheme (card_body, container is-default, u-hidden@tablet) and fed Figma and Webflow from one audit file. That exposed the real gap: about 1,100 class stacks cataloged, only about 110 styles defined in Webflow. A scripted pass created 543 styles with zero failures.
4. Accessibility lives in the component, not a checklist
Webflow components carry their own semantics and ARIA: switches announce as switches, field errors are live regions, and decorative icons are hidden. 69 of 86 semantic color pairings passed WCAG 2.2 AA on the first run. I fixed the 17 failures at the token level, then swept 2,633 hard-coded text colors in Figma, including footer links that were invisible in light mode.
Results: 1,990 classes down to ~400, every color pairing accessible
What shipped: a Figma library and a Webflow clonable on native variables for color, radius, and icon stroke; five breakpoints, including a new Ultrawide at 1600px; and an alpha rollout with a live 20–30 minute build demo, a Getting Started page, and kanban boards for requests and bugs.
| Measure | Before (1.0) | After (2.0) |
|---|---|---|
| Classes and variables | 1,990 | ~400 classes after de-duplication |
| Webflow styles defined | ~110 of ~1,100 stacks | +543 created, 0 failures |
| Theme modes | None | Light/Dark, 5 radius, 6 icon-stroke |
| Button variants | 693 (first build) | 216 |
| Color contrast (WCAG 2.2 AA) | 69 of 86 token pairings | 86 of 86 |
| Project ramp-up | — | Considerably faster (team-reported, not measured) |
What I’d do again (and differently)
- Modernizing isn’t renaming. The win came from deleting duplicates and deciding what each token was for.
- Test one token end to end on day one. Icon-stroke modes looked done in Figma, but hard-coded SVG strokes in Webflow added weight instead of replacing it.
- Next up: components beyond marketing and dashboards, starting with ecommerce and deeper CMS patterns.