Uptake Design System
Product ∙ Strategy ∙ Web
The Uptake Design System is the set of brand, UX, and technical standards behind every Uptake application — a scalable library of reusable components and patterns built to cut technical debt across product teams. I owned the system end to end: setting the design principles, building the internal documentation site with input from product, dev, and design, and leading the workshops that shaped the company's design vision and mission along the way.
Designed at Uptake
Design Principles
Before building anything, we needed to align as a team — a mostly new group of designers who hadn't worked together yet. I ran a workshop built around one question: "what band are we like?" It sounds silly, but breaking down our sound, our influences, our role on the bill gave everyone an easy way in to talk about what we actually valued and where we each fit — and a few genuine friendships came out of it along the way.
We clustered the answers with our content strategy team and distilled them into six design principles that became our shared compass for every decision after that.
Images from the Abstract Workshop for Design Principles
Uptake UI inconsistencies across products.
Stakeholder Support
To build the case for a design system, we ran a design audit across every product — and found real inconsistency: mismatched colors, font sizes, button shapes and behavior from team to team. That gap made the pitch to stakeholders straightforward: a shared system would free designers to solve user problems instead of reinventing basic components, saving time and cutting inconsistency at the source.
Design System Education
With buy-in secured, I ran company-wide presentations plus one-on-one interviews to understand what different teams actually needed — then followed with hands-on workshops. One session brought together product owners, developers, and designers across disciplines to prioritize which components mattered most to their work, which shaped what we built first.
Goals & Benefits of a Design System
Design System Parts Worksheet
Design System Team Model and Roles
With priorities set and a tight timeline from stakeholders, we needed a team model that could move fast. We started centralized — one team owning the design language and components across every product, unbiased by any single team's priorities — with a plan to shift federated as the system matured. Contributor commitment ranged from 25% to 100% depending on role, which let designers bring insights back from their home products even while centralized.
Team Model: Solitary
Team Model: Centralized
Team Model: Federated
Design System Team & Commitments
Design System Process
The workflow runs five stages: discovery, design, build, documentation, and publication. Discovery decides if a feature is worth pursuing. Design finalizes variations and states at high fidelity. Build codifies it in HTML, CSS, and JavaScript. Documentation communicates how to use what's been built, then it publishes. It reads sequential, but in practice design, build, and documentation often run in parallel.
Documentation for Buttons
Button Visual Design
Interactive Wireframe for Grid Testing
Grid Visual Design
KPI Component Matrix Visual Design
KPI Benchmark Visual Design
KPI Sparklines Visual Design
Sharing the Design System
We built a documentation site covering every element, component, pattern, and template — with code available through Vue, Angular, and React libraries, so developers could pull reusable parts directly and cut technical debt.
Design System Documentation Site Map
Design System Documentation Site Wireframe
The homepage of the design system site showcases the key components and the team's design philosophy, articulated through design principles.
The Uptake Design System employs a range of font sizes for display, headings, and text, utilizing four font weights—thin, light, regular, and bold—based on their respective usage.
Uptake's color palette has been carefully selected to accommodate two themes—light and dark—while also adhering to WCAG Level AA compliance standards.
The Uptake Design System allows for seamless interchangeability between light and dark themes, enabling users to effortlessly switch and observe how components function across both themes.
The Uptake Design System incorporates four types of buttons—Primary, Secondary, Neutral, and Flat—each encompassing four variants: Action, Action + Icon, Menu, and Combo. These buttons come in three different sizes: Micro, Base, and Hefty, serving to guide users through various tasks and workflows.
Uptake data tables are available in two types—Static and Analytic. These tables effectively organize and provide meaning to data, presenting multiple items within a single component while ensuring that the information remains easily readable at a glance.
Data visualizations within Uptake's Design System empower users to extract valuable insights from substantial amounts of information. These tools effectively communicate metrics that hold particular significance to users.
Design System Adoption
Adoption was tiered: teams could opt out (rarely happened), adopt visual style only, or take the full component library. Even partial adoption improved consistency, and full adoption cut technical debt and freed teams to focus on harder problems.
Tiered approach to design system adoption.
The design system adopted by the energy product.