# Peppermint

> # Peppermint — Style Reference

## Prompt Content

```
# Peppermint — Style Reference
> Midnight canvas với streamers vui tươi — một khoảng không xanh đậm nơi các dải ribbon vẽ tay và chữ hình học nhảy múa trên bề mặt giấy kem ấm áp.

**Theme:** dark

Peppermint vận hành trên nguyên lý midnight-canvas: một màu indigo gần như đen (#0a1d4b) thấm đẫm trang web vừa làm nền vừa là DNA thương hiệu, tạo cảm giác như màn hình đại dương sâu thẳm nơi các minh họa đậm nét và chữ hình học trôi nổi tự do. Display cuts của Excon — hình học, editorial, tracking dày — là chữ ký thị giác, kết hợp với hơi ấm nhân văn của Generalsans cho mọi nội dung đối thoại. Hệ thống cố tình đan xen giữa các dải dark immersion và bề mặt giấy kem ấm (#fcf6ea, #faedd2), để các vùng nội dung nặng (FAQ, form) có cảm giác chạm vào sự ấm áp hữu hình thay vì trôi nổi trong khoảng không. Minh họa vẽ tay với các nét ribbon uốn lượn màu hồng, xanh ngọc và xanh băng đảm nhận phần nặng về không khí — không có photography, không gradient, không bóng đổ trang trí. Các component đều bo tròn tự tin (card 24px, pill button 48–100px) và nằm trên canvas chỉ nhờ tương phản màu sắc, không dùng elevation.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|-----|---------|-------|---------|
| Midnight Sapphire | `#0a1d4b` | `--color-midnight-sapphire` | Canvas chính cho hero và feature bands, body text trên bề mặt kem, đường viền action — khoảng không mà mọi thứ trôi nổi trên đó |
| Bright Violet | `#9c8bf9` | `--color-bright-violet` | Màu nhấn hiếm cho highlight buttons và khoảnh khắc nhấn mạnh — một dấu câu sống động trên nền navy mờ |
| Deep Indigo | `#162d67` | `--color-deep-indigo` | Bề mặt card nâng cao so với canvas chính — sáng hơn Midnight Sapphire một bậc, dùng cho nested feature cards |
| Slate Violet | `#3a486b` | `--color-slate-violet` | Text mờ trên các section tối, border và divider phụ — một companion đã khử bão hòa cho màu navy chính |
| Warm Cream | `#fcf6ea` | `--color-warm-cream` | Hairline borders, divider, input outlines, và card edges trên bề mặt sáng. Không dùng làm màu CTA chính |
| Sand | `#faedd2` | `--color-sand` | Nền FAQ section, lớp phủ bề mặt ấm, decorative fills — bão hòa hơn Warm Cream một chút để báo hiệu vùng nội dung |
| Graphite | `#474b60` | `--color-graphite` | Body text borders, form field borders, divider nhẹ — xám lạnh đọc là trung tính trên cả nền sáng và tối |
| Khaki | `#b4ad98` | `--color-khaki` | Helper text mờ, border nhẹ, label ít nhấn mạnh — xám ấm đã khử bão hòa cho thông tin cấp ba |
| Pure White | `#ffffff` | `--color-pure-white` | Text chính và icon trên section tối, border tương phản cao — dùng tiết kiệm để đọc tối đa |
| Coral Pink | `#ffb8d9` | `--color-coral-pink` | Nét ribbon minh họa, đường nhấn trang trí, highlight vẽ tay trong feature illustrations |
| Mint Wave | `#68dacb` | `--color-mint-wave` | Nét ribbon minh họa, điểm nhấn xanh ngọc trong nền feature card — màu minh họa thứ cấp |
| Ice Blue | `#bcdff0` | `--color-ice-blue` | Nét ribbon minh họa, đường cong xanh nhạt trang trí trong hero và feature illustrations |
| Pale Mint | `#a1e8df` | `--color-pale-mint` | Xanh ngọc minh họa thứ cấp — nét ribbon nhẹ hơn và yếu tố trang trí mềm mại |
| Blush | `#ffe9f4` | `--color-blush` | Bề mặt card phớt hồng — nền hồng ấm cho các biến thể feature card riêng lẻ |

## Tokens — Typography

### Excon — Display và heading typeface — các nét cắt hình học tracking dày định hình giọng editorial. Dùng ở kích thước lớn (90–151px) cho hero và section headings với letter-spacing âm mạnh (-0.04em đến -0.1em) khiến các chữ cái khóa lại thành hình dạng kiến trúc. Line-height dưới 1.0 ở kích thước display tạo mật độ nén, gần như chồng lên nhau. Thay thế: Space Grotesk hoặc Archivo cho đặc tính hình học gần giống với tracking tương tự. · `--font-excon`
- **Weights:** 400, 500, 700
- **Sizes:** 24px, 25px, 45px, 48px, 50px, 60px, 90px, 128px, 130px, 151px, 274px
- **Line height:** 0.87, 0.92, 1.00, 1.09
- **Letter spacing:** -0.04em đến -0.1em, tỷ lệ với kích thước — càng chặt ở kích thước lớn (lên đến -15px ở 151px, -5px ở 128px, -2.2px ở 48px, -1.3px ở 25px)
- **Vai trò:** Display và heading typeface — các nét cắt hình học tracking dày định hình giọng editorial. Dùng ở kích thước lớn (90–151px) cho hero và section headings với letter-spacing âm mạnh (-0.04em đến -0.1em) khiến các chữ cái khóa lại thành hình dạng kiến trúc. Line-height dưới 1.0 ở kích thước display tạo mật độ nén, gần như chồng lên nhau. Thay thế: Space Grotesk hoặc Archivo cho đặc tính hình học gần giống với tracking tương tự.

### Generalsans — Body và UI typeface — sans nhân văn cho mọi text đối thoại, button, label, nội dung FAQ, và mô tả card. Letter-spacing bình thường. Sự tương phản với display cuts nén của Excon là chữ ký typographic: headline editorial thì thầm với độ chính xác hình học trong khi body text nói chuyện bằng hơi ấm dễ gần. Thay thế: Inter hoặc DM Sans cho cảm giác nhân văn tương tự ở kích thước UI. · `--font-generalsans`
- **Weights:** 400, 500, 700
- **Sizes:** 14px, 16px, 18px
- **Line height:** 1.14, 1.22, 1.25, 1.43, 1.50
- **Vai trò:** Body và UI typeface — sans nhân văn cho mọi text đối thoại, button, label, nội dung FAQ, và mô tả card. Letter-spacing bình thường. Sự tương phản với display cuts nén của Excon là chữ ký typographic: headline editorial thì thầm với độ chính xác hình học trong khi body text nói chuyện bằng hơi ấm dễ gần. Thay thế: Inter hoặc DM Sans cho cảm giác nhân văn tương tự ở kích thước UI.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|---------|------------|-------------|----------------|-------|
| caption | 14px | 1.43 | — | `--text-caption` |
| body-sm | 16px | 1.5 | — | `--text-body-sm` |
| body | 18px | 1.43 | — | `--text-body` |
| subheading | 24px | 1.22 | -1.32px | `--text-subheading` |
| heading | 48px | 1.09 | -2.21px | `--text-heading` |
| heading-lg | 90px | 0.92 | -3.96px | `--text-heading-lg` |
| display | 128px | 0.87 | -5.12px | `--text-display` |

## Tokens — Spacing & Shapes

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|-----|---------|-------|
| 10 | 10px | `--spacing-10` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 26 | 26px | `--spacing-26` |
| 27 | 27px | `--spacing-27` |
| 28 | 28px | `--spacing-28` |
| 30 | 30px | `--spacing-30` |
| 36 | 36px | `--spacing-36` |
| 38 | 38px | `--spacing-38` |
| 40 | 40px | `--spacing-40` |
| 42 | 42px | `--spacing-42` |
| 50 | 50px | `--spacing-50` |
| 64 | 64px | `--spacing-64` |
| 100 | 100px | `--spacing-100` |
| 120 | 120px | `--spacing-120` |

### Border Radius

| Element | Giá trị |
|---------|---------|
| faq | 16px |
| cards | 24px |
| pills | 100px |
| small | 16px |
| buttons | 48px |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 40px
- **Card padding:** 24px
- **Element gap:** 16px

## Components

### Hero Section
**Vai trò:** Dải tối full-bleed với headline căn giữa, subtext và CTA

Nền #0a1d4b full-viewport-width. Excon display heading căn giữa ở 90–128px, weight 700, màu trắng (#ffffff), letter-spacing -3.96px đến -5.12px. Subtext bằng Generalsans 18px, weight 400, màu trắng. CTA button căn giữa bên dưới. Minh họa vẽ tay lớn tràn ra từ các cạnh với nét ribbon.

### Pill CTA Button (Sáng trên Tối)
**Vai trò:** Button hành động chính trên các section canvas tối

48px border-radius, fill Warm Cream (#fcf6ea), text Midnight Sapphire (#0a1d4b), Generalsans 16px weight 500, padding 16px 28px. Nằm căn giữa hoặc căn trái trên nền canvas tối. Không bóng đổ — chỉ tương phản màu tạo nên sự hiện diện của button.

### Pill CTA Button (Tối trên Sáng)
**Vai trò:** Button hành động chính trên các section kem

48px border-radius, fill Midnight Sapphire (#0a1d4b), text trắng (#ffffff), Generalsans 16px weight 500, padding 16px 28px. Phiên bản đảo ngược cho ngữ cảnh light-band.

### Feature Card
**Vai trò:** Card minh họa riêng lẻ trong lưới feature 4 cột

24px border-radius, nền màu đồng nhất (thay đổi: Warm Cream, Deep Indigo, Mint Wave, Blush), padding 24px. Chứa một minh họa phẳng căn giữa, text label nhỏ tùy chọn bằng Generalsans 14px. Không bóng đổ — fill màu CHÍNH LÀ ranh giới card. Các card cách nhau 16–20px.

### FAQ Accordion Item (Đóng)
**Vai trò:** Câu hỏi có thể mở rộng trong FAQ section

16px border-radius, nền Warm Cream (#fcf6ea), padding 20px 28px. Text câu hỏi bằng Generalsans 16px weight 500, màu Midnight Sapphire. Icon cộng (+) bên phải màu Midnight Sapphire. Border hairline 1px màu #fcf6ea hoặc không có border nhìn thấy.

### FAQ Accordion Item (Mở)
**Vai trò:** Trạng thái câu trả lời FAQ đã mở rộng

Cùng kích thước với item đóng nhưng nền chuyển sang Sand (#faedd2) — một màu kem ấm hơn, bão hòa hơn báo hiệu trạng thái active. Body câu trả lời bằng Generalsans 16px weight 400, màu Midnight Sapphire. Icon trừ (−) thay thế icon cộng. Không cần animation — sự chuyển màu là chỉ báo trạng thái.

### Section Heading
**Vai trò:** Heading editorial lớn cho phần giới thiệu section

Excon, weight 700, 90px, màu trắng (#ffffff) trên section tối hoặc Midnight Sapphire (#0a1d4b) trên section kem. Letter-spacing -3.96px, line-height 0.92. Căn trái hoặc căn giữa tùy section. Có thể bao gồm gạch chân trang trí màu Coral Pink hoặc Mint Wave.

### Body Text Block
**Vai trò:** Nội dung đoạn văn dưới heading và trong câu trả lời FAQ

Generalsans 18px, weight 400, line-height 1.43. Màu trắng (#ffffff) trên section tối, Midnight Sapphire (#0a1d4b) trên section kem. Max-width giới hạn ~600px để dễ đọc. Không styling đặc biệt — bản thân chữ là thiết kế.

### Brand Logo
**Vai trò:** Wordmark + icon ở đầu trang

Icon monogram nhỏ (dấu tròn) + wordmark 'peppermint' bằng Generalsans weight 500, màu trắng trên canvas tối. Căn giữa theo chiều ngang. Không có nav links nhìn thấy — logo là toàn bộ header.

### Hero Illustration
**Vai trò:** Minh họa nhân vật/đối tượng vẽ tay lớn

Minh họa phẳng đầy màu sắc với nhân vật vẽ tay (tay đa dạng cầm điện thoại/thẻ), 2–4 nét ribbon uốn lượn màu Coral Pink, Mint Wave, Ice Blue và Pale Mint. Nằm ở cạnh dưới hoặc cạnh phải của hero, tràn ra khỏi canvas. Không gradient, không bóng đổ — fill màu phẳng với đường viền sạch.

### Feature Card Illustration
**Vai trò:** Minh họa đối tượng căn giữa bên trong feature card

Minh họa màu phẳng của một đối tượng hoặc nhân vật (điện thoại, thẻ, khóa, cặp) có kích thước lấp đầy ~60% card. Fill màu đồng nhất trong bảng màu nhấn của card. Không text overlay — minh họa tự nói hoặc với label Generalsans nhỏ bên dưới.

### Decorative Ribbon Stroke
**Vai trò:** Yếu tố đường vẽ tay uốn lượn

Độ dày nét 2–3px, đường cong vẽ tay màu Coral Pink (#ffb8d9), Mint Wave (#68dacb), Ice Blue (#bcdff0), hoặc Pale Mint (#a1e8df). Dùng làm không khí nền trong hero và feature sections. Không fill, chỉ stroke. Chiều dài thay đổi từ flourishes ngắn đến đường cong dài uyển chuyển.

### Subtle Star/Sparkle Motif
**Vai trò:** Dấu câu trang trí nhỏ

Hình sao 4 cánh màu trắng hoặc Mint Wave, kích thước 8–12px. Rải rác một cách tinh tế xung quanh minh họa và heading như chấm nhấn vui tươi. Không yêu cầu animation.

## Do's and Don'ts

### Nên
- Dùng Excon cho mọi display headings ở 48px+ với letter-spacing từ -2px đến -5px — tracking chặt là chữ ký editorial của thương hiệu
- Dùng Midnight Sapphire (#0a1d4b) làm màu canvas chính cho section tối — nó vừa là nền vừa là DNA thương hiệu
- Dùng 48px border-radius cho mọi interactive buttons và 100px cho full pill shapes — không có button góc nhọn
- Đan xen giữa các dải navy tối và dải kem ấm (#fcf6ea/#faedd2) để tạo nhịp điệu section mà không cần divider
- Dùng Generalsans ở 16–18px cho mọi body và UI text — không bao giờ dùng Excon cho bất cứ thứ gì dưới 24px
- Phân biệt bề mặt qua bước màu (#0a1d4b → #162d67 → #9c8bf9) thay vì bóng đổ hoặc border
- Dùng minh họa vẽ tay phẳng với nét ribbon uốn lượn màu Coral Pink, Mint Wave và Ice Blue làm yếu tố thị giác chính — không photography, không gradient

### Không nên
- Không dùng drop shadows cho elevation — hệ thống thiết kế dựa vào tương phản màu và bước màu bề mặt
- Không dùng Excon dưới 24px — tracking chặt và đặc tính hình học của nó trở nên khó đọc ở kích thước body
- Không dùng photography hoặc 3D renders — ngôn ngữ thị giác chỉ là minh họa vẽ tay phẳng
- Không trộn góc bo tròn và góc nhọn — mọi interactive elements dùng radius 48px+, mọi card dùng 24px
- Không dùng bright violet (#9c8bf9) làm bề mặt lớn — nó là accent hiếm, không phải fill color
- Không thêm gradient — thiết kế cố tình phẳng, với tương phản màu làm công việc thị giác
- Không dùng thanh navigation hoặc menu nhìn thấy — thương hiệu được thể hiện qua logo căn giữa một mình

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-----|-----|---------|----------|
| 0 | Midnight Canvas | `#0a1d4b` | Nền trang chính cho hero và feature bands |
| 1 | Deep Indigo | `#162d67` | Bề mặt card nâng cao so với canvas chính |
| 2 | Warm Cream | `#fcf6ea` | Vùng nội dung sáng, bề mặt card trên light bands, inverted button fills |
| 3 | Sand | `#faedd2` | Nền FAQ section, lớp phủ nội dung ấm |

## Elevation

Thiết kế cố tình tránh drop shadows như một chiến lược elevation. Thay vào đó, bề mặt được phân biệt qua tương phản màu sắc — Deep Indigo (#162d67) sáng hơn Midnight Sapphire (#0a1d4b) một bậc để tạo elevation, và các dải kem ấm ngắt quãng section tối để báo hiệu vùng nội dung. Border là hairline mỏng (1px) với tông màu nhẹ. Cách tiếp cận phẳng, dựa trên màu sắc này giữ trọng tâm vào minh họa và chữ thay vì chrome.

## Imagery

Ngôn ngữ thị giác chỉ là minh họa vẽ tay — không photography, không 3D renders, không product screenshots. Minh họa có nhân vật đa dạng (tay, toàn thân) với fill màu phẳng, không gradient, và đường viền sạch. Yếu tố trang trí đặc trưng là các nét ribbon/streamer uốn lượn màu hồng (#ffb8d9), xanh ngọc (#68dacb), và xanh băng (#bcdff0) đan xuyên qua hero và feature sections với năng lượng vẽ tay tự do. Họa tiết sao lấp lánh nhỏ thêm dấu câu vui tươi. Feature cards chứa minh họa đối tượng căn giữa (điện thoại, thẻ, khóa có cánh) trên nền màu đồng nhất. Minh họa lớn và tự tin — chiếm 30–40% không gian thị giác trong hero và là yếu tố không khí chính. Phong cách icon trong UI tối giản và hình học, dùng cùng tinh thần minh họa ở tỷ lệ nhỏ hơn.

## Layout

Các section full-bleed không có gutter giữa các dải — mỗi section là một khối màu đồng nhất lấp đầy chiều rộng viewport. Nội dung trong section có max-width 1200px và căn giữa. Nhịp điệu trang đan xen giữa dải navy tối (hero, features) và dải kem ấm (FAQ), tạo sự luân phiên sáng/tối rõ ràng. Hero là một chồng text căn giữa trên canvas tối với minh họa tràn ra các cạnh. Feature sections dùng lưới card 4 cột với minh họa làm nội dung chính. FAQ section là danh sách một cột các accordion items trên nền kem. Navigation tối giản — chỉ một logo căn giữa ở đầu, không có nav bar hay menu nhìn thấy. Section gaps chặt (40px) với bản thân sự thay đổi màu làm công việc phân cách.

## Agent Prompt Guide

**Quick Color Reference**
- text (section tối): #ffffff
- text (section sáng): #0a1d4b
- Tạo Primary Action Button: nền #9c8bf9, text #474b60, radius 9999px, padding pill gọn. Dùng filled treatment này cho CTA chính.
- background (light bands): #fcf6ea hoặc #faedd2
- border (nhẹ): #474b60
- accent: #9c8bf9
- primary action: #9c8bf9 (filled action)

**Ví dụ Component Prompts**

1. Tạo hero section: nền #0a1d4b full-bleed. Excon display heading căn giữa, 90px, weight 700, #ffffff, letter-spacing -3.96px. Subtext Generalsans 18px, weight 400, #ffffff. CTA button: pill, nền #fcf6ea, text #0a1d4b, Generalsans 16px weight 500, padding 16px 28px, border-radius 48px. Minh họa vẽ tay lớn tràn ra cạnh dưới với nét ribbon màu #ffb8d9 và #68dacb.

2. Tạo feature card: border-radius 24px, nền #fcf6ea, padding 24px. Minh họa phẳng căn giữa của một đối tượng (điện thoại, thẻ hoặc nhân vật) lấp đầy 60% diện tích card. Label nhỏ bằng Generalsans 14px weight 400, #0a1d4b, căn giữa bên dưới minh họa. Không bóng đổ, không border.

3. Tạo FAQ accordion item (trạng thái mở): border-radius 16px, nền #faedd2, padding 20px 28px. Câu hỏi bằng Generalsans 16px weight 500, #0a1d4b. Body câu trả lời bằng Generalsans 16px weight 400, #0a1d4b, line-height 1.5. Icon trừ (−) bên phải màu #0a1d4b.

4. Tạo section heading: Excon weight 700, 90px, #ffffff (trên nền tối) hoặc #0a1d4b (trên nền sáng), letter-spacing -3.96px, line-height 0.92. Thêm nét gạch chân trang trí màu #ffb8d9 bên dưới text, chiều cao 3px, rộng 60% chiều rộng text.

5. Tạo decorative ribbon stroke: SVG path, stroke 2–3px, không fill, đường cong vẽ tay màu #68dacb. Đặt làm yếu tố không khí nền, dài 200–400px, hình dạng S-curve uốn lượn.

## Color Role Summary

Bảng màu được xây dựng trên hệ thống canvas hai chế độ: Midnight Sapphire (#0a1d4b) là khoảng không tối, và Warm Cream (#fcf6ea) là điểm đối trọng giấy ấm. Hai bề mặt này đan xen để tạo nhịp điệu section. Trong canvas tối, Deep Indigo (#162d67) cung cấp elevation một bậc cho nested cards. Bảng màu nhấn phục vụ hai mục đích: Bright Violet (#9c8bf9) là dấu câu màu sắc hiếm để nhấn mạnh, trong khi Coral Pink, Mint Wave và Ice Blue chỉ dùng cho minh họa — chúng sống trong các nét ribbon vẽ tay và không bao giờ xuất hiện trên bề mặt UI. Graphite và Khaki xử lý text mờ và border, đọc là trung tính trên cả nền sáng và tối.

## Typography Philosophy

Excon là giọng editorial — nó nói bằng các nét cắt hình học nén, tracking chặt khiến headline có cảm giác kiến trúc và tự tin. Nó được dùng ở 48px+ với letter-spacing âm mạnh tăng dần theo kích thước. Generalsans là giọng đối thoại — nhân văn, spacing bình thường và dễ gần ở 14–18px. Hệ thống không bao giờ dùng Excon dưới 24px hoặc Generalsans trên 24px. Sự nhị phân này tạo ra một hợp đồng typographic rõ ràng: text lớn tạo tuyên bố kiến trúc, text nhỏ nói chuyện với người đọc như một con người.

## Similar Brands

- **Stripe** — Cùng xử lý hero dark-canvas với display headlines căn giữa và CTA đơn — tỷ lệ typography-đến-không gian âm gần như giống hệt
- **Ramp** — Cùng sự tự tin trong display type khổng lồ, dù Ramp dùng nền sáng hơn — thẩm quyền typographic và ngôn ngữ component bo tròn chồng lấn
- **Mercury** — Cùng cách tiếp cận dùng navy tối vừa làm canvas vừa làm DNA thương hiệu, với kem/trắng ấm làm điểm đối trọng bề mặt sáng và CTA hình pill

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-midnight-sapphire: #0a1d4b;
  --color-bright-violet: #9c8bf9;
  --color-deep-indigo: #162d67;
  --color-slate-violet: #3a486b;
  --color-warm-cream: #fcf6ea;
  --color-sand: #faedd2;
  --color-graphite: #474b60;
  --color-khaki: #b4ad98;
  --color-pure-white: #ffffff;
  --color-coral-pink: #ffb8d9;
  --color-mint-wave: #68dacb;
  --color-ice-blue: #bcdff0;
  --color-pale-mint: #a1e8df;
  --color-blush: #ffe9f4;

  /* Typography — Font Families */
  --font-excon: 'Excon', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-generalsans: 'Generalsans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.43;
  --text-body-sm: 16px;
  --leading-body-sm: 1.5;
  --text-body: 18px;
  --leading-body: 1.43;
  --text-subheading: 24px;
  --leading-subheading: 1.22;
  --tracking-subheading: -1.32px;
  --text-heading: 48px;
  --leading-heading: 1.09;
  --tracking-heading: -2.21px;
  --text-heading-lg: 90px;
  --leading-heading-lg: 0.92;
  --tracking-heading-lg: -3.96px;
  --text-display: 128px;
  --leading-display: 0.87;
  --tracking-display: -5.12px;

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

  /* Spacing */
  --spacing-10: 10px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-26: 26px;
  --spacing-27: 27px;
  --spacing-28: 28px;
  --spacing-30: 30px;
  --spacing-36: 36px;
  --spacing-38: 38px;
  --spacing-40: 40px;
  --spacing-42: 42px;
  --spacing-50: 50px;
  --spacing-64: 64px;
  --spacing-100: 100px;
  --spacing-120: 120px;

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

  /* Border Radius */
  --radius-md: 5px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 24px;
  --radius-3xl-2: 36px;
  --radius-full: 48px;
  --radius-full-2: 100px;

  /* Named Radii */
  --radius-faq: 16px;
  --radius-cards: 24px;
  --radius-pills: 100px;
  --radius-small: 16px;
  --radius-buttons: 48px;

  /* Surfaces */
  --surface-midnight-canvas: #0a1d4b;
  --surface-deep-indigo: #162d67;
  --surface-warm-cream: #fcf6ea;
  --surface-sand: #faedd2;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-midnight-sapphire: #0a1d4b;
  --color-bright-violet: #9c8bf9;
  --color-deep-indigo: #162d67;
  --color-slate-violet: #3a486b;
  --color-warm-cream: #fcf6ea;
  --color-sand: #faedd2;
  --color-graphite: #474b60;
  --color-khaki: #b4ad98;
  --color-pure-white: #ffffff;
  --color-coral-pink: #ffb8d9;
  --color-mint-wave: #68dacb;
  --color-ice-blue: #bcdff0;
  --color-pale-mint: #a1e8df;
  --color-blush: #ffe9f4;

  /* Typography */
  --font-excon: 'Excon', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-generalsans: 'Generalsans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.43;
  --text-body-sm: 16px;
  --leading-body-sm: 1.5;
  --text-body: 18px;
  --leading-body: 1.43;
  --text-subheading: 24px;
  --leading-subheading: 1.22;
  --tracking-subheading: -1.32px;
  --text-heading: 48px;
  --leading-heading: 1.09;
  --tracking-heading: -2.21px;
  --text-heading-lg: 90px;
  --leading-heading-lg: 0.92;
  --tracking-heading-lg: -3.96px;
  --text-display: 128px;
  --leading-display: 0.87;
  --tracking-display: -5.12px;

  /* Spacing */
  --spacing-10: 10px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-26: 26px;
  --spacing-27: 27px;
  --spacing-28: 28px;
  --spacing-30: 30px;
  --spacing-36: 36px;
  --spacing-38: 38px;
  --spacing-40: 40px;
  --spacing-42: 42px;
  --spacing-50: 50px;
  --spacing-64: 64px;
  --spacing-100: 100px;
  --spacing-120: 120px;

  /* Border Radius */
  --radius-md: 5px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 24px;
  --radius-3xl-2: 36px;
  --radius-full: 48px;
  --radius-full-2: 100px;
}
```