P R O D U C T
Fido : AI-assisted investigative intelligence system
I M P A C T
60% Faster Design Delivery, 92% Component Usage,
87% Product Consistency
Indianapolis Metropolitan Police Department, IN
Fido Trace Design System
Challenges:
Chaos Before
Trace
When I joined Safe Security, a cybersecurity and risk management platform, the design ecosystem was highly fragmented.
There was no defined design system—no structured color palette, no component library, and no unified design language between design and development teams.
The UI was outdated and lacked support for both light and dark modes, creating inconsistencies in the overall experience.
Without a shared design system, collaboration between designers and developers became inefficient, leading to delays and misalignment.
TRACE
Design a System
to fix it all
After evaluating the situation, it became clear that without a structured design system, the revamp would be unmanageable.
This led to the decision to focus on establishing a robust design system to streamline the entire process and ensure long-term scalability
Process
After evaluating the situation, it became clear that without a structured design system, the revamp would be unmanageable.
This led to the decision to focus on establishing a robust design system to streamline the entire process and ensure long-term scalability
A Strong System Starts with Strong Foundation
01 COLORS
02 TYPOGRAPHY
03 ICONS
04 SPACING
05 COMPONENTS
06 LOGO
07 PRODUCT IDENTITY
After evaluating the situation, it became clear that without a structured design system, the revamp would be unmanageable.
This led to the decision to focus on establishing a robust design system to streamline the entire process and ensure long-term scalability
F O U N D A T I O N 1 / 7
Colors
After evaluating the situation, it became clear that without a structured design system, the revamp would be unmanageable.
This led to the decision to focus on establishing a robust design system to streamline the entire process and ensure long-term scalability
F O U N D A T I O N 2 / 7
Typography
After evaluating the situation, it became clear that without a structured design system, the revamp would be unmanageable.
This led to the decision to focus on establishing a robust design system to streamline the entire process and ensure long-term scalability
F O U N D A T I O N 3 / 7
Icons
After evaluating the situation, it became clear that without a structured design system, the revamp would be unmanageable.
After evaluating the situation, it became clear that without a structured design system, the revamp would be unmanageable.
And we also played around with how
files and folders should look
As note folders became the homepage focus,
we explored their design.
Once folders were designed, we moved
to the pages within them.
F O U N D A T I O N 4 / 7
Spacing
After evaluating the situation, it became clear that without a structured design system, the revamp would be unmanageable.
This led to the decision to focus on establishing a robust design system to streamline the entire process and ensure long-term scalability
Branded House
Architecture
The Reusable DNA
of Product
Experience
Components
B R A N D 6 / 7
Logo
After evaluating the situation, it became clear that without a structured design system, the revamp would be unmanageable.
This led to the decision to focus on establishing a robust design system to streamline the entire process and ensure long-term scalability
B R A N D 7 / 7
Product Identity
After evaluating the situation, it became clear that without a structured design system, the revamp would be unmanageable.
This led to the decision to focus on establishing a robust design system to streamline the entire process and ensure long-term scalability
Oh, and
we made a pen
FYI — in case you skipped the 🔗 Fido case study
*Created using ChatGPT
Developed through 65+ sketches across
30+ pages into one compact, versatile design.
