# Mattel

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

## Identity

**Tagline:** We empower the next generation to explore the wonder of childhood and reach their full potential. Check out our top toys from Barbie, Hot Wheels, Fisher Pric…

**Sector:** toys

**Domain:** mattel.com


We empower the next generation to explore the wonder of childhood and reach their full potential. Check out our top toys from Barbie, Hot Wheels, Fisher Price and more on Mattel.com!

## Colors

| Role | Name | Hex | Dark | Usage |
| --- | --- | --- | --- | --- |
| `primary` | Black | `#000000` | — | Primary brand color: CTAs, links, active states. |
| `secondary` | Apple Cherry | `#ee0024` | — | Secondary brand color. |
| `accent` | Sky Blue | `#6ad1e2` | — | 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 `#faeff1`, 100 `#f4d7dc`, 200 `#ffa3b1`, 300 `#ff6b81`, 400 `#ff3856`, 500 `#ff0a2f`, 600 `#ee0024`, 700 `#b8001c`, 800 `#8f0015`, 900 `#5e0815`, 950 `#3d050d`
- **accent:** 50 `#f1f7f9`, 100 `#dcecef`, 200 `#b2e7f0`, 300 `#84d8e7`, 400 `#6ad1e2`, 500 `#33bed7`, 600 `#25a5bb`, 700 `#1e8799`, 800 `#186977`, 900 `#164750`, 950 `#0e2e34`
- **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

#### Work Sans `work-sans`
- **Source:** google
- **Weights:** 300 Light, 400 Regular, 500 Medium, 600 Semibold, 700 Bold, 800 Extrabold
- **Fallback stack:** `"Work Sans", Arial, sans-serif`

### Role assignments

- **heading:** Work Sans (`work-sans`)
- **body:** Work Sans (`work-sans`)

### 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%, #ee0024 100%)` — worst-case contrast white 4.51:1 AA, black 1.00:1
- **--brand-gradient-hero:** `linear-gradient(135deg in oklab, #000000 0%, #a4625c 100%)` — ink #ffffff; worst-case contrast white 4.69: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%)`

## 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/mattel-com/tokens.json
- Tokens (CSS): /b/mattel-com/brand.css
- This document: /b/mattel-com/brand.md
- MCP endpoint (public read): mcp.brandsweets.com/mattel-com/mcp
- Agent integration guide: /agents.md