# Todoist

> Todoist — Style Reference

## Prompt Content

```
# Todoist — Style Reference
> Không gian làm việc tràn ngập ánh sáng với một cuốn planner giấy — mặt bàn màu kem ấm, ghi chú bằng mực, một cây bút đỏ

**Theme:** light

Todoist mang phong cách một không gian làm việc ngập nắng với planner giấy: nền canvas trắng kem ấm áp, chữ mực gần như đen, và một điểm nhấn đỏ cam rực rỡ duy nhất để đánh dấu hành động mà không lấn át bố cục. Typography mang chất nhân văn và nhẹ nhàng — Graphik đảm nhận các kích thước display với tracking âm dày, trong khi Inter xử lý UI chrome với tracking dương nhẹ — nhờ đó, hệ thống phân cấp được tạo ra từ kích thước và weight chứ không phải từ khối lượng màu sắc. Ảnh chụp màn hình sản phẩm và mockup điện thoại nổi bên trên các đường cong trang trí màu kem, tạo bầu không khí mà không bao giờ rơi vào nhiễu loạn minh họa. Màu sắc được phân bổ như dấu câu chức năng: màu cam thương hiệu cho một hành động duy nhất trên mỗi view, xanh dương cho link, xanh lá cho trạng thái, phần còn lại của màn hình giữ yên tĩnh trong các tông màu trung tính ấm. Elevation cực kỳ nhẹ nhàng — một bóng đổ 1px mảnh trên card, không có panel nặng hay gradient trang trí.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Ember Red | `#e34432` | `--color-ember-red` | Accent màu cam hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên làm màu CTA chính |
| Deep Ember | `#cf3520` | `--color-deep-ember` | Nhấn mạnh văn bản thương hiệu, eyebrow labels, iconography trang trí, sự hiện diện thương hiệu thứ cấp |
| Cobalt Link | `#0f66ae` | `--color-cobalt-link` | Hyperlinks, nhãn ưu tiên trong ứng dụng, icon thông tin |
| Ink | `#25221e` | `--color-ink` | Văn bản chính, heading, đường viền icon tối, bề mặt fill tối |
| Paper | `#fefdfc` | `--color-paper` | Canvas trang, bề mặt card, văn bản button, container nâng cao |
| Cream | `#fff6f0` | `--color-cream` | Dải section trang trí, lớp nền ấm áp, footer |
| Stone | `#d7d6d4` | `--color-stone` | Đường viền mảnh, divider, đường viền input, nav separators |
| Pencil | `#6f6c69` | `--color-pencil` | Văn bản body thứ cấp, helper text, mô tả mờ |
| Graphite | `#94928f` | `--color-graphite` | Văn bản cấp ba, đường viền icon bị vô hiệu hóa, nhãn ít nhấn mạnh |
| Charcoal | `#4a4744` | `--color-charcoal` | Trạng thái hover/pressed của button tối, bề mặt fill đảo ngược |
| Teal Dusk | `#497d7e` | `--color-teal-dusk` | Đường viền accent trong minh họa sóng trang trí, dấu ấn thương hiệu thứ cấp |
| Mint Wash | `#f0f6df` | `--color-mint-wash` | Lớp nền trang trí xanh nhạt, dải tông màu nhẹ |
| Sky Wash | `#dceaff` | `--color-sky-wash` | Lớp nền trang trí xanh dương nhạt, dải tông màu nhẹ |
| Forest | `#446c3d` | `--color-forest` | Accent xanh lá hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Dùng làm accent hỗ trợ, không phải màu trạng thái |

## Tokens — Typography

### Graphik — Họ display và heading. Sở hữu hero headlines, section titles, nav links, và large body copy. Letter-spacing âm dày (-0.005em đến -0.01em) ở kích thước 38px+ tạo cảm giác display nén, tự tin — headline có trọng lượng chứ không thoáng. · `--font-graphik`
- **Thay thế:** Inter, Manrope, hoặc Söhne
- **Weights:** 400, 600, 700
- **Kích thước:** 16, 22, 38, 44, 55
- **Line height:** 1.00, 1.15, 1.28
- **Letter spacing:** -0.55px ở 55px, -0.22px ở 44px, -0.19px ở 38px, -0.11px ở 22px
- **Vai trò:** Họ display và heading. Sở hữu hero headlines, section titles, nav links, và large body copy. Letter-spacing âm dày (-0.005em đến -0.01em) ở kích thước 38px+ tạo cảm giác display nén, tự tin — headline có trọng lượng chứ không thoáng.

### Inter — Họ UI và body. Sở hữu buttons, badges, inputs, form labels, secondary text, và inline UI. Tracking dương nhẹ (0.005em–0.025em) giữ cho UI text nhỏ sắc nét ở 12–16px. Mang trọng lượng chức năng mà không cạnh tranh với Graphik. · `--font-inter`
- **Thay thế:** system-ui hoặc bất kỳ geometric sans hiện đại nào
- **Weights:** 400, 475, 500, 600, 625, 700
- **Kích thước:** 12, 14, 15, 16, 17, 18, 19, 21
- **Line height:** 1.00, 1.35, 1.40, 1.50, 1.60, 1.75
- **Letter spacing:** 0.525px ở 21px, 0.18px ở 18px, 0.16px ở 16px, 0.07px ở 14px
- **Vai trò:** Họ UI và body. Sở hữu buttons, badges, inputs, form labels, secondary text, và inline UI. Tracking dương nhẹ (0.005em–0.025em) giữ cho UI text nhỏ sắc nét ở 12–16px. Mang trọng lượng chức năng mà không cạnh tranh với Graphik.

### Caecilia — Dành riêng cho testimonial quotes. Kiểu chữ serif và line-height 1.8 rộng rãi giúp phân biệt giọng nói người dùng với copy sản phẩm mà không cần dấu ngoặc kép. · `--font-caecilia`
- **Thay thế:** Lora hoặc Source Serif Pro
- **Weights:** 400
- **Kích thước:** 20
- **Line height:** 1.80
- **Letter spacing:** normal
- **Vai trò:** Dành riêng cho testimonial quotes. Kiểu chữ serif và line-height 1.8 rộng rãi giúp phân biệt giọng nói người dùng với copy sản phẩm mà không cần dấu ngoặc kép.

### Shantell Sans — Accent viết tay cho inline links bên trong announcement bars — mang đến giọng nói con người, thân mật trong UI chrome trung tính. · `--font-shantell-sans`
- **Thay thế:** Caveat hoặc Kalam
- **Weights:** 400
- **Kích thước:** 19
- **Line height:** 1.60
- **Letter spacing:** 0.19px ở 19px
- **Vai trò:** Accent viết tay cho inline links bên trong announcement bars — mang đến giọng nói con người, thân mật trong UI chrome trung tính.

### 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
- **Kích thước:** 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ả

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.5 | 0.14px | `--text-caption` |
| body-sm | 14px | 1.5 | 0.07px | `--text-body-sm` |
| body | 16px | 1.5 | 0.16px | `--text-body` |
| body-lg | 18px | 1.5 | 0.18px | `--text-body-lg` |
| subheading | 21px | 1.5 | 0.21px | `--text-subheading` |
| heading | 38px | 1.28 | -0.19px | `--text-heading` |
| heading-lg | 44px | 1.15 | -0.22px | `--text-heading-lg` |
| display | 55px | 1 | -0.55px | `--text-display` |

## Tokens — Spacing & Shapes

**Đơn vị cơ bản:** 4px

**Mật độ:** thoải mái

### Spacing Scale

| Tên | Giá trị | 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` |
| 32 | 32px | `--spacing-32` |
| 48 | 48px | `--spacing-48` |
| 64 | 64px | `--spacing-64` |
| 128 | 128px | `--spacing-128` |
| 192 | 192px | `--spacing-192` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| nav | 8px |
| cards | 8px |
| badges | 8px |
| images | 15px |
| inputs | 8px |
| buttons | 8px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| subtle | `rgba(37, 34, 30, 0.04) 0px 1px 0px 0px` | `--shadow-subtle` |
| lg | `rgba(37, 34, 30, 0.07) 0px 14px 19px -9px, rgba(37, 34, 3...` | `--shadow-lg` |

### Layout

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

## Components

### Primary Action Button
**Vai trò:** Một CTA chính duy nhất trên mỗi view (Start for free, xác nhận, bắt đầu)

Nền fill #e34432, chữ #fefdfc ở Inter 600 cỡ 16px, border-radius 8px, padding 12px 24px, bóng đổ hai lớp ấm khi hover. Letter-spacing 0.16px. Một button mỗi view, không bao giờ lặp lại.

### Ghost Text Link
**Vai trò:** Navigation phụ và inline actions (Log in, Made For, Resources)

Nền trong suốt, chữ #25221 ở Inter 500 cỡ 15–16px, không viền, padding 8px, không bóng đổ. Chuyển thành #cf3520 khi hover để tạo tiếng vang cho brand accent mà không có trọng lượng của một filled button.

### Top Navigation Bar
**Vai trò:** Site header dạng sticky

Nền #fefdfc, padding dọc 16px, Graphik 600 cỡ 16px cho nav links, logo thương hiệu bên trái (hình vuông đỏ + wordmark màu mực), CTA chính bên phải cùng. Radius 8px trên các phần tử tương tác. Tùy chọn đường viền dưới mảnh #d7d6d4 khi cuộn.

### Announcement Banner
**Vai trò:** Thông báo đầu trang có thể đóng

Nền màu kem #fff6f0, chữ căn giữa ở Inter 400 cỡ 14–15px với một inline link Shantell Sans 19px màu #cf3520, icon đóng bên phải cùng màu #94928f. Độ rộng full-bleed, viền dưới 1px #d7d6d4.

### Product Showcase Card
**Vai trò:** Container cho ảnh chụp màn hình ứng dụng desktop và mobile

Bề mặt #fefdfc, border-radius 8px, bóng đổ mảnh rgba(37,34,30,0.04) 0 1px 0, padding nội bộ 0–4px xung quanh ảnh chụp màn hình. Nổi trên nền sóng màu kem hoặc xanh nhạt. Tùy chọn radius 15px trên chính image mask cho các biến thể desktop.

### Eyebrow Label
**Vai trò:** Nhãn kiểu small caps phía trên section heading

Inter 600 cỡ 12px, màu #cf3520, letter-spacing 0.14px, margin 0 0 8px 0 đến heading. Dùng làm tín hiệu nhẹ về chủ đề section trước khi heading tối xuất hiện.

### Voice Confirm Button
**Vai trò:** Button hành động tròn bên trong giao diện mobile và voice input

Hình tròn fill #e34432, icon checkmark trắng, không nhãn chữ, đường kính 40–48px, radius 8px (về mặt thị giác là một full pill ở kích thước này). Nằm ở góc dưới bên phải của khung điện thoại để xác nhận voice input.

### Mobile Preview Frame
**Vai trò:** Mockup hình điện thoại cho ảnh chụp màn hình ứng dụng

Hình chữ nhật bo tròn (radius 15px trên ảnh, lớn hơn trên khung thiết bị) chứa ảnh chụp màn hình ứng dụng đầy đủ. Drop shadow khớp với shadow stack của primary button để đảm bảo nhất quán. Không có màu viền bezel nhìn thấy — khung màu trắng với stroke 1px #d7d6d4.

### Testimonial Block
**Vai trò:** Quote người dùng căn giữa kèm attribution

Caecilia 400 cỡ 20px, màu #25221, line-height 1.80, căn giữa. Được bao quanh bởi padding dọc 64px rộng rãi. Không có bề mặt card — nằm trực tiếp trên canvas. Tùy chọn phần tử trang trí ngôi sao vàng/vàng trong dải xung quanh.

### Form Input
**Vai trò:** Trường nhập văn bản

Nền #fefdfc, viền 1px #d7d6d4, radius 8px, padding 12px 16px, Inter 400 cỡ 14–15px, chữ #25221, placeholder #94928f. Trạng thái focus: viền 1px #cf3520 không có ring glow.

### Status Badge
**Vai trò:** Pill nhỏ cho nhãn thành công, ưu tiên hoặc danh mục

Nền tông màu nhạt (ví dụ: #f0f6df cho thành công, #dceaff cho thông tin), chữ #446c3d hoặc #0f66ae ở Inter 600 cỡ 12px, radius 8px, padding 4px 10px. Không bao giờ dùng nền bão hòa — luôn là lớp rửa nhạt với chữ có màu sắc.

### Decorative Wave Background
**Vai trò:** Dải ngang uốn lượn bên dưới hero và feature sections

Các stroke mờ nhiều lớp màu #497d7, #4c7a45 và #e34432 trên nền kem #fff6f0 hoặc xanh nhạt #f0f6df. Độ dày stroke 1–2px, không fill, nằm sau product cards. Chỉ trang trí — không bao giờ chứa nội dung.

## Do's and Don'ts

### Nên làm
- Dành #e34432 cho một primary action duy nhất trên mỗi view; không bao giờ lặp lại nó làm màu link hoặc icon trong cùng một viewport.
- Đặt body text là #25221 trên nền #fefdfc — tỷ lệ tương phản 15.6:1 hỗ trợ AAA ở 16px và giữ cho canvas có cảm giác ấm áp thay vì lâm sàng.
- Áp dụng border-radius 8px cho mọi card, button, badge và input; dành 15px riêng cho image masks và desktop product frames.
- Dùng Graphik cho headlines từ 22px trở lên với letter-spacing từ -0.11px đến -0.55px; chuyển sang Inter cho bất kỳ thứ gì 21px hoặc nhỏ hơn.
- Cách section theo chiều dọc 48–80px; dùng padding nội bộ 16–24px cho card và 12–16px cho các hàng UI nhỏ gọn.
- Đặt ảnh chụp màn hình sản phẩm trên nền #fff6f0 hoặc #f0f6df kem/xanh, không bao giờ trên nền trắng trơn — tông màu ấm là thứ làm cho sản phẩm có cảm giác ngập nắng thay vì vô trùng.
- Giữ elevation ở mức một bóng đổ mảnh 1px trên card; chỉ dùng bóng đổ button hai lớp cho hành động quan trọng nhất.

### Không nên làm
- Không tô các bề mặt lớn bằng #e34432 — màu đỏ là dấu câu, không phải màu fill.
- Không dùng #0f66ae cho body copy hoặc văn bản không phải link; dành cobalt cho hyperlinks và nhãn ứng dụng cấp thông tin.
- Không xếp chồng nhiều hơn một primary action button trên một view duy nhất; secondary actions phải dùng ghost link style.
- Không trộn Graphik và Inter ở cùng kích thước và vai trò — chọn một họ cho mỗi dải kích thước và giữ nguyên.
- Không dùng shadow nặng hơn rgba(37,34,30,0.04) 0 1px 0 trên card; bất kỳ thứ gì mạnh hơn sẽ phá vỡ triết lý whisper-shadow.
- Không áp dụng radii lớn hơn 8px cho UI controls — 15px được dành riêng cho image masks và sẽ làm button trông giống chip.
- Không dùng #000000 thuần cho body text; màu #25221 ấm áp là một phần của bầu không khí planner giấy và đọc như mực, không phải màn hình.

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|---------|---------|
| 0 | Paper Canvas | `#fefdfc` | Nền trang mặc định cho hero, content và các section trung tính |
| 1 | Cream Wash | `#fff6f0` | Dải ấm trang trí phía sau product showcases và footer |
| 2 | Tinted Wave | `#f0f6df` | Lớp rửa xanh nhạt trang trí bên trong minh họa sóng uốn lượn |
| 3 | Card Surface | `#fefdfc` | Card ảnh chụp màn hình sản phẩm và container UI nâng cao |

## Elevation

- **Card:** `rgba(37, 34, 30, 0.04) 0px 1px 0px 0px`
- **Primary Action Button:** `rgba(37, 34, 30, 0.07) 0px 14px 19px -9px, rgba(37, 34, 30, 0.18) 0px 10px 48px 0px`

## Imagery

Hình ảnh ưu tiên sản phẩm: hero được xây dựng xung quanh ảnh chụp màn hình desktop trong ứng dụng của Today view, và các section tiếp theo xoay vòng qua mobile phone mockups hiển thị ứng dụng trên iOS và Android. Tất cả ảnh chụp màn hình đều được cắt sát, nổi trên nền sóng kem hoặc xanh nhạt, không bao giờ trên nền trắng lạnh. Các yếu tố trang trí được giới hạn ở minh họa sóng uốn lượn màu xanh nhạt, xanh dương và đào — được vẽ dưới dạng stroke mảnh 1–2px không fill — và các điểm nhấn ngôi sao vàng/lấp lánh không thường xuyên trong dải testimonial. Không có nhiếp ảnh, không có hình ảnh lối sống, không có khuôn mặt người. Iconography dạng line, đơn sắc màu #25221 hoặc #6f6c69, với các hình dạng hình học đơn giản (checkmarks, mũi tên, lưới lịch, cờ ưu tiên). Mật độ thị giác thấp: văn bản và UI sản phẩm chiếm ưu thế, với hình ảnh đóng vai trò là bằng chứng chứ không phải trang trí.

## Layout

Layout được giới hạn max-width ở 1200px, căn giữa, với các dải sóng trang trí full-bleed mở rộng ra ngoài container. Hero theo mẫu hai cột: cột văn bản bên trái (~45% chiều rộng) mang eyebrow label, display headline, body paragraph và primary CTA; cột bên phải mang một ảnh chụp màn hình sản phẩm hoặc phone mockup duy nhất. Các feature section tiếp theo xen kẽ hướng cột (text-left/image-right rồi text-right/image-left) để tạo nhịp điệu mà không phản chiếu. Dải testimonial phá vỡ cấu trúc cột với văn bản căn giữa và padding dọc 64–80px rộng rãi. Navigation nằm dưới dạng một thanh ngang duy nhất ở trên cùng với thương hiệu bên trái, links ở giữa, CTA bên phải. Chuyển tiếp section liền mạch — nền sóng làm mờ ranh giới giữa các dải thay vì sử dụng divider cứng. Khoảng cách dọc giữa các section chính là 64–96px; khoảng cách giữa các phần tử trong một section là 16–24px. Mật độ tổng thể thoải mái: một ý tưởng tập trung trên mỗi màn hình, không bao giờ là một lưới các khối cạnh tranh.

## Agent Prompt Guide

**Tham chiếu màu nhanh**
- Văn bản: #25221e trên #fefdfc
- Nền: #fefdfc (canvas), #fff6f0 (dải trang trí)
- Viền: #d7d6d4
- Accent: #cf3520 (eyebrow/trang trí), #0f66ae (link)
- primary action: không có màu CTA riêng biệt

**Ví dụ Component Prompts**
Không quan sát thấy màu primary action riêng biệt; sử dụng các xử lý button trung tính đã trích xuất thay vì phát minh ra màu CTA fill.
2. Xây dựng một hero headline: Graphik 700 cỡ 55px, màu #25221e, letter-spacing -0.55px, line-height 1.0. Thêm một eyebrow label phía trên ở Inter 600 cỡ 12px, màu #cf3520, letter-spacing 0.14px, với margin 8px đến headline.
3. Tạo một product showcase card: bề mặt #fefdfc, radius 8px, bóng đổ mảnh rgba(37,34,30,0.04) 0 1px 0, padding nội bộ 0–4px xung quanh ảnh chụp màn hình desktop. Đặt nó trên nền sóng #fff6f0 mở rộng full-bleed.
5. Tạo một testimonial block: Caecilia 400 cỡ 20px, chữ #25221e, line-height 1.80, căn giữa trên canvas với padding dọc 64px phía trên và phía dưới. Không có bề mặt card — văn bản nằm trực tiếp trên #fefdfc với một trang trí ngôi sao vàng nhỏ trong dải xung quanh.

## Font Pairing Logic

Graphik và Inter không phải là các họ cạnh tranh — chúng được phân chia theo vai trò. Graphik sở hữu giọng nói con người: headlines, large body paragraphs, wordmark và thông điệp chính của announcement banner. Các dạng chữ hơi nén và tracking âm dày khiến nó đọc như có chủ đích và mang tính editorial. Inter sở hữu giọng nói máy móc: buttons, inputs, badges, nav links, form labels, captions — mọi thứ có chức năng thay vì biểu cảm. Tỷ lệ rộng hơn và tracking dương giúp nó dễ đọc ở 12–16px. Caecilia và Shantell Sans chỉ là giọng nói accent: Caecilia cho user testimonials (serif đánh dấu chúng là được trích dẫn, không phải do tác giả), Shantell Sans cho inline links bên trong announcement bar (viết tay đánh dấu chúng là thân thiện, không phải giao dịch). Không bao giờ để Inter xuất hiện ở 38px trở lên — đó là lãnh thổ của Graphik.

## Decorative Wave System

Nền sóng uốn lượn là một yếu tố đặc trưng. Chúng được xây dựng từ 3–5 đường dẫn SVG nhiều lớp được vẽ dưới dạng stroke mảnh (1–2px) màu #497d7e, #4c7a45 và #e34432, nằm trên nền fill #fff6f0 hoặc #f0f6df. Các đường dẫn luôn chảy từ trái sang phải, không bao giờ lặp hoặc đóng, và không bao giờ mang văn bản. Chúng chỉ mang tính trang trí — nội dung luôn nằm phía trước chúng trong một card #fefdfc phẳng. Các sóng làm mờ ranh giới giữa các section thay vì hoạt động như divider, mang lại cho trang cảm giác planner giấy liên tục. Tái sử dụng hệ thống này trên bất kỳ section nào cần trọng lượng không khí mà không thêm màu sắc hoặc minh họa mới.

## Similar Brands

- **Notion** — Cùng canvas trắng kem ấm, triết lý single-accent hạn chế, và humanist sans cho headlines — cả hai đều coi màu sắc như dấu câu chức năng thay vì trang trí.
- **Things 3** — Cùng mẫu hero product-screenshot-forward, bảng màu trung tính yên tĩnh với một accent ấm, và khoảng trắng rộng rãi xung quanh mobile mockups.
- **Any.do** — Thể loại năng suất với cùng thẩm mỹ giấy ấm, accent CTA đỏ cam, và bố cục hero tập trung vào product-UI.
- **Linear** — Cùng kỷ luật single-accent (Linear dùng chàm, Todoist dùng đỏ) với hệ thống whisper-shadow elevation và hệ thống phân cấp typography chặt chẽ.
- **Calendly** — Cùng cách tiếp cận warm-canvas + single-accent, ghép cặp type gần Graphik/Inter, và product-screenshot heroes nổi trên nền có tông màu.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-ember-red: #e34432;
  --color-deep-ember: #cf3520;
  --color-cobalt-link: #0f66ae;
  --color-ink: #25221e;
  --color-paper: #fefdfc;
  --color-cream: #fff6f0;
  --color-stone: #d7d6d4;
  --color-pencil: #6f6c69;
  --color-graphite: #94928f;
  --color-charcoal: #4a4744;
  --color-teal-dusk: #497d7e;
  --color-mint-wash: #f0f6df;
  --color-sky-wash: #dceaff;
  --color-forest: #446c3d;

  /* Typography — Font Families */
  --font-graphik: 'Graphik', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-caecilia: 'Caecilia', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-shantell-sans: 'Shantell Sans', 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;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --tracking-caption: 0.14px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: 0.07px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: 0.16px;
  --text-body-lg: 18px;
  --leading-body-lg: 1.5;
  --tracking-body-lg: 0.18px;
  --text-subheading: 21px;
  --leading-subheading: 1.5;
  --tracking-subheading: 0.21px;
  --text-heading: 38px;
  --leading-heading: 1.28;
  --tracking-heading: -0.19px;
  --text-heading-lg: 44px;
  --leading-heading-lg: 1.15;
  --tracking-heading-lg: -0.22px;
  --text-display: 55px;
  --leading-display: 1;
  --tracking-display: -0.55px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-w475: 475;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-w625: 625;
  --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-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-128: 128px;
  --spacing-192: 192px;

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

  /* Border Radius */
  --radius-sm: 2.5px;
  --radius-lg: 8px;
  --radius-xl: 15px;

  /* Named Radii */
  --radius-nav: 8px;
  --radius-cards: 8px;
  --radius-badges: 8px;
  --radius-images: 15px;
  --radius-inputs: 8px;
  --radius-buttons: 8px;

  /* Shadows */
  --shadow-subtle: rgba(37, 34, 30, 0.04) 0px 1px 0px 0px;
  --shadow-lg: rgba(37, 34, 30, 0.07) 0px 14px 19px -9px, rgba(37, 34, 30, 0.18) 0px 10px 48px 0px;

  /* Surfaces */
  --surface-paper-canvas: #fefdfc;
  --surface-cream-wash: #fff6f0;
  --surface-tinted-wave: #f0f6df;
  --surface-card-surface: #fefdfc;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-ember-red: #e34432;
  --color-deep-ember: #cf3520;
  --color-cobalt-link: #0f66ae;
  --color-ink: #25221e;
  --color-paper: #fefdfc;
  --color-cream: #fff6f0;
  --color-stone: #d7d6d4;
  --color-pencil: #6f6c69;
  --color-graphite: #94928f;
  --color-charcoal: #4a4744;
  --color-teal-dusk: #497d7e;
  --color-mint-wash: #f0f6df;
  --color-sky-wash: #dceaff;
  --color-forest: #446c3d;

  /* Typography */
  --font-graphik: 'Graphik', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-caecilia: 'Caecilia', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-shantell-sans: 'Shantell Sans', 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;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --tracking-caption: 0.14px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: 0.07px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: 0.16px;
  --text-body-lg: 18px;
  --leading-body-lg: 1.5;
  --tracking-body-lg: 0.18px;
  --text-subheading: 21px;
  --leading-subheading: 1.5;
  --tracking-subheading: 0.21px;
  --text-heading: 38px;
  --leading-heading: 1.28;
  --tracking-heading: -0.19px;
  --text-heading-lg: 44px;
  --leading-heading-lg: 1.15;
  --tracking-heading-lg: -0.22px;
  --text-display: 55px;
  --leading-display: 1;
  --tracking-display: -0.55px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-128: 128px;
  --spacing-192: 192px;

  /* Border Radius */
  --radius-sm: 2.5px;
  --radius-lg: 8px;
  --radius-xl: 15px;

  /* Shadows */
  --shadow-subtle: rgba(37, 34, 30, 0.04) 0px 1px 0px 0px;
  --shadow-lg: rgba(37, 34, 30, 0.07) 0px 14px 19px -9px, rgba(37, 34, 30, 0.18) 0px 10px 48px 0px;
}
```