# OLIPOP

> # OLIPOP — Style Reference

## Prompt Content

```
# OLIPOP — Style Reference
> Retro apothecary kết hợp soda fountain — menu soda in trên giấy ấm.

**Theme:** light

OLIPOP là sự pha trộn giữa apothecary phai màu nắng và soda fountain: nền cream ấm áp, một màu forest-teal đầy uy lực làm điểm neo cho mọi header, button và brand mark, cùng một carousel các thẻ sản phẩm pastel đọc như nhãn kẹo từ cửa hàng tổng hợp thập niên 1950. Typography đảm nhận phần lớn công việc kể chuyện — một display serif retro tương phản cao (WindsorEF) ở weight 800 nổi bật trên các headline, trong khi một sans-serif hiện đại sạch sẽ (Ano) xử lý mọi thứ còn lại với sự lặng lẽ chuyên nghiệp. Hệ thống sống trong khoảng không giữa sự ấm áp cổ điển và tiện ích thương mại điện tử hiện đại: button hình pill, card bo góc 16px mềm mại, và không có shadow nào ngoại trừ một lớp ánh sáng nhẹ duy nhất trên primary call-to-action. Màu sắc được phân bổ một cách tiết kiệm — phần lớn trang là cream và forest-teal, với năng lượng màu sắc dành riêng cho các thẻ sản phẩm, một điểm nhấn wine-red duy nhất và một secondary action bright-teal.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Forest Ink | `#14433d` | `--color-forest-ink` | Điểm nhấn teal hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên làm màu CTA chính |
| Cream Paper | `#fdf7e7` | `--color-cream-paper` | Canvas trang, nền section — màu trắng ngà mà mọi bề mặt đều nằm trên, hơi ấm để type không bao giờ có cảm giác lâm sàng |
| Mint Sage | `#d3e8e3` | `--color-mint-sage` | Nền hero panel, các lớp nền section mềm — một mint bão hòa thấp lùi về phía sau để forest-teal text có thể dẫn dắt |
| Charcoal | `#3a3a3a` | `--color-charcoal` | Body text, link text, icon phụ — mềm hơn đen thuần để hài hòa với nền cream ấm |
| Pure White | `#ffffff` | `--color-pure-white` | Bề mặt card trên các section cream, button text trên nền forest-teal, input fields — màu trắng thật duy nhất trong hệ thống |
| Hairline Gray | `#e3e3e3` | `--color-hairline-gray` | Đường phân cách, border mờ — đường cấu trúc gần như vô hình |
| Wine Press | `#7e0022` | `--color-wine-press` | Điểm nhấn đỏ hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. |
| Bright Teal | `#2ad2c9` | `--color-bright-teal` | Điểm nhấn teal hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên làm màu CTA chính |
| Fountain Teal | `#008b70` | `--color-fountain-teal` | Điểm nhấn teal hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên làm màu CTA chính |
| Cardinal Red | `#d32737` | `--color-cardinal-red` | Điểm nhấn đỏ hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Dùng làm điểm nhấn hỗ trợ, không phải màu trạng thái |
| Banana Cream | `#fdf4b5` | `--color-banana-cream` | Nền thẻ sản phẩm — hương Banana Cream |
| Watermelon Lime | `#a9df71` | `--color-watermelon-lime` | Nền thẻ sản phẩm — hương Watermelon Lime |
| Crisp Apple | `#febac4` | `--color-crisp-apple` | Nền thẻ sản phẩm — hương Crisp Apple |
| Classic Grape | `#e3d2ed` | `--color-classic-grape` | Nền thẻ sản phẩm — hương Classic Grape |
| Vintage Cola | `#f8d5c0` | `--color-vintage-cola` | Nền thẻ sản phẩm — hương Vintage Cola |

## Tokens — Typography

### WindsorEF — Display headlines, hero copy, section titles và product card labels. Serif retro tương phản cao này là giọng nói đặc trưng của thương hiệu — nó gợi lên bao bì cổ điển và nhãn apothecary. Weight 800–900 ở 48–80px cho hero/section titles; weight 700 ở 20–32px cho tên sản phẩm trên card. line-height cực kỳ chặt 1.0 và kích thước rất lớn khiến nó thu hút sự chú ý mà không có cảm giác như một bold sans-serif điển hình. Font thay thế: Bagel Fat One, Cooper Black, hoặc Playfair Display Black. · `--font-windsoref`
- **Font thay thế:** Playfair Display Black hoặc Cooper Black
- **Weights:** 700, 800, 900
- **Kích thước:** 20px, 32px, 48px, 52px, 72px, 80px
- **Line height:** 1.00
- **Letter spacing:** normal
- **Vai trò:** Display headlines, hero copy, section titles và product card labels. Serif retro tương phản cao này là giọng nói đặc trưng của thương hiệu — nó gợi lên bao bì cổ điển và nhãn apothecary. Weight 800–900 ở 48–80px cho hero/section titles; weight 700 ở 20–32px cho tên sản phẩm trên card. line-height cực kỳ chặt 1.0 và kích thước rất lớn khiến nó thu hút sự chú ý mà không có cảm giác như một bold sans-serif điển hình. Font thay thế: Bagel Fat One, Cooper Black, hoặc Playfair Display Black.

### Ano — Body text, navigation, button labels, form inputs, footer text và toàn bộ UI chrome. Một sans-serif sạch sẽ, thân thiện làm công việc thầm lặng của giao diện trong khi display serif trình diễn phía trên. Weight 400 cho body, 600 cho body được nhấn mạnh hoặc nav, 700 cho button text. line-height rộng rãi (1.5–1.82) giữ cho body copy thoáng khí trên nền cream. Font thay thế: Inter, DM Sans, hoặc Söhne. · `--font-ano`
- **Font thay thế:** Inter hoặc DM Sans
- **Weights:** 400, 600, 700
- **Kích thước:** 12px, 14px, 16px, 18px, 20px, 22px, 24px
- **Line height:** 1.20–2.33
- **Letter spacing:** normal
- **Vai trò:** Body text, navigation, button labels, form inputs, footer text và toàn bộ UI chrome. Một sans-serif sạch sẽ, thân thiện làm công việc thầm lặng của giao diện trong khi display serif trình diễn phía trên. Weight 400 cho body, 600 cho body được nhấn mạnh hoặc nav, 700 cho button text. line-height rộng rãi (1.5–1.82) giữ cho body copy thoáng khí trên nền cream. Font thay thế: Inter, DM Sans, hoặc Söhne.

### Helvetica — Fallback cho icon labels và minor decorative text — chỉ xuất hiện ở các vị trí trang trí tần suất thấp, không phải một phần của hệ thống cốt lõi · `--font-helvetica`
- **Font thay thế:** system-ui sans-serif
- **Weights:** 400
- **Kích thước:** 16px
- **Line height:** 1.50
- **Vai trò:** Fallback cho icon labels và minor decorative text — chỉ xuất hiện ở các vị trí trang trí tần suất thấp, không phải một phần của hệ thống cốt lõi

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| micro | 12px | 2.33 | — | `--text-micro` |
| caption | 14px | 1.8 | — | `--text-caption` |
| body-sm | 16px | 1.67 | — | `--text-body-sm` |
| body-lg | 20px | 1.5 | — | `--text-body-lg` |
| subheading-sm | 22px | 1.48 | — | `--text-subheading-sm` |
| subheading | 24px | 1.4 | — | `--text-subheading` |
| heading-sm | 32px | 1 | — | `--text-heading-sm` |
| heading-lg | 52px | 1 | — | `--text-heading-lg` |
| display-sm | 72px | 1 | — | `--text-display-sm` |
| display | 80px | 1 | — | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** compact

### 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` |
| 28 | 28px | `--spacing-28` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 60 | 60px | `--spacing-60` |
| 80 | 80px | `--spacing-80` |
| 112 | 112px | `--spacing-112` |
| 128 | 128px | `--spacing-128` |
| 224 | 224px | `--spacing-224` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 50px |
| cards | 16px |
| inputs | 50px |
| buttons | 50px |
| hero-panels | 24px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| lg | `rgba(0, 0, 0, 0.1) 0px 0px 24px 0px` | `--shadow-lg` |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 40-64px
- **Card padding:** 20px
- **Element gap:** 8-16px

## Components

### Announcement Bar
**Vai trò:** Banner đầu trang toàn trang cho khuyến mãi và thông báo vận chuyển

Thanh forest-teal (#14433d) toàn chiều rộng với text trắng (#ffffff). Text trắng (Ano) ở 12–14px, căn giữa. Padding dọc cố định 1px hoặc 2px. Hoạt động như một dải neo tối ở đầu mỗi trang.

### Primary Navigation
**Vai trò:** Điều hướng chính của trang

Nền cream (#fdf7e7), logo OLIPOP wordmark căn giữa màu forest-teal, link nav (Shop, Learn, Subscribe) căn trái màu charcoal (#3a3a3a) Ano weight 400 ở ~14–16px, icon tiện ích (Find in Store, tài khoản, giỏ hàng) căn phải. Khoảng cách padding ngang ~20px trên các nhóm link.

### Primary CTA Button
**Vai trò:** Button chuyển đổi ưu tiên cao nhất

Hình pill (border-radius 50px), nền forest-teal (#14433d), text trắng (#ffffff) trong Ano weight 700 ở 16px. Padding 12px 24px. Box-shadow nhẹ rgba(0,0,0,0.1) 0px 0px 24px 0px — một ánh sáng môi trường mềm thay vì độ nâng cứng. Dùng cho 'Shop Now' và các hành động mua hàng chính.

### Secondary CTA Button
**Vai trò:** Chuyển đổi thứ cấp — đăng ký loyalty/rewards

Hình pill (border-radius 50px), nền bright teal (#2ad2c9), text forest-teal (#14433d) trong Ano weight 700 ở 16px. Padding giống primary. Màu teal sống động trên nền cream làm nó nổi bật mà không cần dùng màu thương hiệu chính.

### Ghost Text Link
**Vai trò:** Link nội dòng trong body text

Không nền hoặc border. Text charcoal (#3a3a3a), Ano weight 400, gạch chân hoặc chuyển màu nhẹ khi hover. Nhỏ gọn, không phô trương, coi link như sự liên tục của text chứ không phải chrome tương tác.

### Hero Panel
**Vai trò:** Section tuyên bố thương hiệu phía trên fold

Hai tông màu: nền trang cream (#fdf7e7) với một panel bo tròn mint-sage (#d3e8e3) bên trong (radius 24px) chiếm khoảng 40% chiều rộng viewport. Display serif (WindsorEF) weight 800 ở 72–80px màu forest-teal. Subtext trong Ano weight 400 ở 18px màu charcoal. Primary CTA button bên dưới. Panel mint tạo hiệu ứng 'card trên card' — hero đọc như một tấm poster ghim trên giấy cream.

### Flavor Product Card
**Vai trò:** Thẻ liệt kê sản phẩm trong carousel 'Pure Nostalgia-ahh'

Card màu full-bleed (một trong 15+ màu pastel — vàng bơ, xanh táo, hồng phấn, oải hương, đào, v.v.), border-radius 16px. Chứa một crop ảnh sản phẩm hình tròn. Tên card trong WindsorEF weight 700 ở 20–24px màu forest-teal bên dưới ảnh. Hàng xếp hạng năm sao trong Ano 12px. Không shadow, không border — bản thân màu sắc xác định ranh giới card.

### Section Heading
**Vai trò:** Tiêu đề section giữa trang

WindsorEF weight 800 ở 48–52px, forest-teal (#14433d), căn giữa. Subtext tối thiểu trong Ano 18px charcoal ngay bên dưới. Serif lớn căn giữa trên nền cream tạo nhịp điệu giống poster giữa các section.

### Rewards Feature Section
**Vai trò:** Section quảng bá loyalty/rewards với ảnh và text

Nền cream. Bố cục hai cột: cột trái là vùng ảnh hình tròn lớn (minh họa bo tròn với các yếu tố hồng, đỏ anh đào và cream), cột phải có một label điểm nhấn wine-red (#7e0022) nhỏ ('Cherry on Top'), sau đó là display heading WindsorEF ở 32–48px, rồi body copy, rồi button CTA bright-teal. Container ảnh hình tròn là một thiết bị bố cục đặc trưng — ảnh được crop thành hình tròn hoàn hảo, nổi trên nền cream.

### Product Image Circle
**Vai trò:** Container ảnh sản phẩm hoặc minh họa hình tròn

Container tròn hoàn hảo (border-radius 50%) chứa ảnh chụp sản phẩm hoặc minh họa. Được sử dụng trong các flavor card và section rewards. Họa tiết hình tròn xuất hiện nhiều lần — nó làm mềm lưới hình chữ nhật và tham chiếu đến nắp chai cổ điển và huy chương.

### Form Input Field
**Vai trò:** Đăng ký newsletter, tìm kiếm và form inputs

Nền trắng (#ffffff), border fountain-teal (#008b70) 1px, border-radius 50px (hình pill), Ano 16px text, padding dọc 12–16px. Trạng thái focus làm đậm border thành forest-teal (#14433d).

### Star Rating
**Vai trò:** Hiển thị xếp hạng sao sản phẩm

Năm ngôi sao nhỏ đầy màu forest-teal (#14433d), nội dòng với product cards. Không nền, không container — ký tự thô trong Ano 12px hoặc dưới dạng SVG icon. Micro-element chức năng, không phải huy hiệu trang trí.

### Footer
**Vai trò:** Footer toàn trang với link và thông tin pháp lý

Nền forest-teal (#14433d) với text trắng (#ffffff). Lưới link nhiều cột trong Ano 14–16px. Logo ở trên cùng. Footer tối phản chiếu announcement bar, đóng khung trang trên và dưới bằng các dải forest-teal.

## Do's and Don'ts

### Nên
- Dùng WindsorEF ở weight 800 hoặc 900 cho mọi headline từ 32px trở lên — display serif này CHÍNH LÀ giọng nói thương hiệu
- Đặt primary CTA buttons thành border-radius 50px (full pill) với nền forest-teal (#14433d) và text trắng
- Dùng cream (#fdf7e7) làm nền trang cơ sở cho mọi section — không bao giờ dùng pure white làm canvas
- Áp dụng border-radius 16px cho mọi content cards, 50px cho mọi interactive elements (buttons, inputs, tags)
- Kết hợp nền cream với một bề mặt màu sắc trên mỗi product card — mỗi hương vị có pastel riêng, không bao giờ dùng chung
- Giữ body text ở 16–18px trong Ano weight 400 với charcoal (#3a3a3a) — không bao giờ dùng đen thuần trên nền cream
- Chỉ dùng soft ambient shadow rgba(0,0,0,0.1) 0px 0px 24px trên primary CTA — mọi element khác giữ phẳng

### Không nên
- Không dùng WindsorEF dưới 20px — display serif mất cá tính ở kích thước nhỏ và khó đọc
- Không áp dụng góc nhọn (0–8px radius) cho buttons hoặc inputs — hình pill là thiết yếu cho hệ thống
- Không thêm màu bề mặt tối nào ngoài forest-teal (#14433d) — màu tối của thương hiệu CHÍNH LÀ teal cụ thể đó
- Không thêm drop shadow nặng hoặc hiệu ứng độ nâng — hệ thống về cơ bản là phẳng với một ngoại lệ (primary CTA glow)
- Không trộn điểm nhấn wine-red (#7e0022) với forest-teal (#14433d) trong cùng một component — chọn một cho heading, một cho body
- Không dùng màu pastel của product cards cho UI chrome (nav, buttons, borders) — chúng bị khóa vào ngữ cảnh sản phẩm
- Không đặt body text ở line-height dưới 1.4 — Ano cần không gian thở để cảm thấy ấm áp trên nền cream, không lâm sàng

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Page Canvas | `#fdf7e7` | Cream ấm — nền trang mặc định mà mọi bề mặt khác nằm trên |
| 1 | Hero Panel | `#d3e8e3` | Panel mint sage bên trong hero, tạo một card tông màu trên nền cream |
| 2 | Product Card | `#fdf4b5` | Card màu pastel hương vị — mỗi sản phẩm có màu riêng từ bảng màu pastel 15 màu |
| 3 | Dark Frame | `#14433d` | Announcement bar và footer forest-teal — bookend tối đóng khung trang cream |

## Elevation

- **Primary CTA Button:** `rgba(0, 0, 0, 0.1) 0px 0px 24px 0px`

## Imagery

Product photography là hình ảnh chủ đạo: ảnh chụp lon soda full-can trên nền pastel sạch, crop chặt không có bối cảnh lối sống. Lon CHÍNH LÀ hero — không bàn tay, không người, không môi trường. Minh họa hỗ trợ xuất hiện trong section rewards với phong cách retro/folk-art (cuống anh đào, áo khoác varsity, ly milkshake với họa tiết lấp lánh), được render trong các khối màu phẳng của hồng, đỏ anh đào và cream. Iconography tối thiểu — thương hiệu dựa vào wordmark và product photography thay vì hệ thống icon. Họa tiết hình tròn lặp lại xuyên suốt: ảnh sản phẩm, container minh họa và cách xử lý wordmark của logo. Ngôn ngữ hình ảnh là 'vintage packaging photography meets folk-art merch' — ấm áp, hơi hoài niệm và tự hào là analog.

## Agent Prompt Guide

**Tham khảo màu nhanh**
- text: #3a3a3a (charcoal body) / #14433d (forest-teal headings)
- background: #fdf7e7 (cream canvas)
- border: #e3e3e3 (hairline gray)
- accent: #7e0022 (wine red — cho loyalty/specialness)
- secondary action: #2ad2c9 (bright teal — chỉ cho rewards sign-up)
- primary action: không có màu CTA riêng biệt

**Ví dụ Component Prompts**
Không quan sát thấy màu primary action riêng biệt; dùng các xử lý button trung tính đã trích xuất thay vì phát minh ra màu CTA đầy.
2. Tạo một flavor product card: border-radius 16px, nền #fdf4b5 (vàng bơ). Crop ảnh sản phẩm hình tròn căn giữa (border-radius 50%) ở 70% phía trên. Tên sản phẩm 'Banana Cream' trong WindsorEF weight 700 ở 20px, #14433d, căn giữa bên dưới ảnh. Năm icon sao forest-teal (12px) ở dưới cùng.
4. Tạo một section heading: WindsorEF weight 800 ở 48px, #14433d, căn giữa trên nền cream. Subtext trong Ano weight 400 ở 18px #3a3a3a ngay bên dưới với khoảng cách 16px.
5. Tạo một footer: dải toàn chiều rộng forest-teal (#14433d), text trắng (#ffffff), lưới link bốn cột trong Ano 14px weight 400. Logo OLIPOP wordmark ở trên cùng màu trắng.

## Circle Motif System

Hình tròn là một thiết bị cấu trúc lặp lại xuyên suốt OLIPOP: ảnh sản phẩm được crop thành hình tròn hoàn hảo, minh họa rewards nằm trong container hình tròn lớn, chữ 'O' trong wordmark logo củng cố họa tiết, và radius '50px' của button/input tạo hình pill lặp lại cùng một hình học bo tròn. Khi xây dựng màn hình mới, dùng hình tròn cho: thumbnail sản phẩm, container minh họa, vị trí avatar/badge và các yếu tố nền trang trí. Tránh dùng hình tròn cho container nội dung chính — nền cream và panel mint hình chữ nhật xử lý vai trò đó. Hình tròn mang ý nghĩa 'nắp chai cổ điển / huy chương / tem' và là cốt lõi của bản sắc hoài niệm thương hiệu.

## Product Card Color System

Mỗi hương vị OLIPOP được gán một màu pastel duy nhất chỉ dùng làm nền card của sản phẩm đó. Bảng màu 15 card trải dài từ vàng ấm (#fdf4b5, #fee6a7, #fee967) qua hồng (#febac4, #ffada5, #f8d5c0) và san hô (#ffc3b3) đến xanh lá (#95d95d, #a9df71, #e1eab4) và oải hương (#e3d2ed). Những màu này bị khóa theo hương vị: chúng chỉ xuất hiện trên product cards, không bao giờ trên UI chrome, buttons hoặc nền section. Khi tạo sản phẩm mới, gán một pastel mới từ họ màu này — không bao giờ dùng lại màu của hương vị khác. Màu card CHÍNH LÀ danh tính của sản phẩm trong lưới.

## Similar Brands

- **Recess** — Cùng nền cream ấm với một màu teal/xanh lá đậm duy nhất làm màu thương hiệu chính, display serif retro cho headlines và product cards pastel trong carousel ngang
- **Oatly** — Nền trang trắng ngà ấm, typography display retro cỡ lớn cho headlines và một màu tối duy nhất mang mọi primary actions — dù Oatly nghiêng về giọng điệu mỉa mai/vui tươi hơn
- **Magic Spoon** — Thẩm mỹ hộp ngũ cốc cổ điển với nền cream, display type serif tương phản cao ở kích thước lớn và màu card pastel theo từng hương vị trong lưới sản phẩm
- **Public Goods** — Thẩm mỹ thương mại điện tử tối giản cream và trắng ngà với button hình pill và một màu tối tông rừng duy nhất cho primary actions
- **Halfday (formerly MTE)** — Bảng màu cream ấm + xanh lá rừng với pill buttons, serif headlines cỡ lớn và product cards pastel trong ngôn ngữ hình ảnh apothecary/cửa hàng tổng hợp

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-forest-ink: #14433d;
  --color-cream-paper: #fdf7e7;
  --color-mint-sage: #d3e8e3;
  --color-charcoal: #3a3a3a;
  --color-pure-white: #ffffff;
  --color-hairline-gray: #e3e3e3;
  --color-wine-press: #7e0022;
  --color-bright-teal: #2ad2c9;
  --color-fountain-teal: #008b70;
  --color-cardinal-red: #d32737;
  --color-banana-cream: #fdf4b5;
  --color-watermelon-lime: #a9df71;
  --color-crisp-apple: #febac4;
  --color-classic-grape: #e3d2ed;
  --color-vintage-cola: #f8d5c0;

  /* Typography — Font Families */
  --font-windsoref: 'WindsorEF', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-ano: 'Ano', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-helvetica: 'Helvetica', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-micro: 12px;
  --leading-micro: 2.33;
  --text-caption: 14px;
  --leading-caption: 1.8;
  --text-body-sm: 16px;
  --leading-body-sm: 1.67;
  --text-body-lg: 20px;
  --leading-body-lg: 1.5;
  --text-subheading-sm: 22px;
  --leading-subheading-sm: 1.48;
  --text-subheading: 24px;
  --leading-subheading: 1.4;
  --text-heading-sm: 32px;
  --leading-heading-sm: 1;
  --text-heading-lg: 52px;
  --leading-heading-lg: 1;
  --text-display-sm: 72px;
  --leading-display-sm: 1;
  --text-display: 80px;
  --leading-display: 1;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-60: 60px;
  --spacing-80: 80px;
  --spacing-112: 112px;
  --spacing-128: 128px;
  --spacing-224: 224px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 40-64px;
  --card-padding: 20px;
  --element-gap: 8-16px;

  /* Border Radius */
  --radius-lg: 10px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 50px;
  --radius-full-2: 100px;

  /* Named Radii */
  --radius-tags: 50px;
  --radius-cards: 16px;
  --radius-inputs: 50px;
  --radius-buttons: 50px;
  --radius-hero-panels: 24px;

  /* Shadows */
  --shadow-lg: rgba(0, 0, 0, 0.1) 0px 0px 24px 0px;

  /* Surfaces */
  --surface-page-canvas: #fdf7e7;
  --surface-hero-panel: #d3e8e3;
  --surface-product-card: #fdf4b5;
  --surface-dark-frame: #14433d;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-forest-ink: #14433d;
  --color-cream-paper: #fdf7e7;
  --color-mint-sage: #d3e8e3;
  --color-charcoal: #3a3a3a;
  --color-pure-white: #ffffff;
  --color-hairline-gray: #e3e3e3;
  --color-wine-press: #7e0022;
  --color-bright-teal: #2ad2c9;
  --color-fountain-teal: #008b70;
  --color-cardinal-red: #d32737;
  --color-banana-cream: #fdf4b5;
  --color-watermelon-lime: #a9df71;
  --color-crisp-apple: #febac4;
  --color-classic-grape: #e3d2ed;
  --color-vintage-cola: #f8d5c0;

  /* Typography */
  --font-windsoref: 'WindsorEF', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-ano: 'Ano', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-helvetica: 'Helvetica', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-micro: 12px;
  --leading-micro: 2.33;
  --text-caption: 14px;
  --leading-caption: 1.8;
  --text-body-sm: 16px;
  --leading-body-sm: 1.67;
  --text-body-lg: 20px;
  --leading-body-lg: 1.5;
  --text-subheading-sm: 22px;
  --leading-subheading-sm: 1.48;
  --text-subheading: 24px;
  --leading-subheading: 1.4;
  --text-heading-sm: 32px;
  --leading-heading-sm: 1;
  --text-heading-lg: 52px;
  --leading-heading-lg: 1;
  --text-display-sm: 72px;
  --leading-display-sm: 1;
  --text-display: 80px;
  --leading-display: 1;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-60: 60px;
  --spacing-80: 80px;
  --spacing-112: 112px;
  --spacing-128: 128px;
  --spacing-224: 224px;

  /* Border Radius */
  --radius-lg: 10px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 50px;
  --radius-full-2: 100px;

  /* Shadows */
  --shadow-lg: rgba(0, 0, 0, 0.1) 0px 0px 24px 0px;
}
```