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

Last modified on 2020.08.01
Edit on Github