ARCANE
A modular design system powering multiple products and brands, built to scale across light/dark themes, web, and mobile interfaces.
Research
Arcane is the design system initiative born from the need to support a growing product ecosystem — including platforms like Synaps and Anima — with a scalable, cohesive visual language. The goal was to unify all visual and product efforts (products, websites, and marketing assets) under a consistent design architecture, ensuring speed, clarity, and flexibility across teams and interfaces.
Design
I led the creation of Arcane’s foundational layer, starting with a dedicated foundations file in Figma containing all core design tokens (color, spacing, typography, etc.) as variables. These tokens were structured to support multiple product environments, including different brandings and light/dark themes. I also built a comprehensive component library organized into atoms, molecules, and organisms — each designed in all its interactive states — ensuring design consistency at scale.
Development
To maintain system integrity, we implemented a robust versioning workflow using Figma branches: each new need or component update began with a documented proposal, followed by design critiques and impact tracking. Once validated, components were published and pushed to developers with clear naming conventions and architecture principles aligned with Tailwind CSS. We tracked updates in Linear, and documented structure, usage, and guidelines in Notion.
Concept
Arcane was a deep dive into design system strategy and governance. I learned to balance the flexibility required by diverse products with the discipline needed for scalability and maintainability. The system had to support both web and mobile environments, multiple visual identities, and light/dark variants — all while remaining easy to evolve. It reinforced the importance of modular thinking, naming consistency, and tight cross-team collaboration between design and development.
