B2B • SaaS • Design Systems
ObserveIT
Cloud Design System and Post-Acquisition Rebrand
Built a token-driven design system adopted by three of six application teams, with full component coverage in the flagship cloud product. Its architecture enabled the post-acquisition rebrand to be implemented in minutes.
Overview
Built a framework-independent, token-driven design system for ObserveIT's cloud cybersecurity platform, hand-coding all HTML and SCSS without framework dependencies. I evangelized adoption across the organization, onboarding teams individually until 3 of 6 application teams adopted the system, with the flagship cloud product reaching full component coverage. After Proofpoint acquired ObserveIT, the system's token architecture allowed brand changes to propagate in minutes, with full verification across all products in under two hours.
Abilities Demonstrated
- Designed and built a comprehensive design system from scratch
- Custom-coded all HTML and SCSS without framework dependencies
- Created a dual-purpose system serving both designers and developers
- Implemented light and dark theme switching with CSS custom properties
- Facilitated regular check-ins with both design and development teams
Research & Audit
ObserveIT was building a completely new cloud-based digital threat analysis platform from the ground up. To properly coordinate between developers and designers, they needed a design system that could serve both teams simultaneously, acting as a code repository for developers and a style and brand guide for designers. The system needed to support light and dark themes, maintain clean and performant code, and stay synchronized with the product in real time.
Card Design Workshop
System Architecture
After carefully researching existing design systems, we decided on a completely custom build. This approach allowed us to check all of our requirements: support light and dark themes at the click of a button, have the design system look and feel like a style guide, and ensure the system could easily read from our codebase without too much additional work. I hand-coded all HTML and SCSS without bulky frameworks to ensure the cleanest product possible with the fastest load times.
Design System Components
- Comprehensive widget library with usage guidelines and code snippets
- Grid system and spacing documentation for consistent layouts
- Typography system and scale with clear hierarchy rules
- Color system with full theme support (light and dark modes)
- Interactive component library with live preview functionality
Cloud Dashboard
Explorations
Technical Implementation
- Hand-crafted HTML and SCSS without framework dependencies
- BEM naming methodology for semantic, maintainable CSS
- CSS custom properties for instant theme switching
- Real-time synchronization between design system and product
- Modular SCSS structure for maintainable styling
- Component-based architecture for maximum reusability
Results & Impact
The design system proved its ultimate value when Proofpoint acquired ObserveIT. The robust, token-driven architecture I had built made rebranding seamless; within minutes, I updated logos, colors, and copyright lines across the entire platform. What could have been a months-long effort became a near-instant transition, demonstrating the power of a well-architected design system that supported light and dark modes, white-labelling, and real-time synchronization between the system and the product.
Framework-free build
Full coverage on flagship product
Light & dark support
Optimized performance
Project Outcomes
Post-Acquisition Rebrand
When Proofpoint acquired ObserveIT, the design system's token architecture enabled a complete rebrand of logos, colors, and more in minutes, not months.
White-Label Architecture
Built-in theming and token-based styling made white-labelling effortless, proving the system's value well beyond day-to-day development.
Optimized Performance
Optimized performance through shallow component structure, only pulling in information we absolutely require: a robust system with a lightweight footprint.
Cross-Team Adoption
Three of six application teams adopted the system, with full component coverage in the flagship cloud product.
