---
version: alpha
name: "Lego"
description: "Lego's site is the unembarrassed primary-color toy theatre of the web. The canvas is white, headings sit in Lego Sans (the in-house custom rounded humanist sans, descended from VAG Rounded) at 32–56px, and the brand identity is the dual primary palette — Lego Yellow `#ffd500` and Lego Red `#d62027`, with secondary blue `#0055bf` and green `#179a35` reserved for product-line accents. Where Nintendo chose single Nintendo Red and white, Lego embraced the **full primary spectrum** — yellow, red, blue, green — the same palette Lego bricks have been molded in since 1958. Photography is brick-stacked product shots with primary-color backdrops, rarely abstract. Voice is enthusiastic-direct: \"Build something rare\", \"Find your build\". The whole brand reads as the **toy aisle of the web** at maximum saturation."
colors:
  bg: "#ffffff"
  bg-soft: "#f5f5f5"
  bg-warm: "#fffaf0"
  surface: "#ffffff"
  surface-soft: "#fafafa"
  surface-strong: "#f0f0f0"
  brand: "#ffd500"
  brand-hover: "#e6c000"
  brand-pressed: "#cca900"
  brand-deep: "#a89200"
  brand-tint: "#fff8d0"
  brand-soft: "#ffec8a"
  on-brand: "#1a1a1a"
  red: "#d62027"
  red-deep: "#a8161c"
  red-soft: "#ffd5d8"
  blue: "#0055bf"
  blue-deep: "#003e8e"
  blue-soft: "#cee0f5"
  green: "#179a35"
  green-deep: "#0c7826"
  green-soft: "#cdf0d4"
  text: "#1a1a1a"
  text-strong: "#000000"
  text-muted: "#5a5a5a"
  text-soft: "#8a8a8a"
  text-faint: "#bcbcbc"
  text-on-brand: "#1a1a1a"
  text-on-red: "#ffffff"
  text-on-blue: "#ffffff"
  text-on-green: "#ffffff"
  link: "#0055bf"
  link-hover: "#003e8e"
  selected-bg: "#fff8d0"
  border: "#e0e0e0"
  border-strong: "#cccccc"
  border-soft: "#f0f0f0"
  border-brand: "#ffd500"
  age-0plus: "#179a35"
  age-6plus: "#0055bf"
  age-12plus: "#d62027"
  age-adult: "#1a1a1a"
  success: "#179a35"
  warning: "#ffd500"
  danger: "#d62027"
  info: "#0055bf"
typography:
  display:
    fontFamily: "Lego Sans"
    fontSize: "56px"
    lineHeight: 1.5
    letterSpacing: "-0.018em"
  body:
    fontFamily: "Lego Sans"
    fontSize: "15px"
    lineHeight: 1.5
  mono:
    fontFamily: "SFMono-Regular"
rounded:
  button: "12px"
  card: "16px"
  pill: "9999px"
spacing:
  xs: "0px"
  sm: "4px"
  md: "12px"
  lg: "24px"
  xl: "40px"
---

## Overview

## Overview

Lego's site is the unembarrassed primary-color toy theatre of the web. The canvas is pure white, headings sit in Lego Sans (custom rounded humanist sans, VAG Rounded descendant) at 32–56px Bold, and the brand identity is the **dual primary palette** — Lego Yellow `#ffd500` and Lego Red `#d62027`, with secondary Blue `#0055bf` and Green `#179a35` reserved for product-line accents and age-rating badges.

Where Nintendo chose single Nintendo Red and Disney chose Disney Blue, Lego embraced the **full primary spectrum** — yellow, red, blue, green — the same palette Lego bricks have been molded in since 1958. Photography is brick-stacked product shots with primary-color backdrops, rarely abstract: real bricks, real builds, real plastic. Cards have 12-16px radius and gentle shadows.

Voice is enthusiastic-direct: "Build something rare", "Discover your next build". The whole brand reads as the **toy aisle of the web** at maximum saturation. Importantly, the primary CTA uses **yellow with dark text** (not white) — yellow `#ffd500` against white text fails AA contrast (~1.7:1), so the brand uses dark text on yellow (~13.4:1) and white text on red/blue/green when those are CTA bg.

**Key Characteristics:**
- White canvas + 4-color primary palette (yellow / red / blue / green)
- Lego Sans rounded humanist sans
- Pill-radius CTAs (9999px)
- 12-16px card radius
- **Dark text on yellow** (accessibility), white text on red/blue/green
- Age-rating badge color system (green = 0+, blue = 6+, red = 12+, dark = adult)
- Photography brick-stacked, never abstract
- Body 15px (denser than typical SaaS — product-grid first)
- Light-only canvas
- Enthusiastic-direct voice

## Colors

### Primary
- **Background** (`#ffffff`): white.
- **Text** (`#1a1a1a`): body.

### Brand — Lego Yellow (primary CTA)
- **Brand** (`#ffd500`): primary CTA + brand mark color.
- **Brand Hover** (`#e6c000`), **Pressed** (`#cca900`).
- **Brand Tint** (`#fff8d0`): selection wash.
- **Text on Brand** (`#1a1a1a`): **DARK text** on yellow (AA accessibility — never white).

### Red — secondary CTA + danger
- **Red** (`#d62027`): emphasized CTA, error state, high-tier age.
- **Red Deep** (`#a8161c`), **Red Soft** (`#ffd5d8`).

### Blue — link + tier
- **Blue** (`#0055bf`): links, mid-tier age badges.
- **Blue Deep** (`#003e8e`), **Blue Soft** (`#cee0f5`).

### Green — success + tier
- **Green** (`#179a35`): success, low-tier age badges.
- **Green Deep** (`#0c7826`), **Green Soft** (`#cdf0d4`).

### Age-Rating Color System
- **Age 0+** (`#179a35` green): toddler builds.
- **Age 6+** (`#0055bf` blue): elementary builds.
- **Age 12+** (`#d62027` red): teen / advanced.
- **Adult** (`#1a1a1a` dark): expert / display sets.

### Borders
- **Border** (`#e0e0e0`), **Border Strong** (`#cccccc`).

### Semantic
- success green, warning yellow, danger red, info blue.

## Typography

### Font Family
- **Display + Body**: Lego Sans (custom). Falls back to VAG Rounded → Avenir Next Rounded → Helvetica Neue.
- **Mono**: system mono.

### Hierarchy

| Role | Font | Size | Weight | LH | Tracking |
|------|------|------|--------|-----|----------|
| display-hero | Lego Sans | 56 | 800 | 1.05 | -0.018em |
| display-lg | Lego Sans | 40 | 700 | 1.15 | -0.012em |
| h1 | Lego Sans | 32 | 700 | 1.2 | -0.008em |
| h2 | Lego Sans | 24 | 700 | 1.25 | -0.005em |
| h3 | Lego Sans | 20 | 700 | 1.3 | 0 |
| eyebrow | Lego Sans | 12 | 700 | 1.2 | 0.10em UPPER |
| body | Lego Sans | 15 | 400 | 1.5 | 0 |
| label | Lego Sans | 12 | 700 | 1.3 | 0.04em |
| button | Lego Sans | 15 | 700 | 1.0 | 0.02em |
| age-badge | Lego Sans | 14 | 800 | 1.0 | 0.04em |

### Principles
- **Lego Sans for everything** — VAG Rounded as fallback only.
- **Heavy weights on display** (700-800).
- **Body 15px** — slightly denser for product-grid density.
- **Mixed case display, UPPER eyebrows + age badges.**

## Layout

- Base 4px, 56-96px between sections (denser than editorial)
- Page max width 1280px
- Hero: brick-stack product photo right + headline left
- Product grid: 4-up at desktop, 2-up at tablet, 1-up at mobile

mobile <479: hero 56→32; nav hamburger; 1-up grid. tablet: 2-up. desktop+: 4-up.

44×44 min touch targets.

## Elevation & Depth

| Level | Treatment |
|-------|-----------|
| 1 | `0 2px 8px rgba(0,0,0,0.08)` resting cards |
| 2 | `0 6px 20px rgba(0,0,0,0.14)` hover |
| 3 | `0 4px 0 0 rgba(0,0,0,0.08)` brick-style drop (featured) |
| 4 | `0 20px 60px rgba(0,0,0,0.20)` modal |

### Shadow Philosophy
Soft shadows for cards, occasional **flat-color drop** (4px, no blur) for featured items — evokes the physical brick-stacking metaphor.

## Shapes

| Tier | Value | Use |
|------|-------|-----|
| Micro | 4 | inline tags |
| Standard | 8 | **age badges + inputs** |
| Comfortable | 12 | **default cards** |
| Relaxed | 16 | featured cards |
| Featured | 24 | hero modules |
| Pill | 9999 | **buttons** |

## Components

### Buttons (5 variants — pill-radius)

**Primary** — Yellow with DARK text:
- bg `#ffd500`, **text `#1a1a1a`** (dark — accessibility), 15px Lego Sans 700 0.02em
- Padding 14×28, **radius 9999 (pill)**
- Hover: bg `#e6c000`, scale 1.02

**Red** — emphasized CTA:
- bg `#d62027`, white text, otherwise primary

**Blue** — secondary action:
- bg `#0055bf`, white text, otherwise primary

**Secondary** — bordered:
- bg white, text dark, 2px gray border, pill radius

**Ghost**: bg transparent, text blue, padding 10×20.

### Cards
- bg white, **12-16px radius**, padding 16
- Soft shadow `0 2px 8px rgba(0,0,0,0.08)`
- Hover: shadow `0 6px 20px rgba(0,0,0,0.14)`
- Featured: `0 4px 0 0 rgba(0,0,0,0.08)` flat-color drop (Lego brick metaphor)

### Age Badge (the brand's signature component)
- bg in age-color (green/blue/red/dark), white text
- 8px radius (rectangular like a brick), 6×10 pad
- 14px Lego Sans 800 0.04em UPPER, e.g. "6+", "12+", "ADULT"

### Pills (set tags, themes)
- bg `surface-strong`, text dark, pill radius

### Inputs
- bg white, 2px gray border, 8px radius
- Focus: border blue (not yellow — readability)

### Navigation
- 64px sticky header, white bg
- Lego wordmark left (red on yellow tile), top-level nav center, account + cart right

- Standard ease, emphasized for celebrate states
- 150ms hover, 240ms standard, 400ms slow
- Card hover: scale 1.02 + shadow lift
- Build-instruction modals: stepped reveal animation

- text on bg: `#1a1a1a` on `#ffffff` = **16.1:1** AAA
- **on-brand on brand: `#1a1a1a` on `#ffd500` = 13.4:1 AAA** (dark text on yellow — required, not white)
- white on red: `#ffffff` on `#d62027` = 5.4:1 AA
- white on blue: `#ffffff` on `#0055bf` = 7.6:1 AAA
- 3px blue focus ring (distinct from brand yellow for keyboard nav)

Age badges use `aria-label="Recommended for ages 12 and up"`. Brick-photography decorative `aria-hidden`.

### Tone
**Enthusiastic-direct.** Friendly, family-first, never corporate.

### Microcopy patterns
- Primary CTA: **"Add to Bag"** / **"Build now"** / **"Find your build"**
- Sign-up: **"Join VIP"**
- Errors: **"Hmm, something went wrong. Try again."**
- Empty: **"No sets in your bag yet — explore our themes."**

### CTA verb conventions
- **Build / Add / Discover / Explore**
- Avoid: NFT-bro language, urgent ("Last chance")

**Light-only on web.** Primary-color brand identity is anchored to white canvas — toy-aisle metaphor doesn't translate to dark.

Lego's marketing system descends from the 1958 plastic-brick patent — yellow, red, blue, green molded primary colors that have stayed identical for 67 years. The site preserves this primary palette as canvas-level brand identity. Lego Sans (custom rounded humanist) anchors typography.

**Named influences:**
- **Lego brick patent (1958)** — primary-color palette
- **VAG Rounded (Volkswagen, 1979)** — typographic ancestor
- **Lego Sans (custom)** — in-house UI typography
- **Pantone 116 / 186 / 286 / 354** — four primary anchors
- **Disney parks signage** — family-first chromatic discipline

## Do's and Don'ts

### Do
- **White canvas + Lego Yellow `#ffd500` + Red + Blue + Green** primary palette.
- **DARK text on yellow CTA** — accessibility (never white).
- **White text on red/blue/green CTAs.**
- **Pill-radius CTAs, 12-16px cards.**
- **Age-badge color system** — green 0+ / blue 6+ / red 12+ / dark adult.
- **Brick-stacked product photography** with primary-color backdrops.
- **Mixed case display, UPPER eyebrows + age badges.**

### Don't
- **Don't put white text on yellow.** 1.7:1 contrast fails AA.
- **Don't substitute primary palette colors.** Pantones 116/186/286/354 specifically.
- **Don't add gradients on CTA.**
- **Don't all-caps headlines.**
- **Don't use abstract photography** without brick presence.
- **Don't add a friendly mascot beyond the minifigure.**
- **Don't add dark mode** — primary-color brand fails on dark.

### Quick Color Reference
- bg: `#ffffff`
- text: `#1a1a1a`
- brand (Lego Yellow): `#ffd500` / hover `#e6c000` (use **dark text** on yellow)
- red: `#d62027` / blue: `#0055bf` / green: `#179a35`
- age badges: 0+ green, 6+ blue, 12+ red, adult dark

### Example Component Prompts

> Build a Lego-style hero: white canvas, brick-stacked product photo right 50%, 56px Lego Sans Bold heading "Build something rare" left, 17px subhead. Primary CTA "Find your build" pill-radius yellow `#ffd500` with **dark text** `#1a1a1a` 15px Lego Sans 700 0.02em.

> Design a set card: white surface, 12px radius, 16px pad, soft shadow. Brick-stack photo top, 20px Lego Sans 700 set name, age-badge top-right (green 0+ / blue 6+ / red 12+ / dark adult), price right-aligned 24px bold.

> Render an age badge: 8px radius, age-color bg (e.g. blue `#0055bf`), white 14px Lego Sans 800 0.04em UPPER "6+", padding 6×10.

> Build an "Add to Bag" CTA: pill radius, Lego Yellow bg, **dark `#1a1a1a` text** 15px Lego Sans 700 0.02em, padding 14×28. Hover: bg `#e6c000`, scale 1.02.

> Design a search input: white bg, 2px gray border, 8px radius, padding 12×16, placeholder "Find sets, themes, ages…". Focus border blue `#0055bf` (not yellow — readability).

### Iteration Guide

1. **White + 4-color primary palette + Lego Sans.**
2. **Pill-radius CTAs, 12-16px cards.**
3. **DARK text on yellow** — accessibility-mandatory.
4. **White text on red/blue/green CTAs.**
5. **Age-badge color system anchors set discoverability.**
6. **Brick-stacked photography, never abstract.**
7. **Body 15px — denser product-grid feel.**
8. **Reject white-on-yellow, abstract photo, dark mode, gradient CTAs.**