# ALSO

> ALSO — Style Reference

## Prompt Content

```
# ALSO — Style Reference
> Tạp chí xe đạp trên giấy kem

**Theme:** sáng

ALSO mang phong cách một showcase sản phẩm editorial đầy tự tin — một tạp chí xe đạp được tái hiện cho web thay vì giao diện thương mại điện tử thông thường. Nền canvas kem ấm (#fcf7fa) bao phủ mọi bề mặt trong khi một màu tím điện duy nhất (#ac74fc) đảm nhận vai trò của cả một hệ thống màu sắc, xuất hiện trên link, border, highlight và phần fill của CTA chính. Typography cực kỳ chặt: ABCCameraPlainVariable đẩy negative tracking mạnh hơn khi kích thước lớn dần và line-height thu hẹp xuống 0.93 ở display, khiến ngay cả headline 60px cũng mang cảm giác kiến trúc thay vì ồn ào. Mono label in hoa (SerialC-Heavy) với positive tracking đóng vai trò là eyebrow, button text và section marker — nơi duy nhất hệ thống type được nới lỏng. Pill buttons (9999px) nằm trên hard shadow offset tím 2px không blur, trông như sticker ép lên giấy thay vì hiệu ứng elevation UI mềm. Các section full-bleed tím đảo ngược canvas sang chế độ accent mà không thay đổi typography, spacing logic hay component rules — cùng button, cùng shadow, cùng nhịp điệu, chỉ đảo màu.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|-----|---------|-------|---------|
| Cream Paper | `#fcf7fa` | `--color-cream-paper` | Canvas trang, nền section mềm — off-white ấm với một chút hồng rất nhẹ, không bao giờ là trắng tinh |
| Pure Card | `#ffffff` | `--color-pure-card` | Bề mặt card, panel nâng cao, button text trên fill tím |
| Ash Mist | `#f1f1f1` | `--color-ash-mist` | Bề mặt cấp ba, divider nhạt, lớp nền mờ tinh tế |
| Carbon Black | `#000000` | `--color-carbon-black` | Text chính, border mặc định, icon strokes — mực cấu trúc của hệ thống |
| Graphite Input | `#212121` | `--color-graphite-input` | Border input field, bề mặt tối cấp hai |
| Obsidian Pill | `#1a1a1a` | `--color-obsidian-pill` | Fill CTA tối — button hành động phụ (ví dụ Reserve), kết hợp với text trắng và shadow tím |
| Electric Violet | `#ac74fc` | `--color-electric-violet` | Accent chính — link borders, active states, icon highlights, section accent borders. Màu tín hiệu của thương hiệu |
| Lilac Pill | `#c181ff` | `--color-lilac-pill` | Fill button CTA chính — call-to-action chủ đạo, nằm trên hard shadow tím với text đen |
| Deep Plum | `#381b5e` | `--color-deep-plum` | Biến thể text tím đậm, accent border sâu, nhấn mạnh cấp section khi Electric Violet quá sáng |
| Shadow Plum | `#48316a` | `--color-shadow-plum` | Accent tím hỗ trợ cho chi tiết trang trí và nhấn tần suất thấp. Không nâng lên thành màu CTA chính |
| Acid Lime | `#b1ff8f` | `--color-acid-lime` | Lớp highlight hoặc bề mặt accent dùng tiết kiệm cho các tình huống khẩn cấp (limited drops, reservation states) |
| Signal Blue | `#1276a9` | `--color-signal-blue` | Border hành động outline — ghost button phụ hoặc accent outline thông tin |

## Tokens — Typography

### ABCCameraPlainVariable — Primary UI and display typeface — xử lý body, heading, navigation và product copy · `--font-abccameraplainvariable`
- **Thay thế:** Inter (miễn phí) hoặc Söhne (trả phí) — neo-grotesque với tỷ lệ cơ khí; hệ thống phụ thuộc vào aggressive negative tracking và line-height chặt mà hầu hết grotesque có thể đáp ứng
- **Weights:** 400
- **Kích thước:** 12px, 16px, 20px, 24px, 32px, 44px, 60px
- **Line height:** 0.93–1.50
- **Letter spacing:** -0.05em ở 12px → -0.016em ở 44px, positive 0.05em chỉ dành cho display eyebrow in hoa
- **Vai trò:** Primary UI và display typeface — xử lý body, heading, navigation và product copy

### SerialC-Heavy — Eyebrow in hoa, button text, section label, caption phong cách mono · `--font-serialc-heavy`
- **Thay thế:** Space Grotesk Bold (miễn phí) hoặc ABC Diatype Mono Bold (trả phí) — cần một grotesque có DNA monospace và heavy weight để đảm nhận xử lý in hoa công nghiệp
- **Weights:** 400, 900
- **Kích thước:** 14px, 16px, 20px
- **Line height:** 1.20–1.43
- **Letter spacing:** 0.036em–0.063em (luôn dương, luôn tracked out)
- **Vai trò:** Eyebrow in hoa, button text, section label, caption phong cách mono

### SerialC — SerialC — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-serialc`
- **Weights:** 400, 700
- **Kích thước:** 12px, 16px, 20px
- **Line height:** 1, 1.2
- **Letter spacing:** 0.05
- **Vai trò:** SerialC — đượ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 | -0.6px | `--text-caption` |
| body-sm | 16px | 1.2 | -0.75px | `--text-body-sm` |
| subheading | 20px | 1.09 | -0.9px | `--text-subheading` |
| heading-sm | 24px | 1.13 | -1px | `--text-heading-sm` |
| heading | 32px | 1.17 | -0.8px | `--text-heading` |
| heading-lg | 44px | 1 | -0.7px | `--text-heading-lg` |
| display | 60px | 0.93 | 3px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 8px

**Density:** thoải mái

### Spacing Scale

| Tên | Giá trị | Token |
|-----|---------|-------|
| 8 | 8px | `--spacing-8` |
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 56 | 56px | `--spacing-56` |
| 64 | 64px | `--spacing-64` |
| 72 | 72px | `--spacing-72` |
| 80 | 80px | `--spacing-80` |

### Border Radius

| Element | Giá trị |
|---------|---------|
| tags | 9999px |
| cards | 12px |
| pills | 9999px |
| inputs | 12px |
| buttons | 9999px |
| feature-cards | 56px |

### Shadows

| Tên | Giá trị | Token |
|-----|---------|-------|
| subtle | `rgb(72, 49, 106) 0px 2px 0px 0px` | `--shadow-subtle` |

### Layout

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

## Components

### Primary CTA Button (Lilac Pill)
**Vai trò:** Call-to-action chủ đạo — "LEARN MORE", "EXPLORE", các hành động sản phẩm chính

Pill radius 9999px, fill #c181ff, text #000000 bằng SerialC-Heavy 900 in hoa cỡ 14px với tracking 0.05em, padding 20px 40px (hoặc 12px 20px cho compact). Nằm trên hard shadow 2px solid Shadow Plum (#48316a) không blur. Không border, không hover lift — shadow chính là độ sâu.

### Dark CTA Button (Obsidian Pill)
**Vai trò:** Hành động phụ có độ nhấn cao — nút "RESERVE NOW" trên top banner

Pill radius 9999px, fill #1a1a1a, text #ffffff bằng SerialC-Heavy 900 in hoa cỡ 14px, padding 20px 40px. Cùng hard shadow 2px Shadow Plum như primary CTA. Kết hợp đen-trên-trắng với shadow tím để giữ sự gắn kết thương hiệu.

### Green CTA Button (Acid Lime)
**Vai trò:** CTA trạng thái khan hiếm/giới hạn — xác nhận reservation, urgency hàng tồn thấp

Pill radius 9999px, fill #b1ff8f, text #000000 bằng SerialC-Heavy 900 in hoa, padding 20px 40px. Cùng hard shadow 2px Shadow Plum. Dùng tiết kiệm — sự hiện diện của nó báo hiệu urgency hoặc cửa sổ availability.

### Ghost Navigation Link
**Vai trò:** Mục nav trên top bar (BIKE, QUAD, HELMET, GEAR, COMPANY)

Chỉ text bằng ABCCameraPlainVariable 400 cỡ 16px, màu #000000, không gạch chân. Active state: màu Electric Violet (#ac74fc) hoặc border dưới 1px tím. Không background, không padding — nằm trong luồng navigation như một mục lục tạp chí.

### Section Eyebrow Label
**Vai trò:** Section marker in hoa — "WHEN YOU RIDE ON ALSO, YOU SEE, FEEL, AND NOTICE THINGS"

SerialC-Heavy 400 in hoa cỡ 14px, tracking 0.063em, màu #000000, căn giữa hoặc căn trái. Hoạt động như divider typographic giữa các section — tín hiệu đáng tin cậy nhất cho thấy một khối nội dung mới bắt đầu.

### Product Card (Hero Showcase)
**Vai trò:** Card sản phẩm dạng ảnh lớn/minh họa trong grid — xe đạp, quad, mũ bảo hiểm, người lái

Radius 0 (góc vuông), không border, không shadow — card CHÍNH LÀ ảnh. Ảnh phủ kín toàn bộ card trên nền canvas #fcf7fa (cutout cô lập). Một counter label nhỏ bằng SerialC-Heavy (ví dụ "1,043") nằm ở góc trên bên trái, màu đen 14px. Cards có kích thước lớn (khoảng 280–340px rộng), sắp xếp trong flex/grid ngang có thể mở rộng ra ngoài mép viewport.

### Feature Card (Three-Column Grid)
**Vai trò:** Card editorial trong section "SEE, FEEL, NOTICE" — TM-B, Alpha Wave, Our Company

Radius 12px, background ảnh full-bleed (không border, không shadow). Title overlay góc dưới bên trái bằng ABCCameraPlainVariable 32px đen (tracking -0.8px). Một compact pill CTA ("EXPLORE") kiểu Lilac Pill nằm ở góc dưới bên trái bên dưới title. Card giữa (Alpha Wave) đảo sang fill tím (#ac74fc) với ảnh sản phẩm trắng — cùng cấu trúc card, palette đảo ngược.

### Story Card (Purple Section)
**Vai trò:** Card editorial story trong carousel Stories — "Join ALSO at the Sea Otter Classic 2026"

Radius 0, không border, không shadow. Background Electric Violet (#ac74fc) toàn bộ làm canvas card (không xếp card chồng lên card — card CHÍNH LÀ section). Title bằng ABCCameraPlainVariable 20–24px đen ở góc trên bên trái. Date bằng SerialC-Heavy 14px in hoa tracked ở góc trên bên trái bên dưới title. Ảnh chiếm 50% dưới cùng của card, góc vuông, không bo tròn.

### Pagination Control
**Vai trò:** Điều hướng carousel — bộ đếm "01/03" với nút tròn prev/next

Bộ đếm "01/03" bằng SerialC-Heavy 14px in hoa ở bên phải section header. Prev/next: nút tròn 32px với border 1px #000000, icon mũi tên Electric Violet, không fill. Không shadow, không hover fill change.

### Input Field
**Vai trò:** Input form (email, địa chỉ, chi tiết reservation)

Radius 12px, border 1px solid #212121, không fill (trong suốt trên canvas), padding 12px 16px. Text bằng ABCCameraPlainVariable 16px đen. Placeholder màu #212121 ở độ mờ 50%. Focus state: border chuyển sang Electric Violet (#ac74fc), không glow ring, không shadow — sự thay đổi màu border là tín hiệu focus.

### Top Announcement Bar
**Vai trò:** Banner reservation toàn trang — "RESERVE NOW TO RIDE SOONER"

Thanh full-bleed, fill Electric Violet (#ac74fc) hoặc #b1ff8f (phụ thuộc trạng thái), text căn giữa bằng SerialC-Heavy 14px in hoa với tracking 0.05em, text đen. Không padding ngoài vertical 10–12px chặt. Nằm phía trên navigation chính như một utility rail cố định.

### Logo Wordmark
**Vai trò:** Dấu hiệu thương hiệu — "ALSO." với dấu chấm

ABCCameraPlainVariable 400 cỡ 24px, đen, letter-spacing 0. Dấu chấm ở cuối là một phần của wordmark — không phải dấu câu, không phải lỗi chính tả. Nằm ở góc trên bên trái của navigation bar.

### Rider Counter Tag
**Vai trò:** Nhãn số nhỏ bên cạnh cutout sản phẩm — "1,043", "2,803", "2,041"

SerialC-Heavy 400 cỡ 14px, đen, với dấu phẩy phân cách hàng nghìn. Hoạt động như chú thích thống kê — bao nhiêu người lái, bao nhiêu chuyến đi, cảm giác tactile của bộ đếm sản phẩm. Luôn đi kèm với cutout người lái/sản phẩm.

### Chat Bubble (Góc dưới bên phải)
**Vai trò:** Điểm vào hỗ trợ khách hàng / reservation concierge liên tục

Vòng tròn 48px, fill Electric Violet (#ac74fc), icon chat trắng, border 1px #000000, không shadow. Cố định góc dưới bên phải, cách mép viewport 24px. Nằm chồng lên cả section kem và tím mà không cần điều chỉnh màu — fill tím hoạt động trên cả hai.

## Do's and Don'ts

### Do
- Đặt tất cả button và tag ở radius 9999px — pill là bất di bất dịch trên mọi biến thể (primary, dark, green, ghost).
- Chỉ dùng một hard shadow Shadow Plum (#48316a) 2px solid duy nhất trên mọi element có elevation — không bao giờ dùng blur, không xếp chồng shadow, không thay đổi offset.
- Dùng Electric Violet (#ac74fc) cho link, active state, icon highlight và section border — đây là màu tín hiệu và chỉ xuất hiện trong vai trò chức năng, không phải trang trí.
- Đặt label SerialC-Heavy ở dạng in hoa với positive tracking (0.036–0.063em) — không bao giờ dùng ở dạng mixed case hoặc tracking chặt.
- Đẩy line-height ABCCameraPlainVariable chặt hơn khi kích thước lớn dần: 1.5 ở body, 1.0 ở heading-lg, 0.93 ở display — hệ thống được định nghĩa bằng sự nén ở tỷ lệ lớn.
- Duy trì spacing base unit 8px: element gap 16px, card padding 24px, section gap 80px — không bao giờ phá vỡ xuống base 4px hoặc 12px.
- Khi một section đảo sang background Electric Violet (#ac74fc), giữ nguyên cấu trúc component, shadow và type system — chỉ canvas thay đổi màu.

### Don't
- Không bao giờ dùng soft drop shadow có blur — hard shadow 2px solid là shadow duy nhất trong hệ thống.
- Không bao giờ dùng Pure White (#ffffff) làm canvas trang — luôn bắt đầu từ Cream Paper (#fcf7fa); trắng chỉ dành cho card và bề mặt nâng cao.
- Không bao giờ đặt ABCCameraPlainVariable với positive letter-spacing trên body hoặc heading text — hệ thống nén ở tỷ lệ lớn, không mở rộng.
- Không bao giờ dùng góc bo tròn trên ảnh sản phẩm, story card hoặc hero photography — những thứ này có góc sắc; chỉ button, input và feature card mới có radius.
- Không bao giờ thêm chromatic accent thứ hai — Electric Violet là hệ thống; Acid Lime và Signal Blue là màu tiện ích hiếm hoi cho trạng thái cụ thể.
- Không bao giờ dùng màu shadow khác — Shadow Plum (#48316a) giữ nguyên ngay cả trên button tối hoặc xanh, giữ thương hiệu gắn kết trên mọi biến thể CTA.
- Không bao giờ đặt SerialC-Heavy ở dạng chữ thường hoặc sentence case — đây là typeface chỉ dùng in hoa trong hệ thống này; dùng khác đi sẽ phá vỡ nhịp điệu typographic.

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-----|-----|---------|----------|
| 1 | Cream Paper | `#fcf7fa` | Canvas trang cơ bản — mọi section bắt đầu từ đây trừ khi cố tình đảo sang tím |
| 2 | Pure Card | `#ffffff` | Product card, story card, khối nội dung nâng cao nằm trên canvas kem |
| 3 | Ash Mist | `#f1f1f1` | Lớp nền cấp ba cho section mờ, biến thể background nhẹ trong vùng kem |
| 4 | Electric Violet | `#ac74fc` | Canvas accent full-bleed cho section Stories / editorial — chế độ đảo ngược mà không thay đổi logic component |

## Elevation

- **Primary CTA (Lilac Pill):** `rgb(72, 49, 106) 0px 2px 0px 0px`
- **Dark CTA (Obsidian Pill):** `rgb(72, 49, 106) 0px 2px 0px 0px`
- **Green CTA (Acid Lime):** `rgb(72, 49, 106) 0px 2px 0px 0px`

## Imagery

Hệ thống hình ảnh thiên về product photography với xử lý cutout/cô lập mạnh. Người lái trên xe đạp, quad và mũ bảo hiểm được chụp trên nền trắng tinh hoặc kem, sau đó đặt lên canvas dưới dạng cutout full-bleed không shadow, không border, không bối cảnh — vật thể là hero, không phải môi trường. Xử lý high-key, sáng, hơi giảm bão hòa để giữ focus vào hình khối. Lifestyle photography xuất hiện trong feature card và story card với bối cảnh môi trường (cầu San Francisco, đi trail, đi lại trong thành phố), nhưng luôn được chụp trong ánh sáng ban ngày sáng, không có khoảnh khắc tối/u ám. Hero grid trưng bày các cutout như một đám rước ngang — gần như một cuộc diễu hành, mỗi cái được chú thích bằng một bộ đếm số nhỏ. Không có 3D rendering, không minh họa, không đồ họa trừu tượng — thương hiệu tin tưởng photography gánh vác trọng lượng thị giác, và hệ thống kiếm được cá tính từ xử lý typographic và màu sắc xung quanh những bức ảnh đó hơn là từ chính hình ảnh.

## Layout

Mô hình trang là centered max-width (~1200px) với các khối nội dung có thể mở rộng đến mép viewport khi cần cho image grid. Top bar là nav ngang đơn giản: logo trái, nav items căn giữa, utility icon phải — không sticky behavior, không mega-menu, không sidebar. Hero mở đầu bằng một đám rước ngang các cutout người lái có thể mở rộng ra ngoài container, sau đó đổ vào headline căn giữa ("One machine for every being.") với một CTA duy nhất bên dưới. Các section xếp chồng dọc với gap 80px và không có divider nhìn thấy được — luồng liền mạch, chỉ được phân cách bằng eyebrow label typographic. Feature section dùng grid 3 cột bằng nhau. Section Stories đảo toàn bộ viewport sang Electric Violet và dùng grid card 3 cột với pagination control ở góc trên bên phải. Điều hướng giữa các section hoàn toàn là vertical scrolling — không tabs, không anchors, không carousel ngoại trừ section Stories. Density thoáng: hầu hết section đều có không gian thở, với product grid là khoảnh khắc dày đặc nhất. Footer tối giản — không multi-column sitemap, chỉ wordmark và vài link trong một hàng đơn.

## Agent Prompt Guide

**Quick Color Reference**
- text: #000000
- background: #fcf7fa
- card surface: #ffffff
- border: #000000
- accent / brand signal: #ac74fc
- primary action: #c181ff (filled action)

**Example Component Prompts**

1. *Hero centered headline section*: Background Cream Paper (#fcf7fa). Headline "One machine for every being." cỡ 60px ABCCameraPlainVariable weight 400, màu #000000, line-height 0.93, letter-spacing 3px. Một Lilac Pill CTA duy nhất bên dưới với padding 20px 40px, fill #c181ff, text #000000 bằng SerialC-Heavy 900 in hoa 14px với tracking 0.05em, radius 9999px, hard shadow 2px solid #48316a.

2. *Product card with rider cutout*: Không card chrome. Cutout ảnh full-bleed của người lái trên xe đạp, góc vuông, nằm trực tiếp trên canvas #fcf7fa. Counter nhỏ "1,043" bằng SerialC-Heavy 14px đen ở góc trên bên trái của card. Card rộng ~320px, không border, không shadow, không padding.

3. Tạo Primary Action Button: background #c181ff, text #000000, radius 9999px, compact pill padding. Dùng xử lý filled này cho CTA chính.

4. *Story card on violet section*: Background Electric Violet (#ac74fc) toàn bộ làm chính card. Title "Join ALSO at the Sea Otter Classic 2026." ở góc trên bên trái bằng ABCCameraPlainVariable 20px đen. Date "04-08-2026" bên dưới bằng SerialC-Heavy 14px in hoa với tracking 0.063em. Ảnh phong cảnh chiếm nửa dưới của card, góc vuông, không bo tròn.

5. *Section eyebrow label*: SerialC-Heavy 400 in hoa cỡ 14px, tracking 0.063em, màu #000000, căn giữa phía trên nội dung section với bottom margin 40px. Marker báo hiệu một section mới bắt đầu.

## Typographic Rhythm

Hệ thống dùng hai font trong mối quan hệ push-pull có chủ đích. ABCCameraPlainVariable là bộ nén: letter-spacing âm (-0.05em ở body, thắt chặt về -0.016em ở kích thước lớn) và line-height thu hẹp (1.5 ở 12px → 0.93 ở 60px). SerialC-Heavy là bộ mở rộng: luôn in hoa, luôn positive tracking (0.036–0.063em), luôn nhỏ. Hai font không bao giờ chồng lấn về dải kích thước — ABCCamera xử lý 12px trở lên (nhưng thực sự tỏa sáng ở 24px+), SerialC chỉ xử lý 12–20px. Chúng luân phiên trong nhịp điệu trang: một eyebrow SerialC in hoa → một headline ABCCamera nén lớn → button text SerialC → body copy ABCCamera. Sự luân phiên này là thứ làm cho hệ thống mang cảm giác editorial thay vì app-like.

## Color Discipline

ALSO là hệ thống 2.5 màu, không phải palette đa màu. 2.5: Cream Paper + Carbon Black tạo thành xương sống achromatic. Electric Violet (#ac74fc) là 1 chromatic accent và chỉ xuất hiện trong vai trò chức năng — link, active state, border, fill CTA chính (qua #c181ff), section flips. Các màu còn lại (Lilac Pill #c181ff, Deep Plum #381b5e, Shadow Plum #48316a) đều thuộc họ tím và tồn tại để hỗ trợ accent chính. Acid Lime (#b1ff8f) và Signal Blue (#1276a9) là màu tiện ích cho trạng thái cụ thể (reservation urgency, informational ghost border) và chỉ nên xuất hiện tối đa một lần mỗi trang. Khi nghi ngờ, hãy giới hạn ở: đen, kem, trắng và một sắc tím.

## Similar Brands

- **Aimé Leon Dore** — Cùng cách tiếp cận editorial product-catalog-as-zine — canvas off-white ấm, headline lớn căn giữa, eyebrow label in hoa tracked out, và ảnh sản phẩm cô lập không có môi trường
- **Aesop** — Canvas kem ấm giống hệt, kiềm chế với một accent màu duy nhất, tight grotesque type, và nhịp điệu section editorial tin tưởng whitespace hơn trang trí
- **Glossier** — Background kem, ảnh product-as-hero trên cutout cô lập, label in hoa vui tươi, và cùng tone 'friendly editorial' coi thương mại như tạp chí
- **Cowboy** — Hàng xóm trực tiếp trong category e-bike với layout product-celebration tương tự — headline hero căn giữa, đám rước ngang cutout xe đạp, pill button với hard offset shadow
- **VanMoof** — Thương hiệu e-bike đồng nghiệp với cấu trúc product grid gần như giống hệt, ảnh sản phẩm cô lập full-bleed, label phong cách mono in hoa cho specs và counter, và CTA hình pill

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-cream-paper: #fcf7fa;
  --color-pure-card: #ffffff;
  --color-ash-mist: #f1f1f1;
  --color-carbon-black: #000000;
  --color-graphite-input: #212121;
  --color-obsidian-pill: #1a1a1a;
  --color-electric-violet: #ac74fc;
  --color-lilac-pill: #c181ff;
  --color-deep-plum: #381b5e;
  --color-shadow-plum: #48316a;
  --color-acid-lime: #b1ff8f;
  --color-signal-blue: #1276a9;

  /* Typography — Font Families */
  --font-abccameraplainvariable: 'ABCCameraPlainVariable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serialc-heavy: 'SerialC-Heavy', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serialc: 'SerialC', 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.6px;
  --text-body-sm: 16px;
  --leading-body-sm: 1.2;
  --tracking-body-sm: -0.75px;
  --text-subheading: 20px;
  --leading-subheading: 1.09;
  --tracking-subheading: -0.9px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.13;
  --tracking-heading-sm: -1px;
  --text-heading: 32px;
  --leading-heading: 1.17;
  --tracking-heading: -0.8px;
  --text-heading-lg: 44px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -0.7px;
  --text-display: 60px;
  --leading-display: 0.93;
  --tracking-display: 3px;

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

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-80: 80px;

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

  /* Border Radius */
  --radius-xl: 12px;
  --radius-full: 56px;
  --radius-full-2: 9999px;

  /* Named Radii */
  --radius-tags: 9999px;
  --radius-cards: 12px;
  --radius-pills: 9999px;
  --radius-inputs: 12px;
  --radius-buttons: 9999px;
  --radius-feature-cards: 56px;

  /* Shadows */
  --shadow-subtle: rgb(72, 49, 106) 0px 2px 0px 0px;

  /* Surfaces */
  --surface-cream-paper: #fcf7fa;
  --surface-pure-card: #ffffff;
  --surface-ash-mist: #f1f1f1;
  --surface-electric-violet: #ac74fc;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-cream-paper: #fcf7fa;
  --color-pure-card: #ffffff;
  --color-ash-mist: #f1f1f1;
  --color-carbon-black: #000000;
  --color-graphite-input: #212121;
  --color-obsidian-pill: #1a1a1a;
  --color-electric-violet: #ac74fc;
  --color-lilac-pill: #c181ff;
  --color-deep-plum: #381b5e;
  --color-shadow-plum: #48316a;
  --color-acid-lime: #b1ff8f;
  --color-signal-blue: #1276a9;

  /* Typography */
  --font-abccameraplainvariable: 'ABCCameraPlainVariable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serialc-heavy: 'SerialC-Heavy', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serialc: 'SerialC', 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.6px;
  --text-body-sm: 16px;
  --leading-body-sm: 1.2;
  --tracking-body-sm: -0.75px;
  --text-subheading: 20px;
  --leading-subheading: 1.09;
  --tracking-subheading: -0.9px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.13;
  --tracking-heading-sm: -1px;
  --text-heading: 32px;
  --leading-heading: 1.17;
  --tracking-heading: -0.8px;
  --text-heading-lg: 44px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -0.7px;
  --text-display: 60px;
  --leading-display: 0.93;
  --tracking-display: 3px;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-80: 80px;

  /* Border Radius */
  --radius-xl: 12px;
  --radius-full: 56px;
  --radius-full-2: 9999px;

  /* Shadows */
  --shadow-subtle: rgb(72, 49, 106) 0px 2px 0px 0px;
}
```