# Schema

> Schema — Style Reference

## Prompt Content

```
# Schema — Style Reference
> Sân khấu keynote đen mực với những bức tranh tường rực rỡ như confetti

**Theme:** mixed

Schema by Figma vận hành trên nền kiến trúc đơn sắc mạnh mẽ, bị xuyên thủng bởi các bức tranh tường hình học phẳng màu đậm. UI sử dụng đen tuyền, gần đen và trắng với viền xám mảnh — không có đổ bóng, bán kính tối thiểu, không có điểm nhấn màu trong chính giao diện. Màu sắc chỉ xuất hiện dưới dạng nghệ thuật trang trí (hình tròn, lục giác, hình chữ nhật với màu tím, xanh ngọc, đỏ rượu vang, xanh lá, cam) và làm nền cho ảnh chân dung diễn giả. Typography là yếu tố nổi bật nhất: custom display face của Figma ở kích thước 56–86px với tracking âm cực mạnh (-0.02em) và line-height chặt 0.90 khiến headline có cảm giác như được khắc chứ không phải sắp chữ. Phần hero đảo ngược quy ước với nền đen và nút Register viền ngoài cỡ lớn; các section nội dung sau đó xen kẽ qua các dải màu full-bleed trước khi kết thúc bằng grid diễn giả trắng sạch.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Obsidian | `#000000` | `--color-obsidian` | Nền hero, viền cấu trúc dày, nét vẽ icon — tạo không khí sân khấu keynote tương phản cao cho phần mở đầu |
| Ink | `#0f0f0f` | `--color-ink` | Văn bản body và heading trên nền sáng, viền section tối |
| Paper | `#ffffff` | `--color-paper` | Nền trang, bề mặt card diễn giả, văn bản section sáng trên hero tối |
| Ash | `#e2e2e2` | `--color-ash` | Viền mảnh, icon fill nhẹ, đường phân cách cấu trúc giữa các vùng UI |
| Mint Wash | `#c7f8fb` | `--color-mint-wash` | Nền highlight xanh ngọc, dải trang trí, điểm nhấn mềm phía sau nội dung. Không nâng lên thành màu CTA chính |
| Emerald Band | `#24cb71` | `--color-emerald-band` | Nền section accent full-bleed — một dải ngang xanh lá tươi kết thúc bố cục hero |

## Tokens — Typography

### Source Sans Pro — Source Sans Pro — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-source-sans-pro`
- **Weights:** 400
- **Sizes:** 16px
- **Line height:** 1.2
- **Vai trò:** Source Sans Pro — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả

### Figma Sans Display — Headline và display copy — được dùng ở 56–86px cho hero ('Schema by Figma', 'Meet our speakers!') với leading chặt (0.90–1.10) và tracking -0.02em khiến chữ có cảm giác như được khắc từ một khối. Weight 400 là chủ đạo; 700 dành cho nhấn mạnh. · `--font-figma-sans-display`
- **Thay thế:** Inter Tight hoặc variable sans custom như General Sans
- **Weights:** 400, 700
- **Sizes:** 16, 24, 32, 56, 72, 86
- **Line height:** 0.90–1.40
- **Letter spacing:** -0.02em ở 72–86px, -0.01em ở 24–32px, 0.03em cho một số ngữ cảnh 16px
- **Vai trò:** Headline và display copy — được dùng ở 56–86px cho hero ('Schema by Figma', 'Meet our speakers!') với leading chặt (0.90–1.10) và tracking -0.02em khiến chữ có cảm giác như được khắc từ một khối. Weight 400 là chủ đạo; 700 dành cho nhấn mạnh.

### Figma Sans Text — Body, nav, nhãn nút, văn bản hỗ trợ. Mặt chữ văn bản đồng hành ở kích thước khiêm tốn (13–18px) với weight 400 làm mặc định và 600 cho nút/nhãn. -0.02em ở 13px giúp chữ nhỏ không bị lỏng lẻo; 0.03em ở 18px tạo độ thoáng cho nhãn. · `--font-figma-sans-text`
- **Thay thế:** Inter hoặc Söhne
- **Weights:** 400, 600
- **Sizes:** 13, 16, 18
- **Line height:** 1.20–1.22
- **Letter spacing:** -0.02em ở 13px, 0.03em ở 18px
- **Vai trò:** Body, nav, nhãn nút, văn bản hỗ trợ. Mặt chữ văn bản đồng hành ở kích thước khiêm tốn (13–18px) với weight 400 làm mặc định và 600 cho nút/nhãn. -0.02em ở 13px giúp chữ nhỏ không bị lỏng lẻo; 0.03em ở 18px tạo độ thoáng cho nhãn.

### Figma Mono — Code hoặc đoạn metadata — được dùng tiết chế ở 16px với tracking 0.03em để tạo điểm nhấn monospaced mang tính kiến trúc giữa thế giới chữ proportional · `--font-figma-mono`
- **Thay thế:** JetBrains Mono hoặc IBM Plex Mono
- **Weights:** 400
- **Sizes:** 16
- **Line height:** 1.30–1.40
- **Letter spacing:** 0.03em
- **Vai trò:** Code hoặc đoạn metadata — được dùng tiết chế ở 16px với tracking 0.03em để tạo điểm nhấn monospaced mang tính kiến trúc giữa thế giới chữ proportional

### Figma VF-normal-700-75 — Figma VF-normal-700-75 — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-figma-vf-normal-700-75`
- **Weights:** 400
- **Sizes:** 24px
- **Line height:** 1.2
- **Vai trò:** Figma VF-normal-700-75 — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả

### Figma VF-normal-400-100 — Figma VF-normal-400-100 — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-figma-vf-normal-400-100`
- **Weights:** 400
- **Sizes:** 16px
- **Line height:** 1.2
- **Letter spacing:** 0.03
- **Vai trò:** Figma VF-normal-400-100 — đượ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 | 13px | 1.2 | -0.26px | `--text-caption` |
| body | 16px | 1.2 | — | `--text-body` |
| body-md | 18px | 1.22 | 0.54px | `--text-body-md` |
| subheading | 24px | 1.2 | -0.24px | `--text-subheading` |
| heading-sm | 32px | 1.1 | -0.32px | `--text-heading-sm` |
| heading | 56px | 1 | -1.12px | `--text-heading` |
| heading-lg | 72px | 0.9 | -1.44px | `--text-heading-lg` |
| display | 86px | 0.9 | -1.72px | `--text-display` |

## Tokens — Spacing & Shapes

**Đơn vị cơ bản:** 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` |
| 48 | 48px | `--spacing-48` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 120 | 120px | `--spacing-120` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 0px |
| cards | 0px |
| buttons | 0px |
| speaker-images | 0px |

### Layout

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

## Components

### Top Navigation Bar
**Vai trò:** Header cố định trên tất cả các section

Trong suốt trên hero đen, Paper trên các section sáng. Bên trái: logo monogram nhỏ (32px vuông, fill Obsidian hoặc Paper). Bên phải: 2–4 text link (FAQ, Agenda) ở 16px Figma Sans Text weight 400, tracking 0.03em. Padding ngang 16px, dọc 20px. Không có background fill, không viền.

### Hero Outlined Register Button
**Vai trò:** Hành động chính trên hero tối

Full-width trên hero, cao 56–64px. Viền Paper 1px, không fill, chữ Paper. Radius 0px. Chữ ở 18–24px Figma Sans Text weight 400, căn giữa. Khi hover, fill thành Paper với chữ Obsidian.

### Eyebrow Label
**Vai trò:** Tiêu đề phụ của section (VIRTUAL, SPEAKERS, REGISTER)

12–13px Figma Sans Text weight 400 hoặc 600, in hoa qua CSS, tracking 0.03em. Màu Ink trên section sáng, Paper trên section tối. Cách headline 16–24px phía trên.

### Display Headline
**Vai trò:** Tiêu đề hero của section ('Schema by Figma', 'Meet our speakers!', 'Join us virtually!')

Figma Sans Display weight 400, 56–86px, line-height 0.90–1.00, letter-spacing -0.02em. Màu Ink trên section sáng, Paper trên hero tối. Không giới hạn max-width — lấp đầy cột có sẵn.

### Geometric Mural Banner
**Vai trò:** Dải phân cách section full-bleed trang trí giữa hero và nội dung

Full viewport width, cao ~200–300px. Nghệ thuật 2D phẳng: hình tròn, chữ nhật, lục giác, chevron với bảng màu bão hòa (indigo #4a4afc, lavender #b8b3ff, teal #c7f8fb, maroon #7a2e2, orange #ff6b2c, emerald #24cb71, yellow #ffe74a). Không gradient, không đổ bóng. Cạnh cứng/đường thẳng nơi khối chạm vào canvas.

### Speaker Portrait Card
**Vai trò:** Diễn giả trong grid

Ảnh chân dung vuông, radius 0px, lấp đầy grid 4 cột. Mỗi ảnh chân dung nằm trên nền màu đặc (mint, emerald, indigo, lavender, orange, yellow). Bên dưới: tên ở Figma Sans Text weight 600 tại 18px, chức danh/vai trò ở Figma Sans Text weight 400 tại 16px — cả hai đều màu Ink. Khoảng cách 24px giữa ảnh và chữ, 48px giữa các card theo chiều dọc.

### Event Status Notice
**Vai trò:** Banner trạng thái nội tuyến ('Event ended')

Khối căn giữa hoặc căn phải. Icon cảnh báo hình tam giác nhỏ (~24px, fill Ink) phía trên nhãn. Nhãn ở Figma Sans Text weight 600 tại 18–24px, subtext ở 16px weight 400. Nằm trên dải Mint Wash xanh ngọc.

### Full-Bleed Color Section
**Vai trò:** Dải nội dung ngang với nền màu

Edge-to-edge, cao ~200–400px, chữ Paper hoặc Ink tùy theo độ tương phản. Padding trong 60px trên/dưới, 24–48px trái/phải. Không viền, không radius, không đổ bóng.

### Date/Time Metadata Block
**Vai trò:** Ngày và giờ sự kiện dưới headline hero

Hai dòng: ngày in đậm (16–18px Figma Sans Text weight 600) phía trên khoảng thời gian (16–18px weight 400). Kế thừa màu chữ từ section (Paper trên hero tối). Khoảng cách 8–16px giữa các dòng.

### Grid Section Header
**Vai trò:** Khối tiêu đề section phía trên grid card (ví dụ: "Meet our speakers!")

Eyebrow label + display headline, căn trái. Khoảng cách 24px giữa label và headline. Cách grid 48–60px phía trên.

## Do's and Don'ts

### Nên làm
- Dùng 0px border-radius trên tất cả card, nút, ảnh và tag — góc sắc là điều bắt buộc
- Kết hợp hero tối với nút outlined lớn (viền Paper 1px, không fill); fill nó khi hover
- Áp dụng Figma Sans Display ở 56–86px với tracking -0.02em và line-height 0.90–1.00 cho bất kỳ headline nào cần cảm giác được khắc
- Đạt tracking 0.03em trên các label nhỏ (13–18px) để tạo độ thoáng cho eyebrow in hoa và nav link
- Xen kẽ các dải màu full-bleed (Mint Wash #c7f8fb, Emerald Band #24cb71) giữa các section tối và sáng để tạo nhịp điệu thị giác
- Sử dụng viền Ash (#e2e2e2) 1px để phân cách mảnh; dành viền Ink (#0f0f0f) để nhấn mạnh trên section sáng
- Giữ UI đơn sắc — chỉ để màu xuất hiện trong tranh tường trang trí và nền ảnh diễn giả, không bao giờ trong controls

### Không nên làm
- Không thêm border-radius vào bất kỳ element nào — góc sắc định nghĩa tính cách poster của hệ thống
- Không sử dụng đổ bóng, phát sáng hoặc hiệu ứng mờ — flat là ngôn ngữ elevation duy nhất ở đây
- Không đưa vào màu CTA có sắc — hệ thống cố tình đơn sắc, hành động là outlined hoặc text-only
- Không đặt body text dưới 16px; caption có thể xuống 13px nhưng không nhỏ hơn
- Không để display headline vượt quá line-height 0.90–1.00 — leading chặt là điều khiến chúng mang cảm giác kiến trúc
- Không color-fill nút với màu thương hiệu; outlined Paper-on-Obsidian là pattern nút duy nhất trong hệ thống
- Không ngăn cách các section sáng bằng dải xám — chỉ dùng full-bleed color hoặc luồng Paper-to-Paper liền mạch

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Dark Hero Canvas | `#000000` | Phần mở đầu, thiết lập tông editorial, chứa Register CTA và tranh tường trang trí |
| 1 | Colored Band | `#c7f8fb` | Dải xanh ngọc ngăn cách hero với nội dung |
| 1 | Colored Band | `#24cb71` | Dải section xanh lá |
| 2 | Paper | `#ffffff` | Canvas nội dung chính cho grid diễn giả và section văn bản |

## Elevation

Thiết kế phẳng không đổ bóng — sự phân tách đạt được qua cạnh cứng, khối màu và viền mảnh 1px màu Ash (#e2e2e2) hoặc Ink. Việc không có đổ bóng là một lựa chọn editorial có chủ đích: mọi element được in phẳng lên trang như một tấm poster, không bao giờ nổi lên trên nó.

## Imagery

Trang web sử dụng hình minh họa hình học phẳng màu đậm làm dải phân cách hero: hình tròn, chữ nhật, lục giác, chevron và chấm tròn với bảng màu bão hòa (indigo, lavender, teal, maroon, orange, emerald, yellow) với cạnh cứng đường thẳng và không có gradient hay đổ bóng. Ảnh chân dung diễn giả là ảnh đen trắng hoặc giảm bão hòa, mỗi ảnh đặt trên nền màu đặc (mint, emerald, indigo, lavender, orange, yellow) để tạo hiệu ứng poster-grid. Icon tối giản và đơn sắc — một glyph cảnh báo hình tam giác duy nhất là yếu tố iconographic hiển thị. Tổng thể xử lý mang phong cách editorial-poster: không ảnh mềm, không ảnh lối sống, không chiều sâu — mọi thứ hoặc là màu phẳng, chữ phẳng, hoặc ảnh phẳng trên nền màu phẳng.

## Layout

Trang tuân theo mô hình dải từ trên xuống dưới. Mở đầu bằng hero đen full-bleed (khối nội dung căn giữa hoặc căn trái, Register CTA outlined full-width) chảy vào một banner tranh tường hình học cao ~250px trải rộng viewport. Bên dưới tranh tường, một dải xanh ngọc nhạt (Mint Wash) chứa CTA phụ 'Join us virtually!' và thông báo trạng thái sự kiện, tiếp theo là một dải xanh lá tươi (Emerald Band). Trang sau đó kết thúc bằng vùng nội dung trắng max-width 1200px với khoảng cách section dọc 60px, mở đầu bằng section header căn trái (eyebrow + display headline) phía trên grid 4 cột card diễn giả. Navigation là một top bar tối giản — logo trái, 2 text link phải, trong suốt trên hero tối và Paper trên section sáng. Không có sidebar, không có sticky header ngoài nav, và không có modal overlay.

## Agent Prompt Guide

**Tham chiếu màu nhanh**
- text trên nền sáng: #0f0f0f (Ink)
- text trên hero tối: #ffffff (Paper)
- nền trang: #ffffff (Paper)
- nền hero: #000000 (Obsidian)
- viền mảnh: #e2e2e2 (Ash)
- dải section accent 1: #c7f8fb (Mint Wash)
- dải section accent 2: #24cb71 (Emerald Band)
- hành động chính: không có màu CTA riêng biệt

**Ví dụ Component Prompts**

1. **Hero tối với nút Register outlined**: Nền Obsidian (#000000) full-bleed, nội dung căn trái với padding ngang 60px. Eyebrow 'VIRTUAL' ở 13px Figma Sans Text weight 400, in hoa, tracking 0.03em, màu Paper. Headline 'Schema by Figma' ở 72px Figma Sans Display weight 400, line-height 0.90, letter-spacing -1.44px, Paper. Khối ngày/giờ ở 18px Figma Sans Text, Paper, khoảng cách 16px giữa các dòng. Nút Register: full-width trong cột nội dung, cao 64px, viền Paper 1px, radius 0px, không fill, 'Register' ở 24px Figma Sans Text weight 400 căn giữa, chữ Paper.

2. **Card diễn giả trong grid 4 cột**: Ảnh chân dung radius 0px, tỷ lệ 1:1, đặt trên nền lavender (#b8b3ff) đặc. Khoảng cách 24px bên dưới ảnh, sau đó tên 'Loredana Crisan' ở 18px Figma Sans Text weight 600 màu Ink, chức danh 'Chief Design Officer / Figma' ở 16px weight 400 màu Ink với khoảng cách dòng 4px. Các card cách nhau 48px dọc và 24px ngang; grid nằm trong container max-width 1200px với padding section 60px phía trên.

3. **Dải phân cách tranh tường hình học**: Full-bleed, cao 250px, không padding. Xếp các hình phẳng: hình tròn indigo (#4a4afc) 200px dưới-trái, hình chữ nhật lavender (#b8b3ff) 120px trên-giữa, hình lục giác maroon (#7a2e2e) 80px phải-giữa trên hình vuông mint (#c7f8fb) 120px, hình tròn orange (#ff6b2c) 60px xa bên phải, hình chữ nhật emerald (#24cb71) 180px dưới-phải. Không gradient, không đổ bóng, không border-radius.

4. **Section header sáng**: Nền Paper. Eyebrow 'SPEAKERS' ở 13px Figma Sans Text weight 600, in hoa, tracking 0.03em, màu Ink. Khoảng cách 16px đến headline 'Meet our speakers!' ở 56px Figma Sans Display weight 400, line-height 1.00, letter-spacing -1.12px, Ink. Khoảng cách 60px bên dưới đến grid.

5. **Thông báo trạng thái sự kiện trên dải màu**: Section full-bleed Mint Wash (#c7f8fb), padding dọc 60px, khối nội dung căn phải. Icon cảnh báo hình tam giác Ink 24px, khoảng cách 16px, nhãn 'Event ended' ở 18px Figma Sans Text weight 600 Ink, subtext 'This event has already ended.' ở 16px weight 400 Ink.

## Similar Brands

- **Config (Figma's annual conference)** — Cùng typography Figma Sans Display ở tỷ lệ hero, cùng phong cách nghệ thuật poster-mural, cùng UI đơn sắc với dải màu full-bleed
- **Apple Event pages** — Hero đen với CTA outlined lớn, display type editorial ở tỷ lệ cực đại, chuyển tiếp dải màu full-bleed giữa các section
- **Figma Config 2022–2024 microsites** — Hệ thống minh họa hình học phẳng màu đặc giống hệt và cặp Figma Sans, với ảnh chân dung diễn giả trên nền màu đặc
- **Are.na event pages** — Layout editorial-poster, góc 0px sắc, UI đơn sắc được điểm xuyết bằng dải section màu đậm phẳng
- **It's Nice That conference coverage** — Thẩm mỹ design-zine với headline display cỡ lớn, tracking chặt và khối màu trang trí full-bleed

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-obsidian: #000000;
  --color-ink: #0f0f0f;
  --color-paper: #ffffff;
  --color-ash: #e2e2e2;
  --color-mint-wash: #c7f8fb;
  --color-emerald-band: #24cb71;

  /* Typography — Font Families */
  --font-source-sans-pro: 'Source Sans Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-figma-sans-display: 'Figma Sans Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-figma-sans-text: 'Figma Sans Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-figma-mono: 'Figma Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-figma-vf-normal-700-75: 'Figma VF-normal-700-75', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-figma-vf-normal-400-100: 'Figma VF-normal-400-100', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.2;
  --tracking-caption: -0.26px;
  --text-body: 16px;
  --leading-body: 1.2;
  --text-body-md: 18px;
  --leading-body-md: 1.22;
  --tracking-body-md: 0.54px;
  --text-subheading: 24px;
  --leading-subheading: 1.2;
  --tracking-subheading: -0.24px;
  --text-heading-sm: 32px;
  --leading-heading-sm: 1.1;
  --tracking-heading-sm: -0.32px;
  --text-heading: 56px;
  --leading-heading: 1;
  --tracking-heading: -1.12px;
  --text-heading-lg: 72px;
  --leading-heading-lg: 0.9;
  --tracking-heading-lg: -1.44px;
  --text-display: 86px;
  --leading-display: 0.9;
  --tracking-display: -1.72px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

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

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

  /* Border Radius */
  --radius-2xl: 20px;

  /* Named Radii */
  --radius-tags: 0px;
  --radius-cards: 0px;
  --radius-buttons: 0px;
  --radius-speaker-images: 0px;

  /* Surfaces */
  --surface-dark-hero-canvas: #000000;
  --surface-colored-band: #c7f8fb;
  --surface-colored-band: #24cb71;
  --surface-paper: #ffffff;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-obsidian: #000000;
  --color-ink: #0f0f0f;
  --color-paper: #ffffff;
  --color-ash: #e2e2e2;
  --color-mint-wash: #c7f8fb;
  --color-emerald-band: #24cb71;

  /* Typography */
  --font-source-sans-pro: 'Source Sans Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-figma-sans-display: 'Figma Sans Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-figma-sans-text: 'Figma Sans Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-figma-mono: 'Figma Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-figma-vf-normal-700-75: 'Figma VF-normal-700-75', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-figma-vf-normal-400-100: 'Figma VF-normal-400-100', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.2;
  --tracking-caption: -0.26px;
  --text-body: 16px;
  --leading-body: 1.2;
  --text-body-md: 18px;
  --leading-body-md: 1.22;
  --tracking-body-md: 0.54px;
  --text-subheading: 24px;
  --leading-subheading: 1.2;
  --tracking-subheading: -0.24px;
  --text-heading-sm: 32px;
  --leading-heading-sm: 1.1;
  --tracking-heading-sm: -0.32px;
  --text-heading: 56px;
  --leading-heading: 1;
  --tracking-heading: -1.12px;
  --text-heading-lg: 72px;
  --leading-heading-lg: 0.9;
  --tracking-heading-lg: -1.44px;
  --text-display: 86px;
  --leading-display: 0.9;
  --tracking-display: -1.72px;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-120: 120px;

  /* Border Radius */
  --radius-2xl: 20px;
}
```