Design System Inspiration of LEGO
1. 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.
2. Color Palette & Roles
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.
3. Typography Rules
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.
4. Component Stylings
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.
5. Layout Principles
- A light utility bar, a yellow main bar with logo and three menus, then promotional bands.
6. Depth & Elevation
Flat header; the site chooser sits over a darkened, blurred page.
7. 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.
8. Responsive Behavior
Not measured. Desktop 1440×1000 only.
9. 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."
10. Voice & Tone
Not assessed as authored voice.
11. 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.
12. Principles
- Reinvention. The about page's own word.
- Named colour. The brand palette lives in the token system.
- Complete states. Enabled, hovered, pressed, selected.
13. Personas
Not researched. No persona claim is made from a UI capture.
14. 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.
15. 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)