# L'Oréal

> Generated by BrandSweets from the loreal-com BrandDoc (v5, schema 1). Do not edit by hand.

## Identity

**Tagline:** Offering all women and men worldwide the best of cosmetics, haircare and perfume in terms of quality, efficacy and safety. Discover our brands and values.To …

**Sector:** beauty

**Domain:** loreal.com

**Guidelines:** https://www.loreal.com/en/our-global-brands-portfolio/


Offering all women and men worldwide the best of cosmetics, haircare and perfume in terms of quality, efficacy and safety. Discover our brands and values.To be the most innovative and caring company

## Colors

| Role | Name | Hex | Dark | Usage |
| --- | --- | --- | --- | --- |
| `primary` | Black | `#000000` | — | L'Oréal runs a monochrome identity: the wordmark is black (or reversed to white); the extractor's mid-grey was a text colour, not a brand colour. Source: L'Oréal's own site: black wordmark, no chromatic brand colour. |
| `secondary` | Red | `#ff0000` | — | Secondary brand color. |
| `accent` | Denim | `#3860be` | — | Accent: highlights and secondary emphasis. |
| `surface` | White | `#ffffff` | — | Page and card background. |
| `text` | Black | `#000000` | — | Body text on surface. |

### Scales

- **primary:** 50 `#f5f5f5`, 100 `#e6e6e6`, 200 `#d1d1d1`, 300 `#b5b5b5`, 400 `#9c9c9c`, 500 `#858585`, 600 `#707070`, 700 `#5c5c5c`, 800 `#474747`, 900 `#333333`, 950 `#000000`
- **secondary:** 50 `#faefef`, 100 `#f4d7d7`, 200 `#ffa3a3`, 300 `#ff6b6b`, 400 `#ff3838`, 500 `#ff0000`, 600 `#e00000`, 700 `#b80000`, 800 `#8f0000`, 900 `#5e0808`, 950 `#3d0505`
- **accent:** 50 `#f2f4f8`, 100 `#dee2ed`, 200 `#b8c7ea`, 300 `#8da5dd`, 400 `#6686d1`, 500 `#3860be`, 600 `#3458ad`, 700 `#2a488d`, 800 `#21386e`, 900 `#1c2a4a`, 950 `#121b30`
- **surface:** 50 `#ffffff`, 100 `#e6e6e6`, 200 `#d1d1d1`, 300 `#b5b5b5`, 400 `#9c9c9c`, 500 `#858585`, 600 `#707070`, 700 `#5c5c5c`, 800 `#474747`, 900 `#333333`, 950 `#212121`
- **text:** 50 `#f5f5f5`, 100 `#e6e6e6`, 200 `#d1d1d1`, 300 `#b5b5b5`, 400 `#9c9c9c`, 500 `#858585`, 600 `#707070`, 700 `#5c5c5c`, 800 `#474747`, 900 `#333333`, 950 `#000000`

## Typography

### Families

#### Halesworth `halesworth`
- **Source:** custom
- **Weights:** 400 Regular, 600 Semibold, 700 Bold
- **Fallback stack:** `Halesworth, "Times New Roman", Times, serif`
- **Licensing:** Auto-detected web font; provenance unconfirmed. Reference only — never rehost without a license.

#### HelveticaNowDisplay `helveticanowdisplay`
- **Source:** custom
- **Weights:** 300 Light, 700 Bold
- **Fallback stack:** `HelveticaNowDisplay, Arial, Helvetica, sans-serif`
- **Licensing:** Auto-detected web font; provenance unconfirmed. Reference only — never rehost without a license.

### Role assignments

- **heading:** Halesworth (`halesworth`)
- **body:** HelveticaNowDisplay (`helveticanowdisplay`)

### Scale

| Step | Size (rem) | Line height | Tracking (em) |
| --- | --- | --- | --- |
| sm | 0.875 | 1.5 | — |
| base | 1 | 1.6 | — |
| lg | 1.25 | 1.4 | — |
| xl | 1.75 | 1.25 | — |
| 2xl | 2.25 | 1.15 | — |
| display | 3.5 | 1.05 | -0.02 |

## Gradients

Derived from the colour roles (perceptual interpolation; same tokens in brand.css / tokens.json):

- **--brand-gradient:** `linear-gradient(135deg in oklab, #000000 0%, #ff0000 100%)` — worst-case contrast white 4.00:1 AA-large, black 1.00:1
- **--brand-gradient-hero:** `linear-gradient(135deg in oklab, #000000 0%, #a76157 100%)` — ink #ffffff; worst-case contrast white 4.68:1 AA, black 1.00:1
- **--brand-gradient-button:** `linear-gradient(180deg in oklch shorter hue, #090909 0%, #010101 100%)` — ink #ffffff; hover `linear-gradient(180deg in oklch shorter hue, #090909 0%, #010101 100%)`; active `linear-gradient(180deg in oklch shorter hue, #090909 0%, #010101 100%)`

## Logos

### primary
- **Formats:**
  - `svg` (137×36): https://iihdrqhzaupyssngtrja.supabase.co/storage/v1/object/public/brand-assets/workspaces/9fa09c23-9560-4b2e-87b6-eae0d28b47fe/brands/91d75db0-4051-440f-a10f-64c96c794373/logos/primary-7d3bcf8fdbcebc3d.svg
- **Clearspace:** 1× logo-height — Default clearspace of one logo-height on all sides (auto-seeded; refine after review).
- **Min size:** 24px w (screen)
- **Allowed backgrounds:** any
- **Notes:** Re-sourced 2026-09-02 from the brand's own site (inline-svg). Hosted by us. Selection: source=home-link-svg (100); vector SVG (+16); aspect 3.81 — wordmark shape (+14)

## Boards

- **Cover** — `cover` (`board-cover`)
- **Color System** — `color-system` (`board-colors`)
- **Type Specimen** — `type-specimen` (`board-type`)
- **Logo Suite** — `logo-suite` (`board-logos`)

## Resources

- Tokens (JSON): /b/loreal-com/tokens.json
- Tokens (CSS): /b/loreal-com/brand.css
- This document: /b/loreal-com/brand.md
- MCP endpoint (public read): mcp.brandsweets.com/loreal-com/mcp
- Agent integration guide: /agents.md