Border (Design System)
Border (Design System)
Challenges: Chaos Before BORDER
When I joined Redrob, a people search platform, the design ecosystem was already established by a senior designer in Korea—but it was fragmented and inconsistent.
Our design system faced critical challenges: no clear guidelines for color usage or component implementation, no unified design language between design and development teams, and an outdated UI that created visual imbalance and contrast issues throughout the experience.
Without a synchronised design system, cross-functional collaboration became inefficient—especially across different countries and time zones—leading to project delays and frequent misalignment.
Challenges: Chaos Before BORDER
When I joined Redrob, a people search platform, the design ecosystem was already established by a senior designer in Korea—but it was fragmented and inconsistent.
Our design system faced critical challenges: no clear guidelines for color usage or component implementation, no unified design language between design and development teams, and an outdated UI that created visual imbalance and contrast issues throughout the experience.
Without a synchronised design system, cross-functional collaboration became inefficient—especially across different countries and time zones—leading to project delays and frequent misalignment.
The Unexpected Challenge
A critical decision came from the CEO: a complete product revamp, the introduction of new features to meet investor expectations, all within 2-3 months. The pressure intensified when we realised only two designers would be responsible for executing this vision—which is handling the India side as whole dev team is present in India.
This felt like a “chicken-and-egg” problem:
Do we focus on feature work with the old UI? Or prioritize building a new UI, knowing the features would eventually need to be redesigned?
The Unexpected Challenge
A critical decision came from the CEO: a complete product revamp, the introduction of new features to meet investor expectations, all within 2-3 months. The pressure intensified when we realised only two designers would be responsible for executing this vision—which is handling the India side as whole dev team is present in India.
This felt like a “chicken-and-egg” problem:
Do we focus on feature work with the old UI? Or prioritize building a new UI, knowing the features would eventually need to be redesigned?
BORDER: A Design System to Fix It All
After carefully evaluating our situation, it became evident that without a structured design system, the revamp would be nearly impossible to manage—especially with teams operating across different time zones.
This realization led us to prioritize establishing a robust design system that would streamline our entire process and ensure long-term scalability.
BORDER: A Design System to Fix It All
After carefully evaluating our situation, it became evident that without a structured design system, the revamp would be nearly impossible to manage—especially with teams operating across different time zones.
This realization led us to prioritize establishing a robust design system that would streamline our entire process and ensure long-term scalability.
Process
I designed a tailored process for BORDER that reflected the real-world complexity of our product, rather than following a generic, one-size-fits-all approach. The process began with a comprehensive audit of our existing design system to identify inconsistencies and prioritize high-impact components.
In parallel, we validated the new UI direction and proactively addressed edge cases. With a token architecture foundation in place and daily development syncs, we ensured smooth and scalable execution of Phase 1.
Process
I designed a tailored process for BORDER that reflected the real-world complexity of our product, rather than following a generic, one-size-fits-all approach. The process began with a comprehensive audit of our existing design system to identify inconsistencies and prioritize high-impact components.
In parallel, we validated the new UI direction and proactively addressed edge cases. With a token architecture foundation in place and daily development syncs, we ensured smooth and scalable execution of Phase 1.
A Strong System Starts with a Strong Foundation
It became clear early on: a strong system requires a strong foundation. I focused on defining these core elements by incorporating feedback from our current product audit and team reviews. The goal was to establish clear standards for colors, typography, spacing, icons, radius, and shadows—bringing clarity, consistency, and control across every surface of the product.
To build something truly scalable, we had to start from the ground up. Without a structured foundation, every design revision would remain chaotic and inconsistent.
Core Pillars:
COLORS
TYPOGRAPHY
ICONS
CORNER RADIUS
SPACING
SHADOW
A Strong System Starts with a Strong Foundation
It became clear early on: a strong system requires a strong foundation. I focused on defining these core elements by incorporating feedback from our current product audit and team reviews. The goal was to establish clear standards for colors, typography, spacing, icons, radius, and shadows—bringing clarity, consistency, and control across every surface of the product.
To build something truly scalable, we had to start from the ground up. Without a structured foundation, every design revision would remain chaotic and inconsistent.
Core Pillars:
COLORS
TYPOGRAPHY
ICONS
CORNER RADIUS
SPACING
SHADOW
Colors
Previously, colors were applied inconsistently across the platform. The palette felt dull and lacked vibrancy, creating readability issues and WCAG contrast violations when paired with text and UI elements.
I streamlined the palette by improving contrast ratios and introducing tint and shade variants of our primary colors.
This gave the team proper color options instead of relying on opacity adjustments, which often produced muddy results. The outcome was a focused, scalable system aligned with our evolving brand identity.
I also expanded our supportive palette to ensure consistent handling of processing states, success indicators, and error messages across the product.
Colors
Previously, colors were applied inconsistently across the platform. The palette felt dull and lacked vibrancy, creating readability issues and WCAG contrast violations when paired with text and UI elements.
I streamlined the palette by improving contrast ratios and introducing tint and shade variants of our primary colors.
This gave the team proper color options instead of relying on opacity adjustments, which often produced muddy results. The outcome was a focused, scalable system aligned with our evolving brand identity.
I also expanded our supportive palette to ensure consistent handling of processing states, success indicators, and error messages across the product.
Typography
Inconsistent font sizes and weights disrupted visual hierarchy and made the interface feel unstructured and difficult to navigate.
I established a clear, scalable typography system with well-defined roles and hierarchy. This brought immediate improvements to clarity and readability while ensuring visual consistency throughout the product.
Typography
Inconsistent font sizes and weights disrupted visual hierarchy and made the interface feel unstructured and difficult to navigate.
I established a clear, scalable typography system with well-defined roles and hierarchy. This brought immediate improvements to clarity and readability while ensuring visual consistency throughout the product.
Corner Radius
Corner radius is a subtle but powerful way to express brand personality—whether a product feels soft and approachable, bold and modern, or trustworthy and professional.
For BORDER, we carefully defined corner radius values to reflect Redrob's trustworthy and approachable identity, ensuring every component visually aligns with the brand's intended tone and emotional resonance.
Corner Radius
Corner radius is a subtle but powerful way to express brand personality—whether a product feels soft and approachable, bold and modern, or trustworthy and professional.
For BORDER, we carefully defined corner radius values to reflect Redrob's trustworthy and approachable identity, ensuring every component visually aligns with the brand's intended tone and emotional resonance.
Spacing
Spacing creates the perfect balance between spaciousness and density—critical for a data-heavy platform like Redrob.
We defined precise spacing values to ensure the interface feels neither cluttered nor sparse, helping users focus on important information while maintaining a clean, approachable aesthetic.
Spacing
Spacing creates the perfect balance between spaciousness and density—critical for a data-heavy platform like Redrob.
We defined precise spacing values to ensure the interface feels neither cluttered nor sparse, helping users focus on important information while maintaining a clean, approachable aesthetic.
Icons
In our industry, finding contextually appropriate icons is both rare and challenging. We meticulously crafted every icon to fit its specific use case while keeping designs simple and lightweight.
By using stroked icons instead of filled variants, we ensured they feel clean and subtle—never visually heavy—reflecting the clarity and precision that BORDER represents.
Icons
In our industry, finding contextually appropriate icons is both rare and challenging. We meticulously crafted every icon to fit its specific use case while keeping designs simple and lightweight.
By using stroked icons instead of filled variants, we ensured they feel clean and subtle—never visually heavy—reflecting the clarity and precision that BORDER represents.
Tokens
In the past, many design decisions lacked proper context, making it difficult to maintain consistency as the product evolved. With BORDER, we introduced design tokens to bring structure and clarity to our system. I prioritize the same language as tailwind so our dev team can understand the system fast and effectively.
Tokens enable context-aware decisions across colors, spacing, and typography—ensuring everything remains aligned with our brand identity, both now and as we continue to scale.
Tokens
In the past, many design decisions lacked proper context, making it difficult to maintain consistency as the product evolved. With BORDER, we introduced design tokens to bring structure and clarity to our system. I prioritize the same language as tailwind so our dev team can understand the system fast and effectively.
Tokens enable context-aware decisions across colors, spacing, and typography—ensuring everything remains aligned with our brand identity, both now and as we continue to scale.
The Reusable DNA of Component Experience
Design tokens—including colors, typography, spacing, and shadows—are initially defined in Figma, then exported in JSON format. From there, they're version-controlled through GitHub and transformed using Style Dictionary into platform-specific outputs for Web Tailwind and created a full storybook to align developers team as well.
This pipeline ensures design and code stay synchronized, accelerates implementation, and significantly reduces inconsistencies across platforms.
The Reusable DNA of Component Experience
Design tokens—including colors, typography, spacing, and shadows—are initially defined in Figma, then exported in JSON format. From there, they're version-controlled through GitHub and transformed using Style Dictionary into platform-specific outputs for Web Tailwind and created a full storybook to align developers team as well.
This pipeline ensures design and code stay synchronized, accelerates implementation, and significantly reduces inconsistencies across platforms.
The Ripple Effect of BORDER
The BORDER design system became a turning point in how we build and scale products. It enabled us to complete a full product redesign in just 1.5 months, reduced production time by 73%, and increased design velocity by 3.75x.
Beyond visual polish, BORDER delivered lasting impact across execution speed, team efficiency, and product-wide consistency.
Faster Design Execution
3.75x
Time Reduction
73%
Team effort reduce from 5 to
2 developers
Shipped Entire product redesign with new revamp
1.5 Months
The Ripple Effect of BORDER
The BORDER design system became a turning point in how we build and scale products. It enabled us to complete a full product redesign in just 1.5 months, reduced production time by 73%, and increased design velocity by 3.75x.
Beyond visual polish, BORDER delivered lasting impact across execution speed, team efficiency, and product-wide consistency.
Faster Design Execution
3.75x
Time Reduction
73%
Team effort reduce from 5 to
2 developers
Shipped Entire product redesign with new revamp
1.5 Months