LEGO DESIGN.md

Design System Inspiration of LEGO

Overview

Visual Theme & Atmosphere

"The LEGO Group is a privately held company based in Billund, Denmark", still owned by the Kirk Kristiansen family who founded it in 1932 — Ole Kirk Kristiansen made his first wooden toy that year. Its about page calls the brand "the masters of reinvention": the first brick, made over 60 years ago, is still culturally relevant. lego.com is where the company sells sets, offers support and runs a separate Play Zone for children.

The site opens on a site chooser — a blue LEGO.com panel and a yellow Play Zone panel. Behind it, the header is a light utility bar #f7f7f7 over LEGO's bright yellow #ffd400, with ink #141414, LEGO red #dd1a22 for highlights, and a working blue #005ad2 for primary actions. Type is Cera Pro.

What makes it worth reading:

• A large token system. 2,178 --ds-* properties, with action roles in four states (--ds-color-action-primary-enabled / -hovered / -pressed / -selected).
• The brand palette as tokens. --ds-color-brand-* names the LEGO colours — bright yellow, bright red, bright blue, earth blue, dark azur — 87 in all, 60 of them in an extended set (candy floss, sea foam, vip blue …).
• Translucent action families. --ds-color-action-static-light-* are white at 85% → 90% → 94% for buttons placed on colour.

Primary tasks

• Choose LEGO.com or the Play Zone.
• Shop sets; find help; sign in.

Brand Narrative

A family company from Billund that has reinvented one brick for over 60 years. The site carries the brick's primary colours as named tokens, uses yellow as the frame, and keeps an operational blue for the work of shopping.

Principles

• Reinvention. The about page's own word.
• Named colour. The brand palette lives in the token system.
• Complete states. Enabled, hovered, pressed, selected.

Personas

Not researched. No persona claim is made from a UI capture.

Colors

Measured with getComputedStyle on lego.com/en-gb: 2,255 root custom properties — --ds-* 2,178, --st-* 65 and a few others. All first-party.

Brand

• Brand yellow (#ffd400) — --ds-color-brand-bright-yellow; the main navigation bar.
• Brand red (#dd1a22) — --ds-color-brand-bright-red; highlighted links.
• Brand blue (#006cb7) — --ds-color-brand-bright-blue.

Actions

• Primary (#005ad2) → hovered (#0045b7) → pressed (#011c58).
• Accent (#ffd502) → hovered (#fac400) → pressed (#ef9f00).
• Emphasis (#e96f14).
• Neutral action (#f2f2f2) → hovered (#e5e5e5) → pressed (#cbcbcb).

Text and surfaces

• Foreground (#141414) — --ds-color-text-default.
• Text strong (#3d3d3d) · Text subdued (#636363).
• Canvas (#ffffff) · Header (#f7f7f7) · Black (#000000) — the hover inversion.
• Border (#b0b0b0) — --ds-color-border-default.
• Focus (#4695f0) — a 2px ring on every measured control.
• Play Zone (#d1e8ff) — the utility-bar pill.

Typography

Font family

Cera Pro (400, 500, 700), "Cera Pro", sans-serif, loaded (document.fonts).

Scale

Body 16px/400; navigation 16px/500; utility pill 14px/500; site-chooser buttons 18px/500.

Layout

• A light utility bar, a yellow main bar with logo and three menus, then promotional bands.

Responsive Behavior

Not measured. Desktop 1440×1000 only.

Elevation & Depth

Flat header; the site chooser sits over a darkened, blurred page.

Motion & Easing

Not measured.

---

Tier 1 sources: https://www.lego.com/en-gb (live homepage — 2,255 root custom properties read via getComputedStyle; Cera Pro loaded; four components measured at rest, hover, pressed and focus, captured 2026-09-26); https://www.lego.com/en-gb/zz-this-does-not-exist (nonsense-path control — HTTP 404, read 2026-09-26); https://www.lego.com/en-gb/aboutus/lego-group (The LEGO Group — privately held, based in Billund, Denmark, founded 1932 by the Kirk Kristiansen family; LEGO System A/S, DK-7190 Billund, read 2026-09-26)

Components

Measured with focus under a real Tab key and a hover counted only when :hover matched. The site chooser was never answered; the probe hid it to reach the header.

• Chooser pill — Continue / START PLAYING: rgba(255,255,255,0.85), #141414 18px/500, 999px, 48px. Hover 0.9, press 0.94; focus a 2px #4695f0 ring.
• Play Zone pill — #d1e8ff, black 14px/500, 32px. Hover darkens to #a8bed4, press #8096ab (served as lab(), converted).
• Navigation — SHOP, DISCOVER, HELP on yellow: #141414 16px/500. Hover and press turn the 3px bottom border black.
• Highlighted link — RETIRING SOON: white, #dd1a22 text and border, 4px. Hover and press invert to #000000 with white text.

Radius

999px pills; 4px on the highlighted link.

States

Hover: pills darken or brighten a step, the menu underlines, the red link inverts. Press: a further step. Focus: a 2px #4695f0 ring throughout.

Do's and Don'ts

Do

• Use bright yellow #ffd400 for the brand bar and red #dd1a22 for highlights.
• Give every action enabled, hovered, pressed and selected values.
• Use a 2px #4695f0 focus ring.

Don't

• Don't substitute nearby yellows; the brand yellow is #ffd400.
• Don't put opaque white buttons on coloured panels; use the translucent static-light family.
• Don't use pure black for body text; the ink is #141414.

Voice & Tone

Not assessed as authored voice.

Agent Prompt Guide

Quick Color Reference

#ffd400 LEGO yellow · #dd1a22 LEGO red · #006cb7 LEGO blue · #005ad2 primary · #141414 ink · #636363 subdued · #f7f7f7 header · #4695f0 focus

Example Component Prompts

• "A yellow #ffd400 bar with #141414 16px/500 Cera Pro menus that gain a 3px black underline on hover."
• "A white button with #dd1a22 text and border, 4px radius, inverting to black on hover."

Governance

Known Gaps

• Contrast, nav-menu. Text #141414 on #00000000 measures 1.14:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.