Designing Preologi’s system and fast-tracking the handoff.

Preologi needed a theme. The usual route runs long: design a prototype, revise it in Figma, hand it over, and let the developers hit the layout pitfalls nobody saw in static screens, which sends the design back for another round.

So the brief became: skip the chain. Deliver the design system and the implementation in one pass, so the dev team inherited a working foundation instead of a design to re-interpret.

Engaged through a digital agency managing the project, I designed and built the entire system myself, starting from the brand’s existing landing-page assets. Token-first: colours, type, spacing, and radii defined once as CSS custom properties, so the whole theme can be re-skinned without touching a component. No build step, and portable straight into WordPress.

Around fifty documented patterns across twenty-six sections, with accessibility built in from the start: landmark roles, labelled controls, and full focus, error, and disabled states on every interactive component.

Two weeks, one system: thirty tokens, fifty patterns, ten page templates, plus a handover session so the development house could run with it immediately. The developers inherited a foundation that was already built, already responsive, and already themeable.