Brinks
Foundry Design System
Redesign of component structure for a cohesive and scalable design system.
Challenge
Build a scalable design system to unify UI components, ensure consistency across platforms, and streamline design–engineering collaboration.
Role
Design System Designer
UI/UX Strategist
UI/UX Researcher
Documentation & Governance
Tools
Sketch
Storybook
Miro
Kanbanize
Background
Context of Brinks' Needs
As our UX team transitioned from Balance Innovations to Brinks, I took the lead on organizing and documenting core components in our design system for the UI engineers who would be handling design in the interim.
This gave me a great opportunity to create more cohesive, scalable components and improve overall system clarity.
Since the rest of the UX team had limited time, I worked mostly independently, with weekly check-ins to make sure everything stayed aligned and consistent.
​
Core Needs:
- Scalable across Brinks, Balance Innovations, and PAI—needed clean, standardized docs
- Reusable components to boost efficiency
- Clear designer–developer alignment on core concepts
Research
Audit and Clean-Up
To prepare the system for scale across Balance Innovations, Brinks, and PAI, I began with a full audit of the existing component library.
The system had become cluttered with duplicates, inconsistent styling, and little documentation—making it difficult for engineers to confidently reuse components.
Audit Actions:
- Reviewed all existing components in Sketch, removing duplicates and outdated assets.
- Organized an atomic structure by function (e.g., buttons, inputs, cards).
- Identified inconsistencies in typography, padding, colors, and interactions.
- Documented and defined previously unsupported components.
- Prioritized high-use component redesigns with dev feedback.​
Accessibility Gaps
As we established the type of user in this scenario, it allowed us to outline a user flow where we could indicate the pathways that address our core needs.
Increment Count Currency Input
Increment buttons were enlarged and spaced for better keyboard and screen reader accessibility.
The 16px carets were too small for accessible touch targets.
24px targets with white backgrounds ensure contrast.
Missing Focus Indicators
Several components needed a focus added within the to allow for complete accessibility for those using keyboard navigation.
Foundations
Skeleton of the System
Starting out, I set up the basic structure of the design system, due to the merging process, we could only thoroughly lay out a few structures without extra assistance from the UX team. The foundations that were able to be revised were:
-
Colors​
-
Icons
-
Typography
Colors
The color system was restructured by separating it into primary and secondary palettes—moving away from the previous primary/data visualization split for greater versatility. Additionally, we updated an inaccessible red to meet WCAG 2.2 contrast requirements.
Typography
Starting out, I set up the basic structure of the design system, due to the merging process, we could only thoroughly lay out a few structures without extra assistance from the UX team. The foundations that were able to be revised were:
-
Colors​
-
Icons
-
Typography
​
Consistent Text Hierarchy
Switched to a 1.125 minor second scale to create a consistent, accessible type hierarchy for mentally or visually impaired individuals.
Old Font Sizes | Major Second (1.125) |
|---|---|
- | Jumbo: 26px |
Jumbo: 30px | XX-Large: 23px |
X-Large: 20px | X-Large: 20px |
Large: 18px | Large: 18px |
Medium: 14px | Medium: 16px |
Small: 12px | Small: 14 px |
Icons
We audited the icons and confirmed they all followed the standard sizing, ensuring consistency across the design system.​
Icon to Text Ratio
Switched to a 1.125 minor second scale to create a consistent, accessible type hierarchy for mentally or visually impaired individuals.
Component Structure
Restructuring Components
During my time at Brinks, I prioritized the components to work on based upon benefit to developers and designers, ease of creation in early stages, similarity to previous completed components, components without documentation, and complex structures. The components I completed include:​
-
Button
-
Notifications
-
Table
-
Card
-
Text Input
-
Currency Input
-
Tooltip
-
Popover
-
Checkbox
-
Radio Button
Notable Component Restructures
Below are a few key components I helped restructure to improve clarity, usability, and consistency across the system. Each presented unique challenges that required careful consideration of design patterns, documentation gaps, and developer needs.
Notifications
The notifications were restructured to define both info stripes and toast messages along with all their notification variants.
Currency Inputs
The notifications were restructured to define both info stripes and toast messages along with all their notification variants.
Variants
A consistent list of currency inputs was put together to provide a detailed idea of what context each one can be used in.
States
States were made consistent across inputs for easier access to different versions for a quicker prototyping process.
Popover
Popovers were revised to have information provided to separate it's structure from a tooltip, allowing for a better understanding for designers and developers.
Lessons Learned
Design Systems Structures
One of the biggest structures I put in place for our design system was clear documentation reduced back-and-forth with developers. I was able to prioritize putting together high-use components (like buttons and inputs) to help the team adopt the system faster.