LEGO logo
TRUE COLORS
75 years of LEGO, one color at a time
Design System · v1.0
Power BI DataViz World Champs

Brick
Brutalism

A neo-brutalist visual language built from real LEGO colors, 80s catalogues and accessibility-first rules.
Judges' Favorite
Design Standout
Accessibility
Champion
159 ENTRIES
7 days to build
Dataviz crafted by JESÚS NÚÑEZ
Product Designer & Data Visualizer
02

The brief

Brick Brutalism · True Colors
Turn Rebrickable's LEGO database into a story in seven days. Accessibility counted for 25% of the score, so it shaped the system from the first sketch.
Challenge
One dataset, 274 colors, 75 years. Seven days from raw tables to a five-page report.
Audience
Contest judges and the general public. Readable in a minute, explorable for longer.
Tools
POWER BI DAX DENEB · VEGA-LITE
Key decisions
01Neo-brutalist language borrowed from 80s LEGO catalogues: ink strokes, flat fills, hard shadows.
02Three custom visuals in Deneb where native charts couldn't carry the story.
03Accessibility from the first sketch: contrast, labels, keyboard order and alt text were rules, not a final pass.
Result
Judges' Favorite
Design Standout
Accessibility Champion
Among 159 entries
03

The 6 laws

Bold · Loud · Systematic · Playful
1 · Thick ink strokes
Everything is outlined in LEGO Black #05131D. 2px controls, 3px cards, 5px hero panels.
2 · Squared corners
Radius 0 by default, 4px for chips. The stud is the only circle allowed.
3 · Solid blocks
Flat fills only. No gradients, textures, blur or transparency.
4 · Hard shadows
Depth is displacement, never softness. Offset 4 / 6 / 10px, zero blur.
5 · Strict 8px grid
Every size and gap snaps to 8. Visual positions in Power BI too.
FOCUSED
6 · Focus always visible
A 3px offset outline on every interactive element. Keyboard users never lose their place.
04

Color

Every hex is a real LEGO color
UI palette · interface only
{{ c.ratio }}
{{ c.name }}
{{ c.hex }}
{{ c.role }}
Act coding · one color per chapter
ACT IDiscipline · 1949–1998 · ink text
ACT IIBoom & Bust · 1999–2008 · white text
ACT IIIDisciplined Rainbow · 2009–2025
ACT IVPick a Color · Epilogue
The reservation rule
The full LEGO spectrum belongs to the data. Act colors appear only in kickers and the next-page arrow, never next to a chart that uses the same hue as data.
Data palette · Rebrickable hex values
{{ c.name }} {{ c.hex }}
05

Typography

The type does the shouting
H1 · 96True Colors
H2 · 64Boom & Bust
H3 · 40The Great Gray Switch
H4 · 28Colors in use per year
Body · 18In 1999, Star Wars broke a fifty-year rule: licensed sets demanded colors LEGO had never needed.
Caption · 13Source: Rebrickable LEGO Database
KPI · 72273 · 61 · 51%
Aa
Archivo Black
Display. Headings, kickers, KPIs. Always uppercase, tracking −2% on H1.
Aa
Segoe UI
Body and data labels. Power BI's native face, so text renders the same for every viewer. Bold carries the key phrase in each paragraph.
Rules
Minimum 13px anywhere. Headings uppercase, body sentence case. No exclamation marks. Numbers are the heroes.
06

Spacing, strokes & shadows

Spacing scale · 8px base
{{ s.v }} {{ s.use }}
Strokes & radii
2px chips, swatches
3px cards, buttons
5px page frame
4px radius max
Elevation · hard offset, zero blur
S1 · 4/4
tags, chips
S2 · 6/6
cards, buttons
HERO · 10/10
page frame
DARK · 8/8
yellow on ink panels
07

LEGO motifs

The brick is the grid
COLORS
EVER273
KPI brick
2 studs on top, label left, number right. A 2×1 brick you can read in a glance.
Stud row
Rectangular pins on the hero takeaway. Pin count follows block width, one per 2 grid columns.
Dice nav
Studs count the act: 1 to 4. The logo brick returns home. Active page = yellow.
†
Tombstone
The one arched shape, reserved for retired colors in The Graveyard. A data mark, not UI.
Brick unit
A 1×2 brick silhouette replaces the dot in the waffle. 1 brick = 1% of all parts.
{{ c.name }}
Swatch chip
A squared tile in the real hex, 2px ink border, name always printed below.
08

Components · Navigation

Page header
ACT II1999-2008
BOOM & BUST
1999: Star Wars arrives. LEGO develops an appetite for novelty.
Kicker (act chip + years) · H2 title · hook line in caption caps. Same slot on every page.
Next-page arrow · act colored
→ → → in
Pinned bottom-right, bleeding out of the frame. Act IV swaps to the LinkedIn exit.
Primary CTA
BUILD THE STORY→
Landing page only. One per report.
Filter buttons & toggles
ALL COLORS THE IMMORTALS KILLED IN THE PURGE
1950s1960s1970s
Cast filter (landing) and decade toggle (Act I). Selected = yellow or pressed gray, never a data hue.
09

Components · Content

Insight card
FEWER, BETTER, FOREVER.
LEGO rebuilt its palette with intention. Color as engineering, not decoration.
Story stepper · bookmarks
2003 · THE RECKONING 2/4
Behind the color explosion, the company was unraveling.
‹›
Year input
✕2009→
Color biography card
BRIGHT LIGHT ORANGE
#F8BB3D
FIRST SEEN 2003 · STILL ACTIVE
SURVIVED THE PURGE ✔
☠ DID NOT SURVIVE
FAMILY: EARTH & SUN
10.041
SETS
30.364
PARTS
10

Chart specs · Signature

THE CRISIS '03–'04
19491970199020042025
The Barcode
DENEB · VEGA-LITE · LANDING
Mark one bar per color, first set → last set
Fill the color's real hex, no stroke
Thickness ∝ number of sets using it
Sort birth year, so the shape tells the story
Refs red dashed 2004 · neutral band for the purge
Hover dims the rest, opens a brick card
1998 2004 2008 LEGO'S WORST LOSS IN HISTORY
Colors in use
NATIVE AREA · ACTS I & II
Fill Primary Yellow, flat · Line 4px ink
Y axis fixed 0–120 in every act, for honest comparison
Markers red diamond = peak, square = start/end
Event icon marker (Star Wars, 1999)
Decline pale red band after the peak
11

Chart specs · Library

Born vs retired
Diverging bars. Up = yellow, down = neutral gray, value printed in each bar. Red dashed lines mark zero-change years.
The Great Gray Switch
Old grays solid, new bluish grays dotted: the switch reads without color. Skull marks each death, direct labels at line ends.
Brick waffle
100 brick units = 100% of parts. Black, gray, white fill in order; the rest stay dark. Driven by a year-range slider.
{{ s.name }}{{ s.v }}
Share of all parts
Bars in the real hex with a white outline, so Black stays visible on ink. Value labels, no axis.
†
The Graveyard
61 tombstones, one per color retired 2004–2006. Hover lifts one and fades the rest to 35%.
{{ g.name }}{{ g.label }}
The Experiments
Gantt of failed themes, filled with each theme's main color and labelled with its name.
12

Tooltips & annotations

Report-page tooltip · story
199962 COLORS IN USE▲ +10 vs prior year
Star Wars lands, and the fifty-year rule finally breaks wide open.
Year in Danger red · metric in caption caps · delta with arrow and sign · one sentence of story. Used on the area and gray-switch charts.
Data tooltip · lookup
ColorRoyal BlueSets68Born2004Died2005
Key–value pairs for Deneb visuals. Plain and fast: the mark itself is already the headline.
Annotation tags
LEGO'S WORST LOSS IN HISTORYCrisis · one per page max
THE CRISIS '03–'04Period marker
FLAT DECADE (1966-1980)Neutral context
1963Spike year, paired with a dashed rule
Peak Start / end Event rule ☠Death
Rule · every annotation is direct text on the chart. No legends to decode, no meaning carried by color alone.
13

Interaction states

One signature move: the brick press
DEFAULT HOVER PRESSED FOCUS DISABLED BUTTON NEXT ACT NEXT ACT NEXT ACT NEXT ACT NEXT ACT DICE NAV = current DATA MARK Click = cross-filter the page Arrow keys move between marks
14

Accessibility

ACCESSIBILITY CHAMPION
25%
of the score. Designed in from the first sketch, not checked at the end.
Contrast · WCAG 2.1
Aa {{ c.name }} {{ c.ratio }}
✔{{ a.t }}
{{ a.d }}
15

Built in Power BI

Flat & squared, so it rebuilds
{{ p.k }}
{{ p.t }}
{{ p.d }}
theme.json · excerpt
{
  "name": "Brick Brutalism",
  "foreground": "#05131D",
  "background": "#F4F1E8",
  "tableAccent": "#F2CD37",
  "good": "#237841",
  "bad": "#C91A09",
  "textClasses": {
    "title":  { "fontFace": "Archivo Black",
                "fontSize": 20 },
    "label":  { "fontFace": "Segoe UI",
                "fontSize": 10 }
  },
  "visualStyles": { "*": { "*": {
    "border": [{ "show": true,
      "color": { "solid": { "color": "#05131D" }},
      "radius": 0 }],
    "dropShadow": [{ "show": false }]
  }}}
}