coderef

LEGO

"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.
DownloadRaw
LEGO

Build with the LEGO look.

Palette, type and components from this DESIGN.md, applied to a sample hero.

Palette

At a glance

Website
lego.com ↗
Theme
light
Typefaces
System
Sections
11
Length
1,154 words

Add it to your project

Then prompt your agent

Design System · LEGO

Light and dark previews, tokens and a ready-to-use package, generated from this DESIGN.md. No AI involved: the same file always produces the same output.

Generating design system…

DESIGN.md

DownloadRaw
Design tokens (YAML front matter)
name: LEGO
colors:
  brand-yellow: '#ffd400'
  brand-red: '#dd1a22'
  brand-blue: '#006cb7'
  primary: '#005ad2'
  primary-hovered: '#0045b7'
  primary-pressed: '#011c58'
  accent: '#ffd502'
  accent-hovered: '#fac400'
  accent-pressed: '#ef9f00'
  emphasis: '#e96f14'
  neutral-action: '#f2f2f2'
  neutral-action-hovered: '#e5e5e5'
  neutral-action-pressed: '#cbcbcb'
  foreground: '#141414'
  text-strong: '#3d3d3d'
  text-subdued: '#636363'
  canvas: '#ffffff'
  header: '#f7f7f7'
  border: '#b0b0b0'
  focus: '#4695f0'
  play-zone: '#d1e8ff'
  black: '#000000'
typography:
  body:
    fontSize: 16px
    fontWeight: 400
    use: body and highlighted links
  nav:
    fontSize: 16px
    fontWeight: 500
    use: SHOP / DISCOVER / HELP
rounded:
  sm: 4px
  pill: 999px
components:
  button-static-light:
    type: button
    backgroundColor: rgba(255,255,255,0.85)
    textColor: '#141414'
    rounded: 999px
    height: 48px
    padding: 0 20px
    typography: 18px / 500
    hover: rgba(255,255,255,0.9)
    pressed: rgba(255,255,255,0.94)
    focus: 'ring 0 0 0 2px #4695f0'
    use: Continue / START PLAYING on the site chooser — translucent white pills on blue and yellow panels (--ds-color-action-static-light-*).
  button-play-zone:
    type: button
    backgroundColor: '#d1e8ff'
    textColor: '#000000'
    rounded: 999px
    height: 32px
    padding: 0 12px
    typography: 14px / 500
    hover: '#a8bed4'
    pressed: '#8096ab'
    focus: 'ring 0 0 0 2px #4695f0'
    use: PLAY ZONE in the utility bar (sk-button--primary) — pale blue pill; hover and press darken it (served as lab(), converted).
  nav-menu:
    type: button
    backgroundColor: transparent
    textColor: '#141414'
    rounded: 0px
    height: 22px
    typography: 16px / 500
    hover: transparent
    pressed: transparent
    focus: 'ring 0 0 0 2px #4695f0'
    use: SHOP / DISCOVER / HELP on the yellow bar — hover and press turn the transparent 3px bottom border black.
  link-highlight:
    type: button
    backgroundColor: '#ffffff'
    textColor: '#dd1a22'
    border: '#dd1a22'
    rounded: 4px
    height: 34px
    padding: 5px 20px
    typography: 16px / 400
    hover: '#000000'
    pressed: '#000000'
    focus: 'ring 0 0 0 2px #4695f0'
    use: RETIRING SOON — white with LEGO red text; hover and press invert to black with white text.
omitted:
  - section: spacing
    reason: No verified values in current evidence.
fonts:
  roles:
    sans: Cera Pro

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.

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.

More like LEGO

All brands designs →

Brand names describe the visual style only; coderef is not affiliated with or endorsed by any brand listed. Licenses