What is Liferay’s Tokenized Design System?

At its core, Liferay’s tokenized design system is a powerful mechanism for centralizing and standardizing your design choices. It relies on design tokens — reusable variables that define key visual properties such as color, typography, spacing, and layout.

Rather than applying styles individually to each component or template, you manage your entire visual system through a stylebook. This allows global updates to be made in seconds. For example, changing your brand’s primary color in the stylebook will automatically update all buttons, links, and accent elements across your site.

This approach ensures not just consistency, but also scalability — critical for teams managing multisite platforms or evolving design requirements.

How It Works

Traditionally, updating website styles meant digging through CSS files or adjusting templates one by one. Liferay’s tokenized design system replaces that manual process with a structured, UI-driven model:

Color Management: Set primary, secondary, and accent colors once. These tokens cascade across all relevant components automatically.
Typography: Define fonts, sizes, weights, and spacing for headers and body text. Adjustments are reflected consistently throughout the UI.
Spacing & Layout: Margins, paddings, and grid behavior can be standardized via spacing tokens, promoting visual harmony across pages.
Live Preview: Use the built-in live preview to validate design updates in real-time before publishing them.

Extend, Export & Reuse Stylebooks

Liferay comes with a default stylebook, but you're not limited to it. You can:

Create custom stylebooks tailored to your brand(s)
Inherit from and extend the default stylebook, modifying only what’s needed
Export stylebooks as JSON for reuse across environments or projects

// Example: Exported stylebook JSON snippet
{
  "frontendTokenDefinition": {
    "color": {
      "brand-primary": "#0050b3",
      "brand-secondary": "#e0e0e0"
    },
    "typography": {
      "font-family-base": "'Open Sans', sans-serif",
      "font-size-base": "16px"
    }
  }
}

This exported structure can be version-controlled or shared across teams to ensure brand consistency across all deployments.

Using Tokens in Custom Blocks or Components

One of the most powerful aspects of Liferay's tokenized system is that tokens aren’t limited to out-of-the-box components. You can also use them in your custom-developed fragments or frontend modules.

Tokens are injected into your custom code as CSS variables. Here’s an example:

/* custom-component.css */
.my-component {
  background-color: var(--brand-primary);
  color: var(--color-light);
  padding: var(--spacer-2);
  font-family: var(--font-family-base);
}

--brand-primary refers to the primary color token
--spacer-2 is a spacing token
--font-family-base is the base font token

Liferay resolves these tokens automatically based on the selected stylebook, ensuring your custom components stay in sync with your visual design system.

Key Benefits

No Custom Code Required (unless you want to)
Design tokens can be applied through the UI or used programmatically — giving both non-developers and developers the flexibility they need.
Consistent, Instant Updates
Changes made in the stylebook propagate across the entire site instantly. No more patching pages or fixing inconsistencies manually.
Built for Multisite Scale
Whether you’re managing microsites, intranets, or region-specific portals, Liferay’s token-based styling ensures your brand identity stays aligned — all while reducing overhead and deployment time.

Part of a Broader Design System

Liferay’s tokenized approach works hand-in-hand with Lexicon, Liferay’s design language. Lexicon provides a consistent set of UI patterns and components that respect your stylebook tokens, further reinforcing design consistency across applications.