Tokenizing at scale
Engineering a multi-theme Design System foundation.
Engineering a multi-theme Design System foundation.
Engineering a multi-theme Design System foundation.
|
Self
Context
This case study documents my ongoing exploration into design system engineering. Using the eBay Playbook Design System as a visual and structural reference, I set out to rebuild its code library from scratch, with the goal of understanding and improving the processes behind scalable, multi-theme design systems. Along the way, I’ve identified common inefficiencies in design–engineering workflows and explored innovative, automation-driven solutions—with custom tooling and AI that can support system growth and maintenance.
AI
Product Design
Front-End Development
B2C
AI
Product Design
Front-End Development
B2C
Progress
To date, I’ve successfully established a solid token foundation and applied those tokens to atomic components. I’ve also built out two automation pipelines: one for syncing icons between Figma and code, and another for generating theme-based design tokens using Style Dictionary. More recently, I’ve started integrating AI tools to accelerate foundational component development and continue to explore their potential for more advanced use cases.
Year
2025
Duration
Ongoing
Role
Product Designer
Tools
Figma
|
Style Dictionary
Storybook
|
Cursor AI
✹ Project highlights ✹
Design file
While architecting the code library, I recreated the visual design assets from the Playbook Design System inside Figma, mapped design tokens to Figma Variables. This step was crucial—not only for visual consistency but also to prepare the design foundation for a seamless token translation into code.
Design token architecture
Playbook’s design tokens rely on two layers of abstraction—core tokens and semantic tokens—across two color themes. I replicated this structure using Style Dictionary, scripting an export that outputs four sets of token files, separated by theme and abstraction level. This layered setup improves clarity, allows more flexibility for theming, and makes the system easier to maintain and extend as new values or modes are introduced.
Semantic token
Config
Output
{ "color": { "light": { "background": { "primary": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "secondary": { "value": "{color.core.neutral.200}", "attributes": { "theme": "light" } }, "tertiary": { "value": "{color.core.neutral.300}", "attributes": { "theme": "light" } }, "accent": { "value": "{color.core.blue.500}", "attributes": { "theme": "light" } }, "attention": { "value": "{color.core.red.600}", "attributes": { "theme": "light" } }, "success": { "value": "{color.core.kiwi.600}", "attributes": { "theme": "light" } }, "disabled": { "value": "{color.core.neutral.400}", "attributes": { "theme": "light" } }, "elevated": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "secondaryOnElevated": { "value": "{color.core.neutral.200}", "attributes": { "theme": "light" } }, "onSecondary": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "inverse": { "value": "{color.core.neutral.700}", "attributes": { "theme": "light" } }, "strong": { "value": "{color.core.neutral.800}", "attributes": { "theme": "light" } }, "education": { "value": "{color.core.blue.100}", "attributes": { "theme": "light" } } }, "foreground": { "primary": { "value": "{color.core.neutral.800}", "attributes": { "theme": "light" } }, "secondary": { "value": "{color.core.neutral.600}", "attributes": { "theme": "light" } }, "disabled": { "value": "{color.core.neutral.400}", "attributes": { "theme": "light" } }, "accent": { "value": "{color.core.blue.500}", "attributes": { "theme": "light" } }, "attention": { "value": "{color.core.red.600}", "attributes": { "theme": "light" } }, "success": { "value": "{color.core.kiwi.600}", "attributes": { "theme": "light" } }, "onAccent": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "onAttention": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "onSuccess": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "onInverse": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "onStrong": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "onDisabled": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "link-visited": { "value": "{color.core.pink.600}", "attributes": { "theme": "light" } }, "link-legal": { "value": "{color.core.blue.650}", "attributes": { "theme": "light" } } }, "border": { "strong": { "value": "{color.core.neutral.700}", "attributes": { "theme": "light" } }, "medium": { "value": "{color.core.neutral.500}", "attributes": { "theme": "light" } }, "subtle": { "value": "{color.core.neutral.300}", "attributes": { "theme": "light" } }, "accent": { "value": "{color.core.blue.500}", "attributes": { "theme": "light" } }, "attention": { "value": "{color.core.red.600}", "attributes": { "theme": "light" } }, "success": { "value": "{color.core.kiwi.600}", "attributes": { "theme": "light" } }, "onAccent": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "onSuccess": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "onInverse": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "onDisabled": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "disabled": { "value": "{color.core.neutral.400}", "attributes": { "theme": "light" } } }, "stateLayer": { "hover": { "value": "rgba(0, 0, 0, 0.08)", "attributes": { "theme": "light" } }, "pressed": { "value": "rgba(0, 0, 0, 0.08)", "attributes": { "theme": "light" } }, "selected": { "value": "rgba(0, 0, 0, 0.08)", "attributes": { "theme": "light" } }, "focus": { "value": "rgba(0, 0, 0, 0.04)", "attributes": { "theme": "light" } } }, "scrim": { "background": { "value": "rgba(0, 0, 0, 0.3)", "attributes": { "theme": "light" } } }, "loading": { "fill": { "value": "#ededed", "attributes": { "theme": "light" } }, "fillOnSecondary": { "value": "#e4e4e4", "attributes": { "theme": "light" } } } }, "dark": { "background": { "primary": { "value": "{color.core.neutral.900}", "attributes": { "theme": "dark" } }, "secondary": { "value": "{color.core.neutral.800}", "attributes": { "theme": "dark" } }, "disabled": { "value": "{color.core.neutral.700}", "attributes": { "theme": "dark" } }, "accent": { "value": "{color.core.blue.400}", "attributes": { "theme": "dark" } }, "attention": { "value": "{color.core.red.400}", "attributes": { "theme": "dark" } }, "success": { "value": "{color.core.kiwi.500}", "attributes": { "theme": "dark" } }, "elevated": { "value": "{color.core.neutral.800}", "attributes": { "theme": "dark" } }, "secondaryOnElevated": { "value": "{color.core.neutral.900}", "attributes": { "theme": "dark" } }, "onSecondary": { "value": "{color.core.neutral.900}", "attributes": { "theme": "dark" } }, "inverse": { "value": "{color.core.neutral.300}", "attributes": { "theme": "dark" } }, "strong": { "value": "{color.core.neutral.100}", "attributes": { "theme": "dark" } }, "education": { "value": "{color.core.blue.800}", "attributes": { "theme": "dark" } } }, "foreground": { "primary": { "value": "{color.core.neutral.200}", "attributes": { "theme": "dark" } }, "secondary": { "value": "{color.core.neutral.500}", "attributes": { "theme": "dark" } }, "tertiary": { "value": "{color.core.neutral.600}", "attributes": { "theme": "dark" } }, "accent": { "value": "{color.core.blue.400}", "attributes": { "theme": "dark" } }, "attention": { "value": "{color.core.red.400}", "attributes": { "theme": "dark" } }, "success": { "value": "{color.core.kiwi.400}", "attributes": { "theme": "dark" } }, "onAccent": { "value": "{color.core.neutral.800}", "attributes": { "theme": "dark" } }, "onAttention": { "value": "{color.core.neutral.800}", "attributes": { "theme": "dark" } }, "onSuccess": { "value": "{color.core.neutral.800}", "attributes": { "theme": "dark" } }, "onInverse": { "value": "{color.core.neutral.800}", "attributes": { "theme": "dark" } }, "onStrong": { "value": "{color.core.neutral.800}", "attributes": { "theme": "dark" } }, "onDisabled": { "value": "{color.core.neutral.800}", "attributes": { "theme": "dark" } }, "link-visited": { "value": "{color.core.pink.400}", "attributes": { "theme": "dark" } }, "link-legal": { "value": "{color.core.blue.400}", "attributes": { "theme": "dark" } } }, "border": { "strong": { "value": "{color.core.neutral.100}", "attributes": { "theme": "dark" } }, "medium": { "value": "{color.core.neutral.600}", "attributes": { "theme": "dark" } }, "subtle": { "value": "{color.core.neutral.700}", "attributes": { "theme": "dark" } }, "accent": { "value": "{color.core.blue.400}", "attributes": { "theme": "dark" } }, "attention": { "value": "{color.core.red.400}", "attributes": { "theme": "dark" } }, "success": { "value": "{color.core.kiwi.500}", "attributes": { "theme": "dark" } }, "onAccent": { "value": "{color.core.neutral.800}", "attributes": { "theme": "dark" } }, "onSuccess": { "value": "{color.core.neutral.800}", "attributes": { "theme": "dark" } }, "onInverse": { "value": "{color.core.neutral.800}", "attributes": { "theme": "dark" } }, "onDisabled": { "value": "{color.core.neutral.800}", "attributes": { "theme": "dark" } } }, "stateLayer": { "hover": { "value": "rgba(255, 255, 255, 0.08)", "attributes": { "theme": "dark" } }, "pressed": { "value": "rgba(255, 255, 255, 0.08)", "attributes": { "theme": "dark" } }, "selected": { "value": "rgba({color.core.neutral.100}, 0.08)", "attributes": { "theme": "dark" } }, "focus": { "value": "rgba(255, 255, 255, 0.04)", "attributes": { "theme": "dark" } } }, "scrim": { "background": { "value": "rgba(255, 255, 255, 0.64)", "attributes": { "theme": "dark" } } }, "loading": { "fill": { "value": "#2d2d2d", "attributes": { "theme": "dark" } }, "fillOnSecondary": { "value": "#353535", "attributes": { "theme": "dark" } } } } } }
Semantic token JSON
Semantic token
Config
Output
{ "color": { "light": { "background": { "primary": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "secondary": { "value": "{color.core.neutral.200}", "attributes": { "theme": "light" } }, "tertiary": { "value": "{color.core.neutral.300}", "attributes": { "theme": "light" } }, "accent": { "value": "{color.core.blue.500}", "attributes": { "theme": "light" } }, "attention": { "value": "{color.core.red.600}", "attributes": { "theme": "light" } }, "success": { "value": "{color.core.kiwi.600}", "attributes": { "theme": "light" } }, "disabled": { "value": "{color.core.neutral.400}", "attributes": { "theme": "light" } }, "elevated": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "secondaryOnElevated": { "value": "{color.core.neutral.200}", "attributes": { "theme": "light" } }, "onSecondary": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "inverse": { "value": "{color.core.neutral.700}", "attributes": { "theme": "light" } }, "strong": { "value": "{color.core.neutral.800}", "attributes": { "theme": "light" } }, "education": { "value": "{color.core.blue.100}", "attributes": { "theme": "light" } } }, "foreground": { "primary": { "value": "{color.core.neutral.800}", "attributes": { "theme": "light" } }, "secondary": { "value": "{color.core.neutral.600}", "attributes": { "theme": "light" } }, "disabled": { "value": "{color.core.neutral.400}", "attributes": { "theme": "light" } }, "accent": { "value": "{color.core.blue.500}", "attributes": { "theme": "light" } }, "attention": { "value": "{color.core.red.600}", "attributes": { "theme": "light" } }, "success": { "value": "{color.core.kiwi.600}", "attributes": { "theme": "light" } }, "onAccent": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "onAttention": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "onSuccess": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "onInverse": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "onStrong": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "onDisabled": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "link-visited": { "value": "{color.core.pink.600}", "attributes": { "theme": "light" } }, "link-legal": { "value": "{color.core.blue.650}", "attributes": { "theme": "light" } } }, "border": { "strong": { "value": "{color.core.neutral.700}", "attributes": { "theme": "light" } }, "medium": { "value": "{color.core.neutral.500}", "attributes": { "theme": "light" } }, "subtle": { "value": "{color.core.neutral.300}", "attributes": { "theme": "light" } }, "accent": { "value": "{color.core.blue.500}", "attributes": { "theme": "light" } }, "attention": { "value": "{color.core.red.600}", "attributes": { "theme": "light" } }, "success": { "value": "{color.core.kiwi.600}", "attributes": { "theme": "light" } }, "onAccent": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "onSuccess": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "onInverse": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "onDisabled": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "disabled": { "value": "{color.core.neutral.400}", "attributes": { "theme": "light" } } }, "stateLayer": { "hover": { "value": "rgba(0, 0, 0, 0.08)", "attributes": { "theme": "light" } }, "pressed": { "value": "rgba(0, 0, 0, 0.08)", "attributes": { "theme": "light" } }, "selected": { "value": "rgba(0, 0, 0, 0.08)", "attributes": { "theme": "light" } }, "focus": { "value": "rgba(0, 0, 0, 0.04)", "attributes": { "theme": "light" } } }, "scrim": { "background": { "value": "rgba(0, 0, 0, 0.3)", "attributes": { "theme": "light" } } }, "loading": { "fill": { "value": "#ededed", "attributes": { "theme": "light" } }, "fillOnSecondary": { "value": "#e4e4e4", "attributes": { "theme": "light" } } } }, "dark": { "background": { "primary": { "value": "{color.core.neutral.900}", "attributes": { "theme": "dark" } }, "secondary": { "value": "{color.core.neutral.800}", "attributes": { "theme": "dark" } }, "disabled": { "value": "{color.core.neutral.700}", "attributes": { "theme": "dark" } }, "accent": { "value": "{color.core.blue.400}", "attributes": { "theme": "dark" } }, "attention": { "value": "{color.core.red.400}", "attributes": { "theme": "dark" } }, "success": { "value": "{color.core.kiwi.500}", "attributes": { "theme": "dark" } }, "elevated": { "value": "{color.core.neutral.800}", "attributes": { "theme": "dark" } }, "secondaryOnElevated": { "value": "{color.core.neutral.900}", "attributes": { "theme": "dark" } }, "onSecondary": { "value": "{color.core.neutral.900}", "attributes": { "theme": "dark" } }, "inverse": { "value": "{color.core.neutral.300}", "attributes": { "theme": "dark" } }, "strong": { "value": "{color.core.neutral.100}", "attributes": { "theme": "dark" } }, "education": { "value": "{color.core.blue.800}", "attributes": { "theme": "dark" } } }, "foreground": { "primary": { "value": "{color.core.neutral.200}", "attributes": { "theme": "dark" } }, "secondary": { "value": "{color.core.neutral.500}", "attributes": { "theme": "dark" } }, "tertiary": { "value": "{color.core.neutral.600}", "attributes": { "theme": "dark" } }, "accent": { "value": "{color.core.blue.400}", "attributes": { "theme": "dark" } }, "attention": { "value": "{color.core.red.400}", "attributes": { "theme": "dark" } }, "success": { "value": "{color.core.kiwi.400}", "attributes": { "theme": "dark" } }, "onAccent": { "value": "{color.core.neutral.800}", "attributes": { "theme": "dark" } }, "onAttention": { "value": "{color.core.neutral.800}", "attributes": { "theme": "dark" } }, "onSuccess": { "value": "{color.core.neutral.800}", "attributes": { "theme": "dark" } }, "onInverse": { "value": "{color.core.neutral.800}", "attributes": { "theme": "dark" } }, "onStrong": { "value": "{color.core.neutral.800}", "attributes": { "theme": "dark" } }, "onDisabled": { "value": "{color.core.neutral.800}", "attributes": { "theme": "dark" } }, "link-visited": { "value": "{color.core.pink.400}", "attributes": { "theme": "dark" } }, "link-legal": { "value": "{color.core.blue.400}", "attributes": { "theme": "dark" } } }, "border": { "strong": { "value": "{color.core.neutral.100}", "attributes": { "theme": "dark" } }, "medium": { "value": "{color.core.neutral.600}", "attributes": { "theme": "dark" } }, "subtle": { "value": "{color.core.neutral.700}", "attributes": { "theme": "dark" } }, "accent": { "value": "{color.core.blue.400}", "attributes": { "theme": "dark" } }, "attention": { "value": "{color.core.red.400}", "attributes": { "theme": "dark" } }, "success": { "value": "{color.core.kiwi.500}", "attributes": { "theme": "dark" } }, "onAccent": { "value": "{color.core.neutral.800}", "attributes": { "theme": "dark" } }, "onSuccess": { "value": "{color.core.neutral.800}", "attributes": { "theme": "dark" } }, "onInverse": { "value": "{color.core.neutral.800}", "attributes": { "theme": "dark" } }, "onDisabled": { "value": "{color.core.neutral.800}", "attributes": { "theme": "dark" } } }, "stateLayer": { "hover": { "value": "rgba(255, 255, 255, 0.08)", "attributes": { "theme": "dark" } }, "pressed": { "value": "rgba(255, 255, 255, 0.08)", "attributes": { "theme": "dark" } }, "selected": { "value": "rgba({color.core.neutral.100}, 0.08)", "attributes": { "theme": "dark" } }, "focus": { "value": "rgba(255, 255, 255, 0.04)", "attributes": { "theme": "dark" } } }, "scrim": { "background": { "value": "rgba(255, 255, 255, 0.64)", "attributes": { "theme": "dark" } } }, "loading": { "fill": { "value": "#2d2d2d", "attributes": { "theme": "dark" } }, "fillOnSecondary": { "value": "#353535", "attributes": { "theme": "dark" } } } } } }
Semantic token JSON
Semantic token
Config
Output
{ "color": { "light": { "background": { "primary": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "secondary": { "value": "{color.core.neutral.200}", "attributes": { "theme": "light" } }, "tertiary": { "value": "{color.core.neutral.300}", "attributes": { "theme": "light" } }, "accent": { "value": "{color.core.blue.500}", "attributes": { "theme": "light" } }, "attention": { "value": "{color.core.red.600}", "attributes": { "theme": "light" } }, "success": { "value": "{color.core.kiwi.600}", "attributes": { "theme": "light" } }, "disabled": { "value": "{color.core.neutral.400}", "attributes": { "theme": "light" } }, "elevated": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "secondaryOnElevated": { "value": "{color.core.neutral.200}", "attributes": { "theme": "light" } }, "onSecondary": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "inverse": { "value": "{color.core.neutral.700}", "attributes": { "theme": "light" } }, "strong": { "value": "{color.core.neutral.800}", "attributes": { "theme": "light" } }, "education": { "value": "{color.core.blue.100}", "attributes": { "theme": "light" } } }, "foreground": { "primary": { "value": "{color.core.neutral.800}", "attributes": { "theme": "light" } }, "secondary": { "value": "{color.core.neutral.600}", "attributes": { "theme": "light" } }, "disabled": { "value": "{color.core.neutral.400}", "attributes": { "theme": "light" } }, "accent": { "value": "{color.core.blue.500}", "attributes": { "theme": "light" } }, "attention": { "value": "{color.core.red.600}", "attributes": { "theme": "light" } }, "success": { "value": "{color.core.kiwi.600}", "attributes": { "theme": "light" } }, "onAccent": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "onAttention": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "onSuccess": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "onInverse": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "onStrong": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "onDisabled": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "link-visited": { "value": "{color.core.pink.600}", "attributes": { "theme": "light" } }, "link-legal": { "value": "{color.core.blue.650}", "attributes": { "theme": "light" } } }, "border": { "strong": { "value": "{color.core.neutral.700}", "attributes": { "theme": "light" } }, "medium": { "value": "{color.core.neutral.500}", "attributes": { "theme": "light" } }, "subtle": { "value": "{color.core.neutral.300}", "attributes": { "theme": "light" } }, "accent": { "value": "{color.core.blue.500}", "attributes": { "theme": "light" } }, "attention": { "value": "{color.core.red.600}", "attributes": { "theme": "light" } }, "success": { "value": "{color.core.kiwi.600}", "attributes": { "theme": "light" } }, "onAccent": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "onSuccess": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "onInverse": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "onDisabled": { "value": "{color.core.neutral.100}", "attributes": { "theme": "light" } }, "disabled": { "value": "{color.core.neutral.400}", "attributes": { "theme": "light" } } }, "stateLayer": { "hover": { "value": "rgba(0, 0, 0, 0.08)", "attributes": { "theme": "light" } }, "pressed": { "value": "rgba(0, 0, 0, 0.08)", "attributes": { "theme": "light" } }, "selected": { "value": "rgba(0, 0, 0, 0.08)", "attributes": { "theme": "light" } }, "focus": { "value": "rgba(0, 0, 0, 0.04)", "attributes": { "theme": "light" } } }, "scrim": { "background": { "value": "rgba(0, 0, 0, 0.3)", "attributes": { "theme": "light" } } }, "loading": { "fill": { "value": "#ededed", "attributes": { "theme": "light" } }, "fillOnSecondary": { "value": "#e4e4e4", "attributes": { "theme": "light" } } } }, "dark": { "background": { "primary": { "value": "{color.core.neutral.900}", "attributes": { "theme": "dark" } }, "secondary": { "value": "{color.core.neutral.800}", "attributes": { "theme": "dark" } }, "disabled": { "value": "{color.core.neutral.700}", "attributes": { "theme": "dark" } }, "accent": { "value": "{color.core.blue.400}", "attributes": { "theme": "dark" } }, "attention": { "value": "{color.core.red.400}", "attributes": { "theme": "dark" } }, "success": { "value": "{color.core.kiwi.500}", "attributes": { "theme": "dark" } }, "elevated": { "value": "{color.core.neutral.800}", "attributes": { "theme": "dark" } }, "secondaryOnElevated": { "value": "{color.core.neutral.900}", "attributes": { "theme": "dark" } }, "onSecondary": { "value": "{color.core.neutral.900}", "attributes": { "theme": "dark" } }, "inverse": { "value": "{color.core.neutral.300}", "attributes": { "theme": "dark" } }, "strong": { "value": "{color.core.neutral.100}", "attributes": { "theme": "dark" } }, "education": { "value": "{color.core.blue.800}", "attributes": { "theme": "dark" } } }, "foreground": { "primary": { "value": "{color.core.neutral.200}", "attributes": { "theme": "dark" } }, "secondary": { "value": "{color.core.neutral.500}", "attributes": { "theme": "dark" } }, "tertiary": { "value": "{color.core.neutral.600}", "attributes": { "theme": "dark" } }, "accent": { "value": "{color.core.blue.400}", "attributes": { "theme": "dark" } }, "attention": { "value": "{color.core.red.400}", "attributes": { "theme": "dark" } }, "success": { "value": "{color.core.kiwi.400}", "attributes": { "theme": "dark" } }, "onAccent": { "value": "{color.core.neutral.800}", "attributes": { "theme": "dark" } }, "onAttention": { "value": "{color.core.neutral.800}", "attributes": { "theme": "dark" } }, "onSuccess": { "value": "{color.core.neutral.800}", "attributes": { "theme": "dark" } }, "onInverse": { "value": "{color.core.neutral.800}", "attributes": { "theme": "dark" } }, "onStrong": { "value": "{color.core.neutral.800}", "attributes": { "theme": "dark" } }, "onDisabled": { "value": "{color.core.neutral.800}", "attributes": { "theme": "dark" } }, "link-visited": { "value": "{color.core.pink.400}", "attributes": { "theme": "dark" } }, "link-legal": { "value": "{color.core.blue.400}", "attributes": { "theme": "dark" } } }, "border": { "strong": { "value": "{color.core.neutral.100}", "attributes": { "theme": "dark" } }, "medium": { "value": "{color.core.neutral.600}", "attributes": { "theme": "dark" } }, "subtle": { "value": "{color.core.neutral.700}", "attributes": { "theme": "dark" } }, "accent": { "value": "{color.core.blue.400}", "attributes": { "theme": "dark" } }, "attention": { "value": "{color.core.red.400}", "attributes": { "theme": "dark" } }, "success": { "value": "{color.core.kiwi.500}", "attributes": { "theme": "dark" } }, "onAccent": { "value": "{color.core.neutral.800}", "attributes": { "theme": "dark" } }, "onSuccess": { "value": "{color.core.neutral.800}", "attributes": { "theme": "dark" } }, "onInverse": { "value": "{color.core.neutral.800}", "attributes": { "theme": "dark" } }, "onDisabled": { "value": "{color.core.neutral.800}", "attributes": { "theme": "dark" } } }, "stateLayer": { "hover": { "value": "rgba(255, 255, 255, 0.08)", "attributes": { "theme": "dark" } }, "pressed": { "value": "rgba(255, 255, 255, 0.08)", "attributes": { "theme": "dark" } }, "selected": { "value": "rgba({color.core.neutral.100}, 0.08)", "attributes": { "theme": "dark" } }, "focus": { "value": "rgba(255, 255, 255, 0.04)", "attributes": { "theme": "dark" } } }, "scrim": { "background": { "value": "rgba(255, 255, 255, 0.64)", "attributes": { "theme": "dark" } } }, "loading": { "fill": { "value": "#2d2d2d", "attributes": { "theme": "dark" } }, "fillOnSecondary": { "value": "#353535", "attributes": { "theme": "dark" } } } } } }
Semantic token JSON
Icon automation pipeline
A persistent bottleneck in design system workflows is manually syncing icons from design to code—often involving repetitive copying of SVGs, renaming files, and maintaining consistency across platforms. To solve this, I built an automated pipeline using the Figma REST API. The script cleans up icon names, removes redundant assets, and fetches SVGs directly from a dedicated icon page in Figma into the codebase. With a single command, this process keeps icon libraries in sync between design and engineering, dramatically reducing manual effort, errors, and maintenance overhead.
Boosting build with AI
[Last update 2025.04] Many foundational UI components share structural similarities across systems, yet there’s still no tool that perfectly bridges Figma and code. To speed up this repetitive layer of work, I experimented with Cursor AI and its “Talk to Figma MCP” tool to inspect my design files and generate React component code. This approach helped accelerate component scaffolding, reduce time spent on redundant coding tasks, and served as an early test of how AI can enhance design system development. While I’m currently applying AI at the foundational level, I’m actively exploring its potential for pattern recognition and smarter component generation in future iterations.
🗒️ Final words
As I continue engineering the full Playbook Design System—complete with multi-device support and comprehensive documentation—I’m committed to finding smarter, more efficient ways to manage its growth. My focus is on automating not just creation, but also maintenance, distribution, and adoption. I believe the future of design systems lies in intelligent automation and zero-handoff collaboration. Currently, I’m prototyping a design pattern discovery assistant powered by AI to surface reusable patterns across design files. I’m excited about the possibilities this unlocks—not just for my own workflow, but for the future of systemized design at scale. Stay tuned ☺️