Liferay Lexicon Design System

# Lexicon — Design Style Reference

```yaml
# How this file was made. Sources are first-party; nothing here is
# read from a rendered page. Full breakdown at source_page below.
method: restated-from-official-docs
confidence: high
verified_at: 2026-09-25
source_page: https://www.designsystems.one/design-systems/liferay-lexicon
sources:
  - https://design.liferay.com/lexicon
  - https://design.liferay.com/lexicon/foundations/color/
  - https://design.liferay.com/lexicon/foundations/typography/
  - https://design.liferay.com/lexicon/foundations/grid/
  - https://github.com/liferay/clay/blob/dcd0c8ba90656579fb614782785da1bbc1e5ddb5/packages/clay-css/src/scss/atlas/variables/_globals.scss
  - https://github.com/liferay/clay
```

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Liferay. "Lexicon" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Lexicon
**Owner:** Liferay
**Official documentation:** https://design.liferay.com/lexicon
**Visual character:** Portal-platform practicality: a single working blue, Bootstrap-adjacent bones via Clay, and patterns for content-heavy enterprise sites.

---

## Summary

Liferay's design language for digital experience platforms.

_Editorial confidence: high. Values are drawn from well-documented public token references. Colours, type and spacing from the Lexicon docs (checked 2026-09-28); the docs give line heights as ratios (1.25 headings, 1.5 body) and a base 8px grid with a 4px sub-unit. Radius from Clay's Atlas theme, Lexicon's implementation ($border-radius 0.5rem; cards $border-radius-xl 1rem). No shadow is published: Clay's cards carry none at rest. Field-level evidence: 0/68 claims source-linked, 0/68 dated. Confidence is not verification; validate canonical values before implementation._

[Inspect every field and its evidence](https://www.designsystems.one/api/style-spec?system=liferay-lexicon)

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Primary | `#0b5fff` | `--primary` | Main action and links |
| Dark | `#272833` | `--dark` | Primary text |
| Secondary | `#6b6c7e` | `--secondary` | Secondary texts |
| White | `#ffffff` | `--white` | Surfaces |
| Light Default | `#f1f2f5` | `--light-default` | Main background of the application, input backgrounds |
| Light L1 | `#f7f8f9` | `--light-l1` | Hover state for the secondary button |
| Secondary L3 | `#e7e7ed` | `--secondary-l3` | Disabled background and dividers |
| Error | `#da1414` | `--error` | Errors |
| Success | `#287d3c` | `--success` | Success |
| Warning | `#b95000` | `--warning` | Warnings |

## Typography

- **Body:** Native font stack — weights 400, 600, 700 — `system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| detail-title | `36px` | `1.25` |
| entry-title | `28px` | `1.25` |
| asset-title | `24px` | `1.25` |
| form-title | `20px` | `1.25` |
| page-title | `16px` | `1.25` |
| body | `16px` | `1.5` |
| section-divider | `14px` | `1.25` |

## Spacing

Base unit: `8px`

Scale: `4px` · `8px` · `16px` · `24px` · `32px` · `40px` · `48px`

## Corner radius

| Name | Value |
| --- | --- |
| default | `8px` |
| card | `16px` |

## Quick start (CSS)

```css
/* Lexicon — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Native dp/sp values are omitted, never silently converted.
   Official reference: https://design.liferay.com/lexicon
   Reference scope: Colours, type and spacing from the Lexicon docs (checked 2026-09-28); the docs give line heights as ratios (1.25 headings, 1.5 body) and a base 8px grid with a 4px sub-unit. Radius from Clay's Atlas theme, Lexicon's implementation ($border-radius 0.5rem; cards $border-radius-xl 1rem). No shadow is published: Clay's cards carry none at rest.
   Field evidence: https://www.designsystems.one/api/style-spec?system=liferay-lexicon */

:root {
  /* Color */
  --primary: #0b5fff; /* Main action and links */
  --dark: #272833; /* Primary text */
  --secondary: #6b6c7e; /* Secondary texts */
  --white: #ffffff; /* Surfaces */
  --light-default: #f1f2f5; /* Main background of the application, input backgrounds */
  --light-l1: #f7f8f9; /* Hover state for the secondary button */
  --secondary-l3: #e7e7ed; /* Disabled background and dividers */
  --error: #da1414; /* Errors */
  --success: #287d3c; /* Success */
  --warning: #b95000; /* Warnings */

  /* Typography */
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;

  /* Type scale */
  --text-detail-title: 36px; /* line-height 1.25 */
  --text-entry-title: 28px; /* line-height 1.25 */
  --text-asset-title: 24px; /* line-height 1.25 */
  --text-form-title: 20px; /* line-height 1.25 */
  --text-page-title: 16px; /* line-height 1.25 */
  --text-body: 16px; /* line-height 1.5 */
  --text-section-divider: 14px; /* line-height 1.25 */

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 40px;
  --space-7: 48px;

  /* Radius */
  --radius-default: 8px;
  --radius-card: 16px;
}
```

## Engineering profile

- **Ships for:** React, CSS-only
- **Token pipeline:** Custom
- **Source model:** Open source

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Lexicon by Liferay — Liferay's design language for digital experience platforms. Character: Portal-platform practicality: a single working blue, Bootstrap-adjacent bones via Clay, and patterns for content-heavy enterprise sites. Use a primary colour near #0b5fff, the typeface "Native font stack" (or a close equivalent), corner radius around 8px, a spacing rhythm on a 8px base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Lexicon documentation](https://design.liferay.com/lexicon)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/liferay-lexicon) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._