Introducing AXIS

1. Current Position

Clarion wanted a multi-brand design system to accelerate delivery and create a consistent experience across brands. However, the existing system had derailed: design principles were undefined, audits incomplete, and variable collections were chaotic.

The system was difficult for new designers and developers to read or use.

The core issues included:

• Incorrect understanding of aliasing, making scaling this beyond a 3x website design system impossible.
• Overly bloated typography styles, padding scales, spacing scales.
• Very low consistency with many one-off styles, type styles, effects, components, and variables.
• No naming conventions; designers could not publish this library and use it effectively from linked documents.
• Themes and brands were not scalable. You couldn't easily make a change to one brand, like change the primary colour, should marketing request it.
• The system was simply not built for growth.

My mission was clear: to rebuild the system from scratch. However, I had a team of designers who had invested significant time in the existing version, so I needed to bring them on board. In the words of Simon Sinek... Start with why.

So I did.

Game Changer

Before

The system was bloated, incoherent, and unscalable. Designers and engineers duplicated work, guessed at missing details, and struggled with inconsistencies.

After

Rebuilding with a clear aliasing strategy transformed workflows: designers create once and generate nine outputs; engineers code once and deliver three brands. The system became simple, scalable, and consistent.

Key Outcomes

• Highly scalable, maintainable design system.
• Improved efficiency across design and engineering.
• Eliminated engineering guesswork.
• Reduced system bloat (assets down 50% with no loss in quality).
• Developers code once to produce three core brands.
• Storybook used for design-to-development alignment.
• Clear, consistent rules across brands and devices.