From Chaos to Clarity: Building DAYONE's Design System
Developing a cohesive system architecture and documentation for DAYONE.
Role:
UI Design
Field:
Design System
Duration:
1 month
Challenges
When I started working on the DAYONE Design System, the Figma file was outdated and misaligned with our new Framer website. What began as a cleanup task quickly revealed deeper structural issues: unused components, missing hierarchy, unorganized pages, and no single source of truth. The system was not reliable enough for fast drafting or for building new website pages without switching directly into Framer.
Approach
I rebuilt the system with a clear focus on structure, relevance, and scalability.
Using an atomic design approach, I reorganized pages, removed obsolete components, consolidated styles, and added new elements where needed. Plugins and AI accelerated component creation and cleanup, while real project usage helped identify gaps and refine patterns, especially in combination with Figma’s no-code tools. Throughout the process, I prioritized accessibility, introducing new focus states and aligning tokens, text styles, and layout rules.
Conclusion
The result is DAYONE Design System 3.0 – a clean, scalable, and agency-wide single source of truth.
It offers clear component logic, improved accessibility, and faster workflows for drafting and building website pages. The team now works with a reliable, well-structured file that supports continuous growth.
A key learning for future system work: integrate accessibility considerations from the very beginning.
