Understanding Design Systems

Design systems provide a source of truth for organizations to implement unified, user-friendly solutions. By combining style guides, pattern libraries, and reusable components, they empower teams to collaborate effectively, bridging the gap between designers and developers. To begin mastering Liferay design elements, you must first understand the key parts of design systems.

Design System Anatomy

At its core, a design system consists of four key elements that work together to streamline design workflows.

Style Guide

Style guides establish the visual identity of an organization. They specify branding essentials like colors, typography, spacing, grids, iconography, and more, all of which combine to create a consistent look and feel across all digital experiences.

Patterns Library

Patterns libraries outline an organization's preferred strategy for layouts, interaction, and accessibility. In addition to providing rules for structuring sites and pages, they define how your solution behaves and adapts to different user needs and characteristics.

Components Library

Components libraries compile reusable user interface elements, ranging from basic functionality like buttons and forms to more complex structures like modals, cards, and navigation menus. By making these components accessible and configurable, they streamline the development cycle and reduce the dependence on high technical expertise.

Code Libraries and Documentation

Code libraries and documentation provide implementation details for design system elements in the form of examples, code snippets, and best practices. These resources enable users to take ownership of the design system with a deep understanding of how it works under the hood.

With these categories in mind, the next section explores how Liferay's design system is set up.

Examining Liferay's Design System

Liferay's design system is built upon two technologies: Lexicon and Clay. Together, they lay the foundation for the suite of design elements you'll learn to use in this course.

Lexicon

Lexicon is a design language that provides both a style guide and a patterns library for building interfaces within the Liferay ecosystem. It adopts the Atomic Design Methodology, a modular, nonlinear approach to interface design in five stages: atoms, molecules, organisms, templates, and pages.

Lexicon captures Liferay's overall approach to design, along with recommended best practices. Explore the official Lexicon documentation to learn more.

Clay

Clay is Liferay's web implementation of Lexicon. It's built with Bootstrap, a frontend framework that uses a combination of HTML, CSS, and JavaScript. In addition to providing an extensive components library, Clay enables you to develop your own components following the common React pattern of composition. Similarly, the Clay CSS framework offers several utilities to help you create and configure your own style sheets.

Clay is the first-class resource for developers implementing user interfaces. Explore the official Clay documentation to learn more.

Design Elements in Liferay DXP

Liferay DXP provides a powerful suite of design elements with which you can leverage the functionality of Lexicon and Clay. While some of these elements require technical expertise in frontend development, others empower designers without that expertise to build, customize, and manager user experiences.

• Asset Libraries: Spaces for managing and organizing design assets.
• Fragments: Composable, reusable building blocks for pages.
• Templates: Predefined structures and layouts for pages and content.
• Themes: Visual blueprints for the look and feel of a site.
• Style Books: Design resources that customize styling rules.
• Client Extensions: Code deployments that configure and override themes and style books.
• Page Builder: Liferay's intuitive GUI for managing, structuring, and adding content to pages.
• Adaptive Media: produces copies of images at different resolutions for end user devices.

As you progress through the course, you'll learn about each of these elements and how to best apply them in your solutions.

Conclusion

Design systems accelerate workflows, ensure consistency, and improve collaboration. By leveraging predefined components, organizations eliminate redundant effort and deliver new features efficiently.

As Clarity scales, a robust design system becomes critical for maintaining its branding and visual identity. With Liferay's design framework, Clarity can establish a cohesive digital presence that evolves with the company.

Next, you'll explore general strategies for optimizing performance when working with Liferay's design system.