LOCAL TIME/00:00:00
SHIELD DESIGNSYSTEM
A comprehensive Design System crafted from the ground up for a Cyber Security enterprise, providing a robust set of reusable components with extensive properties and variants. This system was engineered to address the unique challenges and stringent requirements of enterprise-level security solutions, streamlining workflows, standardizing user experience, and empowering teams to deliver secure, consistent, and scalable applications across the organization.Impact
Project Objective.
To build a design system that establishes a unified and holistic engagement between teams. The transformation aims to cater to real product needs and collaborative ways of working.
Atomic Design.
Atomic design is a modular approach that breaks interfaces into reusable pieces, making their structure clear and connected.
Design Tokens
Core variables that define colors, typography, spacing.
Atoms
The smallest UI parts: icons, buttons & input fields.
Molecules
Groups of atoms forming simple components.
Organisms
Large components made of molecules and atoms.
Templates
Layouts showing how components connect within a structure.
Pages
Final screens filled with real data and content.
How Shield was built.
Building a design system is less about creating components and more about establishing a shared language between design and development. The process was iterative, collaborative, and rooted in real product needs rather than hypothetical ones.
Typography.
The typographic system defines text styles as design tokens, establishing how type should be applied consistently across the product. The scale covers Display, Headline, Title, Label, and Body — each with precise size, weight, line height, and spacing values baked in.
Colors.
Colors play a crucial role in design systems. They contribute to the overall visual identity, aesthetics and user experience of a product or brand.
Spacing and Radius.
A consistent spacing and radius scale creates visual rhythm and predictable layouts. Each value exists as a reusable token, simplifying alignment across the interface.
Iconography.
A unified icon system built on consistent stroke, size and grid rules. Icons stay clear and readable at any scale and adapt to semantic colors automatically.
Buttons.
Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.
Form Fields.
Input fields are built from reusable tokens — spacing, states, icons and labels. This keeps interactions predictable and helps designers build forms faster.
Agent Avatars.
Agent Avatars give each AI agent within the platform a distinct illustrated identity. Designed as named characters, they help users quickly recognise and build trust with the agents they interact with.
Implementation.
Shield was applied across multiple products and features within the Qualys enterprise platform. The screens here are just a glimpse, every surface, workflow, and component is built on the same design foundation.
Impact.
Shield brought structural consistency to a product that was growing faster than its design language. By establishing a shared token and component foundation, the team moved from building interfaces to assembling them — reducing ambiguity, accelerating delivery, and raising the quality bar across every screen.
MORE PROJECTS
SEE ALL
ETM MOBILE APP
Delivers live threat intelligence and risk visibility to CISOs, enabling swift, informed decisions.
LETS CREATE
TOGETHER