Design System
Creating and deploying a web-first design system tailored to WCAG with 400+ components
roles
Design Systems
tools
Figma
Claude
team
2 Designers
3 Software Engineers
overview
Design and 0 -> 1 systems thinking
Forkast is a venture capital-backed B2B startup based in the restaurant competition and market analysis industry. Currently, it's used by hundreds of chains, including Michelin-starred locations like Benares and fast food stops, including Red Robin.
As a product design intern at Forkast, I co-led and executed two major initiatives: 1) redesigning the dashboard system used for analysis 2) building a design system from the ground up (shown here).
Before Creating...
How did I get there?
Goal Alignment
Forkast's Dashboard and Quantity-focus
I spoke with Forkast's founding team to understand their working goals to then define constraints for myself before ever touching Figma.
1:. Forkast's platform is and will be data-heavy due to business constraints
_
Large restaurant chains have thousands of restaurants. [Their previous dashboards, below, are blurred for NDA]
Consequently, Forkast's design system would need to be flexible with high information density. I researched industry standards for design systems, as being data heavy did = different conventions for features like padding and font size.
2:. Forkast's scaling rapidly as a business. What does this mean for design?
+
Issue Analysis
Auditing Current Designs
I used an HTML to Figma plugin to pull current components, investigating potential pain points with their current Claude Design-generated system (besides the known uncertainty about consistency).
a.
Breaks in convention: Many components didn't follow standard design conventions, especially for accessibility guidelines.
b.
Molecular-level issues: Most were data-driven and not designed for readability, so the dashboards felt like cognitive overload, rather than actionable insight.
Part of the restructuring of the overall dashboard occurred at this foundational level, in making these molecules easy to consume.
Design System Structure
Design System Structure
Following industry standards, the global library will remain mostly untouched, while the semantic library is pulled into working design documents.
AI and Iteration
Efficiency with Claude
a.
The Context: I was exploring overall library structure + building components at the same time to understand how the two needed to interact for max efficiency.
b.
The Issue: Manually relinking colors to components for tests became a bottleneck: in Figma, turning a collection into a library and pushing it into a separate file = broken reference links.
c.
Explorations: To relink variables with components, I first explored several plugins (which didn't work). Relinking by hand would be too slow for steady experimentation and iteration…
d.
AI: I tested out using Claude to automate the relinking while I iterated through structural shifts.
e.
Result: Claude could infer which variables to use reliably, so I adapted it into my workflow. This in turn freed up time for me to attack other portions of the design system that required more thought + human decision-making.
Reflection
Cohesion + Continuity
Designing for cohesion across vastly different elements was an intriguing challenge, as I typically work with existing design systems.
This system is always evolving— as the team expands and continues to design, I expect to continue iterating! Fixing structural errors and continuing to adapt for new features are our likely next steps, and I'm excited to see how we evolve.
