Lexicon Design System

Liferay Lexicon Design System: Clay UI Framework, Figma & Tokens

The Liferay Lexicon Design System is Liferay’s official Experience Language, providing a cohesive framework for building user interfaces across its entire product ecosystem, including Liferay DXP. Lexicon acts as the design specification, guiding product teams on foundations, components, and patterns. Specifically, it uses the Atomic Design methodology to ensure a highly modular and organized structure.

Liferay maintains a strict separation between the design specifications (Lexicon) and the front-end code implementation, which they call Clay UI. Consequently, Clay UI is Liferay’s web implementation of the Lexicon Experience Language. Built upon a Bootstrap foundation, Clay UI includes HTML, CSS, and JavaScript. This structure supports popular modern frameworks like React, Angular, and Vue.js, as well as Liferay’s native Java-based frameworks.

The Role of Lexicon Design Tokens and Theming

Lexicon centralizes design decisions using a robust system of design tokens. These reusable variables define core visual properties such as color, spacing, typography, and effects. This tokenized approach is fundamental to Lexicon’s theming capabilities.

Liferay uses tokens to power its Stylebooks feature within the DXP platform. Essentially, this system allows developers and non-developers alike to manage the entire visual system of a site through a UI-driven model, rather than custom CSS. For instance, changing the primary color token in a Stylebook instantly updates every component referencing that token across all pages and sites. Furthermore, you can extend the default Stylebook or export custom Stylebooks as JSON for portability.

The Official Lexicon Figma Library

For designers, the official Lexicon Figma library is the essential resource. Liferay recently rebuilt this library with a focus on efficiency, parity with the code, and modern Figma features. Therefore, the new modular structure groups elements into separate, easily navigable libraries:

• Lexicon Foundations: Contains essential design tokens like colors, typography, and spacing.
• Lexicon Icons: A comprehensive set of graphical symbols.
• Lexicon Components: Provides essential, ready-to-use components with updated features like interactive components and proper focus states for accessibility.

In conclusion, the Liferay Lexicon Design System provides a complete, token-driven solution. It ensures visual consistency and accessibility for all applications running on or interacting with the Liferay Digital Experience Platform.

Ready to build consistent, professional UIs? Explore the official Liferay Lexicon Design System documentation and access the Clay UI code and Figma resources.