# Framer

> # Framer — Style Reference

**Framer** — Style Reference

## Prompt Content

```
# Framer — Style Reference
> Phòng trưng bày nửa đêm với chữ monumental — một sảnh triển lãm tối nơi những headline 100px treo trên tường đen như tác phẩm nghệ thuật được chiếu sáng.

**Theme:** dark

Framer là một phòng trưng bày đen tuyền nơi chữ sans-serif khổng lồ trôi nổi trên khoảng không, và một màu xanh điện duy nhất làm tất cả công việc tạo điểm nhấn. Giao diện về cơ bản là kiến trúc typographic: headline display khổng lồ (85–110px) với tracking âm mạnh neo giữ từng section, trong khi một grid các project tile duy nhất ở mid-scroll thực hiện công việc thị giác mà gradient hoặc illustration thường làm ở nơi khác. Các component được thiết kế một cách có chủ ý yên tĩnh — pill-shaped buttons, hairline borders, shadow gần như vô hình — để typography và showcase imagery mang năng lượng. Mật độ compact (10px gutters), các bề mặt là những sắc thái gần đen khó phân biệt, và điểm nhấn màu sắc duy nhất là #0099ff cho link và emphasis, tạo ra bầu không khí designer-tool giống một portfolio site hơn là một SaaS landing page.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Void | `#000000` | `--color-void` | Nền trang, hero canvas, bề mặt sâu nhất — mặc định ở mọi nơi; không gì nằm trên nó, mọi thứ trôi nổi bên trong nó |
| Obsidian | `#080808` | `--color-obsidian` | Bề mặt phụ cho card và panel trực tiếp trên canvas — sáng hơn Void một cách khó nhận thấy, nên độ cao được cảm nhận hơn là nhìn thấy |
| Graphite | `#171717` | `--color-graphite` | Bề mặt card nâng cao, modal backgrounds, project tile frames — lớp card khác biệt rõ ràng nhất phía trên canvas |
| Carbon | `#222222` | `--color-carbon` | Panel có độ cao cao hơn, inset wells, code blocks — một bước lên từ Graphite cho nội dung cần cảm giác được bao bọc |
| Iron | `#2b2b2b` | `--color-iron` | Bề mặt cao nhất cho floating elements, sticky bars, hoặc hover-states trên dark cards |
| Snow | `#ffffff` | `--color-snow` | Bề mặt hỗ trợ sáng cho nền tinh tế và phân cách section. Không nâng nó lên thành màu CTA chính |
| Ash | `#999999` | `--color-ash` | Body text, secondary descriptions, subdued copy — gray làm việc cho mọi thứ không phải heading |
| Smoke | `#a6a6a6` | `--color-smoke` | Secondary text sáng hơn, metadata, timestamps — sáng hơn Ash một chút để tạo hierarchy trong muted copy |
| Pearl | `#cccccc` | `--color-pearl` | Muted text có độ nhấn cao, caption trên bề mặt sáng, disabled labels vẫn cần đọc được |
| Slate | `#666666` | `--color-slate` | Text giảm nhấn, tertiary metadata, placeholder content, icon strokes trên bề mặt tối |
| Steel | `#8c8c8c` | `--color-steel` | Text và border mid-muted, divider lines trên nền tối nơi #333333 sẽ vô hình |
| Electric Signal | `#0099ff` | `--color-electric-signal` | Accent xanh hỗ trợ cho chi tiết trang trí và emphasis tần suất thấp. |

## Tokens — Typography

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

### GT Walsheim Framer Medium — Hero display headline — chỉ dùng cho câu tuyên bố lớn nhất trên trang; line-height 0.85 và tracking -0.05em khiến các chữ gần như chạm nhau, tạo ra headline điêu khắc dạng khối thống trị viewport · `--font-gt-walsheim-framer-medium`
- **Thay thế:** Inter Tight 600 hoặc Mona Sans 700 với metrics tương ứng
- **Weights:** 500
- **Sizes:** 110px
- **Line height:** 0.85
- **Letter spacing:** -0.05em
- **OpenType features:** `"ss02"`
- **Vai trò:** Hero display headline — chỉ dùng cho câu tuyên bố lớn nhất trên trang; line-height 0.85 và tracking -0.05em khiến các chữ gần như chạm nhau, tạo ra headline điêu khắc dạng khối thống trị viewport

### GT Walsheim Medium — Section display và large headings — medium weight (không bold) giữ cho chữ cảm giác kiến trúc thay vì hung hăng; tracking -0.05em tương tự mang giọng display vào section openers 85px và 62px · `--font-gt-walsheim-medium`
- **Thay thế:** Mona Sans 600 hoặc General Sans 600
- **Weights:** 500
- **Sizes:** 32px, 62px, 85px
- **Line height:** 0.95–1.13
- **Letter spacing:** -0.05em đến -0.031em
- **OpenType features:** `"ss02", "ss02", "tnum"`
- **Vai trò:** Section display và large headings — medium weight (không bold) giữ cho chữ cảm giác kiến trúc thay vì hung hăng; tracking -0.05em tương tự mang giọng display vào section openers 85px và 62px

### Mona Sans — Secondary headlines, subtitles, và mid-weight UI text — cầu nối giữa display hoành tráng và body compact; sử dụng 62px tạo sự đa dạng trong section headers · `--font-mona-sans`
- **Thay thế:** Inter 500 hoặc Geist 500
- **Weights:** 500
- **Sizes:** 12px, 13px, 17px, 18px, 62px
- **Line height:** 1.0–2.28
- **Letter spacing:** -0.05em đến -0.046em
- **Vai trò:** Secondary headlines, subtitles, và mid-weight UI text — cầu nối giữa display hoành tráng và body compact; sử dụng 62px tạo sự đa dạng trong section headers

### Inter Variable — Body copy và feature descriptions — extensive character variant features (cv01–cv11) và stylistic sets (ss02, ss03, ss07) tinh chỉnh letterforms cho tính cách hình học, hơi vuông vức của thương hiệu · `--font-inter-variable`
- **Thay thế:** Inter (Google)
- **Weights:** 400
- **Sizes:** 8px, 12px, 13px, 14px, 15px, 18px, 24px
- **Line height:** 0.80–1.40
- **Letter spacing:** -0.02em đến 0.03em
- **OpenType features:** `"cv06", "cv11", "dlig", "ss03"`
- **Vai trò:** Body copy và feature descriptions — extensive character variant features (cv01–cv11) và stylistic sets (ss02, ss03, ss07) tinh chỉnh letterforms cho tính cách hình học, hơi vuông vức của thương hiệu

### Inter — UI chrome — nav items, button labels, tag text, form fields, meta labels; tabular numerals (tnum) được bật để đảm bảo tính nhất quán dữ liệu số · `--font-inter`
- **Thay thế:** system-ui
- **Weights:** 400, 500, 600, 700
- **Sizes:** 10px, 12px, 13px, 14px, 15px, 16px, 20px, 22px
- **Line height:** 0.83–1.60
- **Letter spacing:** -0.053em đến 0.02em
- **OpenType features:** `"cv01", "tnum"`
- **Vai trò:** UI chrome — nav items, button labels, tag text, form fields, meta labels; tabular numerals (tnum) được bật để đảm bảo tính nhất quán dữ liệu số

### Open Runde — Micro labels, eyebrow text, small caps-style category tags — weight 600 duy nhất trong hệ thống, dùng ở 9px để tạo section markers viết hoa toàn bộ đặc biệt phía trên headline · `--font-open-runde`
- **Thay thế:** Inter 700 ở 9px với tracking 0.1em
- **Weights:** 600
- **Sizes:** 9px
- **Line height:** 1.11
- **OpenType features:** `"cv01", "cv09"`
- **Vai trò:** Micro labels, eyebrow text, small caps-style category tags — weight 600 duy nhất trong hệ thống, dùng ở 9px để tạo section markers viết hoa toàn bộ đặc biệt phía trên headline

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.2 | -0.24px | `--text-caption` |
| body | 15px | 1.4 | -0.3px | `--text-body` |
| subheading | 18px | 1.3 | -0.36px | `--text-subheading` |
| heading-sm | 24px | 1.2 | -0.48px | `--text-heading-sm` |
| heading | 32px | 1.13 | -1.6px | `--text-heading` |
| heading-lg | 62px | 1 | -3.1px | `--text-heading-lg` |
| display | 85px | 0.95 | -4.25px | `--text-display` |
| hero | 110px | 0.85 | -5.5px | `--text-hero` |

## Tokens — Spacing & Shapes

**Mật độ:** compact

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 5 | 5px | `--spacing-5` |
| 6 | 6px | `--spacing-6` |
| 7 | 7px | `--spacing-7` |
| 8 | 8px | `--spacing-8` |
| 10 | 10px | `--spacing-10` |
| 12 | 12px | `--spacing-12` |
| 14 | 14px | `--spacing-14` |
| 15 | 15px | `--spacing-15` |
| 20 | 20px | `--spacing-20` |
| 30 | 30px | `--spacing-30` |
| 40 | 40px | `--spacing-40` |
| 47 | 47px | `--spacing-47` |
| 60 | 60px | `--spacing-60` |
| 80 | 80px | `--spacing-80` |
| 160 | 160px | `--spacing-160` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| nav | 12px |
| tags | 100px |
| cards | 15px |
| tiles | 8px |
| inputs | 8px |
| buttons | 100px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| subtle | `rgb(9, 9, 9) 0px 0px 0px 2px` | `--shadow-subtle` |
| subtle-2 | `rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0.5px, rgba(0, 0, ...` | `--shadow-subtle-2` |
| md | `rgba(0, 0, 0, 0.3) 0px 10px 10px 0px` | `--shadow-md` |
| lg | `rgba(0, 0, 0, 0.2) 0px 10px 20px 0px, rgba(0, 0, 0, 0.25)...` | `--shadow-lg` |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 60px
- **Card padding:** 20px
- **Element gap:** 10px

## Components

### Hero Pill Button (White)
**Vai trò:** Primary action button trong hero và các CTA chính

Pill bo tròn hoàn toàn với radius 100px, nền Snow (#ffffff) với Inter 500 ở 14px trong chữ Void (#000000). Padding 14px ngang, không border nhìn thấy được. Đây là filled action duy nhất — sự đảo ngược trắng-trên-đen khiến nó trở thành element mạnh nhất trên trang.

### Hero Pill Button (Ghost)
**Vai trò:** Secondary action button trong hero

Pill bo tròn hoàn toàn với radius 100px, nền trong suốt với border Snow (#ffffff) 1px ở độ mờ ~30%, Inter 500 ở 14px trong chữ Snow. Nằm bên cạnh CTA trắng, tạo ra hệ thống action ghép đôi mà không cạnh tranh màu sắc.

### Navigation Link
**Vai trò:** Mục điều hướng thanh trên cùng

Inter 400 ở 14px trong Snow (#ffffff), không nền. Ở trạng thái hover hoặc active, chữ chuyển sang Electric Signal (#0099ff). Column gap 4–6px giữa các mục. Không gạch chân.

### Sign Up Button (Nav)
**Vai trò:** Nút chuyển đổi góc trên bên phải trong thanh điều hướng

Pill bo tròn hoàn toàn với radius 100px, nền Snow (#ffffff) với Inter 500 ở 13–14px trong chữ Void (#000000). Padding 6px 14px — compact hơn hero CTA. Là filled element duy nhất trong nav không border.

### Project Showcase Tile
**Vai trò:** Grid items hiển thị các site do khách hàng xây dựng trong gallery mid-scroll

Nằm trên canvas Void (#000000) không có border hoặc nền nhìn thấy được. Hình ảnh bên trong lấp đầy tile đến các cạnh radius 8px hoặc 15px. Tile là một cửa sổ vào nội dung, không phải card có khung — sự kiềm chế này làm cho grid trông như một bức tường tác phẩm thay vì danh sách tính năng sản phẩm.

### Testimonial Card
**Vai trò:** Card trích dẫn lớn trong section 'Powering ambitious teams'

Bề mặt Obsidian (#080808) hoặc Graphite (#171717) với radius 15px. Chứa glyph dấu ngoặc kép trong Snow (#ffffff) ở ~40px, pull-quote trong Inter 400 ở 20–24px trong Snow, và attribution với avatar + tên + vai trò trong Inter 400 ở 13px trong Ash (#999999). Padding 32–40px ở tất cả các cạnh. Không border, không shadow — bề mặt gần đen tạo sự phân cách khỏi canvas Void.

### Client Logo Strip
**Vai trò:** Hàng logo thương hiệu đối tác/khách hàng bên dưới project grid

Logo trong Snow (#ffffff) hoặc Pearl (#cccccc) ở chiều cao đồng nhất, sắp xếp thành 2–3 hàng với row gap 20–30px. Không nền, không border, không khung — logo trôi nổi trên canvas Void với khoảng không rộng rãi theo chiều ngang.

### Section Heading (Large)
**Vai trò:** Mở đầu mỗi section nội dung chính (ví dụ: 'Powering ambitious teams worldwide')

GT Walsheim Medium ở 62–85px trong Snow (#ffffff), line-height 0.95–1.13, tracking -0.05em. Căn trái. Không eyebrow label, không subtitle bên dưới — headline đứng một mình trên canvas Void.

### Eyebrow Micro-Label
**Vai trò:** Tiny category hoặc status markers phía trên headline hoặc trong nav

Open Runde 600 ở 9px trong Ash (#999999) hoặc Electric Signal (#0099ff), viết hoa, line-height 1.11. Xuất hiện phía trên hero headline (ví dụ: 'State of Sites '26 • Unlock the report now') như một meta-line compact.

### Feature/Body Paragraph
**Vai trò:** Descriptive copy trong hero và section openers

Inter Variable 400 ở 15–18px trong Ash (#999999), line-height 1.3–1.4, tracking -0.01em. Căn giữa trong hero, căn trái trong body sections. Màu xám muted trên canvas đen tạo ra khả năng đọc yên tĩnh đặc trưng của hệ thống.

### Footer Bar
**Vai trò:** Cuối trang với legal links và secondary nav

Inter 400 ở 12–13px trong Ash (#999999), sắp xếp ngang trên canvas Void. Column gap 10px giữa các link. Không background panel — footer chỉ là chữ trôi nổi trong màu đen.

## Do's and Don'ts

### Do
- Sử dụng GT Walsheim Medium hoặc GT Walsheim Framer Medium ở 62–110px cho bất kỳ section opener chính nào, với tracking ở -0.05em
- Đặt mọi button radius thành 100px — pill shapes là bắt buộc trên primary, secondary và tag buttons
- Sử dụng #0099ff Electric Signal chỉ cho inline links, active states và emphasis text — không bao giờ dùng cho buttons, backgrounds hoặc vùng lớn
- Mặc định nền trang là #000000 Void; tạo độ sâu bề mặt chỉ thông qua #080808, #171717 hoặc #222222 theo thứ tự đó
- Áp dụng Inter hoặc Inter Variable với character variant features được bật ("cv01", "cv11") cho body copy — letterforms được tinh chỉnh là một phần của giọng thương hiệu
- Sử dụng 10px làm element gap mặc định và 5px làm tight gap; tối thiểu 60px giữa các section chính
- Để project imagery và screenshots lấp đầy tile edge-to-edge với radius 8–15px; không bao giờ đóng khung chúng bằng borders hoặc backgrounds

### Don't
- Không sử dụng bất kỳ màu sắc nào khác ngoài #0099ff — tỷ lệ 0% colorfulness là đặc điểm xác định của hệ thống
- Không thêm drop shadows vào card trên canvas Void — các tông bề mặt gần đen đã tạo sự phân cách; shadow sẽ làm hỏng cảm giác gallery
- Không sử dụng bold (700) hoặc semibold (600) weights cho display headlines — GT Walsheim ở medium 500 là giọng chính; weights nặng hơn sẽ cảm thấy SaaS-generic
- Không đưa vào gradients, glow effects hoặc color washes — gradient duy nhất được phát hiện hầu như không nhìn thấy và chỉ mang tính trang trí
- Không đặt line-height trên 1.4 cho body text — hệ thống sử dụng leading chặt để duy trì nhịp điệu kiến trúc compact
- Không sử dụng blue accent cho vùng lớn hoặc background panels — nó phải giữ là một dấu câu nhỏ
- Không sử dụng solid borders 1px màu xám nhạt trên canvas Void — chúng vô hình; sử dụng filled surfaces radius 15px hoặc 20px để chứa nội dung

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Void | `#000000` | Page canvas, hero background, mặc định ở mọi nơi |
| 1 | Obsidian | `#080808` | Cards nằm trực tiếp trên canvas — phân cách gần như không thể nhận thấy |
| 2 | Graphite | `#171717` | Bề mặt card và project tile tiêu chuẩn |
| 3 | Carbon | `#222222` | Panel nâng cao và content blocks inset |
| 4 | Iron | `#2b2b2b` | Floating elements, sticky bars, độ cao cao nhất |

## Elevation

Framer tránh drop shadows trên canvas tối — sự phân cách đạt được thông qua các chuyển đổi tông bề mặt gần như vô hình (#000000 → #080808 → #171717) và spacing rộng rãi thay vì elevation. Những shadow duy nhất được phát hiện nằm trên bề mặt sáng (modal overlays) và sử dụng dark blurs khuếch tán nặng (rgba(0,0,0,0.25–0.3) ở 10–30px) để duy trì cảm giác void-like. Trên dark cards, một inner white stroke tinh tế (rgba(255,255,255,0.1) ở 0.5px) tạo định nghĩa cạnh mà không phá vỡ thẩm mỹ phẳng.

## Imagery

Trang web có nhiều hình ảnh ở mid-scroll nơi một grid dày đặc các project tile do khách hàng xây dựng chiếm ưu thế — mỗi tile là một screenshot full-bleed của một website thực với radius 8–15px, được đóng gói thành một mosaic chặt chẽ đọc như một 'bức tường tác phẩm' thay vì các card riêng lẻ. Photography vắng mặt; đây là một showcase của đầu ra sản phẩm (websites, dashboards, brand sites). Phía trên và phía dưới grid, trang web là typography thuần túy trên void đen. Không illustrations, không đồ họa trừu tượng, không 3D renders — hình ảnh màu sắc duy nhất trong hệ thống đến từ chính tác phẩm của khách hàng.

## Layout

Cột nội dung căn giữa max-width 1200px trên canvas #000000 full-bleed. Hero là text-stack căn giữa dọc với headline khổng lồ, subhead và paired pill buttons — không có hero image. Bên dưới hero, một grid full-bleed các project showcase tiles với chiều rộng thay đổi tạo ra một bức tường masonry-like. Một horizontal client logo strip nằm bên dưới grid trong 2 hàng. Xa hơn nữa, testimonial cards xuất hiện dưới dạng cặp trái-phải hoặc carousel ở độ rộng màn hình lớn. Navigation là một fixed transparent top bar với các link ngang trái/phải. Section transitions liền mạch — không có alternating bands, không dividers, chỉ có spacing.

## Agent Prompt Guide

**Quick Color Reference**
- text (primary): #ffffff Snow
- text (body/muted): #999999 Ash
- background (canvas): #000000 Void
- surface (card): #171717 Graphite
- border: none / sử dụng surface tone shift
- accent (links only): #0099ff Electric Signal
- primary action: không có màu CTA riêng biệt

**Example Component Prompts**
1. *Tạo một hero section*: Canvas #000000. Headline ở 110px GT Walsheim Framer Medium, #ffffff, letter-spacing -5.5px, line-height 0.85. Eyebrow ở 9px Open Runde 600, #999999. Body subtext ở 18px Inter 400, #999999. Hai pill buttons cạnh nhau với radius 100px: cái đầu tiên là fill #ffffff với chữ #000000 Inter 500 14px (padding ngang 14px), cái thứ hai trong suốt với border 1px #ffffff30 và chữ #ffffff.

2. *Tạo một project showcase tile*: Canvas #000000. Container radius 8px hoặc 15px không có border hoặc nền. Hình ảnh bên trong lấp đầy container edge-to-edge ở 100% width. Caption overlay (nếu có) ở 12px Inter 400, #999999 bên dưới hình ảnh.

3. *Tạo một testimonial card*: Bề mặt #171717 Graphite, radius 15px, padding 32px. Large opening quote glyph ở 40px #ffffff. Pull-quote ở 20–24px Inter 400, #ffffff, line-height 1.3. Attribution row ở dưới cùng: avatar tròn 32px, tên trong Inter 500 13px #ffffff, vai trò trong Inter 400 13px #999999.

4. *Tạo một section heading*: Canvas #000000. GT Walsheim Medium ở 85px, #ffffff, letter-spacing -4.25px, line-height 0.95, căn trái. Khoảng cách dọc 60px phía trên và phía dưới. Không nền, không border, không eyebrow yêu cầu.

5. *Tạo một client logo strip*: Canvas #000000. 2 hàng, mỗi hàng 4–6 logo, logo trong #ffffff hoặc #cccccc ở chiều cao 24–32px, column gap 30px, row gap 20px. Không background panel, không borders — logo trôi nổi trên void.

## Signature Type Voice

Hệ thống headline tuân theo một hệ thống phân cấp ba tầng nghiêm ngặt: GT Walsheim Framer Medium ở 110px cho hero (một lần mỗi trang, không bao giờ lặp lại), GT Walsheim Medium ở 85px và 62px cho section openers, và Mona Sans ở 18px cho sub-headlines. Cả ba đều chia sẻ medium weight (500–600), tracking chặt (-0.05em đến -0.046em) và line-height nén (0.85–1.0). Sự nhất quán này tạo ra một hệ thống typographic 'một giọng nói' ngay cả khi kích thước thay đổi. Medium weight là sự chống lại quy ước — hầu hết các site nhảy lên 700+ cho chữ lớn, nhưng weight 500 của Framer ở 110px cảm thấy kiến trúc và tự tin, không ồn ào. Letter spacing thắt chặt khi kích thước tăng: -0.01em ở body, -0.03em ở 32px, -0.05em ở 85px+. Sự nén tracking tiến triển này là điều làm cho hero 110px cảm thấy như một khối chữ rắn chắc thay vì một chuỗi các chữ cái.

## Similar Brands

- **Linear** — Cùng canvas dark-void với pill-shaped buttons và large geometric sans-serif headlines, nhưng Linear thêm purple-blue gradients và accent states nhiều màu sắc hơn
- **Vercel** — Monochrome black/white aesthetic với massive display type, gần như không có màu sắc, và surface separation gần như vô hình
- **Apple Product Pages** — Full-bleed black canvas với monumental type làm visual hero, product imagery làm showcase, minimal chrome — mặc dù Apple sử dụng SF Pro và thêm nhiều color photography
- **Pitch** — Dark-mode presentation tool với sự tự tin typographic tương tự và compact density, mặc dù Pitch sử dụng accent colors và gradient washes sống động hơn
- **Arc Browser** — Dark-mode creative-tool aesthetic với bold type và project showcase grids, chia sẻ định vị 'portfolio-as-product'

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-void: #000000;
  --color-obsidian: #080808;
  --color-graphite: #171717;
  --color-carbon: #222222;
  --color-iron: #2b2b2b;
  --color-snow: #ffffff;
  --color-ash: #999999;
  --color-smoke: #a6a6a6;
  --color-pearl: #cccccc;
  --color-slate: #666666;
  --color-steel: #8c8c8c;
  --color-electric-signal: #0099ff;

  /* Typography — Font Families */
  --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-gt-walsheim-framer-medium: 'GT Walsheim Framer Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-gt-walsheim-medium: 'GT Walsheim Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mona-sans: 'Mona Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-inter-variable: 'Inter Variable', 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-open-runde: 'Open Runde', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.2;
  --tracking-caption: -0.24px;
  --text-body: 15px;
  --leading-body: 1.4;
  --tracking-body: -0.3px;
  --text-subheading: 18px;
  --leading-subheading: 1.3;
  --tracking-subheading: -0.36px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.48px;
  --text-heading: 32px;
  --leading-heading: 1.13;
  --tracking-heading: -1.6px;
  --text-heading-lg: 62px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -3.1px;
  --text-display: 85px;
  --leading-display: 0.95;
  --tracking-display: -4.25px;
  --text-hero: 110px;
  --leading-hero: 0.85;
  --tracking-hero: -5.5px;

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

  /* Spacing */
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-7: 7px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-15: 15px;
  --spacing-20: 20px;
  --spacing-30: 30px;
  --spacing-40: 40px;
  --spacing-47: 47px;
  --spacing-60: 60px;
  --spacing-80: 80px;
  --spacing-160: 160px;

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

  /* Border Radius */
  --radius-sm: 1px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-xl-2: 15px;
  --radius-2xl: 20px;
  --radius-3xl: 30px;
  --radius-3xl-2: 40px;
  --radius-full: 50px;
  --radius-full-2: 100px;
  --radius-full-3: 200px;

  /* Named Radii */
  --radius-nav: 12px;
  --radius-tags: 100px;
  --radius-cards: 15px;
  --radius-tiles: 8px;
  --radius-inputs: 8px;
  --radius-buttons: 100px;

  /* Shadows */
  --shadow-subtle: rgb(9, 9, 9) 0px 0px 0px 2px;
  --shadow-subtle-2: rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0.5px, rgba(0, 0, 0, 0.25) 0px 10px 30px 0px;
  --shadow-md: rgba(0, 0, 0, 0.3) 0px 10px 10px 0px;
  --shadow-lg: rgba(0, 0, 0, 0.2) 0px 10px 20px 0px, rgba(0, 0, 0, 0.25) 0px 2px 4px 0px;

  /* Surfaces */
  --surface-void: #000000;
  --surface-obsidian: #080808;
  --surface-graphite: #171717;
  --surface-carbon: #222222;
  --surface-iron: #2b2b2b;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-void: #000000;
  --color-obsidian: #080808;
  --color-graphite: #171717;
  --color-carbon: #222222;
  --color-iron: #2b2b2b;
  --color-snow: #ffffff;
  --color-ash: #999999;
  --color-smoke: #a6a6a6;
  --color-pearl: #cccccc;
  --color-slate: #666666;
  --color-steel: #8c8c8c;
  --color-electric-signal: #0099ff;

  /* Typography */
  --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-gt-walsheim-framer-medium: 'GT Walsheim Framer Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-gt-walsheim-medium: 'GT Walsheim Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mona-sans: 'Mona Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-inter-variable: 'Inter Variable', 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-open-runde: 'Open Runde', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.2;
  --tracking-caption: -0.24px;
  --text-body: 15px;
  --leading-body: 1.4;
  --tracking-body: -0.3px;
  --text-subheading: 18px;
  --leading-subheading: 1.3;
  --tracking-subheading: -0.36px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.48px;
  --text-heading: 32px;
  --leading-heading: 1.13;
  --tracking-heading: -1.6px;
  --text-heading-lg: 62px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -3.1px;
  --text-display: 85px;
  --leading-display: 0.95;
  --tracking-display: -4.25px;
  --text-hero: 110px;
  --leading-hero: 0.85;
  --tracking-hero: -5.5px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-7: 7px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-15: 15px;
  --spacing-20: 20px;
  --spacing-30: 30px;
  --spacing-40: 40px;
  --spacing-47: 47px;
  --spacing-60: 60px;
  --spacing-80: 80px;
  --spacing-160: 160px;

  /* Border Radius */
  --radius-sm: 1px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-xl-2: 15px;
  --radius-2xl: 20px;
  --radius-3xl: 30px;
  --radius-3xl-2: 40px;
  --radius-full: 50px;
  --radius-full-2: 100px;
  --radius-full-3: 200px;

  /* Shadows */
  --shadow-subtle: rgb(9, 9, 9) 0px 0px 0px 2px;
  --shadow-subtle-2: rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0.5px, rgba(0, 0, 0, 0.25) 0px 10px 30px 0px;
  --shadow-md: rgba(0, 0, 0, 0.3) 0px 10px 10px 0px;
  --shadow-lg: rgba(0, 0, 0, 0.2) 0px 10px 20px 0px, rgba(0, 0, 0, 0.25) 0px 2px 4px 0px;
}
```