Lexicon

# Lexicon — Design Style Reference

> **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://liferay.design/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.

_Confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Primary Blue | `#0b5fff` | `--lexicon-primary` | Primary actions (Clay) |
| Text | `#272833` | `--lexicon-text` | Primary text |
| Secondary Text | `#6b6c7e` | `--lexicon-text-secondary` | Secondary text |
| White | `#ffffff` | `--lexicon-white` | Surfaces |
| Light Background | `#f7f8f9` | `--lexicon-light` | App background |
| Border | `#e7e7ed` | `--lexicon-border` | Borders |
| Danger | `#da1414` | `--lexicon-danger` | Errors |
| Success | `#287d3c` | `--lexicon-success` | Success |
| Warning | `#b95000` | `--lexicon-warning` | Warnings |

## Typography

- **Body:** System stack — weights 400, 600, 700 — `system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| h1 | `32px` | `38px` |
| h2 | `24px` | `29px` |
| h3 | `20px` | `24px` |
| body | `16px` | `24px` |
| small | `14px` | `21px` |

## Spacing

Base unit: `4px`

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

## Corner radius

| Name | Value |
| --- | --- |
| default | `4px` |
| large | `8px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| card | `0 1px 4px rgba(39,40,51,0.12)` |

## Quick start (CSS)

```css
/* Lexicon — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://liferay.design/lexicon/ */

:root {
  /* Color */
  --lexicon-primary: #0b5fff; /* Primary actions (Clay) */
  --lexicon-text: #272833; /* Primary text */
  --lexicon-text-secondary: #6b6c7e; /* Secondary text */
  --lexicon-white: #ffffff; /* Surfaces */
  --lexicon-light: #f7f8f9; /* App background */
  --lexicon-border: #e7e7ed; /* Borders */
  --lexicon-danger: #da1414; /* Errors */
  --lexicon-success: #287d3c; /* Success */
  --lexicon-warning: #b95000; /* Warnings */

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

  /* Type scale */
  --text-h1: 32px /* line-height 38px */;
  --text-h2: 24px /* line-height 29px */;
  --text-h3: 20px /* line-height 24px */;
  --text-body: 16px /* line-height 24px */;
  --text-small: 14px /* line-height 21px */;

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

  /* Radius */
  --radius-default: 4px;
  --radius-large: 8px;

  /* Elevation */
  --shadow-card: 0 1px 4px rgba(39,40,51,0.12);
}
```

## 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 "System stack" (or a close equivalent), corner radius around 4px, a spacing rhythm on a 4px base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Lexicon documentation](https://liferay.design/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._