Project Overview

Building a Branded, Scalable Liferay Theme from Scratch

The client had been using a default Liferay out-of-the-box theme that no longer matched their corporate brand identity. As the portal had grown to support hundreds of internal users across multiple departments, the visual inconsistency and poor user experience had become a real operational issue. They needed a fully custom theme, a shared component library, and a responsive layout system that their internal team could maintain and extend without deep Liferay expertise.

We started with a full audit of the existing portal pages, widget zones, and navigation structures. We then designed and built a complete Freemarker-based theme with a Clay UI component library and a SCSS design token system — meaning colours, typography, spacing, and brand elements can all be updated from a single source file without touching template code. The result was delivered in 5 weeks with full technical documentation and a handover session for the client's internal team.

The Challenge

The client's existing Liferay theme was built on deprecated APIs and broke partially on every DXP update. Page layouts were inconsistent across departments, the mobile experience was unusable, and the internal IT team had no Liferay theming expertise to maintain or fix it. Any change required calling an external consultant.

Our Solution

We rebuilt the entire theme from scratch using modern Freemarker templates and Clay UI components — Liferay's official design system. We implemented a SCSS design token architecture so that all brand variables (colours, fonts, spacing) are defined once and propagate across all components automatically. We also delivered a component library of 20+ reusable Clay widgets covering all portal layout scenarios.

The Result

Delivered a fully branded, fully responsive Liferay theme with 20+ reusable UI components in 5 weeks. Portal page load time reduced by 40% thanks to optimised asset bundling. The client's internal team can now apply brand updates and add new pages independently — no external consultant needed.