Stellar Cyber Visual
Design System
Redesigned core UI components for Stellar Cyber, a Series C B2B cybersecurity company, to build a unified, scalable design system used by design and development teams company-wide. This ensured a consistent, trustworthy user experience that empowers security teams.
Redesigned core UI components for Stellar Cyber to create a unified, scalable design system used company-wide. This ensured a consistent, trustworthy experience that empowers security teams.
Company
My Role
UX Design Intern
Timeline
July-August 2024
Collaborators
Team
UI/UX Manager: Annia Chen
Mentor: Alireza Vatankhah
Stellar Cyber UX Team
At a Glance
Project Overview
Stellar Cyber is a B2B cybersecurity company offering Open XDR, a unified platform for threat detection and automated response. As the product expanded, a consistent design system was needed to ensure clarity, trust, and scalability.
I redesigned core UI components like buttons, input fields, and chips to improve usability, strengthen brand identity, and create a cohesive experience, which helps design and development teams work more efficiently and consistently.
Stellar Cyber is a B2B cybersecurity company with Open XDR, a unified platform for threat detection and automated response. As the product grew, a consistent design system was needed. I redesigned core UI components including buttons, input fields, and chips to improve usability, reinforce brand identity, and create a cohesive experience that helps design and development teams work efficiently and consistently.
My Contributions
Redesigned key UI components and variants including buttons, input fields, and chips to create a unified visual language actively used across Stellar Cyber’s Open XDR platform.
Designed scalable variants to enhance flexibility for designers and improve usability for end users.
Collaborated closely with developers and design team to define clear guidelines on spacing, typography, and states ensuring smooth handoff and consistent UI.
Redesigned key UI components including buttons, input fields, and chips to create a unified visual language used across Stellar Cyber’s Open XDR platform.
Created scalable variants to enhance flexibility for designers and improve usability for end users.
Collaborated with developers and designers to define clear guidelines on spacing, typography, and states, ensuring smooth handoff and consistent UI.
Context
Why a New Design System for Stellar Cyber?
Why a New Design System for Stellar Cyber?
As Stellar Cyber expanded its Open XDR platform, inconsistent UI affected user experience and the platform’s credibility. To address this, the team used the PrimeNG design system as a base to modernize components and streamline development. As a design intern, I led the redesign of core UI elements to build a scalable and cohesive system that improved usability, reinforced brand identity, and aligned designers and developers on UI choices to support the platform’s continued growth.
As Stellar Cyber expanded Open XDR, inconsistent UI hurt usability and credibility. Using PrimeNG as a base, I led the redesign of core UI components to create a scalable, cohesive system that improved usability, reinforced brand identity, and aligned designers and developers to support the platform’s growth.
Research Process
Exploring Existing Design Systems
Exploring Existing Design Systems
To grasp the best practices in design system, I started by studying established design systems like Material Design and Apple’s Human Interface Guidelines. Focusing on buttons, input fields, and chips, I closely examined the different variants such as sizes, states, and use cases to understand what contributes to a clean, scalable, and user friendly design system.
Key Design Decisions
Decision 1: Define Scalable and Adaptable Size Variants
Decision 1: Scalable Size Variants
To support Stellar Cyber’s diverse interface needs, including compact side filters, tables, and full-page forms, I designed small, default, and large size variants for buttons, inputs, and chips. Each component scales visually and functionally, with consistent icon and text sizing to maintain clarity and cohesion. This scalable system streamlines design and development while reinforcing a unified look and feel across the platform.
I created small, default, and large variants for buttons, inputs, and chips to support Stellar Cyber’s diverse interfaces. Each scales consistently in text and icon size, ensuring clarity, cohesion, and a unified platform experience while streamlining design and development.
Decision 2: Establishing Consistent Padding and Alignment Rules
Decision 2: Consistent Padding and Alignment Rules
To create a cohesive and visually balanced component set, I defined standard rules for button sizing, including height, padding, margins, text size, and line height. Based on team feedback, I adopted a guideline where horizontal padding is twice the vertical padding to enhance visual balance. I also applied consistent alignment and spacing principles to input fields and chips—especially between text and icons—to ensure responsive and polished layouts across the system.
I established sizing rules for buttons including height, padding, margins, text, and line height, with horizontal padding set at twice the vertical for balance. The same alignment and spacing principles were applied to inputs and chips, ensuring responsive and polished layouts across the system.
Decision 3: Implement Label Variants for Clarity in Input Fields
Decision 3: Label Variants for Input Fields
Input fields are essential across Stellar Cyber’s dashboards, forms, and modals, where frequent text entry occurs. To support varied layouts, I designed regular and float label variants, using regular labels for spacious forms to ensure clarity and float labels for compact interfaces like dashboards to save space. I also adjusted font sizes to maintain hierarchy and reinforce consistency throughout the system.
Input fields are widely used across Stellar Cyber’s dashboards, forms, and modals. I designed regular labels for spacious forms and float labels for compact layouts, adjusting font sizes to maintain hierarchy and ensure consistency throughout the system.
Final Designs
Buttons
In Stellar Cyber’s complex Open XDR platform, buttons guide users through diverse actions and workflows. Beyond size variants, I designed a scalable button system with multiple types, including primary, secondary, success, info, warning, help, and severity, each tailored for specific functions. The buttons include styles such as icon-only, text-only, raised, outlined, and link, with consistent visual feedback across idle, hover, and selected states to ensure clarity and responsiveness.
In Stellar Cyber’s Open XDR platform, buttons guide users through complex workflows. I designed a scalable system with multiple types including primary, secondary, success, info, warning, help, and severity, plus styles such as icon only, text only, raised, outlined, and link. Consistent feedback across states ensures clarity and responsiveness.
Input Fields
Input fields are essential for data entry across Stellar Cyber’s dashboards, forms, and modals. Beyond scalable size and label variants, I implemented multiple statesm including regular, hover, and focused, to provide clear user guidance. I also designed support for left and right icons and incorporated error states to ensure consistent feedback and flexibility for the team.
Input fields are key for data entry across Stellar Cyber’s dashboards, forms, and modals. I designed scalable size and label variants with states for regular, hover, and focus, plus support for icons and error handling to ensure clear guidance, flexibility, and consistent feedback.
Chips
I designed chips as compact, interactive elements for filtering and selection within Stellar Cyber’s data-rich environment, where they can appear in groups. To maintain visual consistency, I used a rounded style and a color scheme aligned with buttons, including primary, secondary, accent, query, and disabled colors. Inspired by Material Design’s chip anatomy, I created variants with images and removable icons for greater versatility.
I designed chips as compact, interactive elements for filtering and selection in Stellar Cyber’s data rich environment. Using a rounded style and a color scheme aligned with buttons including primary, secondary, accent, query, and disabled, I also created variants with images and removable icons for versatility.
Final Takeaways
Key Takeaway 1: Think in Systems When Designing for Scale
Working on Stellar Cyber’s component library taught me to approach design as a system, not just isolated parts. From button sizes to chip colors, every element needed to work across varied use cases while feeling cohesive. I learned how consistent rules for spacing, padding, and interaction states enable smoother development and a better user experience. Designing for scale isn’t just about flexibility, it’s about building trust through clarity and consistency.
At Stellar Cyber, I learned to design as a system rather than isolated parts. From button sizes to chip colors, each element had to work across use cases while feeling cohesive. Consistent rules for spacing, padding, and states streamlined development and improved the user experience. Designing for scale is about more than flexibility; it builds trust through clarity and consistency.
Key Takeaway 2: Define Design Guidelines to Maintain Structure
Creating consistent standards for padding ratios, text alignment, and spacing helped me build a structured and reliable design system. I learned that documenting clear rules, such as keeping horizontal padding twice the vertical, establishes structure for the design process, makes it easier for myself, improves visual balance, and streamlines handoff and collaboration with developers.
Creating consistent standards for padding, text alignment, and spacing helped me build a structured design system. Documenting clear rules, like keeping horizontal padding twice the vertical, improves visual balance, simplifies the design process, and streamlines collaboration with developers.
Key Takeaway 3: Actively Iterate Based on Feedback
Regular team feedback and testing taught me the value of iterative design. Thoughtfully incorporating input on input labels and interaction states allowed me to continuously refine my designs. Working closely with Stellar Cyber’s team of three main designers gave me the opportunity to gather diverse perspectives and introduced new approaches, ideas, and solutions. I will carry this practice forward by actively seeking feedback early and often, ensuring my future designs evolve with real user needs and team insights.
Team feedback highlighted the value of iterative design. Incorporating input on labels and interaction states refined my work, while collaborating with Stellar Cyber’s designers introduced new perspectives and solutions. I will continue seeking feedback early to ensure designs evolve with real user needs and team insights.
Contact Me!
Contact Me!
janetjliu
janetliu.ca@gmail.com
Pages
Pages
Key Projects
Key Projects