Dana Dairy

01 / Overview

One system. Eleven distinct identities.

At Dana Dairy, I maintain the web design work for a portfolio of 11 brands. Product launches, new landing pages and everyday content changes used to require rebuilding familiar layouts in Figma and again in older WordPress page builders. I started building a shared component system to remove that repetition while preserving the distinct identities and content needs of each brand.

02 / The challenge

The repeated work was the problem.

Before a new page could communicate anything useful, I often had to locate brand colours, reconstruct headers, recreate familiar content sections and repeat work after stakeholder reviews. Even small changes could be difficult in older builders. The challenge was not simply to make the pages look consistent: it was to make the whole design-to-implementation process easier to repeat and maintain.

03 / System strategy

Share the structure. Protect the identity.

I organised the direction around three layers: common foundations, brand-specific settings and reusable patterns. Spacing, navigation structure, layout and interaction rules can be shared; logos, colours and other identity treatments remain brand-specific. This means a component can keep its behaviour and layout while looking appropriate to the brand using it. I personally build and maintain the system every day.

04 / Foundations

A dependable starting point for every page.

The style guide records Satoshi typography, colour treatments, radius, shadows, logos and UI elements. These rules make design decisions discoverable rather than requiring each new page to recreate them. A change to a common pattern can be considered at system level, while individual pages can still adapt to company information, product features and technical documentation.

05 / Icon library

62 icons. Five colour variants each.

I designed and maintain 62 reusable icons, each available in white, pink, orange, blue and teal, creating 310 variants. The variants help designers select the correct treatment without overriding strokes manually. The set covers content and interface needs across the website portfolio, and the entire library is organised for reuse rather than kept as disconnected artwork.

06 / Interaction states

Components need to work beyond the default.

The documented button system evolved from 24 to 36 variants, adding light-background outline and ghost treatments while refining hover, pressed, focus, disabled and loading states. The forms library includes five control families and 26 documented state variants across inputs, textareas, selects, checkboxes and radio buttons, alongside an enquiry form. These details make recurring interactions easier to design consistently.

07 / Component library

From buttons to complete content sections.

The library includes navbars, footers, headers, feature sections, product grids, cards, CTAs, careers modules and FAQs. A component directory helps locate the right original master, with its variants and nested connections intact. I own the ongoing expansion, refinements and maintenance of the library. On the current website-design page, I verified 1,288 component instances; this counts instances, not unique master components.

08 / Designing pages

Different content needs. Shared foundations.

The Figma redesign spans company pages and different product families. An About page needs to introduce the business and its credibility; the D90 ingredient page needs clear specification rows, technical documentation and supporting information. Shared navigation, layout rules and interface patterns support both without forcing their content into one template. Desktop layouts are being prepared for the broader redesign.

09 / Implementation

Reuse has to survive the handoff to WordPress.

I tested the newer workflow by designing and building the homepage and About page with Figma and Elementor. The purpose was to avoid recreating approved design patterns manually in an older builder and give the team a more maintainable editing experience. Elementor with the Hello theme is the direction for the wider modernisation programme, which is still in progress rather than completed across all brands.

10 / Impact & evolution

From five working days to two.

An earlier page took me about five working days to design and build. With the shared components in Figma and the templates in Elementor, I designed and built a comparable page in two.

On 13 November 2026, I documented the first three versions of the system: the original component set in 1.0, more form controls in 1.1, and refined button states in 1.2. I keep updating the library as I work on the brand websites.