From repeated UI work to one shared language.
Nebula is the design system I helped establish for Vanguard's B2B and B2C platforms: foundations, components, states and guidance that made new work more consistent from the start.
Nebula is the design system I helped establish for Vanguard's B2B and B2C platforms: foundations, components, states and guidance that made new work more consistent from the start.
When I joined Vanguard, teams had brand guidance but no shared product design system. Each new initiative began with a fresh component library, and familiar patterns were repeatedly redesigned, re-specified and re-built.
The system needed to support both B2C and B2B work without becoming an unwieldy catalogue. It had to give teams a dependable starting point while leaving room for the right product decisions.
Grid, spacing, type and colour rules make each new page feel related before a component is placed.
Buttons and controls account for active, hover, focus, disabled and loading states rather than stopping at the happy path.
Usage, examples and do/don't guidance answer the question a library alone cannot: when is this the right pattern?
I treated the foundations as product decisions, not decoration. They are the constraints that let a system stay coherent when many people contribute to it.
A responsive framework with four breakpoints, a twelve-column desktop grid and an eight-point baseline. The goal was a layout language that travels from mobile to large desktop.
Responsive hierarchy using the established brand typeface, with clear heading and body styles that change proportionately across breakpoints.
Vanguard red remains central, balanced with white space and a secondary palette. Colour communicates hierarchy and state, not just brand expression.
The grid set consistent margins, gutters and content widths across four breakpoints, giving design and engineering a common frame for every product surface.
The type scale made hierarchy clear without relying on one-off styling. Equivalent content could become more compact on mobile while preserving its relationship to the rest of the page.
Each component had to communicate its role, states and constraints clearly enough that a designer or engineer could make a confident decision without recreating the work from scratch.
A plain-language explanation of what each element is for, and the problem it is intended to solve.
Visual examples and do/don't guidance so the intended pattern is recognisable in context.
Clear criteria for when to use a component and how to apply it across products and breakpoints.
This case study shows a portion of the system. The work established a shared visual language, a growing pattern library and a place to document product decisions as the design team and platform continued to evolve.