# Lego

> Home — Style Reference

## Prompt Content

```
# Home — Style Reference
> Lối đi đồ chơi màu primary — độ sáng của một hộp set vừa mới mở trên bàn trắng.

**Theme:** light

Cửa hàng kỹ thuật số của LEGO mang cảm giác như một lối đi đồ chơi được dựng bằng pixel — màu primary được triển khai không chút kiềm chế, ảnh sản phẩm đảm nhận toàn bộ công việc tạo cảm xúc trên nền trắng và gần đen. Màu vàng (#FFD502) là nhịp đập của thương hiệu: nó xuất hiện trên badge, nav highlight và thanh logo — một hằng số màu sắc duy nhất giữa khung neutral trắng/gần đen. CTA màu cam (#F47D20) trên nút pill 999px là màu call to action duy nhất — ấm áp, bo tròn, dễ đọc ngay lập tức trên nền trắng sản phẩm. Footer tối (#201D48) neo trang vào màu navy đậm cổ điển của LEGO, tạo điểm tựa cho một trang vốn sống trong ánh sáng ban ngày rực rỡ. Toàn bộ chữ là Cera Pro, một sans-serif hình học bo tròn tùy chỉnh, phản ánh đường cong của viên gạch LEGO — weight 700 cho heading với tracking dày, weight 400 cho body text, không có gì khác.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| LEGO Yellow | `#FFD502` | `--color-lego-yellow` | Logo background, badge, active nav indicator, brand accent — hằng số màu duy nhất xuất hiện bất kể section nào trên trang, khiến mọi badge trông như một sticker giá trên hộp đồ chơi. |
| Brick Orange | `#F47D20` | `--color-brick-orange` | Nút CTA chính ('Mua ngay', 'Thêm vào giỏ', 'Trở thành hội viên') — ấm áp trên nền trắng sản phẩm, màu fill nút pill duy nhất cho hành động mua hàng. |
| Ember Dark | `#E96F14` | `--color-ember-dark` | Trạng thái hover/pressed của nút CTA — tối hơn Brick Orange 1 bậc. |
| LEGO Navy | `#201D48` | `--color-lego-navy` | Footer background, bề mặt brand đậm — bề mặt màu tối duy nhất, neo cuối trang với bản sắc thương hiệu. |
| Link Blue | `#006DB7` | `--color-link-blue` | Body copy link, inline hyperlink trong editorial text — xanh dương sống động trên nền trắng để đạt độ tương phản tối đa. |
| Action Blue | `#005AD2` | `--color-action-blue` | Nút hành động phụ ('Trở thành hội viên', 'Tìm hiểu thêm'), điểm nhấn link tương tác — màu viền và chữ của nút pill dạng outline. |
| Flag Red | `#D0021B` | `--color-flag-red` | Chữ badge 'Mới' trong nav — dùng rất hạn chế để đánh dấu sự mới mẻ trong navigation. |
| Off Black | `#141414` | `--color-off-black` | Văn bản chính, tiêu đề card, giá, icon fill — màu foreground chủ đạo trên mọi bề mặt sáng. |
| Graphite | `#2C2C2C` | `--color-graphite` | Văn bản phụ, nhãn badge, body text trong footer, nav item. |
| Pitch | `#000000` | `--color-pitch` | Chữ trên nút CTA cam, viền đậm trên nút ghost. |
| Snow | `#FFFFFF` | `--color-snow` | Page background, bề mặt card, input background, chữ trên bề mặt tối. |
| Fog | `#F2F2F2` | `--color-fog` | Fill nút phụ (nút tròn chỉ icon, điều khiển wishlist/giỏ hàng), background bề mặt nhẹ. |
| Pebble | `#F6F6F6` | `--color-pebble` | Background section trang, fill hàng danh sách — ấm hơn trắng tinh một bậc. |
| Steel | `#757575` | `--color-steel` | Văn bản trạng thái disabled, viền muted, helper text. |
| Silver | `#E0E0E0` | `--color-silver` | Viền input ở trạng thái mặc định. |

## Tokens — Typography

### Cera Pro — Font chữ duy nhất trên toàn site. Weight 700 ở 24–37px cho heading với tracking -0.02em — khoảng cách âm bù lại độ bo tròn hình học của Cera Pro ở kích thước lớn, ngăn chữ bị rời rạc. Weight 500 cho subheading và label. Weight 400 cho body text, nav link và badge text. Sans-serif hình học bo tròn tùy chỉnh này phản ánh trực tiếp hình học góc viên gạch LEGO — một system font sẽ đọc như generic trong khi Cera Pro đọc như branded. · `--font-cera-pro`
- **Thay thế:** Nunito, Poppins
- **Weights:** 400, 500, 700
- **Kích thước:** 12px, 14px, 16px, 18px, 19px, 20px, 24px, 30px, 37px
- **Line height:** 1.15–1.62 (display: 1.15, body: 1.50–1.58)
- **Letter spacing:** -0.02em ở kích thước display/heading, -0.01em ở kích thước trung bình, +0.01em ở kích thước caption
- **OpenType features:** `normal`
- **Vai trò:** Font chữ duy nhất trên toàn site. Weight 700 ở 24–37px cho heading với tracking -0.02em — khoảng cách âm bù lại độ bo tròn hình học của Cera Pro ở kích thước lớn, ngăn chữ bị rời rạc. Weight 500 cho subheading và label. Weight 400 cho body text, nav link và badge text. Sans-serif hình học bo tròn tùy chỉnh này phản ánh trực tiếp hình học góc viên gạch LEGO — một system font sẽ đọc như generic trong khi Cera Pro đọc như branded.

### Cera Pro Italic — Italic ở cấp caption, chỉ dùng cho disclaimer chữ nhỏ và legal copy. · `--font-cera-pro-italic`
- **Thay thế:** Nunito Italic
- **Weights:** 400
- **Kích thước:** 12px
- **Line height:** 1.58
- **Letter spacing:** normal
- **Vai trò:** Italic ở cấp caption, chỉ dùng cho disclaimer chữ nhỏ và legal copy.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.58 | 0.12px | `--text-caption` |
| body-sm | 14px | 1.56 | — | `--text-body-sm` |
| body | 16px | 1.5 | — | `--text-body` |
| subheading | 18px | 1.36 | — | `--text-subheading` |
| heading-sm | 20px | 1.35 | — | `--text-heading-sm` |
| heading | 24px | 1.19 | -0.48px | `--text-heading` |
| heading-lg | 30px | 1.15 | -0.3px | `--text-heading-lg` |
| display | 37px | 1.15 | -0.74px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 192 | 192px | `--spacing-192` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 4px |
| cards | 8px |
| badges | 0px |
| inputs | 0px |
| buttons | 999px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| sm | `rgba(0, 0, 0, 0.54) 0px 2px 4px 0px` | `--shadow-sm` |

### Layout

- **Page max-width:** 1280px
- **Section gap:** 48-64px
- **Element gap:** 8-16px

## Components

### Primary CTA Pill Button
**Vai trò:** Hành động mua hàng: 'Thêm vào giỏ', 'Mua ngay', 'Trở thành hội viên'

Background #F47D20, text #000000, font Cera Pro 700 16px, border-radius 999px, padding 10px 16px. Không viền. Trạng thái hover/pressed thêm shadow rgba(0,0,0,0.54) 0px 2px 4px và chuyển background sang #E96F14. Icon (giỏ hàng) inline-left với gap 12px. Tỷ lệ tương phản cam-trên-trắng rất nổi bật về mặt thị giác — có chủ đích trong bối cảnh bán lẻ đồ chơi.

### Outlined Pill Button
**Vai trò:** Hành động phụ: 'Tìm hiểu thêm', 'Mua tất cả mới', 'Tham gia LEGO® Insiders'

Background trong suốt, text #141414, border 1px solid rgba(0,0,0,0.67), border-radius 999px, padding 10px 16px. Font Cera Pro 500 16px. Icon chevron trailing ở 14px. Trên bề mặt hero tối, viền này đọc rõ ràng trên background ảnh.

### Circular Icon Button
**Vai trò:** Wishlist, giỏ hàng, điều khiển carousel

Background #F2F2F2, border-radius 999px, kích thước cố định 40×40px (padding 0). Icon căn giữa màu #141414. Không viền, không shadow. Dùng cho trái tim wishlist trên product card và mũi tên prev/next carousel.

### Ghost Text Button
**Vai trò:** Hành động navigation inline, tab underline

Background trong suốt, text #000000, border-radius 0px, không padding. Font Cera Pro 400 16px. Kiểu bottom-border underline cho trạng thái tab active (3px solid #141414). Radius bằng 0 báo hiệu đây là điều khiển navigation phẳng, không phải CTA.

### New/Exclusives Badge
**Vai trò:** Nhãn trạng thái product card, thẻ nội dung hero

Background #FFD502, text #141414, border-radius 0px, padding 4px 12px. Font Cera Pro 700 12px, letter-spacing +0.01em. Góc sắc là có chủ đích — badge đọc như một sticker giá, củng cố phép ẩn dụ bán lẻ vật lý. Xuất hiện ở góc trên bên trái ảnh product card.

### Category Navigation Tile
**Vai trò:** Lưới duyệt chủ đề/danh mục bên dưới hero tab

Tile hình vuông với ảnh sản phẩm full-bleed, nhãn danh mục bằng Cera Pro 700 16px chữ trắng overlay căn giữa trên cùng. Không border-radius (0px). Trạng thái hover không hiển thị trong dữ liệu tĩnh nhưng lưới tile là 8 cột trên desktop. Tile cho danh mục có license (Pokémon, TMNT) dùng background ảnh nhân vật.

### Search Input
**Vai trò:** Tìm kiếm toàn site trong header

Background #FFFFFF, border 1px solid #E0E0E0, border-radius 0px (sắc), padding 18px 20px. Font Cera Pro 400 16px #141414. Icon tìm kiếm (kính lúp) ở cạnh trái. Full-width trong vùng tìm kiếm của header. Radius sắc tương phản với tất cả nút pill 999px — search là một trường nhập, không phải hành động.

### Tab Navigation
**Vai trò:** Bộ chuyển đổi nội dung section ('Có gì mới / Quà tặng / Chủ đề', 'Nổi bật / Formula 1®')

Mẫu underline tab: tab active có bottom border 3px #141414, tab inactive text #757575, không viền. Font Cera Pro 500 16px. Padding 0 0 12px 0. Row gap 16px giữa các tab. Không background fill ở bất kỳ trạng thái nào — hệ thống pure text + underline.

### Announcement Banner
**Vai trò:** Thanh thông báo khuyến mãi ở đầu trang

Background #141414, text #FFFFFF, Cera Pro 400 14px. Bên trái: thẻ 'PLAY ZONE' dạng pill màu vàng (#FFD502, 0px radius). Ở giữa: nội dung ưu đãi với link 'Shop now' inline được gạch chân màu #FFFFFF. Mũi tên prev/next màu #FFFFFF. Full-bleed width, chiều cao ~40px.

### Insiders Membership Card Row
**Vai trò:** Trưng bày lợi ích trong section hội viên

Hàng 3 cột gồm các tile lợi ích: mỗi tile có ảnh màu full-bleed (nền đỏ, vàng, xanh lá với ảnh sản phẩm), label 16px Cera Pro 700 bên dưới, mô tả 14px Cera Pro 400 #2C2C2C. Không viền card hay shadow — các tile được phân cách trực quan bằng gap 16px trên background section trắng.

### Site Footer
**Vai trò:** Footer navigation toàn trang

Background #201D48, text #FFFFFF, Cera Pro 400 14px. Lưới link 5 cột: section header ở Cera Pro 700 12px uppercase letter-spacing +0.01em, link ở 400 14px. Logo LEGO màu trắng trên badge vuông màu vàng (#FFD502) ở góc trên bên trái. Footer nằm trong sự tương phản thị giác mạnh với phần body trang trắng — navy là bề mặt màu tối duy nhất trên trang.

## Do's and Don'ts

### Do
- Dùng border-radius 999px cho tất cả nút tương tác — CTA, phụ và nút tròn chỉ icon, không ngoại lệ.
- Đặt badge #FFD502 với border-radius 0px và padding 4px 12px trên ảnh sản phẩm — không bao giờ bo tròn góc badge.
- Dùng #F47D20 độc quyền cho nút CTA mua hàng chính; dành #005AD2 cho nút pill phụ/thông tin.
- Đặt Cera Pro 700 với letter-spacing -0.02em cho tất cả heading từ 24px trở lên.
- Giữ product card border-radius 8px với cấu trúc chia đôi: vùng ảnh bo tròn trên, vùng nội dung bo tròn dưới, fill trắng, không box-shadow — dựa vào background trang #F6F6F6 để tạo tương phản.
- Dùng #141414 làm màu chữ mặc định trên mọi bề mặt sáng; không bao giờ thay thế bằng #000000 tinh khiết cho body text.
- Duy trì thanh header màu vàng (#FFD502) và khối logo LEGO vuông làm bề mặt navigation màu sắc duy nhất — không bao giờ đưa background top nav có màu.

### Don't
- Không bao giờ dùng border-radius trên phần tử badge/label — góc sắc 0px là dấu hiệu sticker/nhãn giá cho status label.
- Không bao giờ áp dụng box-shadow cho product card — chỉ tạo độ cao thông qua tương phản màu background (card #FFFFFF trên nền #F6F6F6).
- Không bao giờ dùng nhiều hơn một màu nút CTA trên mỗi section trang — tất cả CTA mua hàng là #F47D20, tất cả CTA phụ là outline hoặc #005AD2.
- Không bao giờ đặt Cera Pro ở weight 300 — site chỉ dùng 400, 500 và 700; weight dưới regular là off-brand.
- Không bao giờ đặt nội dung nhiều chữ trên hero imagery mà không có lớp scrim bán trong suốt hoặc card trắng overlay đủ dày — khối text hero dùng panel nền trắng, không phải text-over-image.
- Không bao giờ dùng input bo tròn — trường tìm kiếm và form field có radius 0px để phân biệt trực quan giữa nhập liệu và điều khiển tương tác.
- Không bao giờ dùng LEGO Navy (#201D48) làm background section ở giữa trang — nó chỉ thuộc về footer anchor.

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-------|------|---------|---------|
| 0 | Page Base | `#F6F6F6` | Background tổng thể trang, fill section giữa các khối nội dung |
| 1 | Card Surface | `#FFFFFF` | Background product card, panel nội dung, input field |
| 2 | Header Bar | `#FFD502` | Thanh navigation chính, brand stripe |
| 3 | Dark Tray | `#141414` | Thanh thông báo khuyến mãi ở đầu trang |
| 4 | Footer Well | `#201D48` | Site footer, bề mặt brand neo sâu |

## Elevation

- **Primary CTA Button (trạng thái pressed/hover):** `rgba(0, 0, 0, 0.54) 0px 2px 4px 0px`

## Imagery

Ảnh sản phẩm là phương tiện thị giác chủ đạo — ảnh cận cảnh các bộ LEGO đã lắp ráp trên nền gradient sạch hoặc nền trắng, được trình bày ở góc 3/4 nhẹ để thể hiện chiều sâu. Hero section dùng ảnh composite full-bleed pha trộn mô hình vật lý với background bầu trời minh họa, tạo ra một câu chuyện được dàn dựng xung quanh sản phẩm có license (PAN AM Airliner lơ lửng trên nền trời xanh). Category tile dùng ảnh nhân vật và bố cục sản phẩm full-bleed. Ảnh minifigure xuất hiện như yếu tố lifestyle trong hero — được sắp xếp như ảnh dàn diễn viên. Icon là glyph đơn sắc có fill (giỏ hàng, trái tim, ngôi sao, minifigure) ở 16-20px, màu brand (#141414 trên nền sáng, #FFFFFF trên nền tối). Không có ảnh lifestyle về con người — sản phẩm và nhân vật luôn là chủ thể. Mật độ ảnh rất cao trong hero và category grid, sau đó giảm xuống ảnh sản phẩm cô lập trên nền trắng trong product card grid.

## Layout

Max-width ~1280px căn giữa trang, nhưng hero và announcement bar là full-bleed. Navigation bar là sticky, 3 vùng: logo LEGO vuông màu vàng bên trái, nav link ngang ở giữa, utility icon (tìm kiếm, wishlist, giỏ hàng) bên phải. Hero là ảnh composite full-viewport-height với text overlay và nút pill CTA căn trái-giữa trên ảnh. Bên dưới hero: hàng tab navigation (3 tab) tiếp theo là lưới category tile 8 cột, full-width. Product card section dùng lưới card 5 cột trên background trắng/fog với điều khiển carousel cuộn ngang. Membership section là layout 2 cột (text trái, tile lợi ích 3 cột phải). Footer là lưới link 5 cột trên #201D48. Nhịp điệu section xen kẽ: dark announcement bar → nav vàng → hero full-bleed → dải nav phụ tối → category grid trắng → product grid trắng → membership xám nhạt → trắng → footer navy. Khoảng cách section dọc 48-64px. Mật độ comfortable — khoảng trắng đáng kể giữa các product card.

## Agent Prompt Guide

**Tham chiếu màu nhanh**
- Page background: #F6F6F6
- Card surface: #FFFFFF
- Primary text: #141414
- CTA button fill: #F47D20
- Brand badge / nav bar: #FFD502
- Links / secondary action: #005AD2
- Footer background: #201D48
- Border (input): #E0E0E0

**Ví dụ Component Prompts**

1. **Product Card**: Card trắng (border-radius 8px 8px 0 0 vùng ảnh, 0 0 8px 8px vùng nội dung) trên #F6F6F6. Ảnh full-width, không padding. Overlay badge #FFD502 (0px radius, padding 4px 12px, Cera Pro 700 12px #141414) góc trên bên trái. Vùng nội dung: padding 24px 16px. Tên sản phẩm Cera Pro 500 16px #141414. Giá Cera Pro 700 16px #141414. Metadata (tuổi/số mảnh/đánh giá) Cera Pro 400 12px #757575. Nút 'Thêm vào giỏ' pill (#F47D20, text #000000, 999px radius, padding 10px 16px, Cera Pro 700 14px) full-width. Icon wishlist (tròn #F2F2F2 40×40px, 999px radius) bên phải nút.

2. **Hero Section**: Background ảnh sản phẩm composite full-bleed. Overlay căn trái-giữa: badge #FFD502 + pill outline ('Mới', 'Độc quyền', 0px radius, Cera Pro 700 12px). Headline Cera Pro 700 37px #141414 letter-spacing -0.74px. Subtext Cera Pro 400 16px #141414. Hàng hai nút pill: 'Mua ngay' (#F47D20 fill, #000000, 999px radius, 10px 16px) + 'Mua tất cả mới' (trong suốt, border #000000 rgba(0,0,0,0.67), 999px radius, 10px 16px).

3. **Category Tile Grid**: Lưới 8 cột, không gap hoặc gap 2px. Mỗi tile: ảnh full-bleed, nhãn danh mục Cera Pro 700 16px #FFFFFF overlay căn giữa trên cùng. 0px border-radius. Trạng thái hover: scale ảnh nhẹ (1.03).

4. **Announcement Banner**: Thanh #141414 full-bleed ~40px. Bên trái: thẻ 'PLAY ZONE' #FFD502 0px radius Cera Pro 700 12px #141414 padding 4px 8px. Ở giữa: Cera Pro 400 14px #FFFFFF text ưu đãi + link 'Shop now' #FFFFFF gạch chân. Mũi tên prev/next #FFFFFF chevron hai bên text ở giữa.

5. **Footer**: Background #201D48. Logo LEGO: hình vuông #FFD502 48×48px với logo SVG trắng. Lưới link 5 cột, section header Cera Pro 700 12px #FFFFFF uppercase letter-spacing +0.01em, link Cera Pro 400 14px #FFFFFF, row gap 8px.

## Badge System

LEGO dùng chính xác hai hình dạng badge: (1) Sticker trạng thái — 0px radius, background #FFD502, text #141414, Cera Pro 700 12px, padding 4px 12px. Dùng cho 'Mới', 'Độc quyền', 'Ưu đãi' trên product card và hero overlay. (2) Chỉ báo tab underline — không background, bottom border 3px #141414, chỉ trạng thái active. Radius 0px là bất khả thương lượng — badge bo tròn phá vỡ phép ẩn dụ sticker kết nối badge kỹ thuật số với thẻ giá LEGO vật lý.

## Similar Brands

- **Hasbro Shop** — Cùng product-photography-first card grid với nút CTA accent cam/vàng và background trắng chủ đạo
- **Mattel Shop** — Mẫu pill-button + hero-composite-image giống hệt với ảnh sản phẩm nhân vật có license
- **Nintendo Store** — Hệ thống màu primary vàng/đỏ có thương hiệu với category tile grid và hero imagery full-bleed
- **Target** — Cùng nút CTA pill đỏ/cam trên product card grid trắng với sticky utility nav
- **Funko** — Ảnh sản phẩm tập trung vào nhân vật trong lưới duyệt category tile với badge accent sáng

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-lego-yellow: #FFD502;
  --color-brick-orange: #F47D20;
  --color-ember-dark: #E96F14;
  --color-lego-navy: #201D48;
  --color-link-blue: #006DB7;
  --color-action-blue: #005AD2;
  --color-flag-red: #D0021B;
  --color-off-black: #141414;
  --color-graphite: #2C2C2C;
  --color-pitch: #000000;
  --color-snow: #FFFFFF;
  --color-fog: #F2F2F2;
  --color-pebble: #F6F6F6;
  --color-steel: #757575;
  --color-silver: #E0E0E0;

  /* Typography — Font Families */
  --font-cera-pro: 'Cera Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-cera-pro-italic: 'Cera Pro Italic', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.58;
  --tracking-caption: 0.12px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.56;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-subheading: 18px;
  --leading-subheading: 1.36;
  --text-heading-sm: 20px;
  --leading-heading-sm: 1.35;
  --text-heading: 24px;
  --leading-heading: 1.19;
  --tracking-heading: -0.48px;
  --text-heading-lg: 30px;
  --leading-heading-lg: 1.15;
  --tracking-heading-lg: -0.3px;
  --text-display: 37px;
  --leading-display: 1.15;
  --tracking-display: -0.74px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-192: 192px;

  /* Layout */
  --page-max-width: 1280px;
  --section-gap: 48-64px;
  --element-gap: 8-16px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-2xl: 20px;
  --radius-full: 999px;

  /* Named Radii */
  --radius-tags: 4px;
  --radius-cards: 8px;
  --radius-badges: 0px;
  --radius-inputs: 0px;
  --radius-buttons: 999px;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.54) 0px 2px 4px 0px;

  /* Surfaces */
  --surface-page-base: #F6F6F6;
  --surface-card-surface: #FFFFFF;
  --surface-header-bar: #FFD502;
  --surface-dark-tray: #141414;
  --surface-footer-well: #201D48;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-lego-yellow: #FFD502;
  --color-brick-orange: #F47D20;
  --color-ember-dark: #E96F14;
  --color-lego-navy: #201D48;
  --color-link-blue: #006DB7;
  --color-action-blue: #005AD2;
  --color-flag-red: #D0021B;
  --color-off-black: #141414;
  --color-graphite: #2C2C2C;
  --color-pitch: #000000;
  --color-snow: #FFFFFF;
  --color-fog: #F2F2F2;
  --color-pebble: #F6F6F6;
  --color-steel: #757575;
  --color-silver: #E0E0E0;

  /* Typography */
  --font-cera-pro: 'Cera Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-cera-pro-italic: 'Cera Pro Italic', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.58;
  --tracking-caption: 0.12px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.56;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-subheading: 18px;
  --leading-subheading: 1.36;
  --text-heading-sm: 20px;
  --leading-heading-sm: 1.35;
  --text-heading: 24px;
  --leading-heading: 1.19;
  --tracking-heading: -0.48px;
  --text-heading-lg: 30px;
  --leading-heading-lg: 1.15;
  --tracking-heading-lg: -0.3px;
  --text-display: 37px;
  --leading-display: 1.15;
  --tracking-display: -0.74px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-192: 192px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-2xl: 20px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.54) 0px 2px 4px 0px;
}
```