# Relief

> Relief — Style Reference

## Prompt Content

```
# Relief — Style Reference
> Bến cảng giấy kem dưới bầu trời xanh phẳng lặng

**Theme:** light

Relief sử dụng ngôn ngữ hàng hải ấm áp: một canvas màu kem (#f9f7f0) thay thế cho màu trắng gắt mặc định, và một màu xanh da trời rực rỡ duy nhất (#2e96ff) đảm nhiệm mọi tương tác. Kiến trúc thông tin đảo ngược mô hình card sáng trên nền trắng thông thường — các feature card và testimonial card màu xanh navy đậm (#134f26f) nằm trên nền kem như phao trên cát, tạo nên những khối thị giác táo bạo. Font chữ headline Gilroy chạy với tracking -0.018em đồng nhất ở mọi kích cỡ, mang lại vẻ chắc chắn, bo tròn và tự tin cho văn bản. Các nút bấm tạo trọng lượng không phải bằng gradient hay glow, mà bằng một drop-shadow xanh đặc 7px dày, khiến phần tô màu xanh da trời như thể đang nhấc bổng lên khỏi trang giấy.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Warm Cream | `#f9f7f0` | `--color-warm-cream` | Canvas trang — toàn bộ site nằm trên nền trắng ngà này, không bao giờ là #ffffff thuần. Loại bỏ vẻ vô cảm của SaaS; mang cảm giác gần gũi, như giấy |
| Snow | `#ffffff` | `--color-snow` | Bề mặt card nâng cao, trường nhập liệu và các phần tử có viền sáng |
| Ink | `#333333` | `--color-ink` | Văn bản UI và body chính — màu trung tính chủ đạo cho nội dung dễ đọc trên card, đoạn văn và nhãn |
| Charcoal | `#212121` | `--color-charcoal` | Các trường hợp văn bản nặng hơn, copy nhấn mạnh |
| Fog | `#d0d5dd` | `--color-fog` | Đường viền mảnh và dải phân cách giữa các section và card |
| Slate | `#616c8a` | `--color-slate` | Văn bản phụ mờ, body copy trong ngữ cảnh nhẹ hơn, metadata giảm nhấn |
| Slate Border | `#40444e` | `--color-slate-border` | Đường viền mạnh hơn và outline link khi cần thêm trọng lượng |
| Deep Harbor | `#13426f` | `--color-deep-harbor` | Phần tô feature card, testimonial card, văn bản heading — bề mặt tối chủ đạo neo các khối nội dung trên nền kem |
| Sky Pop | `#2e96ff` | `--color-sky-pop` | Nút hành động chính, trạng thái active, văn bản nhấn mạnh chính — điểm nhấn màu sắc duy nhất điều khiển mọi tương tác |
| Deep Wave | `#0254a5` | `--color-deep-wave` | Đường viền link và hành động dạng outline — màu navy đậm hơn cho các phần tử tương tác dạng ghost cần đọc được trên nền kem |
| Sky Tint | `#bde1f9` | `--color-sky-tint` | Nền badge và trust-pill, lớp highlight mềm phía sau icon và social proof |
| Sky Wash | `#cde7fb` | `--color-sky-wash` | Tông màu shadow nút — cùng họ màu sử dụng cho pop shadow dày dưới nút xanh da trời |
| Info Mist | `#73b9ff` | `--color-info-mist` | Điểm nhấn trang trí màu xanh cho icon, dấu hiệu và chi tiết đồ họa nhỏ |
| Sky Mid | `#50a7ff` | `--color-sky-mid` | Phần tô minh họa trang trí, tông trung trong 3D hero artwork |

## Tokens — Typography

### Gilroy — Hệ thống type đơn font — Gilroy chạy ở mọi kích cỡ từ caption 12px đến hero headline 58px. Các dạng hình học bo tròn mang lại cho thương hiệu giọng điệu tài chính thân thiện mà không bị cứng nhắc như một grotesque. Weight 700 là mặc định làm việc cho heading và nút; weight 500 dùng cho UI label. · `--font-gilroy`
- **Thay thế:** Montserrat, Nunito, Manrope
- **Weights:** 400, 500, 600, 700, 800
- **Kích cỡ:** 12, 14, 16, 18, 20, 32, 40, 49, 53, 58
- **Line height:** 0.94 (display), 1.10–1.29 (headings), 1.40–1.70 (body)
- **Letter spacing:** -0.018em ở mọi kích cỡ — tracking chặt đồng nhất mang lại cho Gilroy cảm giác gọn gàng, có chủ đích bất kể tỷ lệ
- **OpenType features:** `"ss01" on (nếu có)`
- **Vai trò:** Hệ thống type đơn font — Gilroy chạy ở mọi kích cỡ từ caption 12px đến hero headline 58px. Các dạng hình học bo tròn mang lại cho thương hiệu giọng điệu tài chính thân thiện mà không bị cứng nhắc như một grotesque. Weight 700 là mặc định làm việc cho heading và nút; weight 500 dùng cho UI label.

### Type Scale

| Vai trò | Kích cỡ | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.5 | -0.22px | `--text-caption` |
| body-sm | 14px | 1.5 | -0.25px | `--text-body-sm` |
| body | 16px | 1.6 | -0.29px | `--text-body` |
| subheading | 18px | 1.5 | -0.32px | `--text-subheading` |
| heading-sm | 20px | 1.4 | -0.36px | `--text-heading-sm` |
| heading | 32px | 1.29 | -0.58px | `--text-heading` |
| heading-lg | 40px | 1.2 | -0.72px | `--text-heading-lg` |
| display | 58px | 1.1 | -1.04px | `--text-display` |

## Tokens — Spacing & Shapes

**Density:** spacious

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 7 | 7px | `--spacing-7` |
| 8 | 8px | `--spacing-8` |
| 10 | 10px | `--spacing-10` |
| 11 | 11px | `--spacing-11` |
| 14 | 14px | `--spacing-14` |
| 16 | 16px | `--spacing-16` |
| 18 | 18px | `--spacing-18` |
| 20 | 20px | `--spacing-20` |
| 21 | 21px | `--spacing-21` |
| 24 | 24px | `--spacing-24` |
| 28 | 28px | `--spacing-28` |
| 30 | 30px | `--spacing-30` |
| 34 | 34px | `--spacing-34` |
| 40 | 40px | `--spacing-40` |
| 56 | 56px | `--spacing-56` |
| 70 | 70px | `--spacing-70` |

### Border Radius

| Phần tử | Giá trị |
|---------|-------|
| hero | 49px |
| cards | 18-30px |
| badges | 40-100px (pill) |
| buttons | 40-70px (pill) |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| subtle | `rgba(154, 207, 246, 0.5) 0px 7px 0px 0px` | `--shadow-subtle` |
| subtle-2 | `rgba(0, 0, 0, 0.05) 0px 3px 0px 0px` | `--shadow-subtle-2` |
| subtle-3 | `rgba(154, 207, 246, 0.5) 0px 5px 0px 0px` | `--shadow-subtle-3` |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 56-80px
- **Card padding:** 28px
- **Element gap:** 14px

## Components

### Primary CTA Button
**Vai trò:** Hành động chuyển đổi chính — xuất hiện trong hero, feature section và sticky header

Fill #2e96ff, text #ffffff, Gilroy 700, 16px. Padding 14px 28px. Border-radius 40-70px (pill). Shadow đặc trưng rgba(154,207,246,0.5) 0px 7px 0px 0px — một offset xanh đặc phẳng 7px bên dưới nút, không phải blur mềm, khiến nút trông như được nâng vật lý lên khỏi canvas kem.

### Header CTA Button
**Vai trò:** Hành động cố định ở góc trên bên phải mọi màn hình

Giống Primary CTA Button nhưng gọn hơn một chút — padding 10-14px 28px, radius 40px. Luôn là xanh da trời với chữ trắng và cùng shadow pop xanh da trời 7px.

### Ghost Outline Button
**Vai trò:** Hành động phụ khi nút chính cũng có mặt

Fill trong suốt hoặc #ffffff, border 1-2px #ffffff hoặc #d0d5dd, text #ffffff hoặc #333333 tùy bề mặt. Radius 40px (pill). Padding 10-14px 28px. Không shadow.

### Feature Card
**Vai trò:** Card lưới ba cột giải thích một bước sản phẩm (Download, Link, Find savings)

Fill #13426f (navy đậm), text #ffffff. Padding 28px. Border-radius 18-26px. Shadow nhẹ rgba(0,0,0,0.05) 0px 3px 0px 0px. Chứa heading Gilroy 700 20-32px và một minh họa hàng hải 3D. Nằm trực tiếp trên canvas kem — không cần border vì độ tương phản navy/kem đã đủ mạnh.

### Testimonial Card
**Vai trò:** Đánh giá người dùng trong hàng cuộn ngang

Fill #13426f, text #ffffff. Padding 28px. Border-radius 18-30px. Năm ngôi sao vàng ở trên, tiêu đề review Gilroy 700 ~18px, body copy Gilroy 400 14-16px, tên tác giả ở dưới. Không shadow. Chiều rộng thay đổi để tạo cảm giác marquee.

### Trust Badge Pill
**Vai trò:** Chip social-proof phía trên hero headline (ví dụ 'Trusted by 160,000+ people')

Fill #bde1f9 (sky tint), text #13426f hoặc #333333. Padding 8-11px dọc, 20-21px ngang. Border-radius 40-100px (full pill). Gilroy 600-700, 12-14px. Thường chứa các chấm avatar nhỏ và một nhãn.

### Hero Phone Mockup
**Vai trò:** Hình ảnh sản phẩm nổi ở trung tâm hero

Khung điện thoại trắng, rộng ~280-320px, border-radius 26-30px trên khung. Screen fill #ffffff. Bên trong: văn bản heading tối, một con số tiết kiệm xanh da trời lớn (~$5,550 trong Gilroy 700 32-40px), một sublabel nhỏ và minh họa 3D đồng xu và con heo đất trong phao cứu sinh. Nằm trên nền trời xanh nhạt với mây bay và thuyền buồm.

### Press Logo Bar
**Vai trò:** Hàng logo hãng truyền thông dưới headline tiết kiệm

Bốn đến năm wordmark đơn sắc trong #333333 hoặc #13426f, căn giữa ngang, cao 24-32px, khoảng cách cột đều. Không logo, không dải phân cách — chỉ nhịp điệu spacing trên dải kem.

### Stat Headline Band
**Vai trò:** Section kem full-width làm nổi bật một con số chính (ví dụ 'Over $6 billion in savings found')

Fill #f9f7f0 (hoặc kem ấm hơn một chút). Văn bản căn giữa: số hoặc từ khóa hiển thị bằng #2e96ff xanh da trời, phần còn lại bằng #13426f navy đậm. Gilroy 700 ở 40-49px. Padding 56-80px dọc.

### Section Divider
**Vai trò:** Ngắt quãng thị giác giữa các khối nội dung

Thường là một dải xanh da trời nhạt full-bleed (#dfe5eb hoặc tương tự) mang minh họa, sau đó quay lại kem. Hoạt động như một sự thay đổi cảnh chứ không phải một đường kẻ — không sử dụng divider rule mảnh.

### FAQ Accordion Item
**Vai trò:** Câu hỏi/câu trả lời có thể mở rộng ở cuối các trang dài

Border-bottom 1px #d0d5dd giữa các item. Câu hỏi Gilroy 600 18-20px #13426f, câu trả lời Gilroy 400 16px #333333. Không card chrome — nằm trực tiếp trên canvas kem chỉ với hairline rule.

### App Store Pill
**Vai trò:** Link tải xuống App Store

Fill #2e96ff, text #ffffff, border-radius 40-70px (pill). Padding 14px 28px. Gilroy 700 14-16px. Cùng xử lý pop-shadow xanh da trời như primary CTA.

## Do's and Don'ts

### Do
- Sử dụng kem #f9f7f0 làm canvas trang — không bao giờ dùng trắng thuần cho nền body. Kem là đặc trưng của giọng điệu gần gũi của thương hiệu.
- Áp dụng pop shadow xanh da trời đặc 7px cho mọi primary CTA: rgba(154,207,246,0.5) 0px 7px 0px 0px. Không bao giờ dùng CSS blur cho độ nâng của nút.
- Sử dụng pill radius 40-70px trên mọi nút và badge. Không có góc vuông trên các phần tử tương tác.
- Đặt content card navy đậm (#13426f) trực tiếp trên canvas kem. Tương phản navy/kem là mẫu khối thị giác chính — bỏ qua white-card-on-cream.
- Đặt letter-spacing thành -0.018em trên mọi kích cỡ Gilroy. Tracking chặt đồng nhất từ caption 12px đến display 58px.
- Sử dụng xanh da trời (#2e96ff) làm điểm nhấn màu sắc duy nhất. Dành riêng cho CTA, trạng thái active và từ khóa trong stat headline — không bao giờ dùng cho nền fill lớn hoặc hình dạng trang trí ngoài cảnh hero.
- Đệm feature và testimonial card đến 28px và cho chúng radius 18-26px. Kết hợp với khoảng cách heading-to-body 14-18px.

### Don't
- Không sử dụng drop-shadow blur mềm ở bất cứ đâu — hệ thống chỉ sử dụng flat solid offset shadow, hoặc không có gì.
- Không giới thiệu màu thương hiệu mới ngoài bảng màu xanh da trời / navy đậm / kem / ink. Xanh lá, hồng, tím chỉ dành cho minh họa.
- Không sử dụng radius 0-8px trên nút hoặc card. Hệ thống luôn mềm mại và bo tròn — góc nhọn phá vỡ cảm giác đồ chơi.
- Không đặt văn bản navy đậm trên canvas kem cho body copy. Sử dụng #333333 cho body, dành #13426f cho heading và bề mặt card.
- Không hiển thị nền body là #ffffff. Kem #f9f7f0 là canvas; #ffffff chỉ dành cho bề mặt card nâng cao nổi phía trên.
- Không sử dụng weight 600+ cho Gilroy caption và body-sm text. Body copy giữ ở 400-500; 700+ chỉ dành cho heading, nút và nhấn mạnh.
- Không thêm nút phụ hoặc cấp ba không phải dạng pill. Nút vuông hoặc bo tròn nhẹ đọc như một hệ thống khác.

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 1 | Warm Cream | `#f9f7f0` | Canvas trang — lớp nền mà mọi section nằm trên |
| 2 | Snow | `#ffffff` | Card nâng cao và trường nhập liệu nổi trên nền kem |
| 3 | Deep Harbor | `#13426f` | Khối nội dung tối — feature card, testimonial card, hero panel tối |
| 4 | Sky Pop | `#2e96ff` | Điểm nhấn tương tác — nút CTA, chỉ báo active |
| 5 | Sky Tint | `#bde1f9` | Lớp highlight — nền badge, halo icon mềm |

## Elevation

- **Primary CTA Button:** `rgba(154, 207, 246, 0.5) 0px 7px 0px 0px — flat solid offset, không phải soft blur`
- **Secondary Pop Button:** `rgba(154, 207, 246, 0.5) 0px 5px 0px 0px`
- **Feature Card:** `rgba(0, 0, 0, 0.05) 0px 3px 0px 0px — flat offset gần như không thấy`

## Imagery

Site hoàn toàn dựa trên minh họa — không có nhiếp ảnh. 3D isometric render theo phong cách mềm mại, hơi giống claymation: một thuyền buồm xanh, một con heo đất hồng trong phao cứu sinh đỏ, một đồng xu vàng, một mỏ neo navy với dây xích, một phao cứu sinh cam. Xử lý màu sắc tươi sáng nhưng không neon — bảng màu nằm trong phạm vi xanh da trời, navy, kem ấm và vàng để minh họa cảm thấy là một phần của hệ thống, không phải nhập khẩu. Hero sắp xếp chúng như một cảnh nổi: phone mockup ở trung tâm, minh họa quay quanh nó trên nền xanh da trời với những đám mây trắng. Icon xuyên suốt là dạng filled, không outline, bằng navy đặc hoặc xanh da trời. Minh họa là bầu không khí trang trí và trưng bày sản phẩm — chúng không giải thích nội dung, chúng tạo tông màu cảm xúc (thoát ly, tự do, giải cứu).

## Layout

Các dải full-bleed xen kẽ giữa kem ấm (#f9f7f0) và xanh da trời nhạt (#dfe5eb). Hero là một stack căn giữa trên nền xanh da trời: trust badge, headline 58px, subtext 18px, CTA 40px, sau đó là phone mockup nổi trên nước với minh họa thuyền buồm ở cạnh trái. Feature grid là một hàng 3 cột card navy đậm trên nền kem. Testimonials là một hàng cuộn ngang/marquee các card navy. Các section được phân cách bằng khoảng cách dọc rộng rãi 56-80px, không phải hairline — sự thay đổi màu sắc chính là dải phân cách. Max content width ~1200px căn giữa. Navigation tối giản: logo trái, một nút pill phải, không có link menu hiển thị trong luồng hero. Các section bên dưới fold giữ nhịp điệu cột đơn căn giữa thay vì bố cục nhiều cột phức tạp.

## Agent Prompt Guide

Tham khảo màu nhanh
- text: #333333
- background: #f9f7f0 (canvas kem)
- card surface: #ffffff hoặc #13426f (khối navy đậm)
- border: #d0d5dd (hairline) hoặc #40444e (mạnh)
- accent: #2e96ff (xanh da trời — điểm nhấn màu sắc duy nhất)
- primary action: #2e96ff (filled action)

Ví dụ Component Prompts

1. Nút CTA chính xanh da trời: Fill #2e96ff, chữ trắng Gilroy 700 16px, padding 14px 28px, border-radius 40px, box-shadow rgba(154,207,246,0.5) 0px 7px 0px 0px. Shadow phải là flat solid offset, không bao giờ là blur — đây là chiều sâu đặc trưng của site.

2. Feature card navy đậm: Fill #13426f trên canvas kem (#f9f7f0). Padding 28px. Border-radius 18px. Heading trắng Gilroy 700 20-32px. Một minh họa 3D (đồng xu, mỏ neo, phao cứu sinh) lấp đầy nửa dưới. Không border; dựa vào độ tương phản navy/kem.

3. Trust badge pill: Fill #bde1f9, text #13426f Gilroy 600 14px, padding 8px 20px, border-radius 40px. Thường có tiền tố 2-3 chấm avatar tròn trong một hàng.

4. Stat headline band: Section kem (#f9f7f0) full-width, padding dọc 64px. Văn bản căn giữa Gilroy 700 40px, trong đó số hoặc từ khóa là #2e96ff và phần còn lại là #13426f.

5. Hero section xanh da trời: Nền xanh nhạt phẳng (#dfe5eb hoặc phạm vi #cde7fb), minh họa mây trắng rải rác, phone mockup căn giữa rộng ~300px với border-radius 26px, màn hình trắng hiển thị số tiết kiệm đô la xanh da trời. Không drop shadow trên dải xanh — giữ bầu không khí không trọng lượng.

## Signature Pattern — The Pop Shadow

Chi tiết đặc biệt nhất của Relief là shadow nút: thay vì drop-shadow blur mềm, các nút tạo ra một khối offset đặc 7px trong rgba(154,207,246,0.5) — một bản sao xanh da trời trong mờ của chính hình dạng nút. Điều này khiến nút xanh da trời trông như đang lơ lửng phía trên canvas kem, giống như một miếng dán được bóc ở cạnh. Nó được áp dụng nhất quán cho primary CTA và App Store links, không bao giờ cho card hoặc input. Khi tạo bất kỳ bề mặt tương tác mới nào, mặc định sử dụng flat-offset shadow này thay vì bất kỳ CSS blur nào; hệ thống từ chối độ nâng mềm để ưu tiên chiều sâu chunky, giống đồ chơi.

## Palette Discipline

Site có tính kỷ luật cao: một điểm nhấn màu sắc (#2e96ff xanh da trời), một neo tối (#13426f navy đậm), và phần còn lại là các trung tính ấm (kem, snow, ink, fog). Không gradient, không màu sáng phụ, không biến thể hover-color. Nếu một thiết kế mới cần màu trạng thái hoặc danh mục, hãy suy ra từ bảng màu hiện có — sky tint nhạt #bde1f9 cho highlight, navy đậm #13426f cho nhấn mạnh, charcoal #212121 cho văn bản mạnh nhất. Không giới thiệu màu sắc mới.

## Similar Brands

- **Albert (albert.com)** — Cùng canvas kem ấm với một màu nhấn đậm duy nhất và type hình học bo tròn — sản phẩm tài chính cảm thấy thân thiện hơn là công ty.
- **Cleo (web.meetcleo.com)** — Phong cách 3D minh họa vui tươi, nền kem/trung tính, CTA hình pill đậm và một điểm nhấn sáng duy nhất điều khiển mọi khoảnh khắc tương tác.
- **Acorns** — Các dạng bo tròn mềm mại, nút pill với shadow offset đặc chunky và một điểm nhấn xanh lá duy nhất trên nền trung tính — cùng ngôn ngữ độ nâng đồ chơi.
- **Chime** — Theme sáng sạch sẽ với một màu xanh nhấn rực rỡ duy nhất, type bo tròn lớn và hành động chính hình pill trên nền trắng ngà mềm.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-warm-cream: #f9f7f0;
  --color-snow: #ffffff;
  --color-ink: #333333;
  --color-charcoal: #212121;
  --color-fog: #d0d5dd;
  --color-slate: #616c8a;
  --color-slate-border: #40444e;
  --color-deep-harbor: #13426f;
  --color-sky-pop: #2e96ff;
  --color-deep-wave: #0254a5;
  --color-sky-tint: #bde1f9;
  --color-sky-wash: #cde7fb;
  --color-info-mist: #73b9ff;
  --color-sky-mid: #50a7ff;

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

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --tracking-caption: -0.22px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: -0.25px;
  --text-body: 16px;
  --leading-body: 1.6;
  --tracking-body: -0.29px;
  --text-subheading: 18px;
  --leading-subheading: 1.5;
  --tracking-subheading: -0.32px;
  --text-heading-sm: 20px;
  --leading-heading-sm: 1.4;
  --tracking-heading-sm: -0.36px;
  --text-heading: 32px;
  --leading-heading: 1.29;
  --tracking-heading: -0.58px;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.2;
  --tracking-heading-lg: -0.72px;
  --text-display: 58px;
  --leading-display: 1.1;
  --tracking-display: -1.04px;

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

  /* Spacing */
  --spacing-7: 7px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-11: 11px;
  --spacing-14: 14px;
  --spacing-16: 16px;
  --spacing-18: 18px;
  --spacing-20: 20px;
  --spacing-21: 21px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-30: 30px;
  --spacing-34: 34px;
  --spacing-40: 40px;
  --spacing-56: 56px;
  --spacing-70: 70px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 56-80px;
  --card-padding: 28px;
  --element-gap: 14px;

  /* Border Radius */
  --radius-2xl: 18px;
  --radius-3xl: 26px;
  --radius-3xl-2: 30px;
  --radius-3xl-3: 40px;
  --radius-full: 49px;
  --radius-full-2: 70px;
  --radius-full-3: 100px;

  /* Named Radii */
  --radius-hero: 49px;
  --radius-cards: 18-30px;
  --radius-badges: 40-100px (pill);
  --radius-buttons: 40-70px (pill);

  /* Shadows */
  --shadow-subtle: rgba(154, 207, 246, 0.5) 0px 7px 0px 0px;
  --shadow-subtle-2: rgba(0, 0, 0, 0.05) 0px 3px 0px 0px;
  --shadow-subtle-3: rgba(154, 207, 246, 0.5) 0px 5px 0px 0px;

  /* Surfaces */
  --surface-warm-cream: #f9f7f0;
  --surface-snow: #ffffff;
  --surface-deep-harbor: #13426f;
  --surface-sky-pop: #2e96ff;
  --surface-sky-tint: #bde1f9;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-warm-cream: #f9f7f0;
  --color-snow: #ffffff;
  --color-ink: #333333;
  --color-charcoal: #212121;
  --color-fog: #d0d5dd;
  --color-slate: #616c8a;
  --color-slate-border: #40444e;
  --color-deep-harbor: #13426f;
  --color-sky-pop: #2e96ff;
  --color-deep-wave: #0254a5;
  --color-sky-tint: #bde1f9;
  --color-sky-wash: #cde7fb;
  --color-info-mist: #73b9ff;
  --color-sky-mid: #50a7ff;

  /* Typography */
  --font-gilroy: 'Gilroy', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --tracking-caption: -0.22px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: -0.25px;
  --text-body: 16px;
  --leading-body: 1.6;
  --tracking-body: -0.29px;
  --text-subheading: 18px;
  --leading-subheading: 1.5;
  --tracking-subheading: -0.32px;
  --text-heading-sm: 20px;
  --leading-heading-sm: 1.4;
  --tracking-heading-sm: -0.36px;
  --text-heading: 32px;
  --leading-heading: 1.29;
  --tracking-heading: -0.58px;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.2;
  --tracking-heading-lg: -0.72px;
  --text-display: 58px;
  --leading-display: 1.1;
  --tracking-display: -1.04px;

  /* Spacing */
  --spacing-7: 7px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-11: 11px;
  --spacing-14: 14px;
  --spacing-16: 16px;
  --spacing-18: 18px;
  --spacing-20: 20px;
  --spacing-21: 21px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-30: 30px;
  --spacing-34: 34px;
  --spacing-40: 40px;
  --spacing-56: 56px;
  --spacing-70: 70px;

  /* Border Radius */
  --radius-2xl: 18px;
  --radius-3xl: 26px;
  --radius-3xl-2: 30px;
  --radius-3xl-3: 40px;
  --radius-full: 49px;
  --radius-full-2: 70px;
  --radius-full-3: 100px;

  /* Shadows */
  --shadow-subtle: rgba(154, 207, 246, 0.5) 0px 7px 0px 0px;
  --shadow-subtle-2: rgba(0, 0, 0, 0.05) 0px 3px 0px 0px;
  --shadow-subtle-3: rgba(154, 207, 246, 0.5) 0px 5px 0px 0px;
}
```