- No consistent visual language
- A/B tests statistically unreliable — every variant built differently
- 10+ days per campaign cycle
- External teams hired to cover capacity gaps
Case 02 / 06Design systemEngineeringTokens · MCP
EVOLOK — design infrastructure that keeps 12 brands in sync without a human in between.
12 brands. 12 independent squads. No shared system. Every campaign started from zero.
EVOLOK 2.0 · the pipelineWhat exists in Figma must exist in CSS automatically
Source of truthFigmaTokens, components, Green / Yellow / Red
→
Sync layerMCPModel Context Protocol
→
OutputCSS variablesGenerated, never hand-written
→
Production11 themes12 brands + 3 portals
- Period
- 2022 — 2026ongoing
- Client
- Vocento
- Role
- Lead · sole architect of the systemdesign, engineering and documentation
- Scope
- 12 editorial brands + 3 corporate portals
- Brands
- ABC · El Correo · El Diario Vasco · La Rioja · El Diario Montañés · El Comercio · El Norte de Castilla · Las Provincias · La Verdad · Hoy · Ideal · Diario Sur · Sumauto · MujerHoy · Vocento
01 — The problem
A system nobody had built — so everything broke constantly.
Each of the 12 editorial brands ran its own subscription campaigns, with its own CSS files, its own component interpretations, its own way of handling paywalls and banners. There was only informal reuse that generated inconsistencies faster than any team could fix them. Designers worked in Figma. Developers read Figma manually and translated it to CSS by hand. Every token change required a full cycle of versioning, review and correction.
“The system wasn’t fragile by accident. It was fragile by default — because no system existed.”
Business
Product / UX
- A different experience per brand
- Inconsistent paywall, banner and checkout patterns eroded trust
- No design baseline, so no measurable improvement
Engineering
- No shared CSS architecture; duplication
- Uncontrolled dependencies; unmaintainable files
- No Git versioning
- Every developer solving the same problems differently
02 — The baseline
What “before” actually looked like.
Campaign across all brands~10.5 days
Small visual change~1 day
New A/B variant1+ hours
Reusable components · docs · versioningNone
03 — The decision
We could have built a Figma library. That wasn’t the problem.
The real problem was the gap between design and code. A design system maintained through human discipline will always degrade faster than one maintained through automation. The constraint: the system had to be self-maintaining — enforced through architecture.
Ruled out
Figma library + manual CSS
Within 18 months teams would adapt it independently.
Ruled out
Centrally enforced style guide
It fails against the first regional campaign deadline.
Committed to
An automated design-to-code pipeline
Figma as the single source of truth, MCP as the sync layer, CSS generated automatically.
04 — Architecture
One file, eleven themes, zero manual translation.
Automated pipeline
Figma → MCP → CSS variables
Consistency guaranteed by the system itself, not by people remembering.
MVC applied to Figma
ModelResearch and behavioral insightsViewDesign and prototyping, validated before codeControllerTraffic-light assets
GreenYellowRed
Developers receive only Green-state files — removing the biggest source of waste.
Automatic theming11
Themes in production. One class config per container; logo sets, typography and colour encoded in CSS. Adding a brand became configuration — not a rebuild.
Documentation infrastructure
The docs change in the same commit. No drift.
Markdown versioned in Git · cheat sheets with copy-ready HTML · traffic-light system · onboarding guides.
05 — The scale problem
Adoption couldn’t be mandated. It had to be earned.
Adoption
One CSS file. One link tag. One class.
The barrier to adoption was lower than the barrier to building anything custom.
Enforcement
Self-policing by versioning
Git plus naming conventions. Deprecated components flagged red in Figma and in the docs at the same time.
Automation
Remove manual translation
If a token exists in Figma, it exists in CSS.
06 — Results
Numbers that changed how teams operate.
Campaign creation across all brands2 dBefore ~10.5 days. ~85% reduction.
MinutesSmall changes. Before ~1 full day. ~95% reduction.
5 minVariant creation. Before 1+ hours. ~92% reduction.
12+Editorial squads using the system, plus 3 corporate portals.
11Brand themes in production from one file.
07 — Reflection
A design system is a collection of components. Infrastructure keeps them alive.
EVOLOK started as the former and became the latter. The shift happened when I stopped thinking about components and started thinking about the pipeline — the flow from design decision to shipped code, and every place that flow could break.
“Manual translation between design and code is not a process problem — it’s a structural one. The only reliable fix is to remove the manual step.”
What I’d do differently
Implement MCP from day one, not as a later optimization — the manual phase cost months of drift. And validate the sync pipeline with real teams before scaling.
