Role:
Lead UX Designer
Collaborators:
CTO, Design Team, Product, Marketing
Tool:
Figma
Methodology:
Atomic Design
Building a unified visual language and component system to align product, engineering, and marketing across every touchpoint of a safety-focused platforms.
The Challenge
Drift Net's mission, helping organizations build a culture of safety, demands trust at every user interaction. But as the product suite grew, so did inconsistency. Design decisions were being made in isolation. Components were being rebuilt from scratch, platform to platform. Brand identity was drifting instead of anchoring.
Without a central source of truth, the gaps between products were becoming visible: inconsistent UI patterns, varying type treatments, color usage that conflicted across platforms. For a company whose users depend on clarity and reliability, this was more than a design problem. It was a credibility risk.
" We needed more than a style guide. We needed a living system — one that could scale with our products while keeping our brand, our values, and our user experience intact."
The Approach
The kit was architected using an atomic design methodology the practice of building interfaces from the smallest possible units up to fully composed layouts. This wasn't just an organizational choice. It was a philosophical one: every decision, no matter how small, should be purposeful, documented, and reusable.
Tokens
Colors, type, space
Atoms
Buttons, inputs, icons
Molecules
Nav bars, cards, rows
Organisms
Colors, type, space
Layouts
Full platform screens
Cross-functional collaboration was baked in from day one. Working alongside the CTO, a designer, the product team, and marketing, the kit was built to serve all of them simultaneously — not just the design function. This multi-stakeholder alignment was deliberate: a design system only succeeds when every team has ownership of it.
design principles
Before a single component was designed, the team aligned on the core principles that would guide every choice in the kit. These are not abstract values they're practical filters applied to every token, pattern, and guideline.
Innovation
Thinking beyond convention in each platform and solution.
Simplicity & Accessibility
Designs must be easy to understand, navigate, and use by everyone.
Consistency
Coherent patterns that build familiarity and guide expected behavior.
Quality
Continuous iteration and optimization toward the best possible outcome.
The Kit
The Drift Net Design Kit is organized across eight interconnected categories, each addressing a distinct layer of the product experience. Together, they form a complete, self-referencing design language.
A small window into the Drift Net design system.
Navigation
A tiered navigation system: side bar, top nav, tab navigation, sub-tabs, and pagination each scoped to a clear function.
Typography
Poppins (primary) and Work Sans (secondary) define a scalable, legible type system across headers, body copy, and marketing materials.
Color System
9 brand colors, each with 12 hues. Primary brand palette (Grey, Blue variants) anchors the UI; secondary palette (Green, Orange, Purple, Red) provides accent and emphasis.
Buttons & Links
Comprehensive interaction vocabulary: primary, secondary, icon variants, radio, checkbox, toggle, and hyperlink types. All platform-color-aware.
Icon Library
Complete Untitled UI icon set, linear style. Three standardized sizes (16, 24, 30px) with platform-dependent color application.
UI Elements
Logo, inputs (8 types), backgrounds, cards, modals, tables, data labels, avatars, alerts, progress indicators, and collapsibles.
Layout & Spacing
Modular grid on multiples of 4. Default 40px margin, 8px border radius. Consistent spatial rhythm across every platform.
Product Marketing
Guidelines for digital and print materials: two-toned color themes, geometric shapes, image standards, and brand-aligned layout rules.
Typography in Detail
Typography is not decoration at Drift Net, it is communication infrastructure. The kit establishes a clear hierarchy that ensures every line of copy is legible, appropriately weighted, and visually consistent with the brand’s identity.
Headers - Work Sans
Work Sans designed by Wei Huang. It is a modern sans serif typeface family based loosely on early Grotesques. It is used for our Headers.
Body Text - Poppins
Poppins is a geometric sans-serif typeface published by Indian Type Foundry in 2014. It is used for all our body text.
color system detail
The palette was built not as a collection of preferred shades, but as a structured language. Primary colors anchor every interface in Drift Net’s core identity. Secondary colors extend that language into product-specific contexts. Each color ships with 12 hues, giving design teams the precision to create contrast, depth, and hierarchy without breaking the brand.
Primary Brand Colors
Grey
Blue
Navy
Dark Blue
Secondary Brand Colors
Green
Orange
Purple
Red
Dark Green
WCAG accessibility compliance is non-negotiable. Every color pair used for text against a background must meet the 4.5:1 minimum contrast ratio, verified against the WebAIM contrast checker before use in production.
Data & Content Components
Safety platforms are fundamentally data platforms. Drift Net's users interact with reports, incident records, status indicators, and compliance forms daily. This shaped a significant portion of the design kit building components that make data legible, actionable, and organized.
The kit includes a full data component vocabulary: tables spanning 2–6 columns with filtering, item rows for single-record previews, progress indicators, content status labels for multi-section forms, collapsibles for grouped content, user avatars, and message alerts for fixed-context notifications.
Every data component was built to make information more accessible not just visually, but cognitively. Sortable, filterable, and clearly labeled by design.
Spacing & Structure
Visual rhythm is what separates a designed product from a constructed one. The kit enforces a strict 4px spatial grid across all elements; sizes, spacing units, margins, and border radii must all resolve to multiples of four. The default margin is 40px. The default border radius is 8px. Neither is arbitrary.
Shadows are intentionally excluded from the visual language. The brand communicates through flatness, color, and space not elevation metaphors. If shadows are ever required, the kit provides a documented exception protocol.
Outcomes
Single source of truth
All products designed and governed from one Figma kit, eliminating drift and duplication.
Brand integrity at scale
Consistent visual language across internal platforms, website, and marketing materials.
Faster design velocity
Teams build with pre-made, validated components instead of designing from scratch.
Accessibility by default
WCAG contrast standards are embedded into every color and component decision.
User trust
Consistent, familiar experiences build the reliability users need from a safety platform.
Built to scale
The atomic structure accommodates new products and platforms without starting over.
Reflections
A design system is only as strong as the shared commitment behind it. What made the Drift Net Design Kit succeed wasn't just the Figma file, it was the collaborative process of getting product, engineering, and marketing to agree on what the brand stands for and how that should manifest in every interface.
The kit is now the standard by which every current and future Drift Net product is measured. It defines what consistent looks like, what accessible means in practice, and what the Drift Net experience feels like — so users don't have to think about any of that. They just feel it.
