Establishing a scalable foundation of reusable components and guidelines to streamline product design and development.
Background
Safex One, a cybersecurity platform, had an interface that lacked a structured design foundation when I began working on the project. There was no defined design system—no clear color palette, reusable component library, or shared visual language connecting the design and development teams.
The UI had also begun to feel outdated and did not support both light and dark modes, which created inconsistencies across the overall experience. Without a unified design system in place, collaboration between designers and developers was often inefficient, leading to delays and misalignment during product development.
Challenge
A key decision from the Safex team set an ambitious direction for the product. The plan included a complete interface overhaul, the introduction of more than 15 new features, and the launch of a mobile application, all expected within a 2–3 month timeline. At the same time, this effort had to be coordinated with two in-house developers who were already leading the ongoing product revamp and managing the development work.
This created a classic “chicken-and-egg” situation.
Should the team continue building new features using the existing interface, or focus on designing a new UI first, knowing that any features built on the old system would eventually need to be redesigned?
Opportunity
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
I developed a process tailored to the needs of Oasis, aligning it with the real complexity of the product rather than relying on a generic framework. The process began with a detailed audit to identify inconsistencies and prioritize the components that would have the greatest impact.
At the same time, the new UI direction was validated while edge cases were addressed early in the process. A structured token architecture combined with regular developer syncs helped ensure that the first phase of implementation progressed smoothly and remained scalable.
A strong
system starts
with a strong
foundation
01
COLOR
03
ICONS
05
SPACING
02
TYPOGRAPHY
04
CORNER RADIUS
06
SHADOW
That’s when it became clear: a strong system needs a strong base. I focused on defining core foundations to bring clarity, consistency, and control across every surface of the product.
To build something scalable, we had to start from the ground up. The lack of a structured foundation made every revamp chaotic and inconsistent.
/COLOR
Previously, colors were applied inconsistently across the interface, which created visual clutter and made maintenance more difficult.
I refined the palette into a more focused and scalable system aligned with the product’s brand. The updated structure supports both light and dark modes and introduces greater clarity and consistency across the interface.
/TYPOGRAPHY
The interface previously relied on inconsistent font sizes and weights, which disrupted the visual hierarchy and made the overall experience feel unstructured.
I reorganized the typography into a clear and scalable type system with defined roles and hierarchy. This improved readability and introduced stronger visual consistency across the product.
/SPACING
Spacing was designed to balance density and clarity, which is especially important for a data-heavy platform like Safex One.
Defined spacing values were introduced to ensure the interface feels neither crowded nor overly sparse. This helps users focus on important information while maintaining a clean and approachable layout.
/ICONS
In cybersecurity products, finding icons that accurately reflect the context can be difficult. Each icon was carefully designed to align with the product’s functionality while remaining simple and lightweight.
A stroked icon style was used to keep the visuals clean and subtle. This approach avoids visual heaviness and supports the clarity and precision that the product interface aims to communicate.
/TOKENS
Previously, many design decisions were made without a clear structure, which made it difficult to maintain consistency across the product. In this release, design tokens were introduced to provide a more organized foundation for the system.
These tokens guide decisions across color, spacing, and typography. This helps ensure that design choices remain consistent with Safex One’s brand while supporting the product as it continues to grow.
/THREE TIER SYSTEM
As Safex One’s platform expanded, maintaining design consistency across a growing and evolving product became increasingly difficult.
It became clear that a flat or single-layer token structure could not provide the flexibility or clarity required, particularly when managing light and dark themes along with component-specific overrides.
To address this, a three tier token system was introduced. This approach separates foundational values from contextual and usage-level tokens, allowing better control, simpler theming, and a more scalable collaboration model between design and development.
Seamless Mode Switching with Tokens
/Design <> Dev Token Pipeline
Design tokens such as colors, typography, spacing, and shadows are defined in Figma and exported in JSON format. These tokens are then version controlled through GitHub and processed using Style Dictionary to generate platform-specific outputs.
The transformed tokens are used across Web with Tailwind, iOS with Swift, and Android with XML. This pipeline keeps design and development aligned while improving implementation speed and reducing inconsistencies across platforms.
The Reusable Components
/Design <> Dev Sync hub
Our Design–Dev Sync Hub serves as the central reference for every component in the system. It documents the purpose of each component along with its variants and states.
The hub also outlines how tokens are applied across light and dark modes. In addition, it provides clear usage guidelines and a dedicated space for ongoing discussions, feedback, and collaboration between design and development.
Impact & Takeaways
Beforeyougo,herearesomeofthethingsachievedbytheproject.
Not finding what you need?
Reach out anytime. I'm happy to answer any questions about the project or process :)
Supported Product Redesign in 1.5 Months
Contributed to the design system that enabled the product team to transition from the legacy interface to the new UI, helping accelerate the overall redesign timeline.
3.75× Faster Design Execution
Developed reusable components and structured design patterns that allowed designers to build screens and iterate significantly faster.
Significant Reduction in Design Turnaround Time
Improved the design workflow by standardizing UI components and documentation, reducing the time required to complete design tasks.