A closer look

Left, the Phoenix specification’s button rows: primary, outline and ghost, each in normal, hover, focus and disabled. Right, the options panel of Overtur’s report builder as designed in 2019, with the same three button types in its footer and placeholder labels.
In a product Three button types, four states each, on one base. Written once, in the specification.
The Colors page of the Phoenix specification: a primary gray in twelve shades and tints and an orange accent in eleven, each step labeled with its percentage and hex value; a States section begins below.
Color The primary is a gray in twelve shades and tints, enough to carry text, surfaces and even a dark mode.
The Grid and Spacing page: an 8 pixel grid and an 8 pixel baseline, then the approved spacers as a row of squares from 256 down to 16.
Spacing An 8px grid and an 8px baseline, so sizes scale cleanly from one screen to the next.
The Buttons page: one base button, then primary, outline and ghost buttons, each drawn in its normal, hover, focus and disabled states.
Buttons Every type and every state is built on a single base, so a change is made once.

The decision

One decision:one language for many products.

  1. Build a shared foundation.

    I established tokens, reusable components, and documentation, then used internal feedback to refine the system.

Connected moments

  1. Tokens
  2. Patterns
  3. Components
  4. Guidance
  5. Products
  6. Feedback

The challenge

Every product looked like a different company.

Allegion absorbed legacy brands like Schlage, Von Duprin and LCN, each with over 100 years of history. As it shifted from manufacturing company to technology company, a wave of in-house software exposed a problem: every web property and app looked different.

Atoms first, then everything built from them.

As co-author of Project Phoenix, my partner and I studied what IBM, Google, Shopify and Salesforce were doing, and made the case to leadership that design improves ROI. Using Brad Frost’s atomic design, we built from the ground up: atoms (color, typography, spacing), molecules (buttons, inputs, toggles), organisms (navigation, forms, complex components).

  • A soft launch inside the company to gather designers’ feedback

What changed

One foundation, two real products.

Evidence and limits

What the system made reusable.

Teams shared the same language and the same components, and later projects started from them instead of from scratch.

What was observed
Designers took up the system faster than we anticipated, development teams worked from a single source of truth, and it became the foundation for Overtur and Access Management.
What this case doesn’t claim
A measured speed-up. The adoption described above is what designers and developers reported at the time, not a measurement.

What’s next

Built to keep evolving.

The governance model we set up was there so the system could grow with the organization without losing consistency.