Building Design Foundations
Circuit Stream · 2023
My Role
Product Designer
Company
Circuit Stream
Date
Phase I (2022) + Phase II (2023-2024)
Overview
Design systems aren’t just for designers. At their core, they’re about creating alignment across teams. For us, it meant building a shared foundation that brought design, marketing, and education into sync. We needed to deliver a consistent experience to our audiences, even as our business evolved quickly.
When I first started shaping the system at Circuit Stream, the company was still finding its product–market fit. Our messaging was shifting, and our visual identity kept trying to keep up. Each team had its own approach, and the result was a lot of work being duplicated and a brand experience that felt fragmented. We weren’t intentionally building inconsistency, but we also didn’t have the tools in place to prevent it considering our pace.
The problem
As our university partnerships started growing, the gaps became harder to ignore. Each new partner brought their own branding. We needed to respect their visual identity while staying true to ours. That meant managing multiple design expressions across different programs and surfaces, at scale.
At the same time, marketing was ramping up. New landing pages, program launches, and campaigns were happening constantly. Without a consistent system, the risk of visual drift increased with every new partnership we onboarded. Layouts were being rebuilt from scratch, type styles were inconsistent, and even small changes required design to step in, and developers to review.
On top of all the inconsistencies, the pace of our partnership growth made it harder to keep up. It took months to launch a new partner site, mostly because everything was being built from scratch. Every font, color, and layout tweak added more manual work. With each new launch, we were stacking more design and engineering debt.
There was no clear system for what could flex and what needed to stay consistent. We were solving the same problems over and over, just with different branding. It was inefficient, and more importantly, unsustainable.
At a Glance
Brand inconsistency across touchpoints
Without a shared system, layouts, typography, and styles were rebuilt from scratch for every new initiative, making it hard to maintain a cohesive experience.
Manual work slowed partner launches
Each university partner required a custom implementation. With no scalable framework, small updates added up, and timelines stretched into months.
Design and engineering debt kept growing
Every one-off solution introduced more cleanup, more handholding, and more surface area for inconsistencies to creep in, making the system harder to maintain over time.
The solution
We tackled the problem in two phases: establishing a new foundation and leveraging Framer to streamline implementation.
Building the Foundations
We started by rebuilding our design system from scratch. The old visual language was too rigid, and trying to evolve it would have introduced more friction than clarity.
We established a new foundation inside Figma, using design tokens to define the building blocks of our system/ Each token served a purpose, and together they created a shared language across brand, product, and partner experiences.
Laying out the groundwork.
Bridging Design, Engineering and Marketing
Once we had a reliable foundation, we focused on creating tighter alignment between design and development. We used Storybook to document components alongside code, making it easier for engineers to implement what was designed and for designers to work with established patterns and guidelines. We kept token structure consistent between Figma and code, which helped both designers and engineers stay aligned as we evolved the system.
Mapping how our design system operates across tools to stay consistent, flexible, and easy to maintain.
Extending the system across new surfaces
As we expanded our program offerings and established new university partnerships, we needed a scalable approach to maintain consistency across brands without fragmenting the design system. The solution was to implement theming variables within Figma, allowing us to create distinct visual expressions for each partner while preserving the underlying structure.
By defining tokens for typography, colors, spacing, and hierarchy, we established a flexible foundation where core components remained consistent. Custom themes could be applied by adjusting variables — whether that meant updating primary/secondary colors, swapping fonts, or introducing branding nuances unique to each partner.
This theming structure provided both consistency and adaptability. Shared components were reused across all partnerships, while branding-specific variables handled customization. As a result, we could scale the system seamlessly without rebuilding components from scratch, ensuring a unified design language across every implementation. This approach also reduced engineering overhead, making it efficient to roll out new partnerships and maintain them over time.
Mapping how our design system operates across tools to stay consistent, flexible, and easy to maintain.
Integrating Framer for Scalability
As we continued to scale our partnerships and refine our design system, it became clear that maintaining consistency across multiple brands required a streamlined, flexible approach. While our foundational tokens established a shared framework for typography, colors, and components—allowing each brand to define its own visual identity—managing these elements through code became increasingly unsustainable.
Every new partnership or brand nuance required engineering intervention, slowing down our ability to iterate and expand with the same team. Adjustments to typography, colors, or layout variations added complexity and introduced engineering debt, making the system harder to maintain and scale.
To eliminate these bottlenecks, we transitioned to Framer as our primary tool for component management and deployment. By consolidating our design system within Framer, we created a visual-first workflow that empowered both designers and non-design teams to make updates independently. This shift allowed us to scale our system seamlessly, maintain consistency across every implementation, and reduce engineering overhead.
Framer’s intuitive interface became our single source of truth, making it easier to roll out new partnerships and ensure every experience felt cohesive, even when accommodating different brand styles. The transition to Framer also allowed us to iterate and introduce nuanced changes without requiring additional engineering resources, making it possible to grow with the same team.
Results
Scalability and Efficiency
Seamlessly onboarded new university partnerships without requiring bespoke engineering intervention.
Enabled non-design teams to create and update pages independently, accelerating partner launched by over 40%.
Reduced AWS costs by 87% by migrating to Framer, optimizing resource usage and infrastructure requirements.
Consistency
Created a unified framework through tokens and components, allowing custom themes to be applied without disrupting the underlying structure.
Maintain design integrity across all partnerships, even when accommodating unique branding styles and requirements.