---
title: "OLAPLEX design system"
variant: extended
source: https://olaplex.com/
captured_at: 2026-10-12
theme: light
industry: beauty
generator: Design DNA (https://four.wiralomi.com/style/olaplex-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# OLAPLEX · Design System

> Clinical minimalism, warmed by vivid product storytelling.

**Theme:** light · **Industry:** beauty · **Source:** https://olaplex.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

OLAPLEX pairs a restrained black-and-white storefront with immersive red campaign imagery and highly visible product photography. Bold typography, pill-shaped commerce controls, and varied editorial modules balance premium brand storytelling with direct shopping paths.

## North star

Keep the interface monochrome and disciplined, letting rich red campaign photography—not extra UI colour—supply the drama.

## Overview

The homepage uses a white canvas and black interface chrome as a quiet frame for image-led campaigns. Deep reds dominate seasonal hero and promotional photography, but they belong to campaign imagery rather than the measured interface palette; keep those distinctions clear. ABC Diatype supplies compact, confident headings and readable body copy, while ABC Diatype Semi-Mono gives navigation, labels, and buttons an uppercase, technical character. A full-width hero gives its headline and CTA room against product imagery, followed by clean product rows, editorial stories, quiz content, and social proof. Alternating image-led compositions keep the long page varied without adding decorative clutter. Product cards use warm off-white surfaces; thin borders and pill outlines define controls. Generous section separation, simple alignment, and restrained elevation preserve a polished, clinical beauty-store feel.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Carbon Ink | `#000000` | `--color-carbon-ink` | brand | Primary text, navigation, inverse surfaces, and filled utility controls. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Page canvas, light section backgrounds, and text on dark surfaces. |
| Warm Porcelain | `#f6f4f2` | `--color-warm-porcelain` | surface | Soft warm product-card surface, distinct from the white page canvas. |
| Brand Crimson | `#d91920` | `--color-brand-crimson` | brand | Measured brand red, appearing chiefly in borders and select section or navigation accents. |
| Soft Charcoal | `#222222` | `--color-soft-charcoal` | neutral | Secondary product titles and subdued headings. |
| Graphite Text | `#454545` | `--color-graphite-text` | neutral | Muted supporting copy; avoid elevating it above primary black text. |
| Quiet Gray | `#989898` | `--color-quiet-gray` | semantic | Sparse muted border and footer detail. |
| Cool Mist | `#f4f8fe` | `--color-cool-mist` | surface | Rare pale background trace; not a defining brand colour. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f6f4f2` (Warm Porcelain) · `--color-surface-2` → `#000000` (Carbon Ink) · `--color-text` → `#000000` (Carbon Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#222222` (Soft Charcoal) · `--color-border` → `#d91920` (Brand Crimson)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f6f4f2` | 19.14:1 | AAA |
| `#ffffff` | `#f6f4f2` | 1.1:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#222222` | `#ffffff` | 15.91:1 | AAA |
| `#222222` | `#f6f4f2` | 14.5:1 | AAA |
| `#222222` | `#000000` | 1.32:1 | fail |

### Gradients

- `linear-gradient(to top, rgba(0, 0, 0, 0), rgb(0, 0, 0))`
- `linear-gradient(45deg, rgb(199, 36, 34) 30%, rgb(133, 19, 19) 40%, rgb(218, 70, 68) 50%, rgb(255, 171, 171) 60%, rgb(189, 23, 21) 70%, rgb(153, 29, 29) 80%, rgb(69, 0, 2) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ABC Diatype | `--font-body` | webfont | 400, 800, 700 | Display, headings, and body copy | Inter |
| ABC Diatype Semi-Mono | `--font-mono` | webfont | 700, 500, 400 | Navigation, buttons, captions, and editorial labels | Roboto Mono |
| ui-sans-serif | `--font-ui-sans-serif` | system | 400 | Fallback and some product-card text | Inter |

- **ABC Diatype:** Heavy display and headings with tight tracking; body remains regular, compact, and sentence case.
- **ABC Diatype Semi-Mono:** Use bold uppercase microcopy for controls and labels; lightly tracked uppercase for links and eyebrows.
- **ui-sans-serif:** System sans-serif fallback; keep product names clean, neutral, and readable.

### Type scale — Perfect Fourth (ratio ≈ 1.337, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 800 | 1 | -0.02em | — | ABC Diatype | Large campaign headlines over full-bleed hero imagery. |
| h1 | 48px | 800 | 1.1 | -0.03em | — | ABC Diatype | Primary page or feature headings. |
| h2 | 32px | 800 | 1.1 | 0 | — | ABC Diatype | Section titles such as product and editorial headings. |
| h3 | 28px | 800 | 1.1 | 0 | — | ABC Diatype | Secondary feature and module headings. |
| h4 | 20px | 800 | 1.1 | 0 | — | ABC Diatype | Compact tertiary headings and product content. |
| body | 15px | 400 | 1.4 | 0 | — | ABC Diatype | Descriptions, promotional copy, and supporting paragraphs. |
| caption | 12px | 700 | 1 | 0 | uppercase | ABC Diatype Semi-Mono | Uppercase dates and small editorial labels. |
| button | 12px | 700 | 1 | 0 | uppercase | ABC Diatype Semi-Mono | Uppercase shopping and navigation actions. |
| nav | 12px | 700 | 1 | 0 | uppercase | ABC Diatype Semi-Mono | Compact uppercase global navigation labels. |
| link | 14px | 500 | 1.2 | 0.03em | uppercase | ABC Diatype Semi-Mono | Uppercase, lightly tracked prominent text links. |
| eyebrow | 14px | 500 | 1.2 | 0.03em | uppercase | ABC Diatype Semi-Mono | Uppercase category and promotion preheads. |
| code | 12px | 700 | 1 | 0 | uppercase | ABC Diatype Semi-Mono | Compact uppercase utility or informational microcopy. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 2, 3, 4, 5, 7, 8, 10, 12, 16, 20, 30 px.
- Section rhythm 50px · element gap 8px · card padding — · max content width 1380px.

The page alternates full-width campaign panels with contained shopping and editorial modules. The measured maximum content width is 1380px; use broad image fields, clear horizontal alignment, and product carousels or grids where shopping intent is high. Sections are comfortably spaced, while card content stays compact. The long scroll varies between split features, multi-column product areas, blog cards, quiz content, and a dense footer. Preserve a strong headline-to-image relationship, with left-aligned text common across modules.

## Shape & elevation

- Radius: button `9999px` · card `4px` · media `50%` · badge `9999px` · link `9999px` · xs `4px` · pill `9999px`
- Shadow `md` (card): `rgba(31, 33, 36, 0.1) 0px 2px 4px 0px, rgba(31, 33, 36, 0.05) 0px 1px 6px 0px`
- Shadow `hairline` (other): `rgb(234, 234, 234) 0px 2px 2px -1px`
- Motion: standard transition `0.1s ease` on interactive elements.

Most sections and cards feel flat, with contrast, imagery, and white space doing the organizing. Use fine outlines on pill controls and subtle separators rather than heavy containers. Product cards may use a restrained soft shadow, but do not create a floating-card-heavy interface. Layer text directly over hero photography only where contrast is clear.

## Imagery

Use polished product photography, full-bleed campaign sets, lifestyle portraits, and real customer or ambassador imagery. Hero and promotional visuals use saturated reds, while product photography also sits against pale neutral backgrounds. Frame products clearly and let image crops carry much of the visual mood. Include video or social content where appropriate; avoid decorative illustration as the primary storytelling device.

## Components

### Announcement strip

Narrow black top band with small light promotional copy and a direct offer or code link.

### Pill CTA

Small uppercase semi-mono label inside a rounded outline; use black text and border on light backgrounds, or reverse for dark imagery.

### Product card

Pale warm surface with prominent product image, compact title, review or price details, savings label, and outlined ADD control.

### Product carousel

Horizontally browsable product lineup with concise previous/next or swipe affordances and strong image emphasis.

### Editorial feature

Large photography paired with a short title, date or eyebrow, brief copy, and simple read-more action.

### Newsletter form

Dark footer signup area with contrasting heading, rounded outlined fields, and compact uppercase submit actions.

### Measured component styles

- **Primary button** (“PRO SITE”): background #000000 · text #ffffff · radius 60px · padding 8px 12px · 700 12px ABC Diatype Semi-Mono · uppercase
- **Secondary button** (“ADD”): transparent background · text #000000 · border 1px solid #000000 · radius 9999px · padding 0px 16px · 700 12px ABC Diatype Semi-Mono · uppercase
- **Link** (“32% Savings”): background #ffffff · text #000000 · radius 60px · padding 2px 12px · 400 12px ABC Diatype
- **Input** (“United States (English) Canada (English)”): transparent background · text #ffffff · radius 0px · padding 0px 12px 0px 0px · 400 12px ABC Diatype
- **Card** (“32% Savings TOTAL HAIR REPAIR SET 4.6 (1”): background #f6f4f2 · text #000000 · radius 0px · padding 0px · 400 16px ui-sans-serif
- **Badge** (“VALUE SETS”): transparent background · text #ffffff · border 1px solid #ffffff · radius 60px · padding 16px · 700 12px ABC Diatype Semi-Mono · uppercase
- **Navigation item** (“Update country/region United States (Eng”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px ui-sans-serif

## Do

- Use white as the default canvas and black for essential interface contrast.
- Let campaign photography carry rich reds instead of tinting the whole interface.
- Set headings in a bold, tight sans-serif voice.
- Use semi-mono uppercase styling for navigation, actions, and small labels.
- Keep shopping controls compact, outlined, and pill-shaped.
- Alternate editorial imagery and practical product modules down the page.

## Don't

- Do not introduce unmeasured colours as core interface tokens.
- Do not turn every section into a bordered card.
- Do not rely on shadows for hierarchy.
- Do not make small labels sentence case when they function as controls.
- Do not let body copy compete with imagery or headings.
- Do not confuse red tones inside campaign images with the measured UI palette.

## Agent prompt

Build a new OLAPLEX-style beauty commerce page with a white Gallery White (#ffffff) canvas and Carbon Ink (#000000) typography and controls. Use Warm Porcelain (#f6f4f2) sparingly for product surfaces; reserve Brand Crimson (#d91920) for measured accent details, and let red campaign imagery provide the dramatic colour. Use a bold, tightly tracked sans-serif for headings and a semi-mono uppercase face for navigation, eyebrows, and CTAs. Structure the page as a long editorial storefront: broad image-led campaign areas, clear product grids or carousels, split feature modules, and concise content cards. Keep controls pill-shaped and restrained, product details compact, and spacing generous between major sections. Prefer flat surfaces and thin outlines; use shadows only lightly. Make shopping actions easy to find without adding decorative UI clutter.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width campaign hero with left-aligned copy over product-led imagery. | Direct shop CTA, Savings message | Full-bleed red campaign image, Large white headline, Outlined pill CTA |
| 2 | product-grid | Contained, multi-column product carousel beneath a section heading. | Swipe or carousel browsing, Quick add | Product photography, Savings labels, Compact product details |
| 3 | feature-grid | Compact quiz module with text and selection options in a split grid. | Hair-texture selection, Guided routine quiz | Short section heading, Choice controls, Start CTA |
| 4 | feature-split | Two side-by-side promotional image-and-copy panels. | Separate promotion paths, Shop now links | Campaign imagery, Small uppercase eyebrows, Overlay copy |
| 5 | gallery | Wide, horizontally arranged social-shopping gallery below a section title. | Shop the look, Browse lifestyle posts | Portrait imagery, Overlay pill actions, Carousel controls |
| 6 | category-nav | Large image tiles in a horizontal category grid. | Shop by category, Shop-all shortcut | Category photography, Pill labels |
| 7 | content-feed | Editorial feed with two broad image-and-copy columns. | Read more links, Dated articles | Large story images, Compact uppercase dates, Fine separators |
| 8 | how-it-works | Prominent gift-finder area with product imagery and a multi-step form. | Step-by-step selection, Next action | Campaign backdrop, Option controls, Progress cue |
| 9 | video | Split video-and-copy feature with supporting benefit list. | Play or explore video, Learn more | Large video frame, Text panel, Compact benefit list |
| 10 | testimonials | Introductory text paired with a row of ambassador portraits. | Browse ambassadors, Brand credibility | Portrait tiles, Small name labels, Editorial split |
| 11 | feature-grid | Three-column strip of short shopping benefits. | Highlight store benefits, Quick scan | Small icons, Concise labels, Light neutral band |
| 12 | newsletter | Dark signup block with brand mark and form fields. | Email signup, SMS signup | Black background, White typography, Outlined rounded fields |
| 13 | footer | Dark multi-column link directory followed by a legal and region bar. | Grouped navigation, Country and legal links | Uppercase column headings, Dense small links, Thin dividers |

## Source CSS custom properties (selected)

```css
--font-family-primary: 'ABC Diatype';
--font-family-secondary: 'ABC Diatype Semi-Mono';
--rc-color: #040404;
--rc-active-bg: #efefef;
--rc-active-color: #000000;
--kl-reviews-color-light-gray: #e9e9eb;
--lcu-border: 1px solid #E5E7EB;
--lcu-text-pale: #6b6b6b;
--lcu-text-dark: #454545;
--lcu-color-success: #007f5f;
--lcu-color-error: #cf5c5c;
--lcu-text-pitch-black: #2e2e2e;
--lcu-background: #000;
--lcu-border-radius: 6px;
--lcu--border-color: #c9cccf;
--lcu--title-font-weight: 500;
--lcu--font-size--primary: 15px;
--lcu--font-size--secondary: 14px;
--lcu--drawer-title-font-size: 24px;
--lcu--font-size--xs: 12px;
--lcu--font-size--lg: 20px;
--lcu--font-size--xl: 24px;
--lcu--sc-font-size--coef: 1;
--lcu--font-family: inherit;
--color-brand-01: #d91920;
--aa-spacing-factor: 1;
--aa-spacing: calc(16*1*1px);
--aa-spacing-half: calc(calc(16*1*1px)/2);
--aa-font-size: calc(16*1px);
--aa-font-family: inherit;
--aa-font-weight-medium: 500;
--aa-font-weight-semibold: 600;
--aa-font-weight-bold: 700;
--aa-icon-color-rgb: 119,119,163;
--aa-icon-color-alpha: 1;
--aa-text-color-rgb: 112,112,112;
--aa-text-color-alpha: 1;
--aa-primary-color-rgb: 0,0,0;
--aa-primary-color-alpha: 0.2;
--aa-muted-color-rgb: 115,111,178;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/olaplex-com