One design system for a 25-year-old brand

Cady is a national school photography company with studios across the United States. Its sites looked consistent at a glance, but up close each one styled the same things differently. We audited every property and built a design system in Figma: the foundations, the components, the patterns, and the documentation to use them, all in the brand Cady had built over 25 years.

Client: Cady, a national school photography company
Built: A design system for Cady’s customer-facing sites, documented for designers and developers
Services: UI/UX design, project management
Tools: Figma
Engagement: Design and documentation, after several earlier projects together

Results

25 years
Of Cady’s brand, carried into one system
55
Color steps in five 11-step scales
42
Type styles for desktop and mobile

Components from the Cady design system: a school finder, a package card, a progress stepper, a calendar, and buttons

What changed

One source of truth for every site

Before the system

With the system

Consistency: Before the systemSites that looked consistent at a glance but disagreed up close.; With the systemOne source of truth for every color, type style, and component.
New screens: Before the systemNo shared library of components to build from.; With the systemDocumented components and templates to assemble them from.
Brand: Before the systemAn established brand applied differently on each site.; With the systemThe same brand, defined once for every property.
Handoff: Before the systemNo guide to how the brand’s interfaces should be built.; With the systemREADMEs, component notes, video tutorials, and annotations.

How we built it

From an audit to a system Cady can grow

We had worked with Cady on several projects before, so we knew where its products had been. The system had to settle every inconsistency without losing the brand students and parents already knew.

Audit every property
We reviewed Cady’s sites side by side and recorded the styles and patterns each one used, and every place they disagreed.
Set the foundations
Color, typography, layout, spacing, and shadow came first: five color scales of 11 steps each, and 42 type styles across desktop and mobile.
Build the core components
Buttons, fields, icons, counters, tables, tabs, and more became the building blocks for every later design decision, each with examples of it in use.
Compose patterns and templates
Navigation menus, cards, and modals came next, then templates adapted from patterns already on Cady’s sites so they work the same across platforms.
Document it and hand it off
READMEs, component descriptions, video tutorials, and annotations show Cady’s team how to use the system and grow it, and give developers what they need to build from it.

What’s in the system

Everything a designer needs to build the next screen

Each part of the system builds on the one before, from the foundations up to page templates, so a new screen starts from finished pieces instead of a blank file.

Foundations
Color, type, layout, spacing, and shadow
Five color scales for the brand, errors, success, warnings, and neutrals, with heading and body styles set for desktop and mobile.
Components
The building blocks
Lists, cards, progress steppers, chips, buttons, date pickers, fields, switches, alerts, message bars, tabs, tooltips, and avatars.
Patterns
Navigation, cards, and modals
Larger patterns and page templates, built from the components, that keep layouts and interactions predictable from site to site.
Documentation
How to use it and grow it
Best practices and how-to guides for navigating, using, and extending the system, written for designers and developers alike.

Also in the system