↑↓ / ctrl j·k move↵ goesc close
All projects

GEL

Global Experience Language

Status
In progress
Role
Technical lead
Stack
Design TokensNXFigma MCPAgentic Workflows

One system, three representations

GEL is Acquia’s cross-framework design system, built to unify several legacy systems into one platform. I’m its technical lead. The architecture starts with centralized design tokens, then carries them through shared Prime theming and framework-specific wrapper libraries built with PrimeNG, PrimeReact, and NX. Angular and React get native-feeling APIs without splitting the visual language in two.

That separation is deliberate. Tokens define what the system means, the Prime layer turns those decisions into primitives, and each wrapper presents the conventions of its own framework. A future framework can join without becoming the lowest common denominator for the ones already in use.

Figmavariablesexport scriptfull replaceTheme packageread-only artifactsPrimeUI themeTailwind presetFramework packagesgel-angular · gel-reactConsumer product codesame theme + preset, directly
Fig. 1: Tokens flow one way. Blue marks the only write path.
Figmavariablesexport scriptfull replaceTheme packageread-only artifactsPrimeUI themeTailwind presetFramework packagesgel-angular · gel-reactConsumer product codesame theme + preset, directly

Hover or Tab through the diagram for details. Scroll or use the controls to zoom.

Scroll horizontally to inspect the diagram.

Fig. 1: Tokens flow one way. Blue marks the only write path.

Read-only by design

The AI workflow around GEL treats tokens as an API contract. Engineers and agents cannot edit generated token files directly, which keeps Figma variables authoritative even when code is being produced quickly across many repositories.

Absolute rules fail when a release needs an exception, so GEL has a controlled override path. A contributor can temporarily adjust an individual token, while the tooling records the divergence and produces a report telling design exactly which source value should change and why. The escape hatch is visible, reversible, and useful to the team that owns the source of truth.

One-off token editengineer or AI agent✕agent instructions: theme is read-onlygit hook + CI reject the commitFigmavariablesexport script replaces every tokenTheme filesread-only, generated

Scroll horizontally to inspect the diagram.

Fig. 2: Hand edits can't land. The export script is the only write.

The path back to Figma

The Figma migration was agent-driven. Custom plugins handled the first phase, then Figma MCP let agents work directly on the canvas. That workflow converted a PrimeOne v3.1.0 fork that had diverged for a year into a wrapped PrimeOne v4 model. Code Connect now maps wrapped components back to their implementations, tightening the relationship between a design decision and the code that ships it.

Adoption without vigilance

Adoption is roadmapped across seven product surfaces, from Cloud Platform to Acquia AI. The wager underneath the architecture is straightforward. A design system scales when the easiest path follows the system by default. GEL is built to hold that line even when AI agents are writing a growing share of the code.