Liferay.Design / Handbook
Part of Liferay, IncCode/Content Licenses


Sign In

Lexicon is a central part of the product designers work. It’s our design language and system.

Design Language

Lexicon is a design language that provides a common framework for building interfaces within the Liferay product ecosystem. It is a guide to foundations, components, patterns, and use cases that provide consistency and coherence to these products, and, ultimately, provides a satisfactory and unified experience to its users. Lexicon is a living project, evolving and adapting over time to new and rising technologies to meet the needs of the people.

Modular Approach

Lexicon takes a modular approach to interface design. It is a cohesive system that's able to respond to the various needs of Liferay's products through a base set of components. It seeks to simplify processes, reduce production times, and above all, to provide a consistent user experience across the board. To achieve this goal, Lexicon uses Brad Frost's Atomic Design approach to interface design: A work methodology, based on modularity, that seeks to give a more hierarchical and organized structure to the creation of interface design systems. It's a nonlinear process, organized across five stages: Atoms, Molecules, Organisms, Templates, and Pages.


Lexicon is not an implementation. It is a set of patterns, rules, and behaviours that any library can implement. Liferay's Lexicon Experience Language web implementation is Clay.

Lexicon Workflows

How to contribute

Something to improve? Report an issue!