# Opennote

> # Opennote — Style Reference

## Prompt Content

```
# Opennote — Style Reference
> cuốn sổ da ấm áp trên trang giấy ngập nắng — giao diện mang cảm giác đóng thủ công, không phải gia công máy

**Theme:** light

Opennote nói bằng giọng của một cuốn sổ tay được yêu thích: giấy kem ấm, serif headlines mang cảm giác sắp chữ thủ công, và CTA màu nâu đen đọc như bìa da chứ không phải nút SaaS. Bảng màu gần như hoàn toàn achromatic — canvas màu ngà, mực than, đường kẻ graphite mảnh — với bốn điểm nhấn màu đậm (nâu đen, mực tím, rừng xanh, đỏ sẫm) được dùng tiết kiệm như ghi chú lề, không bao giờ làm màu nền. Chrome tối giản: border-radius 10px, một tông viền duy nhất, gần như không có shadow. Whitespace dẫn dắt bố cục, được ngắt quãng bằng các hình minh họa nét vẽ tay trôi nổi như những hình vẽ nguệch ngoạc bên lề. Kết quả là một sản phẩm trông như được thiết kế trong một studio với ánh sáng tự nhiên đẹp, chứ không phải một dashboard được tối ưu trong một sprint.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Ivory Page | `#fffdf8` | `--color-ivory-page` | Canvas chính, nền trang, bề mặt card. Màu trắng ngà ấm đọc như giấy, không phải màn hình |
| Ink Charcoal | `#0a0a0a` | `--color-ink-charcoal` | Text chính, nét icon, body copy. Gần đen nhưng pha chút ấm khi đặt trên canvas màu ngà |
| Pressed Black | `#000000` | `--color-pressed-black` | Màu tô illustration, SVG marks, chi tiết mực mảnh. Đen tuyền dành riêng cho lớp đồ họa vẽ tay |
| Graphite Rule | `#e5e5e5` | `--color-graphite-rule` | Viền mảnh, divider, đường viền card, khung ảnh. Màu trung tính cấu trúc chủ đạo — mọi đường mảnh trên trang đều được vẽ bằng màu này |
| Smoke | `#8c8c8c` | `--color-smoke` | Helper text nhạt, caption, metadata phụ. Đọc như màu bút chì xám trên nền ngà |
| Ash Border | `#d1d1d1` | `--color-ash-border` | Viền button, khung outlined-control, nặng hơn Graphite Rule một chút |
| Slate Body | `#474747` | `--color-slate-body` | Body copy phụ, chi tiết icon nhẹ, văn xuôi hỗ trợ |
| Soft Halo | `#f9f9f9` | `--color-soft-halo` | Bề mặt thay thế, panel lõm, nền card phụ bên dưới màu ngà chính |
| Sepia | `#512906` | `--color-sepia` | Màu nền action chính, nút CTA đã tô, accent text quan trọng. Nâu ấm đậm đọc như bìa da — cam kết màu sắc duy nhất của thương hiệu cho trọng lượng giao diện |
| Ink Violet | `#242d64` | `--color-ink-violet` | Bề mặt feature-panel, heading accent đậm, khối display lớn. Bản sao của ban đêm đối lập với màu ngà — được dùng full-bleed để phá vỡ nhịp điệu giấy |
| Forest Ink | `#0c3b1a` | `--color-forest-ink` | Accent text phụ, category tags, nét trang trí. Xanh đậm bão hòa được dùng như cách người dùng bút máy đổi mực |
| Oxblood | `#5e0831` | `--color-oxblood` | Accent thứ ba, pull-quote emphasis, highlight text hiếm. Màu mực dè dặt nhất — triển khai tối đa một hoặc hai lần mỗi trang |
| Margin Yellow | `#ffc934` | `--color-margin-yellow` | Lớp highlighter trang trí, accent background, màu tô illustration. Màu sống động duy nhất — được dùng như một khối phẳng phía sau một số illustration và không bao giờ trên chrome |

## Tokens — Typography

### IowanOld — Tất cả headlines, hero text, feature titles, và emphasis blocks. Serif mang giọng 'notebook' — tỷ lệ oldstyle, độ tương phản thấp, và serifs có dấu ngoặc đọc như bản in editorial, không phải product UI. Weight 400 ở 42–48px giúp chữ có cảm giác được đặt, không bị hét; weight 500 chỉ dành cho dòng display nhỏ nhất. IowanOld là brand face tùy chỉnh; thay thế bằng Source Serif Pro, Tiempos Text, hoặc PT Serif. · `--font-iowanold`
- **Thay thế:** Source Serif Pro
- **Weights:** 400, 500
- **Sizes:** 16px, 20px, 32px, 42px, 48px
- **Line height:** 1.08–1.50
- **Vai trò:** Tất cả headlines, hero text, feature titles, và emphasis blocks. Serif mang giọng 'notebook' — tỷ lệ oldstyle, độ tương phản thấp, và serifs có dấu ngoặc đọc như bản in editorial, không phải product UI. Weight 400 ở 42–48px giúp chữ có cảm giác được đặt, không bị hét; weight 500 chỉ dành cho dòng display nhỏ nhất. IowanOld là brand face tùy chỉnh; thay thế bằng Source Serif Pro, Tiempos Text, hoặc PT Serif.

### SuisseIntl — Tất cả body copy, navigation, button labels, footer text, utility chrome. Người bạn đồng hành neo-grotesque giữ im lặng để serif dẫn dắt. Line-height 1.00 dành riêng cho UI text nhỏ nhất bên trong compact controls; 1.50 cho đoạn văn body. SuisseIntl là brand face tùy chỉnh; thay thế bằng Inter, Söhne, hoặc Helvetica Neue. · `--font-suisseintl`
- **Thay thế:** Inter
- **Weights:** 400
- **Sizes:** 14px, 16px
- **Line height:** 1.00–1.50
- **Vai trò:** Tất cả body copy, navigation, button labels, footer text, utility chrome. Người bạn đồng hành neo-grotesque giữ im lặng để serif dẫn dắt. Line-height 1.00 dành riêng cho UI text nhỏ nhất bên trong compact controls; 1.50 cho đoạn văn body. SuisseIntl là brand face tùy chỉnh; thay thế bằng Inter, Söhne, hoặc Helvetica Neue.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 14px | 1.43 | — | `--text-caption` |
| body | 16px | 1.5 | — | `--text-body` |
| subheading | 20px | 1.5 | — | `--text-subheading` |
| heading-sm | 32px | 1.12 | — | `--text-heading-sm` |
| heading | 42px | 1.1 | — | `--text-heading` |
| display | 48px | 1.08 | — | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 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` |
| 56 | 56px | `--spacing-56` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 96 | 96px | `--spacing-96` |
| 120 | 120px | `--spacing-120` |
| 128 | 128px | `--spacing-128` |
| 160 | 160px | `--spacing-160` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 10px |
| cards | 10px |
| buttons | 10px |

### Layout

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

## Components

### Sepia Filled CTA
**Vai trò:** Primary action button

Nền #512906, text #fffdf8, SuisseIntl 14px weight 400, line-height 1.00, padding 8px 16px, radius 10px. Màu nâu ấm đậm trên giấy ngà là bề mặt tương tác đặc trưng của thương hiệu — nó đọc như một nhãn da trên bìa sách. Không viền, không shadow, không hover elevation — button chỉ đậm hơn một chút khi hover.

### Outlined Ghost Button
**Vai trò:** Secondary action, "Get started free" trong header

Nền trong suốt, viền 1px #d1d1d1, text #0a0a0a, SuisseIntl 14px, padding 8px 16px, radius 10px. Được dùng khi Sepia đã tô sẽ cạnh tranh với primary action. Trên panel Ink Violet tối, viền đảo ngược thành đường mảnh sáng và text chuyển thành màu ngà.

### Tab Navigation
**Vai trò:** Section-level tab switcher phía trên feature panels

Hàng ngang các tab chỉ có text bằng SuisseIntl 14px, màu #8c8c8c (inactive) / #0a0a0a (active), cách nhau bằng khoảng trống ~24px. Tab active là tab duy nhất không có xử lý hình ảnh — chỉ chuyển màu và có underline. Không nền, không pill, không viền.

### Ink Violet Feature Panel
**Vai trò:** Hero feature surface, phần tối duy nhất trong một trang

Bề mặt full-width #242d64, padding rộng rãi (40px+ mọi phía), với text #fffdf8. Headline là IowanOld 32–42px và body hỗ trợ SuisseIntl 16px màu #fffdf8. Một ghost button với viền mảnh sáng neo ở góc dưới bên trái. Panel này là khoảnh khắc reset của trang — đây là nơi duy nhất giao diện ngừng là giấy và bắt đầu là bìa sách.

### University Logo Strip
**Vai trò:** Social proof band bên dưới hero

Một hàng logo wordmark đơn sắc (Michigan, NUS, Yale, Waterloo, Caltech, Stanford, CMU, Princeton) đặt trong #0a0a0a trên #fffdf8, phân bố đều với khoảng trống ~40px. Không card, không nền, không caption — logo trôi nổi trực tiếp trên canvas. Chiều cao là cap-height tự nhiên của các marks; không ép chiều cao bằng nhau.

### Centered Hero Block
**Vai trò:** Above-the-fold headline + illustration + một CTA duy nhất

Một illustration nét vẽ tay nhỏ đặt centered phía trên headline IowanOld 42–48px (#0a0a0a) trên canvas #fffdf8. Headline gồm hai dòng, centered, với một CTA Sepia đã tô duy nhất ngay bên dưới. Khoảng trống dọc rộng rãi (80–120px phía trên và dưới) — hero là một nhịp duy nhất, không phải cột xếp chồng.

### Marginalia Illustration
**Vai trò:** Hình minh họa nét vẽ tay trang trí rải rác quanh feature sections

Illustrations nét đen vẽ tay (chuỗi xoắn DNA, chìa khóa, bình thí nghiệm, la bàn, sổ ghi chú, phác thảo phương trình) được render bằng #000000 hoặc #0a0a0a không tô, đặt lỏng lẻo trong khoảng trống âm xung quanh khối nội dung. Chúng nằm ở nhiều kích thước và góc xoay khác nhau, không neo vào đâu — vị trí mang tính editorial, không theo grid. Chúng không bao giờ chồng lên body copy.

### Feature Card (paper)
**Vai trò:** Card nhỏ gọn trên canvas màu ngà

Viền 1px #e5e5e5, radius 10px, nền #fffdf8, padding 24px. Không shadow. Chứa title IowanOld 20–32px và body SuisseIntl 16px. Có thể có icon nhỏ #0a0a0a ở phía trên.

### Section Heading
**Vai trò:** Serif title centered giới thiệu module mới

IowanOld 42–48px weight 400, màu #0a0a0a, centered, với line-height 1.08–1.10. Thường đi kèm với subhead một dòng SuisseIntl 16px #8c8c8c ngay bên dưới, khoảng cách 16–24px. Serif ở 48px là chữ lớn nhất xuất hiện trên site.

### Header Bar
**Vai trò:** Site-wide navigation

Nền trong suốt, viền dưới 1px #e5e5e5. Bên trái: wordmark + logomark nhỏ. Giữa: nav links bằng SuisseIntl 14px #0a0a0a với khoảng trống ~20px. Bên phải: outlined ghost button. Chiều cao khoảng 60–72px. Không sticky shadow, không background fill — viền là separator duy nhất.

### Cream Band Background
**Vai trò:** Canvas theo section cho tabbed feature areas

Nền chuyển từ #fffdf8 sang xanh lam nhạt mát hơn (#daeff8 được phát hiện trong surface stack) với các đường kẻ ngang mảnh #e5e5e5 cách nhau ~40px, gợi giấy kẻ dòng. Text và card nằm trên texture có kẻ này; các đường kẻ chạy full-bleed.

### Body Paragraph
**Vai trò:** Long-form copy mặc định

SuisseIntl 16px weight 400, line-height 1.50, màu #0a0a0a trên #fffdf8. Max-width khoảng 60ch để dễ đọc. Không first-line indent, không drop cap — giọng journal đến từ serif headlines xung quanh, không phải từ body styling.

## Do's and Don'ts

### Do
- Dùng #512906 Sepia làm nền button đã tô duy nhất — đây là cam kết màu sắc duy nhất của thương hiệu cho chrome.
- Đặt tất cả headlines bằng IowanOld (hoặc Source Serif Pro) weight 400; không bao giờ bold serif. Sự kiềm chế chính là giọng nói.
- Dành #242d64 Ink Violet cho một feature panel full-bleed mỗi trang — độ tương phản với #fffdf8 ngà là elevation duy nhất hệ thống cần.
- Tạo sự phân chia cấu trúc bằng viền 1px #e5e5e5 Graphite Rule. Không dùng shadow, gradient, hoặc background tints để chia section.
- Giữ tất cả radii ở 10px — buttons, cards, tags. Một radius duy nhất là một phần của cảm giác yên tĩnh, đóng gáy như sổ tay.
- Đặt hand-drawn line illustrations (#000000 stroke, không tô) lỏng lẻo trong khoảng trống âm; để chúng trôi nổi, không căn giữa trên grid.
- Ghép serif headline với subhead nhỏ SuisseIntl 16px #8c8c8c ngay bên dưới — sự kết hợp type là thương hiệu.

### Don't
- Không đưa vào xanh lam mát, xanh lá, hoặc đỏ làm accent "hiện đại" — bốn màu mực (Sepia, Ink Violet, Forest, Oxblood) là toàn bộ vốn từ vựng màu sắc.
- Không áp dụng drop shadows, glow effects, hoặc layered elevations cho cards hoặc buttons. Ẩn dụ giấy không có độ dày.
- Không bold serif headlines IowanOld. Chỉ dùng weight 500 cho dòng display nhỏ nhất nếu cần nhấn mạnh.
- Không tô canvas bằng #ffffff trắng tinh. Màu ngà #fffdf8 là điểm chính — mất đi tông ấm làm thiết kế trông như template SaaS chung chung.
- Không dùng sans-serif cho headlines, feature titles, hoặc bất kỳ text nào trên 24px. Sự phân chia serif/sans là bất khả thương lượng.
- Không áp dụng #ffc934 Margin Yellow cho buttons, badges, hoặc bất kỳ bề mặt tương tác nào — nó là lớp trang trí cho illustration backgrounds mà thôi.
- Không xếp chồng nhiều hơn một Sepia filled CTA trong một viewport. Nếu cần action thứ hai, dùng outlined ghost variant.

## Surfaces

| Level | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Ivory Page | `#fffdf8` | Canvas nền, trang giấy mà sản phẩm được in ẩn dụ lên. |
| 1 | Soft Halo | `#f9f9f9` | Phần lõm, sub-panels, khu vực dạng bảng nằm dưới trang một bậc. |
| 2 | Ink Violet Panel | `#242d64` | Hero feature surface, được dùng như một band full-bleed để giới thiệu module mới và reset mắt. |
| 3 | Sepia Action | `#512906` | Filled CTA — bề mặt tương tác màu sắc duy nhất, và là bề mặt duy nhất tối hơn than. |

## Elevation

Opennote không có hệ thống shadow. Elevation được thể hiện hoàn toàn qua bước nhảy tương phản màu sắc — canvas ngà (#fffdf8) đến feature panel Ink Violet (#242d64) — và qua viền mảnh 1px #e5e5e5. Cards không trôi nổi; chúng nằm trên trang như một tờ giấy đặt lên tờ giấy khác. Đây là lập trường chống shadow có chủ đích: ẩn dụ sổ tay không có độ dày, và đưa elevation vào sẽ phá vỡ giọng nói.

## Imagery

Imagery là hand-drawn line illustration theo phong cách hình vẽ nguệch ngoạc bên lề: chuỗi xoắn DNA, chìa khóa, bình thí nghiệm, la bàn, phác thảo sổ ghi chú, phương trình vật lý, hình dạng trừu tượng. Tất cả illustrations đều là nét đen trên nền không tô, đôi khi có một lớp phẳng #ffc934 vàng hoặc #242d64 tím phía sau một element. Chúng trôi nổi trong khoảng trống âm ở nhiều tỷ lệ và góc xoay nhẹ — vị trí editorial, không snap vào grid. Không có photography, không có product screenshots trong hero, không có 3D renders. Thương hiệu dùng một illustration nhỏ duy nhất mỗi hero (một người cưỡi tên lửa hình ván lướt sóng), sau đó rải các marginalia illustrations nhỏ hơn quanh feature sections. Mật độ thấp: illustrations là dấu câu, không phải nội dung.

## Layout

Centered, max-width ~1200px, khoảng trống dọc rộng rãi. Hero là stack một cột: illustration nhỏ, serif headline hai dòng, một CTA duy nhất, không gì khác. Sections được phân cách bằng whitespace (64–96px) hoặc một band full-bleed duy nhất — một section giấy kẻ kem/xanh hoặc Ink Violet feature panel — reset mắt. Bên dưới hero, một logo strip ngang duy nhất làm social proof duy nhất. Feature sections xen kẽ giữa bố cục ba cột centered và tabbed full-bleed Ink Violet panel. Nội dung luôn centered; không có bố cục bất đối xứng hoặc z-pattern. Navigation là top bar mỏng với nền trong suốt, viền dưới 1px, wordmark trái, nav giữa, ghost button phải. Trang đọc từ trên xuống dưới như một loạt các spread yên tĩnh, không phải dashboard.

## Agent Prompt Guide

## Quick Color Reference
- canvas: #fffdf8 (ivory)
- text: #0a0a0a (ink charcoal)
- border: #e5e5e5 (graphite rule)
- accent: #ffc934 (margin yellow, chỉ trang trí)
- feature panel: #242d64 (ink violet)
- primary action: #512906 (filled action)

## 3 Example Component Prompts

1. Tạo Primary Action Button: nền #512906, text #8c8c8c, radius 9999px, padding pill nhỏ gọn. Dùng xử lý đã tô này cho CTA chính.

2. **Ink violet feature panel** — Bề mặt full-bleed #242d64, padding 64px trên và dưới, max-width 1200px centered. Title IowanOld 32px weight 400 màu #fffdf8, tiếp theo là body SuisseIntl 16px màu #fffdf8 với line-height 1.50. Outlined ghost button ở góc dưới bên trái: viền 1px #d1d1d1, nền trong suốt, text #fffdf8, radius 10px, padding 8px 16px.

3. **Feature card (paper)** — Viền 1px #e5e5e5, radius 10px, nền #fffdf8, padding 24px. Icon đơn sắc nhỏ #0a0a0a ở phía trên (16–20px). Title IowanOld 20px weight 400 màu #0a0a0a, khoảng cách 16px, body SuisseIntl 16px màu #474747 line-height 1.50. Không shadow, không hover state ngoài việc viền 1px đậm lên #0a0a0a.

## Type Pairing Rule

IowanOld serif và SuisseIntl sans không thể thay thế cho nhau — chúng là một cặp khóa. IowanOld dành cho headlines, feature titles, và bất kỳ display text nào trên 24px. SuisseIntl dành cho mọi thứ khác: body, nav, buttons, footer, captions, form labels. Không bao giờ đặt body copy bằng serif, và không bao giờ đặt headlines bằng sans. Sự căng thẳng serif/sans là thứ đọc như 'notebook trên bàn sạch' chứ không phải 'product trên dashboard'.

## Similar Brands

- **Notion** — Cùng bảng màu sắc dè dặt, ghép type serif/sans cho hơi ấm editorial, và một bề mặt accent tối duy nhất (near-black của Notion) phá vỡ một trang sáng khác.
- **Are.na** — Cả hai đều xử lý canvas như một tờ giấy — whitespace rộng rãi, illustration vẽ tay hoặc editorial accent, và một cam kết màu sắc duy nhất có cảm giác như màu mực được chọn chứ không phải suy nghĩ sau brand-guideline.
- **Substack** — Cùng cảm giác editorial-print với serif headlines trên nền trắng ngà ấm, chrome tối giản, và tập trung vào ẩn dụ trang-như-xuất-bản thay vì ẩn dụ dashboard.
- **Read.cv** — Cả hai đều dùng ngôn ngữ hình ảnh notebook/sổ tay cá nhân: hand-drawn line illustrations, màu sắc thưa thớt, nền kem ấm, và serif headlines báo hiệu sự thủ công hơn quy mô.
- **Cron (Notion Calendar)** — Cùng canvas kem ấm, hairline gray rules, một accent bão hòa duy nhất dành riêng cho các tương tác đặc biệt nhất của thương hiệu, và sự tự tin serif-in-headlines.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-ivory-page: #fffdf8;
  --color-ink-charcoal: #0a0a0a;
  --color-pressed-black: #000000;
  --color-graphite-rule: #e5e5e5;
  --color-smoke: #8c8c8c;
  --color-ash-border: #d1d1d1;
  --color-slate-body: #474747;
  --color-soft-halo: #f9f9f9;
  --color-sepia: #512906;
  --color-ink-violet: #242d64;
  --color-forest-ink: #0c3b1a;
  --color-oxblood: #5e0831;
  --color-margin-yellow: #ffc934;

  /* Typography — Font Families */
  --font-iowanold: 'IowanOld', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-suisseintl: 'SuisseIntl', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.43;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-subheading: 20px;
  --leading-subheading: 1.5;
  --text-heading-sm: 32px;
  --leading-heading-sm: 1.12;
  --text-heading: 42px;
  --leading-heading: 1.1;
  --text-display: 48px;
  --leading-display: 1.08;

  /* 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-56: 56px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-120: 120px;
  --spacing-128: 128px;
  --spacing-160: 160px;

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

  /* Border Radius */
  --radius-lg: 10px;

  /* Named Radii */
  --radius-tags: 10px;
  --radius-cards: 10px;
  --radius-buttons: 10px;

  /* Surfaces */
  --surface-ivory-page: #fffdf8;
  --surface-soft-halo: #f9f9f9;
  --surface-ink-violet-panel: #242d64;
  --surface-sepia-action: #512906;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-ivory-page: #fffdf8;
  --color-ink-charcoal: #0a0a0a;
  --color-pressed-black: #000000;
  --color-graphite-rule: #e5e5e5;
  --color-smoke: #8c8c8c;
  --color-ash-border: #d1d1d1;
  --color-slate-body: #474747;
  --color-soft-halo: #f9f9f9;
  --color-sepia: #512906;
  --color-ink-violet: #242d64;
  --color-forest-ink: #0c3b1a;
  --color-oxblood: #5e0831;
  --color-margin-yellow: #ffc934;

  /* Typography */
  --font-iowanold: 'IowanOld', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-suisseintl: 'SuisseIntl', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.43;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-subheading: 20px;
  --leading-subheading: 1.5;
  --text-heading-sm: 32px;
  --leading-heading-sm: 1.12;
  --text-heading: 42px;
  --leading-heading: 1.1;
  --text-display: 48px;
  --leading-display: 1.08;

  /* 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-80: 80px;
  --spacing-96: 96px;
  --spacing-120: 120px;
  --spacing-128: 128px;
  --spacing-160: 160px;

  /* Border Radius */
  --radius-lg: 10px;
}
```