# Inthememory

> # Inthememory — Style Reference

## Prompt Content

```
# Inthememory — Style Reference
> Bản thiết kế kiến trúc trên nền đá cẩm thạch trắng với một tia lửa ấm duy nhất. Một phòng dữ liệu editorial yên tĩnh, nơi mực xanh teal đậm và các điều khiển hình pill lơ lửng trên bề mặt trắng như phấn, chỉ bị phá vỡ bởi một tia cam duy nhất.

**Theme:** light

Inthememory mang đến một bề mặt editorial kết hợp sản phẩm sắc nét: canvas trắng, typography xanh teal mực đậm, và các dấu chấm câu màu cam ấm dè dặt cho những khoảnh khắc năng lượng. Cards nằm trên nền xám nhạt thoáng đãng (#f1f7f9) với viền siêu mảnh (hairline borders), trong khi các điều khiển hình pill (radius 100px) và isometric line illustrations mang đến cho hệ thống cảm giác xúc giác, gần như văn phòng phẩm ấm áp. Màu sắc mang tính chức năng và hiếm khi xuất hiện — màu xanh điện (#0c67ff) được dành riêng cho announcement bars và focus states, màu cam (#fa4e1d) cho hero iconography và thỉnh thoảng cho nền card, và toàn bộ chrome giữ đơn sắc để dữ liệu và nội dung dẫn dắt. Typography là Graphik tùy chỉnh ở hai weight duy nhất, tạo ra một hệ thống hai giọng nói có kỷ luật, nơi weight 500 đảm nhận sự nhấn mạnh và weight 400 mang mọi thứ còn lại.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Ink Teal | `#102126` | `--color-ink-teal` | Văn bản chính, đường viền, nút đã điền, iconography — xương sống cấu trúc của hệ thống. Màu teal gần đen này mang vẻ uy quyền mà không gay gắt như đen tuyền |
| Slate Veil | `#3d5761` | `--color-slate-veil` | Văn bản phụ, đường viền tinh tế — cầu nối giữa body copy và UI chrome tĩnh lặng mà không cạnh tranh với mực chính |
| Fog Gray | `#677b82` | `--color-fog-gray` | Văn bản cấp ba, trạng thái disabled, nhãn ít nhấn mạnh — màu trung tính yên tĩnh nhất vẫn duy trì khả năng đọc trên nền trắng |
| Chalk White | `#ffffff` | `--color-chalk-white` | Canvas trang, bề mặt card, văn bản nút trên nền tối — bề mặt chủ đạo để mực tối và màu nhấn mang trọng lượng thị giác |
| Pale Mist | `#f1f7f9` | `--color-pale-mist` | Nền card, section washes, phân cấp bề mặt tinh tế — màu xám mát gần như không pha màu, nâng cards khỏi canvas trắng mà không thêm hơi ấm |
| Hairline Gray | `#e9eef0` | `--color-hairline-gray` | Đường phân cách, đường viền, đường viền input — màu đường kẻ cấu trúc mỏng nhất, dùng khi cần một cạnh 1px tồn tại mà không thu hút sự chú ý |
| Ember Orange | `#fa4e1d` | `--color-ember-orange` | Lớp phủ cam cho nền highlight, dải trang trí, và nhấn nhẹ phía sau nội dung. Không nâng cấp nó thành màu CTA chính |
| Sunset Coral | `#fb6338` | `--color-sunset-coral` | Lớp phủ cam cho nền highlight, dải trang trí, và nhấn nhẹ phía sau nội dung. Không nâng cấp nó thành màu CTA chính |
| Signal Blue | `#0c67ff` | `--color-signal-blue` | Lớp phủ tím cho nền highlight, dải trang trí, và nhấn nhẹ phía sau nội dung. Không nâng cấp nó thành màu CTA chính |
| Info Indigo | `#0519d5` | `--color-info-indigo` | Điểm nhấn trạng thái tím cho badges, bề mặt xác thực, và nhãn trạng thái ngắn. Không nâng cấp nó thành màu CTA chính |
| Soft Sky | `#e4eeff` | `--color-soft-sky` | Nền info badge, lớp phủ xanh nhẹ — điểm nhấn pastel cho Info Indigo, dùng khi phần tử xanh cần bề mặt pha màu thay vì tô đặc |

## Tokens — Typography

### Graphik — Hệ thống một font. Weight 500 đảm nhận mọi sự nhấn mạnh (headings, nav, button labels, card titles) trong khi weight 400 xử lý body, mô tả, và văn bản hỗ trợ. Kỷ luật hai weight tạo ra một giọng nói nhị phân: 500 tuyên bố, 400 giải thích. Tỷ lệ line-height chặt chẽ trên kích thước display (1.10 ở 56px) mang đến cho headlines mật độ editorial nhỏ gọn thay vì dàn trải marketing thoáng đãng. · `--font-graphik`
- **Thay thế:** Inter, Geist, Satoshi
- **Weights:** 400, 500
- **Kích thước:** 12px, 14px, 16px, 18px, 20px, 40px, 56px
- **Line height:** 1.00, 1.10, 1.18, 1.20, 1.33, 1.50, 1.70
- **Letter spacing:** normal ở mọi kích thước — số liệu tự nhiên của font mang nhịp điệu
- **Vai trò:** Hệ thống một font. Weight 500 đảm nhận mọi sự nhấn mạnh (headings, nav, button labels, card titles) trong khi weight 400 xử lý body, mô tả, và văn bản hỗ trợ. Kỷ luật hai weight tạo ra một giọng nói nhị phân: 500 tuyên bố, 400 giải thích. Tỷ lệ line-height chặt chẽ trên kích thước display (1.10 ở 56px) mang đến cho headlines mật độ editorial nhỏ gọn thay vì dàn trải marketing thoáng đãng.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.5 | — | `--text-caption` |
| body-sm | 14px | 1.7 | — | `--text-body-sm` |
| body | 16px | 1.5 | — | `--text-body` |
| subheading | 18px | 1.33 | — | `--text-subheading` |
| heading-sm | 20px | 1.2 | — | `--text-heading-sm` |
| stats | 40px | 1.18 | — | `--text-stats` |
| display | 56px | 1.1 | — | `--text-display` |

## Tokens — Spacing & Shapes

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

**Density:** comfortable

### 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` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 96 | 96px | `--spacing-96` |
| 128 | 128px | `--spacing-128` |
| 200 | 200px | `--spacing-200` |
| 224 | 224px | `--spacing-224` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| cards | 12px |
| links | 20px |
| badges | 12px |
| inputs | 12px |
| buttons | 100px |

### Layout

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

## Components

### Pill Primary Button
**Vai trò:** Nút call-to-action chính cho hành động ưu tiên cao nhất trên bất kỳ bề mặt nào.

Được tô bằng #102126 (Ink Teal), chữ trắng Graphik 500 ở 16px, border-radius 100px cho hình pill hoàn chỉnh, padding 12px 24px. Chứa một icon tròn nhỏ (16px, trắng) ở bên phải nhãn, cách nhau 8px gap. Nền tối trên canvas trắng tạo ra một neo vững chắc mà các element khác phải nhường nhịn.

### Outline Pill Button
**Vai trò:** Nút hành động phụ hoặc đường dẫn thay thế.

Nền trong suốt với viền 1px #102126, chữ #102126, Graphik 500 ở 16px, radius 100px, padding 12px 24px. Phản chiếu hình học của pill chính nhưng dùng viền siêu mảnh để giảm trọng lượng thị giác trong khi vẫn duy trì cùng vùng click.

### Announcement Bar
**Vai trò:** Banner quảng cáo hoặc cập nhật trên toàn site ở đầu mỗi trang.

Nền full-bleed #0c67ff (Signal Blue), chữ trắng Graphik 400 ở 14px, nội dung căn giữa với các thẻ hình pill nội tuyến (nền #ffffff, chữ #102126, radius 12px). Bao gồm nút đóng (×) ở bên phải. Đây là nơi duy nhất màu xanh này xuất hiện ở độ bão hòa đầy đủ trên một bề mặt lớn.

### Top Navigation
**Vai trò:** Điều hướng chính của site và header nhận diện thương hiệu.

Nền trắng, chiều cao 64px, viền dưới 1px #e9eef0. Logo (Graphik 500, 20px, #102126) căn trái. Các liên kết nav Graphik 400 ở 14px, #102126, với gap 24px giữa các mục. Một badge tròn nhỏ #0c67ff với chữ số trắng xuất hiện trên liên kết 'Careers'. Một icon quả địa cầu và pill tối 'Book a demo' neo bên phải.

### Feature Card
**Vai trò:** Card tính năng hoặc sản phẩm riêng lẻ trong phần features.

Nền trắng, viền 1px #e9eef0, border-radius 12px, padding 24px. Chứa một isometric illustration toàn chiều rộng ở trên cùng (vùng cao 200px), tiếp theo là tiêu đề Graphik 500 ở 20px, #102126, và mô tả Graphik 400 ở 14px, #3d5761. Cards nằm trong một hàng cuộn ngang với gap 16px giữa chúng.

### Tab Toggle
**Vai trò:** Điều khiển phân đoạn để chuyển đổi giữa các chế độ xem đối tượng (ví dụ: Retailers vs Brands).

Pill toggle hai trạng thái: tab không hoạt động trong suốt với chữ #3d5761; tab hoạt động có nền #f1f7f9 và chữ #102126. Border-radius 20px, padding 8px 16px, Graphik 500 ở 14px. Nền nhạt của trạng thái hoạt động tạo hiệu ứng inset tinh tế.

### Stats Block
**Vai trò:** Điểm chứng minh định lượng hiển thị trong một hàng ngang.

Số lớn Graphik 500 ở 40px, #102126, tiếp theo là mô tả 2-3 dòng Graphik 400 ở 14px, #677b82. Không có nền hoặc viền — dựa vào khoảng trắng và tương phản kích thước. Các chữ số 40px là loại mid-scale duy nhất giữa body và display, tạo ra một thanh ghi thống kê rõ ràng.

### Carousel Arrow
**Vai trò:** Điều khiển điều hướng cho các hàng nội dung cuộn ngang.

Nút tròn 40px với nền #102126, icon chevron trắng, đặt ở giữa theo chiều dọc của hàng card. Chồng lên cạnh nội dung để báo hiệu khả năng cuộn. Xuất hiện ở cả bên trái và bên phải của các phần card có thể cuộn.

### Info Badge
**Vai trò:** Thẻ trạng thái hoặc danh mục nhỏ để gắn nhãn nội dung.

Border-radius 12px, padding 8px 12px. Nền #e4eeff (Soft Sky), chữ #0519d5 (Info Indigo) Graphik 500 ở 12px. Sự kết hợp pastel-trên-xanh đậm là cặp màu ngữ nghĩa duy nhất trong hệ thống, dành riêng cho phân loại thông tin.

### Section Header
**Vai trò:** Nhãn lông mày phía trên tiêu đề phần chính.

Graphik 400 ở 14px, #677b82, đặt cách 6px phía trên heading chính. Màu xám tắt tạo ra một nhãn danh mục thì thầm yên tĩnh không cạnh tranh với tiêu đề phần bên dưới.

### Isometric Illustration
**Vai trò:** Đồ họa line-art trang trí trực quan hóa khả năng sản phẩm.

Minh họa nét vẽ mỏng 1.5px #102126 trên nền card trắng, với các tô màu ấm có chọn lọc (#fa4e1d hoặc #fb6338) trên 1-2 đối tượng chính mỗi hình. Góc nhìn isometric ở góc 30°. Không có bóng đổ hoặc gradient — chỉ là line work thuần túy với minimal color blocking. Phong cách mang tính kiến trúc và chính xác, phù hợp với giọng nói typography editorial.

### Hero Headline
**Vai trò:** Headline cấp trang chính với icon trang trí nội tuyến.

Graphik 400 ở 56px, #102126, line-height 1.10. Chứa 1-2 icon tròn nội tuyến thay thế cho từ: một vòng tròn xanh #0c67ff với hình thoi trắng thay thế một từ khái niệm, một vòng tròn cam #fa4e1d với mũi tên trắng thay thế một từ khác, và từ 'data' nằm bên trong viền hình pill (stroke 1px #102126, radius 100px). Cách tiếp cận đa phương tiện biến headline thành một bố cục thị giác.

### Featured Surface Card
**Vai trò:** Card nhấn với nền ấm để làm nổi bật nội dung chính.

Nền #fb6338 (Sunset Coral), border-radius 12px, padding 24px. Toàn bộ chữ trắng: tiêu đề Graphik 500 ở 20px, mô tả Graphik 400 ở 14px. Được sử dụng một cách tiết kiệm — bề mặt ấm là sự gián đoạn có chủ đích trong bảng màu mát để thu hút mắt đến một tính năng hoặc lời chứng thực cụ thể.

## Do's and Don'ts

### Nên
- Sử dụng border-radius 100px cho tất cả buttons, nav items, và pill controls tương tác để duy trì hình học xúc giác nhất quán
- Dành riêng #fa4e1d (Ember Orange) cho hero iconography và các khoảnh khắc trang trí — không bao giờ dùng cho trường nền lớn hoặc body text
- Áp dụng Graphik 500 độc quyền cho sự nhấn mạnh (headings, labels, button text, card titles) và Graphik 400 cho mọi thứ khác để bảo toàn kỷ luật hai giọng nói
- Sử dụng viền 1px #e9eef0 cho cạnh card và đường phân cách thay vì bóng đổ — hệ thống dựa vào hairlines và sự thay đổi màu bề mặt để phân tách
- Giữ bảng màu đơn sắc trên các element cấu trúc (nav, cards, body text) và để màu sắc xuất hiện chỉ như dấu chấm câu chức năng
- Đặt display type ở 56px với line-height 1.10 cho mật độ editorial thay vì tỷ lệ 1.2+ phổ biến tạo headlines marketing thoáng đãng
- Đặt isometric line illustrations ở đầu feature cards với chiều cao 200px+ để phong cách kiến trúc có không gian thở

### Không nên
- Không sử dụng bóng đổ hoặc hiệu ứng elevation trên cards — hệ thống phân tách bề mặt bằng viền siêu mảnh và sự thay đổi nền tinh tế (#f1f7f9, #e4eeff), không bao giờ dùng drop shadows
- Không giới thiệu thêm font weights ngoài 400 và 500 — giọng nói nhị phân là chữ ký typography
- Không áp dụng #0c67ff (Signal Blue) cho body text, đường viền, hoặc các element không tương tác — nó được dành riêng cho announcement bars, focus states, và active indicators
- Không sử dụng góc nhọn (0px radius) trên bất kỳ element tương tác nào — mọi thứ từ buttons đến cards đều mang radius 12px hoặc 100px
- Không kết hợp cam ấm và xanh điện trong cùng một component — chúng là các thanh ghi nhấn riêng biệt, không phải màu thương hiệu đồng cấp
- Không thêm gradient, texture, hoặc background patterns vào canvas trắng — bề mặt phải giữ sạch sẽ và mang tính kiến trúc
- Không sử dụng giá trị font-size giữa 20px và 40px cho body content — type scale nhảy có chủ đích từ 20px lên 40px để duy trì khoảng cách thanh ghi editorial

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Canvas | `#ffffff` | Nền trang cơ bản — bề mặt chủ đạo trên tất cả các trang |
| 1 | Card Surface | `#f1f7f9` | Cards nâng cao, section washes, phân biệt bề mặt tinh tế khỏi canvas trắng |
| 2 | Info Wash | `#e4eeff` | Nền info badge, bề mặt pha màu xanh rất nhạt cho nội dung ngữ nghĩa |
| 3 | Warm Accent | `#fb6338` | Bề mặt card nổi bật cần phá vỡ bảng màu mát và thu hút mắt |

## Elevation

Hệ thống cố tình tránh drop shadows như một chiến lược elevation. Sự phân tách bề mặt đạt được hoàn toàn thông qua: (1) viền hairline 1px #e9eef0 cho cạnh card, (2) sự thay đổi màu nền từ #ffffff sang #f1f7f9 sang #e4eeff cho các bề mặt phân cấp, và (3) màu ấm #fb6338 cho nội dung nổi bật/nâng cao. Điều này tạo ra một cảm giác phẳng, editorial, gần như in ấn — giống như bản vẽ kiến trúc trên giấy hơn là một sản phẩm kỹ thuật số glass-morphism. Sự vắng mặt của bóng đổ là một lựa chọn chữ ký, không phải sơ suất.

## Imagery

Ngôn ngữ thị giác bị chi phối bởi các isometric line illustrations tùy chỉnh được render bằng #102126 với các tô màu ấm có chọn lọc (#fa4e1d, #fb6338) trên 1-2 đối tượng chính mỗi cảnh. Các hình minh họa này mô tả môi trường bán lẻ — kệ hàng, chuỗi cung ứng, bố trí merchandising — ở góc isometric 30° với nét vẽ mỏng 1.5px và không tô bóng. Phong cách chính xác, kiến trúc, và hơi kỹ thuật, phù hợp với định vị sản phẩm data-intelligence. Nhiếp ảnh vắng mặt; các hình minh họa mang tất cả trọng lượng thị giác giải thích. Icons tối giản: hình dạng line hoặc filled đơn giản #102126, với thỉnh thoảng icon trắng trên các nút pill tối. Mật độ tổng thể là văn bản chiếm ưu thế với các hình minh họa đóng vai trò neo thị giác ở đầu content cards.

## Layout

Trang tuân theo container căn giữa max-width 1280px với section gaps rộng 80px tạo không gian thở dọc rõ ràng. Hero là một dải trắng full-width với headline căn giữa (56px, max-width ~800px) và một pill CTA tối duy nhất bên dưới. Bên dưới hero, các section xen kẽ giữa nền trắng và #f1f7f9 để tạo nhịp điệu dựa trên dải. Nội dung tính năng được tổ chức trong các hàng card cuộn ngang (4-5 cards hiển thị, với carousel arrows ở các cạnh) thay vì lưới bao bọc. Stats xuất hiện trong một hàng 4 cột sạch sẽ không có đường phân cách giữa chúng — chỉ dựa vào khoảng trắng. Navigation là một thanh cố định trên cùng (64px) với một announcement bar full-width phía trên. Sắp xếp nội dung luôn căn giữa hoặc căn trái — không có bố cục bất đối xứng hoặc chồng chéo. Mật độ tổng thể rộng rãi và editorial, với mỗi section có dải chiều cao viewport riêng để duy trì nhịp đọc bình tĩnh, không vội vã.

## Agent Prompt Guide

## Quick Color Reference
- Text: #102126 (Ink Teal)
- Background: #ffffff (Chalk White)
- Border: #e9eef0 (Hairline Gray)
- Accent: #fa4e1d (Ember Orange)
- Interactive: #0c67ff (Signal Blue)
- primary action: #102126 (filled action)

## Example Component Prompts

1. **Hero Section**: Nền trắng full-width. Headline căn giữa ở 56px Graphik 400, #102126, line-height 1.10. Bao gồm một vòng tròn 48px #0c67ff với icon hình thoi trắng nội tuyến thay thế một từ, và một vòng tròn 48px #fa4e1d với icon mũi tên trắng thay thế một từ khác. Bọc một từ khóa trong viền outline radius 100px (1px #102126). Subtext ở 18px Graphik 400, #3d5761, max-width 560px căn giữa. Dark pill CTA bên dưới: nền #102126, chữ trắng 16px Graphik 500, radius 100px, padding 12px 24px, với icon mũi tên tròn trắng 16px ở bên phải.

2. **Feature Card Row**: Phần nền trắng. Section header Graphik 400 ở 14px #677b82 phía trên tiêu đề 40px Graphik 500 #102126. Tab toggle ở góc trên bên phải: hai pills với radius 20px, trạng thái active có nền #f1f7f9 và chữ #102126, inactive trong suốt với chữ #3d5761. Bên dưới: hàng ngang 4 cards, mỗi card có viền 1px #e9eef0, radius 12px, padding 24px. Mỗi card có isometric line illustration cao 180px #102126 với một tô màu nhấn #fa4e1d, sau đó tiêu đề 20px Graphik 500 #102126, sau đó mô tả 14px Graphik 400 #3d5761. Carousel arrows (vòng tròn 40px, nền #102126, chevrons trắng) ở giữa theo chiều dọc ở cả hai bên.

3. **Stats Section**: Nền #f1f7f9. Tiêu đề phần Graphik 500 ở 40px #102126 bên trái. Bốn stats trong một hàng: mỗi stat là một số 40px Graphik 500 #102126 phía trên mô tả 14px Graphik 400 #677b82, gap 24px giữa số và chữ, gap 80px giữa các stats. Không có viền hoặc đường phân cách giữa các stats.

4. **Navigation Bar**: Chiều cao 64px, nền trắng, viền dưới 1px #e9eef0. Logo (20px Graphik 500 #102126) bên trái. Các mục nav 14px Graphik 400 #102126 với gap 24px. Một mục có badge tròn nhỏ 20px #0c67ff với chữ số trắng. Bên phải: icon quả địa cầu 16px #102126, sau đó pill button (nền #102126, chữ trắng 14px Graphik 500, radius 100px, padding 10px 20px) với icon mũi tên tròn trắng nhỏ.

5. **Info Badge**: Border-radius 12px, padding ngang 8px và dọc 4px. Nền #e4eeff, chữ #0519d5 Graphik 500 ở 12px. Sử dụng cho nhãn trạng thái hoặc thẻ danh mục cần mã màu ngữ nghĩa.

## Isometric Illustration Style

Tất cả các hình minh họa sản phẩm và tính năng tuân theo một hệ thống isometric nghiêm ngặt: phép chiếu góc 30°, stroke weight 1.5px #102126, không tô ngoại trừ 1-2 đối tượng nhấn mỗi cảnh sử dụng #fa4e1d hoặc #fb6338. Không có bóng đổ, không gradient, không texture. Các hình minh họa mô tả bối cảnh bán lẻ — kệ hàng, chuỗi cung ứng, trải nghiệm mua sắm, luồng dữ liệu — ở tỷ lệ và mức độ chi tiết nhất quán. Độ chính xác của line-art phù hợp với typography editorial, tạo ra một hệ thống gắn kết mang cảm giác giống bản sắc thị giác của một công ty kiến trúc hơn là trang sản phẩm SaaS điển hình.

## Similar Brands

- **Linear** — Cùng kỷ luật typography hai weight, pill-shaped controls với bo tròn đầy đủ, và chiến lược màu đơn sắc-cộng-một-điểm-nhấn nơi màu sắc chỉ xuất hiện như dấu chấm câu chức năng
- **Vercel** — Cách tiếp cận editorial giống hệt: headlines lớn yên tĩnh trên canvas trắng, hairline borders thay vì bóng đổ, và bảng màu mát-trung tính với những khoảnh khắc nhấn ấm hiếm hoi
- **Retool** — Cùng hình học pill-button (radius 100px) và thực hành để product illustrations mang kể chuyện thị giác thay vì nhiếp ảnh hoặc gradient trang trí
- **Pigment** — Phong cách isometric illustration tương tự cho các tính năng sản phẩm và cùng cách tiếp cận sử dụng màu nhấn ấm một cách tiết kiệm trên nền giao diện chủ yếu là trắng mát
- **Pitch** — Kỷ luật typography editorial chung với line-heights chặt chẽ trên kích thước display, triết lý thiết kế white-canvas-first, và việc sử dụng icon nội tuyến trong headlines như dấu chấm câu thị giác

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-ink-teal: #102126;
  --color-slate-veil: #3d5761;
  --color-fog-gray: #677b82;
  --color-chalk-white: #ffffff;
  --color-pale-mist: #f1f7f9;
  --color-hairline-gray: #e9eef0;
  --color-ember-orange: #fa4e1d;
  --color-sunset-coral: #fb6338;
  --color-signal-blue: #0c67ff;
  --color-info-indigo: #0519d5;
  --color-soft-sky: #e4eeff;

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

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --text-body-sm: 14px;
  --leading-body-sm: 1.7;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-subheading: 18px;
  --leading-subheading: 1.33;
  --text-heading-sm: 20px;
  --leading-heading-sm: 1.2;
  --text-stats: 40px;
  --leading-stats: 1.18;
  --text-display: 56px;
  --leading-display: 1.1;

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

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-128: 128px;
  --spacing-200: 200px;
  --spacing-224: 224px;

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

  /* Border Radius */
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-full: 100px;

  /* Named Radii */
  --radius-cards: 12px;
  --radius-links: 20px;
  --radius-badges: 12px;
  --radius-inputs: 12px;
  --radius-buttons: 100px;

  /* Surfaces */
  --surface-canvas: #ffffff;
  --surface-card-surface: #f1f7f9;
  --surface-info-wash: #e4eeff;
  --surface-warm-accent: #fb6338;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-ink-teal: #102126;
  --color-slate-veil: #3d5761;
  --color-fog-gray: #677b82;
  --color-chalk-white: #ffffff;
  --color-pale-mist: #f1f7f9;
  --color-hairline-gray: #e9eef0;
  --color-ember-orange: #fa4e1d;
  --color-sunset-coral: #fb6338;
  --color-signal-blue: #0c67ff;
  --color-info-indigo: #0519d5;
  --color-soft-sky: #e4eeff;

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

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --text-body-sm: 14px;
  --leading-body-sm: 1.7;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-subheading: 18px;
  --leading-subheading: 1.33;
  --text-heading-sm: 20px;
  --leading-heading-sm: 1.2;
  --text-stats: 40px;
  --leading-stats: 1.18;
  --text-display: 56px;
  --leading-display: 1.1;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-128: 128px;
  --spacing-200: 200px;
  --spacing-224: 224px;

  /* Border Radius */
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-full: 100px;
}
```