# Amie

> Amie — Style Reference

## Prompt Content

```
# Amie — Style Reference
> Sunlit productivity dashboard — một workspace nơi mọi thứ đều trắng, phẳng và có chủ đích, với một công tắc xanh điện duy nhất để kích hoạt mọi thứ.

**Theme:** light

Amie mang cảm giác như một productivity workspace tràn ngập ánh sáng — bề mặt trắng sáng, gần như mang tính lâm sàng trong sự tiết chế, được điểm xuyết bằng một màu xanh da trời điện (#11a8ff) chỉ xuất hiện khi cần hành động. Trang web gần như hoàn toàn trung tính — 98% achromatic — khiến mọi khoảnh khắc có màu sắc (điểm nhấn amber trên 'without a bot', icon lịch xanh lá, tag tím) đều có chủ đích thay vì chỉ để trang trí. Inter với letter-spacing âm dày (-0.025em ở kích thước display) nén các headline thành những khối tự tin mà không cần đến weight cực đoan — weight 700 ở 56px đọc rất dứt khoát nhưng không hung hăng. Cards sử dụng border 1px siêu mảnh qua các lớp shadow gần như vô hình thay vì stroke nhìn thấy được, tạo cho các product UI previews cảm giác như đang nổi nhẹ trên trang. Nút ghost 'Request a demo' bên cạnh CTA đã tô màu tạo ra một cấu trúc lựa chọn theo cặp xuất hiện xuyên suốt trang.

## Tokens — Colors

| Name | Value | Token | Vai trò |
|------|-------|-------|---------|
| Pure Canvas | `#ffffff` | `--color-pure-canvas` | Nền trang, bề mặt card, button fills cho các hành động phụ |
| Fog Surface | `#fafafa` | `--color-fog-surface` | Nền card thay thế, phân biệt section nhẹ |
| Ash Border | `#cdcdcd` | `--color-ash-border` | Tất cả border UI — input, card, divider, icon rings — ở dạng 1px solid |
| Stone Divider | `#ebebeb` | `--color-stone-divider` | Nền tag (pill highlight 'Within 47 seconds:'), dải nền section |
| Graphite Body | `#5c5c5c` | `--color-graphite-body` | Body text phụ, nav labels, subtext |
| Silver Muted | `#a0a0a0` | `--color-silver-muted` | Placeholder text, icon strokes, UI labels đã được giảm nhấn mạnh |
| Ink Primary | `#000000` | `--color-ink-primary` | Heading chính, body text, icon fills |
| Charcoal Dark | `#2e2e2e` | `--color-charcoal-dark` | UI elements có border tối, stroke contexts nâng cao |
| Sky Action | `#11a8ff` | `--color-sky-action` | CTA buttons ('Get started', 'Start free trial'), active nav highlight, brand accent — màu hành động có sắc duy nhất trên một trang gần như đơn sắc |
| Sky Pale | `linear-gradient(to right top, #cfeeff, #41baff)` | `--color-sky-pale` | Nền highlight sau các cụm từ chính ('in just 7 days'), gradient trang trí khởi đầu — sắc xanh nhạt không bão hòa |
| Amie Pink | `#f6a6a6` | `--color-amie-pink` | Brand token từ CSS custom properties; accent trang trí cho các highlight mềm |
| Mint Active | `#01ca45` | `--color-mint-active` | Quan sát thấy trong icon fill, icon color, các fill khác. |
| Violet Tag | `#a050ff` | `--color-violet-tag` | Feature label 'Shareable Pages', tag borders cho feature category chips |
| Amber Highlight | `#fbefaf` | `--color-amber-highlight` | Nền highlight text sau 'without a bot' trong hero headline — một nốt ấm duy nhất trong bảng màu lạnh |

## Tokens — Typography

### Inter — Kiểu chữ duy nhất cho mọi ngữ cảnh — từ headline đến caption. Weight 700 ở 56px cho hero display, 600 ở 40px cho section headings, 400–500 cho body và UI. Tracking -0.025em ở kích thước lớn (≈-1.4px ở 56px, ≈-0.48px ở 40px) nén các headline thành những khối chặt chẽ, tự tin. Không có kiểu chữ trang trí hay serif nào khác — hệ thống mono-typographic. · `--font-inter`
- **Thay thế:** Inter (Google Fonts)
- **Weights:** 400, 500, 550, 600, 700
- **Kích thước:** 12px, 13px, 14px, 16px, 20px, 40px, 56px
- **Line height:** 1.00–1.75 (display: 1.00–1.14, body: 1.50–1.75)
- **Letter spacing:** -1.40px ở 56px (-0.025em), -0.48px ở 40px (-0.012em), normal ở 16px trở xuống
- **OpenType features:** `normal`
- **Vai trò:** Kiểu chữ duy nhất cho mọi ngữ cảnh — từ headline đến caption. Weight 700 ở 56px cho hero display, 600 ở 40px cho section headings, 400–500 cho body và UI. Tracking -0.025em ở kích thước lớn (≈-1.4px ở 56px, ≈-0.48px ở 40px) nén các headline thành những khối chặt chẽ, tự tin. Không có kiểu chữ trang trí hay serif nào khác — hệ thống mono-typographic.

### Inter var — Inter var — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-inter-var`
- **Weights:** 400
- **Kích thước:** 16px
- **Line height:** 1.75
- **Vai trò:** Inter var — đượ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.5 | — | `--text-caption` |
| body | 14px | 1.75 | — | `--text-body` |
| heading-sm | 20px | 1.4 | — | `--text-heading-sm` |
| heading | 40px | 1.14 | -0.48px | `--text-heading` |
| display | 56px | 1 | -1.4px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Name | Value | 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` |
| 48 | 48px | `--spacing-48` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 96 | 96px | `--spacing-96` |
| 188 | 188px | `--spacing-188` |
| 192 | 192px | `--spacing-192` |

### Border Radius

| Element | Value |
|---------|-------|
| tags | 9999px |
| cards | 12px |
| chips | 9999px |
| badges | 4px |
| inputs | 8px |
| modals | 16px |
| buttons | 12px |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| subtle | `rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset` | `--shadow-subtle` |
| subtle-2 | `rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.06) ...` | `--shadow-subtle-2` |
| subtle-3 | `rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset` | `--shadow-subtle-3` |
| subtle-4 | `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0p...` | `--shadow-subtle-4` |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 80px
- **Card padding:** 16px
- **Element gap:** 8px

## Components

### Primary CTA Button
**Vai trò:** Các hành động chuyển đổi chính — 'Get started', 'Start free trial'

Nền #11a8ff, chữ trắng (#ffffff), radius 12px, padding trên/dưới 12px, padding trái/phải 28px. Font Inter weight 600, 14px. Không có border. Trên các section tối, xử lý tương tự. Nút chromatic được tô màu duy nhất trong hệ thống.

### Ghost Secondary Button
**Vai trò:** 'Request a demo' và các hành động phụ được đặt cạnh primary CTA

Nền #ffffff, chữ #5c5c5c, radius 12px, padding 12px/28px, border 1px #cdcdcd qua shadow: rgba(0,0,0,0.06) 0px 0px 0px 1px. Inter weight 500, 14px. Nằm cạnh primary CTA để tạo ra một lựa chọn nhị phân.

### Text / Nav Ghost Button
**Vai trò:** Các liên kết điều hướng và hành động ưu tiên thấp như 'Features', 'Pricing', 'Login'

Nền trong suốt, chữ #000000 hoặc #5c5c5c, không có border radius (0px), padding 20px tất cả các cạnh. Inter weight 400–500, 14px. Xuất hiện trong nav bar và các ngữ cảnh inline.

### Small Outline Button
**Vai trò:** Các hành động UI nhỏ gọn trong khu vực product preview

Nền trong suốt, chữ đen, radius 8px, padding 6px/10px. Border 1px qua #cdcdcd. Inter weight 500, 13px. Được sử dụng bên trong các product screenshot cards.

### Feature Card (Trắng)
**Vai trò:** Các card nội dung chính giới thiệu tính năng sản phẩm

Nền #ffffff, radius 12px, không có padding rõ ràng (nội dung quyết định), shadow: rgba(0,0,0,0.06) 0px 0px 0px 1px, rgba(0,0,0,0.06) 0px 1px 1px -0.5px, rgba(0,0,0,0.06) 0px 3px 3px -1.5px. Đường viền shadow siêu mảnh hoạt động như một border 1px.

### Feature Card (Off-White)
**Vai trò:** Các card tính năng phụ với sự khác biệt nền tinh tế

Nền #fafafa, radius 12px, cùng 3-layer shadow như variant card trắng. Padding 0 — nội dung bên trong sử dụng spacing riêng.

### Highlight Chip
**Vai trò:** Các tag nhấn mạnh text inline như label 'Within 47 seconds:'

Nền #ebebeb, radius 16px, padding 8px/16px, không có shadow. Inter weight 600, 14–16px, chữ #000000. Được sử dụng để cô lập một số liệu hoặc cụm từ chính về mặt thị giác.

### Category Tag (Pill)
**Vai trò:** Các label danh mục tính năng — 'Meeting Notes', 'Shareable Pages'

Radius 9999px (full pill), nền trong suốt hoặc pha màu theo danh mục, border 1px với màu accent của danh mục (#01ca45 cho Meeting Notes, #a050ff cho Shareable Pages). Inter weight 500, 13px.

### Inline Text Highlight
**Vai trò:** Nhấn mạnh từ cấp độ word trong hero headline như 'without a bot'

Nền #fbefaf (amber), được áp dụng dưới dạng backgroundColor cho một span bên trong heading. Không có border, không có radius. Tạo ra một khoảnh khắc tương phản ấm áp duy nhất trong một headline đơn sắc lạnh.

### Navigation Bar
**Vai trò:** Điều hướng trang cố định phía trên

Nền #ffffff với backdrop-filter blur(16px) khi cuộn. Chiều cao ~60px, max-width 1200px căn giữa. Logo bên trái, nav links ở giữa (Inter 14px weight 500, màu #000000), 'Login' dưới dạng text link, 'Get started' dưới dạng nút tô màu xanh da trời (radius 12px, #11a8ff) căn phải. Border-bottom 1px #cdcdcd.

### Product Preview Card
**Vai trò:** Card screenshot/demo lớn trong hero section

Nền #ffffff, radius 12px 12px 0px 0px (bo tròn phía trên, phía dưới phẳng), không có shadow trên container bên ngoài. Chứa một UI screenshot full-bleed. Chiều rộng chiếm phần lớn cột nội dung. Được phủ một bộ lọc grayscale(1) cho UI bên trong, sau đó chuyển sang full-color khi hover/active.

### Social Proof Logo Strip
**Vai trò:** Logo các công ty 'Trusted by teams at'

Logo được render ở grayscale(1), cuộn ngang qua animation 'scrollX' (70s linear). Không có card container — logo nằm trực tiếp trên nền trang trắng. Inter caption 12px #5c5c5c cho text label.

## Do's and Don'ts

### Nên
- Chỉ sử dụng #11a8ff cho các nút CTA đã tô màu — không có UI element nào khác nhận được màu tô chromatic
- Áp dụng letter-spacing -1.40px ở 56px và -0.48px ở 40px cho tất cả display và section headings sử dụng Inter
- Render card borders qua 3-layer shadow stack (rgba(0,0,0,0.06) 0px 0px 0px 1px ...) thay vì thuộc tính border-color rõ ràng
- Sử dụng radius 9999px cho tất cả các thành phần tag/pill/chip và category labels; sử dụng 12px cho cards và primary buttons
- Highlight các số liệu hoặc cụm từ chính inline với nền #fbefaf ở cấp độ span — chỉ áp dụng một lần cho mỗi hero để giữ tác động
- Duy trì bộ lọc grayscale(1) trên partner/social proof logos và product screenshots trong các ngữ cảnh phụ
- Giữ các category accent colors (#01ca45, #a050ff) chỉ dùng cho border trên tags — không bao giờ tô màu bề mặt UI với chúng

### Không nên
- Không bao giờ thêm màu hành động chromatic thứ hai — #11a8ff là CTA fill duy nhất; các màu cạnh tranh sẽ phá vỡ hệ thống phân cấp
- Không sử dụng weight dưới 400 cho body text hoặc trên 700 cho bất kỳ text nào — dải weight 400–700 là toàn bộ hệ thống
- Tránh khai báo border rõ ràng cho cards — kỹ thuật shadow-as-border (vòng opacity 0.06) là thứ giúp các bề mặt được tích hợp, không bị tách rời
- Không bao giờ sử dụng #a0a0a0 hoặc #5c5c5c cho headings — đây là các màu body phụ và label
- Không căn giữa các đoạn body text — text căn trái với baseline subheading 16px là mẫu nội dung nhất quán
- Tránh gradients trong các UI components — sky gradient (#cfeeff → #41baff) chỉ dùng để trang trí phía sau các cụm từ được highlight, không phải là xử lý cho button hay card
- Không áp dụng backdrop-filter blur bên ngoài navigation bar — nó chỉ xuất hiện trên sticky nav khi cuộn

## Surfaces

| Level | Name | Value | Mục đích |
|-------|------|-------|----------|
| 0 | Page Canvas | `#ffffff` | Nền trang gốc |
| 1 | Card Surface | `#fafafa` | Feature cards và các section fill thay thế |
| 2 | Raised Card | `#ffffff` | Các card trắng nâng cao với layered shadow stack opacity 0.06 tạo ảo giác border 1px |
| 3 | Highlight Band | `#ebebeb` | Inline highlight pills, calendar day chips, section accent backgrounds |

## Elevation

- **Feature Card:** `rgba(0,0,0,0.06) 0px 0px 0px 1px, rgba(0,0,0,0.06) 0px 1px 1px -0.5px, rgba(0,0,0,0.06) 0px 3px 3px -1.5px`
- **Input Field (inset):** `rgba(0,0,0,0.05) 0px 0px 0px 1px inset`
- **Dropdown / Popover:** `rgba(0,0,0,0.1) 0px 1px 3px 0px, rgba(0,0,0,0.1) 0px 1px 2px -1px`

## Imagery

Hình ảnh chủ yếu là các product UI screenshots — giao diện của chính ứng dụng được render ở tỷ lệ thực tế bên trong các card bo tròn phía trên. Không có ảnh chụp lối sống, không có người, không có 3D renders trừu tượng. Screenshots có màu đầy đủ và chi tiết, hiển thị bố cục sidebar+nội dung thực tế của sản phẩm. Bên ngoài screenshots, trang web chỉ là text thuần túy và các UI components. Một yếu tố đồ họa trang trí duy nhất là một chú thích kiểu viết tay ('These companies have 10+ Amie users') gợi ý tính xác thực. Icons là các biến thể filled và outlined với một stroke weight duy nhất, đơn sắc ngoại trừ các biến thể có màu theo danh mục (Mint #01ca45, Violet #a050ff). Tổng thể: text-dominant, image-sparse — product screenshot CHÍNH LÀ hero visual, không phải là yếu tố hỗ trợ.

## Layout

Max-width ~1200px căn giữa trên một canvas trắng full-bleed. Navigation là một top bar tối giản với logo + 3 liên kết + 2 nút hành động. Hero section được chia: khối headline căn trái với hai CTA xếp chồng bên cạnh một product screenshot card lớn kéo dài xuống dưới fold. Bên dưới hero: logo strip (full-bleed scrolling), sau đó là một headline section lớn căn giữa với đoạn text chặt chẽ và một CTA duy nhất. Feature sections sử dụng các lưới card xen kẽ hoặc xếp chồng — 2-3 cột — với các card có chiều cao bằng nhau. Không có divider nhìn thấy được giữa các section; spacing một mình tạo ra nhịp điệu (khoảng cách section ước tính 80px). Trang web dài (~14000px) với nhiều khối tính năng xếp chồng. Các khu vực nội dung dày đặc sử dụng element gaps 8px; các chuyển tiếp section sử dụng 80px. Sticky nav thu gọn khi cuộn qua backdrop blur.

## Agent Prompt Guide

**Tham khảo màu nhanh**
- text (primary): #000000
- text (secondary): #5c5c5c
- background: #ffffff
- border: #cdcdcd (1px solid)
- accent / highlight band: #ebebeb
- primary action: #11a8ff (filled action)

**Ví dụ Component Prompts**

1. **Hero Section**: Nền trắng (#ffffff). Headline căn trái ở 56px Inter weight 700, #000000, letter-spacing -1.40px, line-height 1.00. Bọc một cụm từ (ví dụ 'without a bot') trong một inline span với nền #fbefaf, không có radius. Bên dưới headline: các nút ghép đôi — filled (nền #11a8ff, chữ #ffffff, radius 12px, padding 12px/28px, Inter 600 14px) và ghost (nền #ffffff, chữ #5c5c5c, border 1px #cdcdcd, cùng radius và padding). Bên phải: product screenshot bên trong một card trắng với radius 12px 12px 0px 0px và 3-layer shadow rgba(0,0,0,0.06).

2. **Feature Card Grid**: Lưới 3 cột, gap 8px. Mỗi card: nền #ffffff, radius 12px, shadow rgba(0,0,0,0.06) 0px 0px 0px 1px, rgba(0,0,0,0.06) 0px 1px 1px -0.5px, rgba(0,0,0,0.06) 0px 3px 3px -1.5px. Card heading Inter 20px weight 600 #000000. Body text Inter 14px weight 400 #5c5c5c, line-height 1.75.

3. **Navigation Bar**: Nền trắng, backdrop-filter blur(16px), border-bottom 1px #cdcdcd. Logo (icon hình vuông 16px) bên trái. Ở giữa: 'Features' và 'Pricing' dưới dạng nút trong suốt, Inter 14px weight 500, #000000, radius 0px, padding 20px. Bên phải: text link 'Login' #000000, sau đó nút 'Get started' fill #11a8ff, chữ #ffffff, radius 12px, padding 12px/28px.

4. **Category Tag Pill**: Full pill radius 9999px, nền trong suốt, border 1px với màu danh mục (#01ca45 cho Meeting Notes, #a050ff cho Shareable Pages). Chữ cùng màu, Inter 13px weight 500, padding 6px/12px.

5. **Section Stat Highlight**: Heading căn giữa ở 40px Inter weight 700 #000000 letter-spacing -0.48px. Bọc cụm số liệu đầu trong một span với nền #ebebeb, radius 16px, padding 8px/16px. Phần còn lại của headline chữ đen thuần. Một nút 'Get started' duy nhất (#11a8ff, radius 12px) bên dưới với margin-top 24px.

## Gradient System

Hai gradients, cả hai đều thuộc họ xanh da trời, chỉ được sử dụng để trang trí:
1. **Sky Wash**: linear-gradient(to right top, #cfeeff, #41baff) — được sử dụng làm nền tint phía sau các cụm từ hoặc feature sections được highlight. Không bao giờ trên buttons hoặc cards.
2. **Blue Depth**: linear-gradient(to right top, #11a8ff, #41baff) — sky gradient đậm hơn cho các khối trang trí có thương hiệu. Cả hai đều chia sẻ cùng hướng góc (top-right). Không giới thiệu gradients trong các họ màu khác.

## Similar Brands

- **Notion** — Cùng mono-typographic (chỉ Inter), giao diện gần như không màu với một accent color duy nhất trên các action elements
- **Linear** — Cùng letter-spacing âm dày trên display headings và hairline-shadow card borders tạo bề mặt nổi phẳng
- **Superhuman** — CTA điện đơn sắc trên nền trắng, product screenshot productivity-app làm hero visual, nav tối giản
- **Cron (Notion Calendar)** — Calendar/productivity SaaS, UI trắng-dominant với hệ thống border #cdcdcd và icon lịch accent xanh lá
- **Craft** — Công cụ productivity light-mode toàn Inter với accent highlight amber/ấm trên nền achromatic và kỹ thuật shadow-as-border cho card

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-pure-canvas: #ffffff;
  --color-fog-surface: #fafafa;
  --color-ash-border: #cdcdcd;
  --color-stone-divider: #ebebeb;
  --color-graphite-body: #5c5c5c;
  --color-silver-muted: #a0a0a0;
  --color-ink-primary: #000000;
  --color-charcoal-dark: #2e2e2e;
  --color-sky-action: #11a8ff;
  --color-sky-pale: #cfeeff;
  --gradient-sky-pale: linear-gradient(to right top, #cfeeff, #41baff);
  --color-amie-pink: #f6a6a6;
  --color-mint-active: #01ca45;
  --color-violet-tag: #a050ff;
  --color-amber-highlight: #fbefaf;

  /* Typography — Font Families */
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-inter-var: 'Inter var', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --text-body: 14px;
  --leading-body: 1.75;
  --text-heading-sm: 20px;
  --leading-heading-sm: 1.4;
  --text-heading: 40px;
  --leading-heading: 1.14;
  --tracking-heading: -0.48px;
  --text-display: 56px;
  --leading-display: 1;
  --tracking-display: -1.4px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-w550: 550;
  --font-weight-semibold: 600;
  --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-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-188: 188px;
  --spacing-192: 192px;

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

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 32px;
  --radius-full: 9999px;

  /* Named Radii */
  --radius-tags: 9999px;
  --radius-cards: 12px;
  --radius-chips: 9999px;
  --radius-badges: 4px;
  --radius-inputs: 8px;
  --radius-modals: 16px;
  --radius-buttons: 12px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset;
  --shadow-subtle-2: rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.06) 0px 1px 1px -0.5px, rgba(0, 0, 0, 0.06) 0px 3px 3px -1.5px;
  --shadow-subtle-3: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset;
  --shadow-subtle-4: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;

  /* Surfaces */
  --surface-page-canvas: #ffffff;
  --surface-card-surface: #fafafa;
  --surface-raised-card: #ffffff;
  --surface-highlight-band: #ebebeb;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-pure-canvas: #ffffff;
  --color-fog-surface: #fafafa;
  --color-ash-border: #cdcdcd;
  --color-stone-divider: #ebebeb;
  --color-graphite-body: #5c5c5c;
  --color-silver-muted: #a0a0a0;
  --color-ink-primary: #000000;
  --color-charcoal-dark: #2e2e2e;
  --color-sky-action: #11a8ff;
  --color-sky-pale: #cfeeff;
  --color-amie-pink: #f6a6a6;
  --color-mint-active: #01ca45;
  --color-violet-tag: #a050ff;
  --color-amber-highlight: #fbefaf;

  /* Typography */
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-inter-var: 'Inter var', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --text-body: 14px;
  --leading-body: 1.75;
  --text-heading-sm: 20px;
  --leading-heading-sm: 1.4;
  --text-heading: 40px;
  --leading-heading: 1.14;
  --tracking-heading: -0.48px;
  --text-display: 56px;
  --leading-display: 1;
  --tracking-display: -1.4px;

  /* 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-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-188: 188px;
  --spacing-192: 192px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 32px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset;
  --shadow-subtle-2: rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.06) 0px 1px 1px -0.5px, rgba(0, 0, 0, 0.06) 0px 3px 3px -1.5px;
  --shadow-subtle-3: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset;
  --shadow-subtle-4: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
}
```