nightfall ai
TWILIGHT DESIGN SYSTEM
How do you scale cybersecurity without losing clarity? Here's how we are accelerating Product Delivery and Driving $60M Growth at Nightfall
Year started
2022
type
team Collab
Category
Design System
mvp timeline
3-6 months
BACKGROUND
When I joined Nightfall AI, there were no in-house designers. All product design had been handled by an external agency. There was no existing design system, documentation, or scalable component library - just fragments of outsourced work stitched together.
MY ROLE
As one of the first two designers at the company, we were responsible for building everything from scratch. We drove the vision, creation, and rollout of the Twilight Design System
IMPACT
Shipped new features 70% faster by enabling teams to reuse standardized components across product surfaces.
Reduced design-to-dev ambiguity, allowing engineers to implement interfaces with minimal back-and-forth.
Within one quarter, the Twilight system was powering on boarding, policy creation flows, and dashboard alert.
Twilight became a product foundation, not just a button set.
Before introducing Twilight, the legacy system at Nightfall suffered from several critical design and usability flaws that limited scalability, developer efficiency, and product consistency. What started as a patchwork of outsourced design decisions had become a bottleneck, slowing down development, confusing users, and creating unnecessary design debt. Notable issues included:
No Single Source of Truth – Designers and engineers rebuilt common UI patterns from scratch.
Inconsistent User Experience – Visual and interaction inconsistencies created friction for end users.
Slow Time-to-Market – Each new feature required redundant design and development work.
Scaling Risks – As Nightfall’s product suite grew, so did the complexity of maintaining quality.
What did we do?
We conducted extensive user research and stakeholder interviews to identify key usability pain points and inefficiencies in our design-to-development pipeline.
We audited all existing UI patterns across Nightfall’s products to find redundancies and inconsistencies. Then we built most of the core components from scratch in Figma, ensuring each was production-ready and paired with matching coded counterparts for engineers.
From the initial design system audit to the launch of Twilight, the process took at least 3 months and somewhat still going today. Twilight became more than just a component library. It was a strategic product accelerator.
After auditing Nightfall’s old design system, it became clear that inconsistent patterns, duplicated work, and accessibility gaps were slowing product development. To solve this, we created the Twilight Design System - a unified, scalable, and accessible foundation that streamlined design-to-code handoffs, improved brand consistency, and set the stage for faster, more cohesive product releases.
Here are some highlights that capture Twilight’s design language in action:
SCALABLE COLOR SYSTEM
The palette was designed with clear roles for primary, secondary, alert, caution, and success states. Each color followed accessibility standards, ensuring strong contrast and legibility. This structure made it easy for teams to apply the right tone for any interface while keeping the brand visually consistent.
Built on the foundation of Google’s Material UI palette, the colors were reimagined to embody Nightfall's brand voice while ensuring WCAG-compliant accessibility.
Consistent UI Components
All core interface elements, including buttons, modals, dropdowns, icons, and status indicators, were standardized. Each came with clearly defined states such as default, hover, active, disabled, and loading. This removed guesswork, reduced inconsistencies, and made the design-to-development workflow more predictable.
We also produced living documentation within in Figma and Storybook, giving teams a self-serve resource they could refer to without bottlenecking on my time. This empowered everyone to confidently use and expand the system.
Cross-Product Compatibility
Twilight was built to work seamlessly across Nightfall’s web apps, SaaS dashboards, and internal tools. As new products were introduced, they could adopt the same visual language and interaction patterns without requiring additional design or engineering effort.
BEFORE VS. AFTER — WHERE DESIGN MEETS IMPACT.
The CTA buttons were intended to function as on/off switches, but the original design used a plus and minus system. This confused users, making it unclear how to enable an alert.
Previously, setup flows were dense text pages that made it hard to focus. Twilight broke them into clear steps, helping users progress without feeling overwhelmed.
twilight design demo
A glimpse into Twilight at work.
Twilight became the single source of truth for all design and development efforts across Nightfall. Designers stopped reinventing components. Engineers implemented pre-tested, production-ready patterns. Products looked and felt unified.
We built the baseline of the Twilight Design System in just a couple months, then continued to evolve and refine it as a living, scalable framework that grows with the product. Most importantly, the improved polish and delivery speed helped strengthen investor confidence, contributing to Nightfall securing $40M in Series B funding.
