Role: UI Design · Frontend Dev · Design System Strategy
Date: 2025
Company: Personal work
Startoken
Design Token Generator & Naming Tool
Startoken
A lightweight web app built to help designers and developers define, manage, and export design tokens with consistency. Startoken streamlines token naming, theme structuring, and code generation, bridging the gap between design systems and implementation.
The Challenge
As a designer with a strong interest in coding, I’ve had the opportunity to contribute to design system initiatives across multiple platforms. A recurring issue I observed: teams often struggled to align on naming design tokens, especially during the early stages of creation and adoption.
Project Goals
- Enable designers and developers to kickstart scalable design tokens.
- Improve understanding and collaboration between teams during design system creation.
- Provide a starter structure that can be adapted to different project sizes and tech stacks.
- Highlight the importance of consistent naming for design system adoption.
Research & Concept
I began by evaluating existing tools, reviewing best practices from mature systems, and analyzing community resources. I realized that most teams needed help at two critical points:
- Starting with a meaningful naming strategy.
- Creating a flexible, reusable token structure.
This insight led to the concept of Startoken: a platform to generate design token templates and learn naming conventions through real use cases.
Early Feedback & Insights
While this project is still in development, I gathered early impressions from peers and reflected on key design challenges. These initial insights helped shape the token structure and UI decisions:
- A few designers expressed interest in easily switching between light and dark modes. This led to creating a scalable, theme-agnostic token system.
- Deciding between semantic and primitive naming sparked internal debate, I chose a semantic structure to improve clarity across teams.
- Feedback highlighted a desire to sync design tokens with tools like Figma. This inspired exploration into token automation strategies.
Key Features
Design Token Template Generator
This feature allows users to generate design token templates quickly, ensuring consistency across projects.
Flexible Token Structure
The token structure is designed to be flexible and reusable, making it easy to adapt to different project needs.
My Libraries
Users can save generated token templates or naming patterns. This library allows revisiting, exporting, or evolving saved structures.
Tech Stack
Designed from scratch in Figma, the project uses React + SCSS for the front-end, powered by a modular internal design system. The back-end is built with Supabase, deployed on Vercel, and supported by GitHub Copilot for productivity boosts.
Early Impact
The MVP has seen promising engagement from peers and early testers. Initial feedback and usage data (via Google Analytics) confirm:
- Increased understanding of token structuring.
- Faster setup for design system contributors.
- Reduction in confusion around token names.
Reflections & What’s Next
This project allowed me to bridge design systems and code, shipping a real product with measurable value. Moving forward, I plan to:
- Continue user testing and expand export formats.
- Integrate with Figma Tokens Plugin and developer tools.
- Explore AI-driven naming suggestions to boost workflows.