Background —

My role

researchvisual designdesign auditdesign leadinternal testing


As THE ICONIC design team grew, it became increasingly important to maintain a consistent style and visual language across the website.

With designers working in different squads, there was a clear need for a unified design language to help guide and leverage fundamental elements.

The end goal was to have a collection of reusable components, guided by clear principles, that can be combined together to create as simple or as complex experience as needed.

How this came about

When I started at THE ICONIC it took me longer than usual to get my head around their design language. There was no design on-boarding, there was no ‘way we did things’ and all designers were essentially creating their own experiences and leveraging other designers work, we designed to different mobile screen sizes and were driven by preference rather than process.

The problem

Because the design team worked in cross functional squads, basic fundamental elements such as spacing, icons, font and colours varied from feature to feature, this created an inconsistent experience for our users. It also took a full squad to create a simple page or feature as there was so no reusable components in the site.

The challenge

The wider company didn’t see the value in a dedicated squad to the design, develop and manage this mountain of a project we called THE ICONIC Design System.

The goal

My aim was to firstly get the designers consistent and eventually to get resources to build a centralised place for both developers and designers where all rules, designs and code would be documented and reusable.

Problem statement
How might we enable our designers and developers to concentrate on the end-to-end experience instead of repetitive UI problems while remaining more consistent than ever before —

Research —


The first step was to review the entire site end-to-end and document and then categorise the current components making up THE ICONIC website and app. Reviewing elements such as form fields, radio buttons, images, accordions and cards etc. During this process we found many inconsistencies.

Design system audit
Laying the foundation
This system is based largely on the principles of atomic design —

The key idea behind this methodology is small, independent, atomic-parts that can be combined into larger molecular structures.

This foundation defined our grids, spacing, typography, dividers, border radius, shadows, buttons and form fields.


The 8px grid has been chosen due to it’s flexibility to a variety of different screen sizes. In some cases, a smaller increment is needed hence the use of 4px. This should be limited to use in text and icon placement.

Using this guide for both horizontal and vertical spacing will ensure consistency across all devices and mediums. This enables rapid and consistent scalability across THE ICONIC.


We use Proxima nova as the main typeface across web and app with Didot as the secondary font mainly used for marketing campaigns.


The Primary colour palette was used throughout the site and we also had a colour palette exclusively used for illustrations and some iconography.

Primary colours

Illustration colours

Card elevation

Cards are a great way to isolate content from its surroundings, indicating interactivity and denoting hierarchy. Cards of both types always maintain a 4px radius with ‘smooth corners’ applied.

Interactive-default Opacity: 16% X offset: 0 Y offset: 1px Blur: 4px
Hover Opacity: 24% X offset: 0 Y offset: 4px Blur: 8px
Clicked Opacity: 24% X offset: 0 Y offset: 2px Blur: 4px
Non-interactive Non-interactive cards have no elevation and sit on a 1px #EFEFEF stroke.

Buttons allow users to take action in one click. Here are all the buttons we use and why.


For the principle call to action on the page.


Used for actions not as important as primary action. Usually placed beside primary button as alterative option.

Ghost CTA

When action does not requires primary dominance on the page.


Tells out user what will happen when the click the button by using verbs that describe the action and is further illustrated with an icon.

Results —

The roll-out

We began this process by creating a master Sketch file that was the source of truth. Within this Sketch library were the basic fundamentals made into symbols and used across all new files.

Designers were alerted to any changes to their libraries and we were all able to update our files quite easily. We used Zeplin and then Invision as a shared resource with the developers.

Master Sketch library

12hrs → 45mins

The preference centre I worked on was designed in 1 day due to using reusable components. A feature like the preference centre would usually take around 2 weeks of design time for desktop alone.

We also designed the ‘Sneaker Freaker’ campaign in 45 mins using the new design system which would normally take 12 hours.

Design System result


Throughout this development, my manager and I spoke at company wide stand ups, learning days and at tech townhalls, trying to sell the importance of the design system. We were aware that THE ICONIC Design System was not a one team project and if we wanted it to succeed we needed everyone on board.

Bringing it all together

After 3 months tirelessly working towards the creation of THE ICONIC Design System, the wider company saw value in this project and decided to dedicate a full time design squad.

Now, not only is the design reusable but the same can be said for code, reducing costs and creating major efficiencies across development. The next step is for a front-end public accessible website to be built explaining who were are, how we look, as well as our principles using atomic design methodology.