Lego

LEGO's digital storefront feels like a toy aisle rendered in pixels — primary colors deployed with zero restraint, product photography doing all the emotional lifting against white and near-black surfaces. The yellow (#FFD502) is the brand's pulse: it appears on badges, nav highlights, and the logo bar, a single chromatic constant amid a white/off-black neutral scaffold. The orange CTA (#F47D20) on 999px pill buttons is the only call to action color — warm, rounded, immediately readable against product whites. The dark footer (#201D48) anchors the page in LEGO's classic deep navy, grounding a page that otherwise lives in bright daylight. Type is entirely Cera Pro, a custom geometric rounded sans that echoes brick curves — weight 700 for headings at tight tracking, weight 400 for body, nothing else. Use 999px border-radius for all interactive buttons — CTA, secondary, and icon-only circular controls without exception. Place #FFD502 badges with 0px border-radius and padding 4px 12px on product imagery — never round the badge corners. Use #F47D20 exclusively for primary purchase CTA buttons; reserve #005AD2 for secondary/informational pill buttons. Set Cera Pro 700 with letter-spacing -0.02em for all headings at 24px and above. Keep product cards border-radius 8px with split construction: image area top-rounded, content area bottom-rounded, white fill, no box-shadow — rely on #F6F6F6 page background for contrast. Use #141414 as the default text color on all light surfaces; never substitute with pure #000000 for body text. Maintain the yellow (#FFD502) header bar and square LEGO logo block as the only chromatic navigation surface — never introduce colored top nav backgrounds. Never use border-radius on badge/label elements — 0px sharp corners are the sticker/price-tag signature for status labels. Never apply box-shadow to product cards — elevation through background color contrast only (#FFFFFF card on #F6F6F6 base). Never use more than one CTA button color per page section — all purchase CTAs are #F47D20, all secondary CTAs are outlined or #005AD2. Never set Cera Pro at weight 300 — the site uses only 400, 500, and 700; sub-regular weights are off-brand. Never place text-heavy content over hero imagery without a sufficient semi-transparent scrim or white card overlay — the hero text block uses a white background panel, not text-over-image. Never use rounded inputs — search and form fields are 0px radius to visually distinguish data-entry from interactive controls. Never use the LEGO Navy (#201D48) as a section background mid-page — it belongs exclusively to the footer anchor.