Re-Architecting the ZOLEO Design System
Overview
When I joined ZOLEO as a freelance product designer, the design system was already functional — but fragile. It had solid foundations built by Samantha Gordashko (now at Tokens Studio) but was struggling to keep pace with product evolution, Figma’s rapid feature changes, and developer needs.
The company’s arbitration and resulting budget freeze meant we lost access to Tokens Studio and couldn’t invest in tooling upgrades. My task wasn’t just to maintain the system — it was to stabilize, modernize, and future-proof it under constraints.
Role: Product Designer, Design Systems & Tokens
Duration: 2+ years (freelance)
Core Skills: Design Token Architecture, Figma Systems, Cross-Functional Collaboration
Impact: 80% faster design-to-dev translation, reduced redundancy, and sustainable token governance
The Situation
By the time I took over, ZOLEO’s design system had become an intricate web of Figma libraries and half-documented tokens. It didn't support the multiple products it needed and had grown brittle:
Token layers (global, alias, component) were no long consistent.
Components didn’t reflect Figma’s newer structure or naming conventions.
Documentation was scattered across Figma, Confluence, and Almanac (a company that since closed its doors).
Developers were working faster than the system could keep up.
The risk was clear: without a scalable, token-driven architecture, the system was becoming a bottleneck.
My Role and Objectives
My role expanded quickly beyond maintenance. I acted as a Design System Architect, defining how tokens, components, and documentation would evolve to support multiple teams and future growth.
Key objectives:
Establish a tokenized foundation linking design and development.
Introduce a clear architecture for surfaces, density, and themes.
Implement a manual fallback system for tokens after subscription loss.
Create documentation accessible to designers, developers, and stakeholders alike.
Rebuild token foundations to link design and dev.
Define a scalable architecture for surfaces and themes.
Implement governance to survive tool loss and org flux.
The Challenge(s)
Token System Rebuild
Using Tokens Studio (before the freeze), I restructured the token set into a semantic hierarchy:
global/ ├── color/ ├── typography/ ├── spacing/ ├── shadow/ ├── border/ aliases/ ├── component/ ├── theme/ ├── state
Each token type was connected through alias mapping, enabling scalable overrides. When the subscription was lost, I built a manual JSON sync process that maintained parity between Figma and code.
Below is a snippet of the raw values that provide the flexibility across Brand and Theme related sets. This snippet is part of the larger Radix UI color scales converted into tokens by myself.
"colors": { "gray": { "light": { "1": { "type": "color", "value": "#fcfcfc" }, "2": { "type": "color", "value": "#f9f9f9" }, "3": { "type": "color", "value": "#f0f0f0" }, "4": { "type": "color", "value": "#e8e8e8" }, "5": { "type": "color", "value": "#e0e0e0" }, "6": { "type": "color", "value": "#d9d9d9" }, "7": { "type": "color", "value": "#cecece" }, "8": { "type": "color", "value": "#bbbbbb" }, "9": { "type": "color", "value": "#8d8d8d" }, "10": { "type": "color", "value": "#838383" }, "11": { "type": "color", "value": "#646464" }, "12": { "type": "color", "value": "#202020" } }, "light-alpha": { "1": { "type": "color", "value": "#00000003" }, "2": { "type": "color", "value": "#00000006" }, "3": { "type": "color", "value": "#0000000f" }, "4": { "type": "color", "value": "#00000017" }, "5": { "type": "color", "value": "#0000001f" }, "6": { "type": "color", "value": "#00000026" }, "7": { "type": "color", "value": "#00000031" }, "8": { "type": "color", "value": "#00000044" }, "9": { "type": "color", "value": "#00000072" }, "10": { "type": "color", "value": "#0000007c" }, "11": { "type": "color", "value": "#0000009b" }, "12": { "type": "color", "value": "#000000df" } }, "dark": { "1": { "type": "color", "value": "#111111" }, "2": { "type": "color", "value": "#191919" }, "3": { "type": "color", "value": "#222222" }, "4": { "type": "color", "value": "#2a2a2a" }, "5": { "type": "color", "value": "#313131" }, "6": { "type": "color", "value": "#3a3a3a" }, "7": { "type": "color", "value": "#484848" }, "8": { "type": "color", "value": "#606060" }, "9": { "type": "color", "value": "#6e6e6e" }, "10": { "type": "color", "value": "#7b7b7b" }, "11": { "type": "color", "value": "#b4b4b4" }, "12": { "type": "color", "value": "#eeeeee" } }, "dark-alpha": { "1": { "type": "color", "value": "#00000000" }, "2": { "type": "color", "value": "#ffffff09" }, "3": { "type": "color", "value": "#ffffff12" }, "4": { "type": "color", "value": "#ffffff1b" }, "5": { "type": "color", "value": "#ffffff22" }, "6": { "type": "color", "value": "#ffffff2c" }, "7": { "type": "color", "value": "#ffffff3b" }, "8": { "type": "color", "value": "#ffffff55" }, "9": { "type": "color", "value": "#ffffff64" }, "10": { "type": "color", "value": "#ffffff72" }, "11": { "type": "color", "value": "#ffffffaf" }, "12": { "type": "color", "value": "#ffffffed" } }
Text Molecules for Consistency
Typography had been one of the system’s weak spots. I rebuilt text molecules that handled:
Body, header, and helper text
Icon alignment and margin management
Theme-linked tokens for font size, line height, and weight
Each molecule used granular tokens, making typography reusable, responsive, and brand-agnostic. It also reduced the cognitive load for designers — fewer decisions, more consistency.
Below is the JSON to show how the typography is built and how the longevity is ensured by utilizing dimensions, size, and typography tokens.
{ "brand-typography": { "heading": { "heading-1": { "value": { "fontFamily": "{brand-font-family.sans}", "fontWeight": "{brand-font-weight.sans.heading}", "lineHeight": "{lineHeight.14}", "fontSize": "{brand-font-size.5xl}", "letterSpacing": "{letterSpacing.sans.heading}", "paragraphSpacing": "{paragraphSpacing.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}", "paragraphIndent": "{textIndent.0}" }, "type": "typography" }, "heading-2": { "value": { "fontFamily": "{brand-font-family.sans}", "fontWeight": "{brand-font-weight.sans.heading}", "fontSize": "{brand-font-size.4xl}", "letterSpacing": "{letterSpacing.sans.heading}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}", "lineHeight": "{lineHeight.11}" }, "type": "typography" }, "heading-3": { "value": { "fontFamily": "{brand-font-family.sans}", "fontWeight": "{brand-font-weight.sans.heading}", "lineHeight": "{lineHeight.9}", "fontSize": "{brand-font-size.3xl}", "letterSpacing": "{letterSpacing.sans.heading}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}" }, "type": "typography" }, "heading-4": { "value": { "fontFamily": "{brand-font-family.sans}", "fontWeight": "{brand-font-weight.sans.heading}", "lineHeight": "{lineHeight.8}", "fontSize": "{brand-font-size.2xl}", "letterSpacing": "{letterSpacing.sans.heading}", "paragraphIndent": "{textIndent.0}", "paragraphSpacing": "{paragraphSpacing.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}" }, "type": "typography" } }, "label": { "large": { "value": { "fontFamily": "{brand-font-family.sans}", "fontWeight": "{brand-font-weight.sans.label}", "fontSize": "{brand-font-size.xl}", "lineHeight": "{lineHeight.7}", "letterSpacing": "{letterSpacing.sans.label}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}" }, "type": "typography" }, "medium": { "value": { "fontFamily": "{brand-font-family.sans}", "fontWeight": "{brand-font-weight.sans.label}", "lineHeight": "{lineHeight.6}", "fontSize": "{brand-font-size.base}", "letterSpacing": "{letterSpacing.sans.label}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}" }, "type": "typography" }, "small": { "value": { "fontFamily": "{brand-font-family.sans}", "fontWeight": "{brand-font-weight.sans.label}", "fontSize": "{brand-font-size.sm}", "letterSpacing": "{letterSpacing.sans.label}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}", "lineHeight": "{lineHeight.5}" }, "type": "typography" }, "xs": { "value": { "fontFamily": "{brand-font-family.sans}", "fontWeight": "{brand-font-weight.sans.label}", "lineHeight": "{lineHeight.4}", "fontSize": "{brand-font-size.xs}", "letterSpacing": "{letterSpacing.sans.label}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}" }, "type": "typography" }, "interactive": { "large": { "value": { "fontFamily": "{brand-font-family.sans}", "fontWeight": "{brand-font-weight.sans.label}", "fontSize": "{brand-font-size.xl}", "lineHeight": "{lineHeight.7}", "letterSpacing": "{letterSpacing.sans.label}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.underline}", "textCase": "{textCase.normal-case}" }, "type": "typography" }, "medium": { "value": { "fontFamily": "{brand-font-family.sans}", "fontWeight": "{brand-font-weight.sans.label}", "lineHeight": "{lineHeight.6}", "fontSize": "{brand-font-size.base}", "letterSpacing": "{letterSpacing.sans.label}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.underline}", "textCase": "{textCase.normal-case}" }, "type": "typography" }, "small": { "value": { "fontFamily": "{brand-font-family.sans}", "fontWeight": "{brand-font-weight.sans.label}", "fontSize": "{brand-font-size.sm}", "letterSpacing": "{letterSpacing.sans.label}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.underline}", "textCase": "{textCase.normal-case}", "lineHeight": "{lineHeight.5}" }, "type": "typography" }, "xs": { "value": { "fontFamily": "{brand-font-family.sans}", "fontWeight": "{brand-font-weight.sans.label}", "lineHeight": "{lineHeight.4}", "fontSize": "{brand-font-size.xs}", "letterSpacing": "{letterSpacing.sans.label}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.underline}", "textCase": "{textCase.normal-case}" }, "type": "typography" } } }, "text": { "large": { "value": { "fontFamily": "{brand-font-family.sans}", "fontWeight": "{brand-font-weight.sans.text}", "fontSize": "{brand-font-size.xl}", "lineHeight": "{lineHeight.7}", "letterSpacing": "{letterSpacing.sans.text}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}" }, "type": "typography" }, "medium": { "value": { "fontFamily": "{brand-font-family.sans}", "fontWeight": "{brand-font-weight.sans.text}", "lineHeight": "{lineHeight.6}", "fontSize": "{brand-font-size.base}", "letterSpacing": "{letterSpacing.sans.text}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}" }, "type": "typography" }, "small": { "value": { "fontFamily": "{brand-font-family.sans}", "fontWeight": "{brand-font-weight.sans.text}", "fontSize": "{brand-font-size.sm}", "letterSpacing": "{letterSpacing.sans.text}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}", "lineHeight": "{lineHeight.5}" }, "type": "typography" }, "xs": { "value": { "fontFamily": "{brand-font-family.sans}", "fontWeight": "{brand-font-weight.sans.text}", "fontSize": "{brand-font-size.xs}", "letterSpacing": "{letterSpacing.sans.text}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}", "lineHeight": "{lineHeight.4}" }, "type": "typography" } }, "mono": { "label": { "large": { "value": { "fontFamily": "{brand-font-family.mono}", "fontWeight": "{brand-font-weight.mono.label}", "fontSize": "{brand-font-size.xl}", "lineHeight": "{lineHeight.7}", "letterSpacing": "{letterSpacing.mono.label}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}" }, "type": "typography" }, "medium": { "value": { "fontFamily": "{brand-font-family.mono}", "fontWeight": "{brand-font-weight.mono.label}", "lineHeight": "{lineHeight.6}", "fontSize": "{brand-font-size.base}", "letterSpacing": "{letterSpacing.mono.label}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}" }, "type": "typography" }, "small": { "value": { "fontFamily": "{brand-font-family.mono}", "fontWeight": "{brand-font-weight.mono.label}", "fontSize": "{brand-font-size.sm}", "letterSpacing": "{letterSpacing.mono.label}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}", "lineHeight": "{lineHeight.5}" }, "type": "typography" }, "xs": { "value": { "fontFamily": "{brand-font-family.mono}", "fontWeight": "{brand-font-weight.mono.label}", "lineHeight": "{lineHeight.4}", "fontSize": "{brand-font-size.xs}", "letterSpacing": "{letterSpacing.mono.label}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}" }, "type": "typography" } }, "text": { "large": { "value": { "fontFamily": "{brand-font-family.mono}", "fontWeight": "{brand-font-weight.mono.text}", "fontSize": "{brand-font-size.xl}", "lineHeight": "{lineHeight.7}", "letterSpacing": "{letterSpacing.mono.text}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}" }, "type": "typography" }, "medium": { "value": { "fontFamily": "{brand-font-family.mono}", "fontWeight": "{brand-font-weight.mono.text}", "lineHeight": "{lineHeight.6}", "fontSize": "{brand-font-size.base}", "letterSpacing": "{letterSpacing.mono.text}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}" }, "type": "typography" }, "small": { "value": { "fontFamily": "{brand-font-family.mono}", "fontWeight": "{brand-font-weight.mono.text}", "fontSize": "{brand-font-size.sm}", "letterSpacing": "{letterSpacing.mono.text}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}", "lineHeight": "{lineHeight.5}" }, "type": "typography" }, "xs": { "value": { "fontFamily": "{brand-font-family.mono}", "fontWeight": "{brand-font-weight.mono.text}", "fontSize": "{brand-font-size.xs}", "letterSpacing": "{letterSpacing.mono.text}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}", "lineHeight": "{lineHeight.4}" }, "type": "typography" } } } }, "textDecoration": { "underline": { "value": "underline", "type": "textDecoration" }, "overline": { "value": "overline", "type": "textDecoration" }, "line-through": { "value": "line-through", "type": "textDecoration" }, "no-underline": { "value": "none", "type": "textDecoration" } }, "textCase": { "uppercase": { "value": "uppercase", "type": "textCase" }, "lowercase": { "value": "lowercase", "type": "textCase" }, "capitalize": { "value": "capitalize", "type": "textCase" }, "normal-case": { "value": "none", "type": "textCase" } }, "lineHeight": { "3": { "value": "0.75rem", "type": "lineHeights", "description": "12px" }, "4": { "value": "1rem", "type": "lineHeights", "description": "16px" }, "5": { "value": "1.25rem", "type": "lineHeights", "description": "20px" }, "6": { "value": "1.5rem", "type": "lineHeights", "description": "24px" }, "7": { "value": "1.75rem", "type": "lineHeights", "description": "28px" }, "8": { "value": "2rem", "type": "lineHeights", "description": "32px" }, "9": { "value": "2.25rem", "type": "lineHeights", "description": "36px" }, "10": { "value": "2.5rem", "type": "lineHeights", "description": "40px" }, "11": { "value": "2.75rem", "type": "lineHeights", "description": "44px" }, "12": { "value": "3rem", "type": "lineHeights", "description": "48px" }, "14": { "value": "3.5rem", "type": "lineHeights", "description": "56px" } }, "letterSpacing": { "tighter": { "value": "-0.05em", "type": "letterSpacing" }, "tight": { "value": "-0.025em", "type": "letterSpacing" }, "normal": { "value": "0em", "type": "letterSpacing" }, "wide": { "value": "0.025em", "type": "letterSpacing" }, "wider": { "value": "0.05em", "type": "letterSpacing" }, "widest": { "value": "0.1em", "type": "letterSpacing" }, "sans": { "heading": { "value": "{letterSpacing.normal}", "type": "letterSpacing" }, "label": { "value": "{letterSpacing.normal}", "type": "letterSpacing" }, "text": { "value": "{letterSpacing.normal}", "type": "letterSpacing" } }, "mono": { "label": { "value": "{letterSpacing.normal}", "type": "letterSpacing" }, "text": { "value": "{letterSpacing.normal}", "type": "letterSpacing" } } }, "paragraphSpacing": { "0": { "value": "0px", "type": "paragraphSpacing" } }, "textIndent": { "0": { "value": "0px", "type": "paragraphSpacing" } } }
{ "brand-typography": { "heading": { "heading-1": { "value": { "fontFamily": "{brand-font-family.sans}", "fontWeight": "{brand-font-weight.sans.heading}", "lineHeight": "{lineHeight.14}", "fontSize": "{brand-font-size.5xl}", "letterSpacing": "{letterSpacing.sans.heading}", "paragraphSpacing": "{paragraphSpacing.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}", "paragraphIndent": "{textIndent.0}" }, "type": "typography" }, "heading-2": { "value": { "fontFamily": "{brand-font-family.sans}", "fontWeight": "{brand-font-weight.sans.heading}", "fontSize": "{brand-font-size.4xl}", "letterSpacing": "{letterSpacing.sans.heading}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}", "lineHeight": "{lineHeight.11}" }, "type": "typography" }, "heading-3": { "value": { "fontFamily": "{brand-font-family.sans}", "fontWeight": "{brand-font-weight.sans.heading}", "lineHeight": "{lineHeight.9}", "fontSize": "{brand-font-size.3xl}", "letterSpacing": "{letterSpacing.sans.heading}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}" }, "type": "typography" }, "heading-4": { "value": { "fontFamily": "{brand-font-family.sans}", "fontWeight": "{brand-font-weight.sans.heading}", "lineHeight": "{lineHeight.8}", "fontSize": "{brand-font-size.2xl}", "letterSpacing": "{letterSpacing.sans.heading}", "paragraphIndent": "{textIndent.0}", "paragraphSpacing": "{paragraphSpacing.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}" }, "type": "typography" } }, "label": { "large": { "value": { "fontFamily": "{brand-font-family.sans}", "fontWeight": "{brand-font-weight.sans.label}", "fontSize": "{brand-font-size.xl}", "lineHeight": "{lineHeight.7}", "letterSpacing": "{letterSpacing.sans.label}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}" }, "type": "typography" }, "medium": { "value": { "fontFamily": "{brand-font-family.sans}", "fontWeight": "{brand-font-weight.sans.label}", "lineHeight": "{lineHeight.6}", "fontSize": "{brand-font-size.base}", "letterSpacing": "{letterSpacing.sans.label}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}" }, "type": "typography" }, "small": { "value": { "fontFamily": "{brand-font-family.sans}", "fontWeight": "{brand-font-weight.sans.label}", "fontSize": "{brand-font-size.sm}", "letterSpacing": "{letterSpacing.sans.label}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}", "lineHeight": "{lineHeight.5}" }, "type": "typography" }, "xs": { "value": { "fontFamily": "{brand-font-family.sans}", "fontWeight": "{brand-font-weight.sans.label}", "lineHeight": "{lineHeight.4}", "fontSize": "{brand-font-size.xs}", "letterSpacing": "{letterSpacing.sans.label}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}" }, "type": "typography" }, "interactive": { "large": { "value": { "fontFamily": "{brand-font-family.sans}", "fontWeight": "{brand-font-weight.sans.label}", "fontSize": "{brand-font-size.xl}", "lineHeight": "{lineHeight.7}", "letterSpacing": "{letterSpacing.sans.label}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.underline}", "textCase": "{textCase.normal-case}" }, "type": "typography" }, "medium": { "value": { "fontFamily": "{brand-font-family.sans}", "fontWeight": "{brand-font-weight.sans.label}", "lineHeight": "{lineHeight.6}", "fontSize": "{brand-font-size.base}", "letterSpacing": "{letterSpacing.sans.label}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.underline}", "textCase": "{textCase.normal-case}" }, "type": "typography" }, "small": { "value": { "fontFamily": "{brand-font-family.sans}", "fontWeight": "{brand-font-weight.sans.label}", "fontSize": "{brand-font-size.sm}", "letterSpacing": "{letterSpacing.sans.label}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.underline}", "textCase": "{textCase.normal-case}", "lineHeight": "{lineHeight.5}" }, "type": "typography" }, "xs": { "value": { "fontFamily": "{brand-font-family.sans}", "fontWeight": "{brand-font-weight.sans.label}", "lineHeight": "{lineHeight.4}", "fontSize": "{brand-font-size.xs}", "letterSpacing": "{letterSpacing.sans.label}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.underline}", "textCase": "{textCase.normal-case}" }, "type": "typography" } } }, "text": { "large": { "value": { "fontFamily": "{brand-font-family.sans}", "fontWeight": "{brand-font-weight.sans.text}", "fontSize": "{brand-font-size.xl}", "lineHeight": "{lineHeight.7}", "letterSpacing": "{letterSpacing.sans.text}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}" }, "type": "typography" }, "medium": { "value": { "fontFamily": "{brand-font-family.sans}", "fontWeight": "{brand-font-weight.sans.text}", "lineHeight": "{lineHeight.6}", "fontSize": "{brand-font-size.base}", "letterSpacing": "{letterSpacing.sans.text}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}" }, "type": "typography" }, "small": { "value": { "fontFamily": "{brand-font-family.sans}", "fontWeight": "{brand-font-weight.sans.text}", "fontSize": "{brand-font-size.sm}", "letterSpacing": "{letterSpacing.sans.text}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}", "lineHeight": "{lineHeight.5}" }, "type": "typography" }, "xs": { "value": { "fontFamily": "{brand-font-family.sans}", "fontWeight": "{brand-font-weight.sans.text}", "fontSize": "{brand-font-size.xs}", "letterSpacing": "{letterSpacing.sans.text}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}", "lineHeight": "{lineHeight.4}" }, "type": "typography" } }, "mono": { "label": { "large": { "value": { "fontFamily": "{brand-font-family.mono}", "fontWeight": "{brand-font-weight.mono.label}", "fontSize": "{brand-font-size.xl}", "lineHeight": "{lineHeight.7}", "letterSpacing": "{letterSpacing.mono.label}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}" }, "type": "typography" }, "medium": { "value": { "fontFamily": "{brand-font-family.mono}", "fontWeight": "{brand-font-weight.mono.label}", "lineHeight": "{lineHeight.6}", "fontSize": "{brand-font-size.base}", "letterSpacing": "{letterSpacing.mono.label}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}" }, "type": "typography" }, "small": { "value": { "fontFamily": "{brand-font-family.mono}", "fontWeight": "{brand-font-weight.mono.label}", "fontSize": "{brand-font-size.sm}", "letterSpacing": "{letterSpacing.mono.label}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}", "lineHeight": "{lineHeight.5}" }, "type": "typography" }, "xs": { "value": { "fontFamily": "{brand-font-family.mono}", "fontWeight": "{brand-font-weight.mono.label}", "lineHeight": "{lineHeight.4}", "fontSize": "{brand-font-size.xs}", "letterSpacing": "{letterSpacing.mono.label}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}" }, "type": "typography" } }, "text": { "large": { "value": { "fontFamily": "{brand-font-family.mono}", "fontWeight": "{brand-font-weight.mono.text}", "fontSize": "{brand-font-size.xl}", "lineHeight": "{lineHeight.7}", "letterSpacing": "{letterSpacing.mono.text}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}" }, "type": "typography" }, "medium": { "value": { "fontFamily": "{brand-font-family.mono}", "fontWeight": "{brand-font-weight.mono.text}", "lineHeight": "{lineHeight.6}", "fontSize": "{brand-font-size.base}", "letterSpacing": "{letterSpacing.mono.text}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}" }, "type": "typography" }, "small": { "value": { "fontFamily": "{brand-font-family.mono}", "fontWeight": "{brand-font-weight.mono.text}", "fontSize": "{brand-font-size.sm}", "letterSpacing": "{letterSpacing.mono.text}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}", "lineHeight": "{lineHeight.5}" }, "type": "typography" }, "xs": { "value": { "fontFamily": "{brand-font-family.mono}", "fontWeight": "{brand-font-weight.mono.text}", "fontSize": "{brand-font-size.xs}", "letterSpacing": "{letterSpacing.mono.text}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{textIndent.0}", "textDecoration": "{textDecoration.no-underline}", "textCase": "{textCase.normal-case}", "lineHeight": "{lineHeight.4}" }, "type": "typography" } } } }, "textDecoration": { "underline": { "value": "underline", "type": "textDecoration" }, "overline": { "value": "overline", "type": "textDecoration" }, "line-through": { "value": "line-through", "type": "textDecoration" }, "no-underline": { "value": "none", "type": "textDecoration" } }, "textCase": { "uppercase": { "value": "uppercase", "type": "textCase" }, "lowercase": { "value": "lowercase", "type": "textCase" }, "capitalize": { "value": "capitalize", "type": "textCase" }, "normal-case": { "value": "none", "type": "textCase" } }, "lineHeight": { "3": { "value": "0.75rem", "type": "lineHeights", "description": "12px" }, "4": { "value": "1rem", "type": "lineHeights", "description": "16px" }, "5": { "value": "1.25rem", "type": "lineHeights", "description": "20px" }, "6": { "value": "1.5rem", "type": "lineHeights", "description": "24px" }, "7": { "value": "1.75rem", "type": "lineHeights", "description": "28px" }, "8": { "value": "2rem", "type": "lineHeights", "description": "32px" }, "9": { "value": "2.25rem", "type": "lineHeights", "description": "36px" }, "10": { "value": "2.5rem", "type": "lineHeights", "description": "40px" }, "11": { "value": "2.75rem", "type": "lineHeights", "description": "44px" }, "12": { "value": "3rem", "type": "lineHeights", "description": "48px" }, "14": { "value": "3.5rem", "type": "lineHeights", "description": "56px" } }, "letterSpacing": { "tighter": { "value": "-0.05em", "type": "letterSpacing" }, "tight": { "value": "-0.025em", "type": "letterSpacing" }, "normal": { "value": "0em", "type": "letterSpacing" }, "wide": { "value": "0.025em", "type": "letterSpacing" }, "wider": { "value": "0.05em", "type": "letterSpacing" }, "widest": { "value": "0.1em", "type": "letterSpacing" }, "sans": { "heading": { "value": "{letterSpacing.normal}", "type": "letterSpacing" }, "label": { "value": "{letterSpacing.normal}", "type": "letterSpacing" }, "text": { "value": "{letterSpacing.normal}", "type": "letterSpacing" } }, "mono": { "label": { "value": "{letterSpacing.normal}", "type": "letterSpacing" }, "text": { "value": "{letterSpacing.normal}", "type": "letterSpacing" } } }, "paragraphSpacing": { "0": { "value": "0px", "type": "paragraphSpacing" } }, "textIndent": { "0": { "value": "0px", "type": "paragraphSpacing" } } }
Theme and Surface model
To simplify environmental design decisions, I created a modular structure for surfaces:
theme/ ├── density/ ├── surface/ ├── base/ ├── elevated/ ├── overlay/ ├── root
Designers now understood visual depth at a glance, and developers could replicate the logic easily in CSS or token themes.
Collaboration with Development
I collaborated closely with the front-end team to ensure parity between tokens and implementation. The design system was integrated into the Prismic headless CMS, allowing developers to pull structured components directly from the library.
Each component:
Referenced token variables for color, spacing, and typography.
Adapted dynamically to content length and device context.
Rendered consistently across responsive breakpoints.
Impact: Developers reduced design handoff translation time by ~80%. For the first time, design updates moved faster than dev implementation.
Governance During Freeze
When arbitration led to cost-cutting, our Tokens Studio license was canceled I implemented a manual governance model to maintain consistency:
JSON-based token registry (versioned)
Manual sync instructions documented for Figma
Asynchronous token update process
Internal presentations to align teams
This kept the design system operational during the entire freeze period — proving that sustainability isn’t about tools, but about structure.
The results
80% faster design-to-dev workflows
Zero visual regressions during freeze
Unified token model across design and code
Documentation accessible to designers, developers, and stakeholders
Design systems are no longer just assets, they are key infrastructures.
My job is to ensure they survive change.
Reflection
This project changed how I see design systems. It taught me that true scalability isn’t about Figma automation — it’s about semantic clarity, governance, and resilience.
The ZOLEO system became a blueprint for how I now approach all design systems: token-first, tool-agnostic, and architecture-driven.