# arte*

> arte* — Style Reference

## Prompt Content

```
# arte* — Style Reference
> Golden hour harvest editorial — một tấm canvas màu kem nơi ảnh rừng ngập nắng hòa cùng display type bo tròn cỡ lớn, logo xanh chanh điện, và chữ đồng ấm áp mang cảm giác như được in chứ không phải render.

**Theme:** light

arte* là một harvest editorial tràn ngập ánh nắng: canvas kem ấm (#e5dccd) làm nền cho những display headline cỡ lớn bằng font Parafina — một sans-serif bo tròn mềm mại, hơi retro ở kích thước cực lớn (70–173px) với line-height dồn nén gần 0.8–0.9 — trong khi Poppins đảm nhận toàn bộ secondary copy ở line-height 1.4 chặt chẽ. Bảng màu mang phong cách vườn-nông trại: harvest copper nâu đồng cháy (#ab5700) cho primary text, chartreuse xanh chanh gây sốc (#e8e359) cho logo và hero overlays, và periwinkle xanh hoa chuông (#7997ff) đóng vai trò đối trọng mát mẻ cho các inline highlights. Hình ảnh là nửa còn lại của hệ thống — ảnh golden-hour full-bleed về rừng, đồ ăn và khuôn mặt, được xếp lớp với display type thay vì tách rời. Các component ít và mềm mại: pill buttons với radius 31px, card radii 20px, viền mảnh, gần như không có shadow. Ấn tượng tổng thể là một cuốn sách nấu ăn in ấn hoặc poster chợ nông sản được số hóa — display type tự tin, tông màu đất với một điểm nhấn vàng điện, và bản thân tên thương hiệu kết thúc bằng dấu hoa thị (*) báo hiệu sự tinh nghịch editorial.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Wheat Cream | `#e5dccd` | `--color-wheat-cream` | Canvas trang, bề mặt card, nền section — tông trắng kem ấm giữ mọi màn hình |
| Harvest Copper | `#ab5700` | `--color-harvest-copper` | Primary text, body copy, list borders, card borders, decorative strokes — màu mực mặc định trên toàn bộ nội dung editorial |
| Citron Beam | `#e8e359` | `--color-citron-beam` | Màu logotype, hero text overlays, accent borders, icon highlights — xanh chanh điện giúp thương hiệu nổi bật trên nền xanh rừng và kem |
| Morning Glory | `#7997ff` | `--color-morning-glory` | Inline text highlights, links, secondary icon accents, input focus — periwinkle mát mẻ làm dịu bảng màu ấm khi xuất hiện trong body copy |
| Amber Glow | `#d99623` | `--color-amber-glow` | List borders, secondary heading accents, decorative strokes ấm |
| Forest Floor | `#214534` | `--color-forest-floor` | Button borders, body text trên light accents, decorative strokes đậm — xanh đậm làm nền tảng cho các khoảnh khắc tương phản |
| Deep Moss | `#103d26` | `--color-deep-moss` | Accent tối nhất, background fills cho các khối tương phản, depth shadows |
| Olive Branch | `#568037` | `--color-olive-branch` | List borders, tag accents, decorative strokes hữu cơ |
| Slate Bloom | `#3d549c` | `--color-slate-bloom` | Heading borders, decorative strokes muted, secondary tông lạnh |
| Coral Petal | `#e99686` | `--color-coral-petal` | Soft fill washes, list surface tints, secondary backgrounds ấm |

## Tokens — Typography

### Poppins — Body text, UI labels, navigation, buttons, list items, footer copy, input fields — một geometric sans trung tính, lặng lẽ và chức năng ở kích thước 12–16px. Line-height 1.4 với weight 400/500 giúp body copy thoáng nhẹ, dễ đọc mà không cạnh tranh với display headlines. · `--font-poppins`
- **Thay thế:** Inter, DM Sans, hoặc Manrope ở weight 400/500
- **Weights:** 400, 500
- **Sizes:** 12px, 13px, 16px
- **Line height:** 1.40
- **Vai trò:** Body text, UI labels, navigation, buttons, list items, footer copy, input fields — một geometric sans trung tính, lặng lẽ và chức năng ở kích thước 12–16px. Line-height 1.4 với weight 400/500 giúp body copy thoáng nhẹ, dễ đọc mà không cạnh tranh với display headlines.

### Parafina — Display và headings — một custom rounded retro display sans được dùng ở kích thước cực lớn (lên đến 173px) với line-height dồn nén (0.80–0.90). Cách xử lý single-weight 500 ở tỷ lệ quá khổ là điểm đặc trưng: kiểu chữ mang cảm giác vui tươi, ấm áp, và giống poster in ấn hơn là corporate. Xuất hiện ở hero, section headlines, và chính logotype. · `--font-parafina`
- **Thay thế:** Bricolage Grotesque, Cabinet Grotesk, hoặc Familjen Grotesk ở weight 500 với optical sizing
- **Weights:** 500
- **Sizes:** 20px, 30px, 56px, 70px, 104px, 173px
- **Line height:** 0.80, 0.90, 1.00
- **Vai trò:** Display và headings — một custom rounded retro display sans được dùng ở kích thước cực lớn (lên đến 173px) với line-height dồn nén (0.80–0.90). Cách xử lý single-weight 500 ở tỷ lệ quá khổ là điểm đặc trưng: kiểu chữ mang cảm giác vui tươi, ấm áp, và giống poster in ấn hơn là corporate. Xuất hiện ở hero, section headlines, và chính logotype.

### Arial — Arial — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-arial`
- **Weights:** 400
- **Sizes:** 13px
- **Line height:** 1.2
- **Vai trò:** Arial — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả

### ExposureTrial — ExposureTrial — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-exposuretrial`
- **Weights:** 500
- **Sizes:** 56px
- **Line height:** 0.9
- **Vai trò:** ExposureTrial — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả

### GTStandard-M — GTStandard-M — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-gtstandard-m`
- **Weights:** 500
- **Sizes:** 16px
- **Line height:** 1.5
- **Vai trò:** GTStandard-M — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả

### ITC_Avant_Garde_Gothic_Medium — ITC_Avant_Garde_Gothic_Medium — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-itcavantgardegothicmedium`
- **Weights:** 400
- **Sizes:** 26px
- **Line height:** 1.2
- **Vai trò:** ITC_Avant_Garde_Gothic_Medium — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.4 | — | `--text-caption` |
| body | 16px | 1.4 | — | `--text-body` |
| subheading | 20px | 1 | — | `--text-subheading` |
| heading-sm | 30px | 0.9 | — | `--text-heading-sm` |
| heading | 56px | 0.9 | — | `--text-heading` |
| heading-lg | 70px | 0.85 | — | `--text-heading-lg` |
| display | 104px | 0.85 | — | `--text-display` |
| display-xl | 173px | 0.8 | — | `--text-display-xl` |

## 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` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 40 | 40px | `--spacing-40` |
| 56 | 56px | `--spacing-56` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 100 | 100px | `--spacing-100` |
| 140 | 140px | `--spacing-140` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 9999px |
| cards | 20px |
| other | 64px |
| buttons | 31px |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 80-120px
- **Card padding:** 24px
- **Element gap:** 24px

## Components

### Ghost Menu Button
**Vai trò:** Navigation trigger trong hero overlay

Nền trong suốt, viền 1px Citron Beam (#e8e359), chữ Citron Beam bằng Poppins 12–13px weight 500 uppercase, border-radius 31px (dạng pill), padding 6px dọc / 24px ngang. Nổi trên ảnh hero mà không có nền — chỉ có chữ và viền định nghĩa nó.

### Hero Display Headline
**Vai trò:** Tuyên bố thương hiệu màn hình đầu tiên, phủ lên ảnh

Parafina ở 104–173px weight 500, line-height 0.80–0.85, màu Citron Beam (#e8e359). Nằm trực tiếp trên ảnh thiên nhiên full-bleed, không có nền chữ hay gradient — chỉ riêng màu sắc tạo độ tương phản với tông xanh. Bản thân logotype 'arte*' cũng được xử lý theo cách này ở cùng tỷ lệ.

### Editorial Subheadline
**Vai trò:** Secondary hero text — 'tagline' bên dưới display

Parafina ở 20–30px weight 500, line-height 0.90–1.00, màu Citron Beam. Căn giữa, nằm cách display headline 24–40px. Sử dụng cùng display font ở tỷ lệ nhỏ hơn thay vì chuyển sang Poppins — giữ cho hero hoàn toàn trong giọng display.

### Section Display Headline
**Vai trò:** Headline editorial cỡ lớn trên các section màu kem

Parafina ở 56–70px weight 500, line-height 0.85–0.90, màu Morning Glory (#7997ff) hoặc Harvest Copper (#ab5700). Căn giữa hoặc căn trái trên nền Wheat Cream, với margin trên/dưới rộng 80–120px để tạo khoảng thở editorial. Đây là nơi periwinkle xanh xuất hiện trong hệ thống chữ.

### Body Paragraph Block
**Vai trò:** Copy editorial dạng dài trong các feature sections

Poppins 16px weight 400, line-height 1.40, Harvest Copper (#ab5700) là màu chữ mặc định. Độ dài dòng tối đa khoảng 60–70 ký tự. Inline emphasis dùng màu Morning Glory (#7997ff) để làm nổi bật các cụm từ như 'environment front-of-mind' mà không thay đổi weight hay style.

### Image-Text Editorial Block
**Vai trò:** Ảnh lifestyle full-width với chữ bên dưới

Ảnh full-bleed hoặc max-width (bo tròn hoặc góc vuông, tỷ lệ rộng rãi) theo sau là một body paragraph bên dưới với gap 40px. Ảnh được xử lý như minh họa editorial — người, đồ ăn, thiên nhiên — thay vì ảnh sản phẩm. Khối chữ căn trái, max-width ~600px.

### Text-Link CTA
**Vai trò:** Điều hướng đến thêm nội dung (ví dụ: 'MORE ON US')

Poppins 12–13px weight 500 uppercase, màu Harvest Copper hoặc Morning Glory, pill border border-radius 31px, padding 6px dọc / 24px ngang, viền 1px. Không có fill — pill chỉ là outline. Thường có một dấu chấm hoặc icon mũi tên nhỏ cùng màu phía trước.

### Card
**Vai trò:** Content cards trên nền kem

Border-radius 20px, viền 1px Harvest Copper (#ab5700), padding 24px, fill Wheat Cream (#e5dccd) (giống canvas — viền định nghĩa card). Không shadow. Được dùng có chọn lọc — hầu hết nội dung chảy dưới dạng các khối editorial thay vì card grids.

### Pill Button
**Vai trò:** Interactive controls xuyên suốt

Border-radius 31px (gần như full pill), padding 6px dọc / 24px ngang, Poppins 12–13px weight 500 uppercase. Có sẵn ở dạng ghost (nền trong suốt, viền + chữ màu Citron Beam hoặc Harvest Copper) hoặc filled (fill Citron Beam #e8e359 với chữ tối). Radius 31px — không phải full 9999px pill — là điểm đặc biệt; nó tạo hình dạng mềm mại, thân thiện mà không trở thành stadium hoàn toàn.

### Scroll Indicator
**Vai trò:** Gợi ý nhẹ nhàng bên dưới hero để cuộn

Chữ monospace hoặc Poppins nhỏ '[scroll down]' màu Citron Beam, căn giữa, đặt ở mép dưới của hero. Tối giản, 12px, không ngụ ý animation — chỉ là signage kiểu chữ lặng lẽ.

### Inline Color Highlight
**Vai trò:** Các cụm từ được nhấn mạnh trong body copy

Một kỹ thuật hơn là một component: chọn các cụm từ trong body text Harvest Copper chuyển sang màu Morning Glory (#7997ff) trong khi vẫn giữ nguyên Poppins 16px weight 400 — chỉ riêng sự thay đổi màu sắc đã thu hút mắt mà không cần in đậm, in nghiêng hay gạch chân. Đây là cách links và emphasis tích hợp tự nhiên vào văn xuôi editorial.

## Do's and Don'ts

### Do
- Dùng Parafina (hoặc Bricolage Grotesque thay thế) ở weight 500 cho tất cả display và heading text — không bao giờ lên trên 500 hoặc xuống dưới 500, cách xử lý single-weight là điểm đặc trưng
- Áp dụng Citron Beam (#e8e359) làm màu chữ hero overlay trên ảnh thiên nhiên full-bleed — chartreuse trên nền xanh rừng là khoảnh khắc thị giác dễ nhận biết nhất của thương hiệu
- Đặt display type ở line-height 0.80–0.90 — leading dồn nén là điều thiết yếu; không bao giờ để display headlines thở với line-height 1.2+
- Dùng Morning Glory (#7997ff) cho inline text highlights trong body copy Harvest Copper — màu sắc là sự nhấn mạnh, không phải thay đổi weight hay style
- Mặc định tất cả body và list text thành Harvest Copper (#ab5700) — đây là màu mực của thương hiệu, không phải đen hay xám
- Áp dụng border-radius 31px cho tất cả interactive elements (buttons, links, menu triggers) — không phải 9999px, không phải 8px; 31px soft-pill là radius hệ thống
- Đặt ảnh editorial full-bleed làm lớp bề mặt với display type phủ trực tiếp — không bao giờ đặt chữ trong hộp trên ảnh

### Don't
- Không dùng Arial, Helvetica, hoặc bất kỳ system font nào cho headings — Parafina ở kích thước cực lớn là bản sắc chính của thương hiệu
- Không dùng đen (#000000) hoặc xám đậm cho body text — Harvest Copper (#ab5700) là mực mặc định
- Không áp dụng drop shadows, blurs, hoặc elevation cho cards hoặc buttons — chiều sâu đến từ nhiếp ảnh và whitespace, không phải shadow
- Không dùng card grids 12 cột chặt chẽ cho nội dung — các section editorial chảy dưới dạng các khối một cột với display type lớn
- Không vượt quá weight 500 trong Parafina — không in đậm, không black weight; display luôn ở một weight duy nhất
- Không dùng xanh lam hoặc xám cho nền trang — Wheat Cream (#e5dccd) là canvas duy nhất
- Không thêm gradient overlays, vignette effects, hoặc text-background boxes trên ảnh hero — chữ Citron Beam nằm trực tiếp trên ảnh

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Wheat Cream Canvas | `#e5dccd` | Nền trang mặc định — trắng kem ấm đón nhận mọi nội dung editorial |
| 1 | Photographic Full-Bleed | `#1a3a1a` | Hero và feature sections dùng ảnh full-bleed làm bề mặt; type phủ trực tiếp |
| 2 | Card Surface | `#e5dccd` | Cards nằm trên cùng canvas kem, được phân biệt bởi radius 20px và viền mảnh Harvest Copper |

## Elevation

Không shadow. Design system cố tình tránh drop shadows, blurs và elevation stacks. Chiều sâu được tạo ra qua ảnh full-bleed, whitespace rộng rãi, và viền mảnh 1px Harvest Copper. Các bề mặt phẳng — canvas kem là bề mặt duy nhất, và cards được định nghĩa bằng đường viền, không phải bằng cách nổi lên trên trang.

## Imagery

Ảnh lifestyle golden-hour full-bleed là trung tâm của nhận diện thị giác. Hình ảnh bao gồm: tán rừng ngập nắng với ánh sáng xuyên qua lá (hero), góc chụp từ trên cao và góc nghiêng của mọi người quây quần bên bàn ăn với đồ ăn đầy màu sắc, và chân dung tông ấm của các nhóm đa dạng. Ảnh có độ sáng cao, bão hòa ấm, và tự nhiên — không có ảnh sản phẩm studio, không có độ phẳng stock-photo. Ảnh được xử lý như bề mặt, không phải minh họa: chúng trải dài từ mép này sang mép kia với display type phủ trực tiếp, đôi khi ảnh chảy vào section tiếp theo. Không có icon system ngoài các dấu chấm và mũi tên nhỏ; không có minh họa, không có đồ họa trừu tượng, không có 3D renders. Chính nhiếp ảnh LÀ hệ thống thị giác cùng với display type.

## Layout

Hero full-bleed với display type căn giữa phủ lên, sau đó chuyển sang luồng editorial một cột căn giữa trên nền Wheat Cream. Các section được phân cách bằng khoảng trống dọc rộng 80–120px thay vì divider hoặc các dải nền xen kẽ. Bên dưới hero, nội dung theo mẫu ảnh-rồi-chữ hoặc chữ-rồi-ảnh: display headline lớn, khoảng thở rộng rãi, một bức ảnh full-width hoặc khổ lớn, sau đó là body paragraph căn trái bên dưới. Không có sidebar navigation, không có card grids, không có multi-column feature matrices. Navigation tối giản: một nút ghost 'MENU' duy nhất ở góc trên bên phải của hero. Nhịp điệu trang tổng thể là: ồn ào (ảnh full-bleed + type khổng lồ) → yên tĩnh (canvas kem + headline căn giữa) → ấm áp (ảnh + body text editorial) → yên tĩnh, lặp lại. Page max-width khoảng 1200px cho các khối text và image, mặc dù ảnh hero phá vỡ điều này để trải dài toàn bộ viewport.

## Agent Prompt Guide

**Quick Color Reference**
- text: #ab5700 (Harvest Copper)
- background: #e5dccd (Wheat Cream)
- border: #ab5700 (Harvest Copper, 1px hairline)
- accent: #e8e359 (Citron Beam)
- secondary accent: #7997ff (Morning Glory)
- primary action: #e8e359 (filled action)

**Ví dụ Component Prompts:**
1. **Hero Section**: Ảnh tán rừng full-bleed làm nền. Display type căn giữa phủ lên bằng Parafina (hoặc Bricolage Grotesque thay thế) weight 500, 120px, line-height 0.85, màu #e8e359, hiển thị 'arte*'. Bên dưới, gap 24px, sau đó subheadline ở 28px Parafina weight 500, line-height 1.0, cũng màu #e8e359. Góc trên bên phải: ghost 'MENU' pill button — nền trong suốt, viền 1px #e8e359, radius 31px, padding 6px 24px, chữ Poppins 13px weight 500 uppercase #e8e359.

2. **Section Headline**: Căn giữa trên nền Wheat Cream (#e5dccd). Parafina 64px weight 500, line-height 0.90, màu #7997ff. Padding trên 80px, padding dưới 80px, max-width 800px căn giữa.

3. **Editorial Image-Text Block**: Ảnh full-width (mọi người tại bàn, max-width 1200px, không border-radius hoặc 20px nếu được chứa). Gap 40px bên dưới. Body paragraph: Poppins 16px weight 400, line-height 1.40, màu #ab5700, max-width 620px, căn trái. Một cụm từ trong đoạn văn chuyển sang màu #7997ff để nhấn mạnh.

4. **Ghost Pill Link Button**: Nền trong suốt, viền 1px Harvest Copper (#ab5700), border-radius 31px, padding 6px dọc / 24px ngang, chữ Poppins 13px weight 500 uppercase #ab5700. Phía trước có một dấu chấm 8px cùng màu.

5. **Card on Cream Canvas**: Border-radius 20px, viền 1px #ab5700, padding 24px, fill #e5dccd. Body text Poppins 16px weight 400 #ab5700. Không shadow, không thay đổi fill — chỉ riêng viền định nghĩa cạnh card trên nền canvas cùng màu.

## Similar Brands

- **Oatly** — Cùng canvas kem ấm với display type vui tươi quá khổ và ảnh lifestyle full-bleed; cả hai đều dùng một màu accent đậm duy nhất trên nền tông đất và dựa vào typography poster editorial thay vì UI chrome
- **Yolélé** — Ảnh thiên nhiên và đồ ăn full-bleed với display headline lớn căn giữa phủ lên, bảng màu tông đất ấm, và nút ghost-pill navigation tối giản
- **Sweetgreen** — Ngôn ngữ thương hiệu farm-to-table với bề mặt kem ấm, ảnh lifestyle làm yếu tố thị giác chính, và UI components tối giản — mặc dù arte* thiên về editorial hơn và ít dùng grid hơn
- **Farmacy** — Bảng màu thương hiệu thực vật ấm với nền kem, display type bo tròn hữu cơ, và một màu accent sáng duy nhất (chartreuse trong arte*, xanh lá trong Farmacy) được dùng trên nền ảnh thiên nhiên

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-wheat-cream: #e5dccd;
  --color-harvest-copper: #ab5700;
  --color-citron-beam: #e8e359;
  --color-morning-glory: #7997ff;
  --color-amber-glow: #d99623;
  --color-forest-floor: #214534;
  --color-deep-moss: #103d26;
  --color-olive-branch: #568037;
  --color-slate-bloom: #3d549c;
  --color-coral-petal: #e99686;

  /* Typography — Font Families */
  --font-poppins: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-parafina: 'Parafina', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-exposuretrial: 'ExposureTrial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-gtstandard-m: 'GTStandard-M', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-itcavantgardegothicmedium: 'ITC_Avant_Garde_Gothic_Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.4;
  --text-body: 16px;
  --leading-body: 1.4;
  --text-subheading: 20px;
  --leading-subheading: 1;
  --text-heading-sm: 30px;
  --leading-heading-sm: 0.9;
  --text-heading: 56px;
  --leading-heading: 0.9;
  --text-heading-lg: 70px;
  --leading-heading-lg: 0.85;
  --text-display: 104px;
  --leading-display: 0.85;
  --text-display-xl: 173px;
  --leading-display-xl: 0.8;

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

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-40: 40px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-100: 100px;
  --spacing-140: 140px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 80-120px;
  --card-padding: 24px;
  --element-gap: 24px;

  /* Border Radius */
  --radius-2xl: 20px;
  --radius-3xl: 31px;
  --radius-full: 64px;

  /* Named Radii */
  --radius-tags: 9999px;
  --radius-cards: 20px;
  --radius-other: 64px;
  --radius-buttons: 31px;

  /* Surfaces */
  --surface-wheat-cream-canvas: #e5dccd;
  --surface-photographic-full-bleed: #1a3a1a;
  --surface-card-surface: #e5dccd;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-wheat-cream: #e5dccd;
  --color-harvest-copper: #ab5700;
  --color-citron-beam: #e8e359;
  --color-morning-glory: #7997ff;
  --color-amber-glow: #d99623;
  --color-forest-floor: #214534;
  --color-deep-moss: #103d26;
  --color-olive-branch: #568037;
  --color-slate-bloom: #3d549c;
  --color-coral-petal: #e99686;

  /* Typography */
  --font-poppins: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-parafina: 'Parafina', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-exposuretrial: 'ExposureTrial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-gtstandard-m: 'GTStandard-M', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-itcavantgardegothicmedium: 'ITC_Avant_Garde_Gothic_Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.4;
  --text-body: 16px;
  --leading-body: 1.4;
  --text-subheading: 20px;
  --leading-subheading: 1;
  --text-heading-sm: 30px;
  --leading-heading-sm: 0.9;
  --text-heading: 56px;
  --leading-heading: 0.9;
  --text-heading-lg: 70px;
  --leading-heading-lg: 0.85;
  --text-display: 104px;
  --leading-display: 0.85;
  --text-display-xl: 173px;
  --leading-display-xl: 0.8;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-40: 40px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-100: 100px;
  --spacing-140: 140px;

  /* Border Radius */
  --radius-2xl: 20px;
  --radius-3xl: 31px;
  --radius-full: 64px;
}
```