# Specify

> **Specify — Style Reference**

## Prompt Content

```
# Specify — Style Reference
> Black studio wall with neon violet sign

**Theme:** mixed

Specify vận hành như một canvas kể chuyện từ tối sang sáng: hero section đen tuyền với gradient headline tím phát quang chiếm phần đầu trang, sau đó chuyển sang bề mặt trắng sạch cho nội dung và social proof. Nhận diện thị giác là hình học SaaS có chừng mực — spacing grid 8px gọn gàng, Inter ở mọi weight, shadow hai lớp tinh tế — với một tín hiệu duy nhất phá vỡ sắc độ đơn sắc: một màu tím rực rỡ (#624de3) xuất hiện trong text, icon stroke, và một số ít accent fill. Button là pill dáng ngồi (40px radius) thay vì chamfer 6px phổ biến hơn; card bo 16px; tổng thể cảm giác dày đặc, tự tin, và hơi hướng editorial. Brand voice mang phong cách gần gũi với kỹ sư: một product page dành cho người xây dựng design system, không phải người mua chúng.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|-----|---------|-------|---------|
| Iris | `#624de3` | `--color-iris` | Màu thương hiệu chính — gradient headline text, icon stroke, accent border, focal link. Giọng màu duy nhất trong hệ thống; xuất hiện tiết kiệm để accent trở thành dấu câu chứ không phải trang trí |
| Soft Iris | `#8d4af7` | `--color-soft-iris` | Đuôi gradient cho tím thương hiệu — điểm dừng sáng hơn trong hero headline gradient. Chỉ kết hợp với #1d58c0 và #009639 bên trong carousel card color-block, không dùng trong chrome |
| Studio Slate | `#1a1d1e` | `--color-studio-slate` | Primary text, dark filled button, body border, heading stroke. Màu gần-đen làm việc chính, mang 90% trọng lượng giao diện |
| Obsidian | `#151718` | `--color-obsidian` | Hero và section background fill — lớp nền tối sâu phía sau gradient headline và 3D illustration. Hơi lạnh/sáng hơn đen thuần để tím dễ đọc |
| Pure White | `#ffffff` | `--color-pure-white` | Light-theme canvas, card surface, button text trên dark fill, hero overlay text |
| Cloud | `#f6f7f9` | `--color-cloud` | Bề mặt thay thế mềm — nằm dưới card trắng để tạo banding nhẹ giữa các content section |
| Mist | `#ebedef` | `--color-mist` | Hairline card và stroke surface, secondary card background ở vùng yên tĩnh |
| Graphite | `#8d8e8f` | `--color-graphite` | Border tương phản trung bình, control outline, và separator cấu trúc |
| Iron | `#5f6162` | `--color-iron` | Secondary text và secondary border — mạnh hơn Graphite một bậc cho body sub-copy vẫn cần lùi lại |
| Noir | `#000000` | `--color-noir` | Text tương phản cao nhất và màu border chủ đạo trên mọi bề mặt. Dùng khi cần độ rõ hoặc định nghĩa tối đa |
| Cobalt Pop | `#1d58c0` | `--color-cobalt-pop` | Carousel testimonial card accent background — xuất hiện dưới dạng color block đặc cạnh biến thể tím và xanh lá, không dùng trong chrome |
| Fern Pop | `#009639` | `--color-fern-pop` | Carousel testimonial card accent background — slot thứ ba trong bộ ba màu thương hiệu luân phiên. Chỉ trang trí |
| Lilac Wash | `#f1eefe` | `--color-lilac-wash` | Bề mặt card tím nhạt dùng trong testimonial carousel — vọng lại tím thương hiệu ở độ bão hòa 8% |
| Mint Wash | `#e5fbeb` | `--color-mint-wash` | Bề mặt card xanh lá nhạt trong testimonial carousel — đồng hành cùng Fern Pop color block |
| Apricot Wash | `#feeadd` | `--color-apricot-wash` | Bề mặt card ấm nhạt trong testimonial carousel — pastel slot thứ ba khớp với apricot color block |

## Tokens — Typography

### sans-serif — sans-serif — được phát hiện trong dữ liệu trích xuất nhưng AI không 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 AI không mô tả

### Inter — Kiểu chữ duy nhất cho toàn bộ hệ thống. Regular (400) cho body và micro-copy, Medium (500) cho emphasized inline, SemiBold (600) cho subheading và UI label ở tracking -0.031em, Bold (700) dành riêng cho hai display headline (48px và 64px) ở -0.021em / -0.016em. Negative letter-spacing trên cỡ lớn tạo cảm giác wordmark bó sát, giống poster; cỡ nhỏ hơn giữ tracking bình thường. · `--font-inter`
- **Substitute:** system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif
- **Weights:** 400, 500, 600, 700
- **Sizes:** 8px, 10px, 12px, 14px, 16px, 20px, 24px, 32px, 48px, 64px
- **Line height:** 1.13–3.00 (tight cho display, loose cho body)
- **Letter spacing:** -0.016em đến -0.031em trên 24px+; normal dưới đó
- **OpenType features:** `"cv11", "ss01"`
- **Vai trò:** Kiểu chữ duy nhất cho toàn bộ hệ thống. Regular (400) cho body và micro-copy, Medium (500) cho emphasized inline, SemiBold (600) cho subheading và UI label ở tracking -0.031em, Bold (700) dành riêng cho hai display headline (48px và 64px) ở -0.021em / -0.016em. Negative letter-spacing trên cỡ lớn tạo cảm giác wordmark bó sát, giống poster; cỡ nhỏ hơn giữ tracking bình thường.

### Fira Code — Inline code và token-name string trong product mockup illustration. Giọng monospace duy nhất; chỉ xuất hiện bên trong hero 3D scene, không dùng trong body copy. · `--font-fira-code`
- **Substitute:** 'JetBrains Mono', 'Source Code Pro', monospace
- **Weights:** 400
- **Sizes:** 14px
- **Line height:** 1.57
- **Vai trò:** Inline code và token-name string trong product mockup illustration. Giọng monospace duy nhất; chỉ xuất hiện bên trong hero 3D scene, không dùng trong body copy.

### Inter-Medium — Inter-Medium — được phát hiện trong dữ liệu trích xuất nhưng AI không mô tả · `--font-inter-medium`
- **Weights:** 500
- **Sizes:** 8px, 12px, 14px, 16px
- **Line height:** 1.5, 1.71, 2, 3
- **Vai trò:** Inter-Medium — được phát hiện trong dữ liệu trích xuất nhưng AI không mô tả

### Inter-SemiBold — Inter-SemiBold — được phát hiện trong dữ liệu trích xuất nhưng AI không mô tả · `--font-inter-semibold`
- **Weights:** 600
- **Sizes:** 8px, 12px, 14px, 16px, 20px, 24px, 32px
- **Line height:** 1, 1.2, 1.25, 1.5, 1.6, 1.71, 2, 3
- **Letter spacing:** -0.031
- **Vai trò:** Inter-SemiBold — được phát hiện trong dữ liệu trích xuất nhưng AI không mô tả

### Inter-Bold — Inter-Bold — được phát hiện trong dữ liệu trích xuất nhưng AI không mô tả · `--font-inter-bold`
- **Weights:** 700
- **Sizes:** 48px, 64px
- **Line height:** 1.13, 1.17
- **Letter spacing:** -0.021, -0.016
- **Vai trò:** Inter-Bold — được phát hiện trong dữ liệu trích xuất nhưng AI không mô tả

### Type Scale

| Vai trò | Cỡ | Line Height | Letter Spacing | Token |
|---------|-----|-------------|----------------|-------|
| caption | 12px | 1.5 | — | `--text-caption` |
| body-sm | 14px | 1.71 | — | `--text-body-sm` |
| body | 16px | 1.5 | — | `--text-body` |
| subheading | 20px | 1.6 | — | `--text-subheading` |
| heading-sm | 24px | 1.25 | -0.74px | `--text-heading-sm` |
| heading | 32px | 1.2 | -0.99px | `--text-heading` |
| display | 64px | 1.13 | -1.34px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 8px

**Density:** compact

### Spacing Scale

| Tên | Giá trị | Token |
|-----|---------|-------|
| 8 | 8px | `--spacing-8` |
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |
| 40 | 40px | `--spacing-40` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 120 | 120px | `--spacing-120` |
| 160 | 160px | `--spacing-160` |

### Border Radius

| Element | Giá trị |
|---------|---------|
| tags | 100px |
| cards | 16px |
| icons | 6px |
| inputs | 6px |
| buttons | 40px |

### Shadows

| Tên | Giá trị | Token |
|-----|---------|-------|
| subtle | `rgba(0, 0, 0, 0.2) 0px 1px 2px 0px, rgba(0, 0, 0, 0.08) 0...` | `--shadow-subtle` |
| subtle-2 | `rgba(0, 0, 0, 0.08) 0px 1px 2px 0px, rgba(0, 0, 0, 0.06) ...` | `--shadow-subtle-2` |
| subtle-3 | `rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(0, 0...` | `--shadow-subtle-3` |
| subtle-4 | `rgba(0, 0, 0, 0.1) 0px 3px 2px -1px, rgba(0, 0, 0, 0.12) ...` | `--shadow-subtle-4` |
| sm | `rgba(0, 0, 0, 0.14) 0px 4px 6px -2px, rgba(0, 0, 0, 0.16)...` | `--shadow-sm` |
| sm-2 | `rgba(0, 0, 0, 0.12) 0px 8px 8px -4px, rgba(0, 0, 0, 0.18)...` | `--shadow-sm-2` |
| lg | `rgba(0, 0, 0, 0.08) 0px 12px 24px 0px, rgba(0, 0, 0, 0.06...` | `--shadow-lg` |

### Layout

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

## Components

### Pill Filled Button
**Vai trò:** Primary action trên bề mặt sáng

Dark fill (#1a1d1e), text trắng, Inter SemiBold 14px, padding 10px 20px, 40px radius, dual-layer shadow rgba(0,0,0,0.2) 0 1px 2px / rgba(0,0,0,0.08) 0 6px 16px. Dùng cho 'Read vision', 'Watch video', 'Case study'.

### White Outlined Button
**Vai trò:** Action trên nền hero tối

1px #ffffff border, text trắng, Inter SemiBold 14px, padding 10px 20px, 40px radius. Dùng cho 'Sign in' và làm secondary action trong hero.

### Pill Badge
**Vai trò:** Status / announcement label

White fill (#ffffff) với text tối (#1a1d1e), Inter Medium 14px, padding 6px 16px, 100px (full) radius. Có thể có dot hoặc icon nhỏ bên trái. Dùng cho 'Saying Goodbye: The End of Specify'.

### Gradient Headline
**Vai trò:** Hero display text

Inter Bold 64px ở -0.016em, gradient fill chạy từ #8d4af7 qua #624de3 đến #1d58c0 (270°). Nằm trên dark canvas (#151718). Hướng gradient (trái sang phải) là signature.

### Light Section Headline
**Vai trò:** H1 trên content section trắng

Inter Bold 48px ở -0.021em, màu #1a1d1e, căn giữa, max-width ~720px. Theo sau là Inter Regular 16px sub-copy màu #5f6162.

### Navigation Bar
**Vai trò:** Site navigation cấp cao nhất

Nền trắng, border dưới 1px (#ebedef), chiều cao ~64px. Trái: brand mark (lục giác tím + wordmark). Giữa: Solutions / Resources / Pricing text links với chevron-down icon. Phải: 'Sign in' ghost button và 'Get started' filled button. Sticky khi cuộn.

### Logo Bar
**Vai trò:** Social proof — client logo

Dark canvas (#151718) band, một hàng 7–8 logo trắng đơn sắc với label 'Specify is loved by' phía trên bằng Inter Medium 14px #8d8e8f. Logo có chiều cao đồng nhất (~24px) với gap 40–80px.

### Testimonial Carousel Card
**Vai trò:** Rotating case-study spotlight

Bố cục ba card ngang. Card hai bên: solid color block (Cobalt / Fern / Iris) với client wordmark trắng và 'Case study →' pill button. Card giữa: bề mặt trắng, quote lớn bằng Inter SemiBold 16px #1a1d1e, attribution bên dưới. Card bo 16px radius với subtle shadow rgba(0,0,0,0.08) 0 1px 2px / rgba(0,0,0,0.06) 0 4px 8px.

### Token Workflow Illustration
**Vai trò:** Hero product visualization

3D isometric scene trên dark canvas. Hình vuông bo tròn xám đậm (16px radius) kết nối bằng đoạn ống/conduit, với cụm cube phát sáng cam-vàng bên trái và code-output panel bên phải hiển thị 'Success14: File created tokens/text-styles'. Token name hiển thị bằng Fira Code 14px bên trong connector module.

### Section Header with CTA
**Vai trò:** Reusable section opener

Centered Inter Bold 48px headline, sau đó body 16px màu #5f6162, sau đó một pill button duy nhất căn giữa bên dưới với margin-top 40px. Pattern lặp lại trên mọi content section trắng.

### Brand Mark
**Vai trò:** Logo lockup

Lục giác tím (#624de3) với glyph họa tiết cube/hex bên trong, theo sau là wordmark 'Specify' bằng Inter SemiBold 16px #1a1d1e. Họa tiết hex vọng lại 3D illustration trong hero.

## Do's and Don'ts

### Do
- Dùng Inter Bold 48–64px với letter-spacing -0.016em đến -0.021em cho mọi section và hero headline
- Dùng pill button (40px radius, padding 10px 20px, Inter SemiBold 14px) làm action shape mặc định
- Dành #624de3 cho accent text, icon stroke, và focal highlight — không bao giờ dùng làm full surface fill trong chrome
- Xếp chồng surface hierarchy theo thứ tự #151718 (dark hero) → #ffffff (content) → #f6f7f9 (banded section) → #f1eefe / #e5fbeb / #feeadd (testimonial card)
- Áp dụng dual-layer shadow stack (1px contact + 4–16px ambient) cho mọi interactive element
- Giữ spacing trên grid 8px — element gap 8px, card padding 24px, section gap 40–80px
- Khớp button radius với pill 40px và card radius với 16px — không bao giờ pha góc nhọn 4px vào card hoặc button

### Don't
- Không dùng solid violet (#624de3) làm full filled-button background — primary action là dark slate (#1a1d1e) pill
- Không đưa chromatic accent thứ hai ngoài bộ ba iris/fern/cobalt dùng trong testimonial carousel
- Không áp heavy blur shadow — giữ shadow ở pattern dual-layer 1–2px + 4–8px
- Không đặt body text trên 16px hoặc dưới 14px trên bề mặt trắng — type scale có chủ đích
- Không dùng màu pastel surface (#f1eefe, #e5fbeb, #feeadd) ngoài ngữ cảnh testimonial carousel
- Không dùng letter-spacing trên cỡ dưới 24px — negative tracking chỉ dành cho display và heading level
- Không thêm photography, gradient-as-background, hoặc decorative illustration ngoài hero 3D scene

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-----|-----|---------|----------|
| 0 | Dark Canvas | `#151718` | Hero band, logo bar, và mọi dark storytelling section |
| 1 | Light Canvas | `#ffffff` | Default content background cho mọi section trắng |
| 2 | Soft Band | `#f6f7f9` | Alternate section background để tạo nhịp điệu không cần divider nặng |
| 3 | Tinted Card | `#f1eefe` | Pastel card surface trong testimonial carousel |

## Elevation

- **Filled button:** `rgba(0, 0, 0, 0.2) 0px 1px 2px 0px, rgba(0, 0, 0, 0.08) 0px 6px 16px 0px`
- **Card:** `rgba(0, 0, 0, 0.08) 0px 1px 2px 0px, rgba(0, 0, 0, 0.06) 0px 4px 8px 0px`

## Imagery

Imagery chủ yếu là một 3D illustration duy nhất ở tỷ lệ hero: sơ đồ workflow isometric bề mặt tối gồm các tile bo tròn được kết nối, accent cube phát sáng, và code output panel. Ngoài hero ra, site gần như chỉ có text — client logo đơn sắc trong social-proof band, glyph icon nhỏ trong carousel card footer, và icon-only navigation. Không có photography, không có lifestyle imagery. 3D scene là giọng thị giác của thương hiệu; mọi thứ khác giữ phẳng và typographic.

## Layout

Trang xen kẽ giữa dark band full-bleed và content band trắng căn giữa max-width 1200px. Hero là dark canvas toàn viewport với gradient headline căn giữa và 3D illustration chiếm 50% phía dưới. Bên dưới hero, dark logo bar chạy edge-to-edge. Mọi content tiếp theo nằm trong container 1200px căn giữa với section gap dọc 80px: headline lớn căn giữa, sau đó bố cục 2 hoặc 3 cột gồm text và card. Testimonial carousel phá vỡ nhịp một cột với dàn trải ngang 3 card. Navigation là sticky top bar, không có sidebar. Nhịp điệu tổng thể rộng rãi trên dark section và gọn gàng (gap 8–24px) bên trong content section trắng.

## Agent Prompt Guide

**Quick Color Reference**
- text: #1a1d1e
- background: #ffffff
- border: #ebedef
- accent: #624de3
- dark surface: #151718
- primary action: #1a1d1e (filled action)

**Example Component Prompts**
1. *Hero section*: #151718 full-bleed background. Centered gradient headline 'Your Design Token Engine' bằng Inter Bold 64px, letter-spacing -1.34px, fill chạy 270° từ #8d4af7 → #624de3 → #1d58c0. White sub-copy bằng Inter Regular 16px, max-width 560px. Bên dưới, 3D isometric illustration gồm dark rounded tile kết nối bằng pipe, chiếm 50% phía dưới viewport.
2. *Pill button*: #1a1d1e fill, text trắng, Inter SemiBold 14px, padding 10px 20px, border-radius 40px, shadow rgba(0,0,0,0.2) 0 1px 2px / rgba(0,0,0,0.08) 0 6px 16px.
3. *Testimonial card*: bề mặt trắng, 16px radius, padding 24px, shadow rgba(0,0,0,0.08) 0 1px 2px / rgba(0,0,0,0.06) 0 4px 8px. Quote bằng Inter SemiBold 16px #1a1d1e, attribution bằng Inter Regular 14px #5f6162.
4. *Pill badge*: #ffffff fill, Inter Medium 14px #1a1d1e, padding 6px 16px, border-radius 100px, với dot nhỏ #624de3 bên trái.
5. *Navigation bar*: #ffffff background, border dưới 1px #ebedef, chiều cao 64px. Trái: violet hex brand mark + wordmark 'Specify' bằng Inter SemiBold 16px. Phải: 'Sign in' ghost button (border 1px #1a1d1e, 40px radius) và 'Get started' filled pill (#1a1d1e fill, text trắng, 40px radius).

## Similar Brands

- **Linear** — Cùng narrative dual-theme dark-hero-to-white-content, typeface Inter, và pill-shaped dark filled button với subtle dual-layer shadow
- **Supabase** — Cùng mật độ grid 8px gọn gàng, Inter type stack, và primary action pill gần-đen (#1a1d1e) trên bề mặt trắng
- **Vercel** — Cùng cách dùng editorial bold gradient text trên dark hero, sau đó là content section đơn sắc có chừng mực với section gap rộng rãi
- **Figma Config** — Phản chiếu 3D-isometric product hero, dark logo bar, và large centered Inter Bold headline cho section opener
- **Cal.com** — Cùng nhịp spacing 8px dày đặc, pill button (40px radius) primary action, và Inter SemiBold subheading trên nền gần-đen

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-iris: #624de3;
  --color-soft-iris: #8d4af7;
  --color-studio-slate: #1a1d1e;
  --color-obsidian: #151718;
  --color-pure-white: #ffffff;
  --color-cloud: #f6f7f9;
  --color-mist: #ebedef;
  --color-graphite: #8d8e8f;
  --color-iron: #5f6162;
  --color-noir: #000000;
  --color-cobalt-pop: #1d58c0;
  --color-fern-pop: #009639;
  --color-lilac-wash: #f1eefe;
  --color-mint-wash: #e5fbeb;
  --color-apricot-wash: #feeadd;

  /* Typography — Font Families */
  --font-sans-serif: 'sans-serif', 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-fira-code: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-inter-medium: 'Inter-Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-inter-semibold: 'Inter-SemiBold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-inter-bold: 'Inter-Bold', 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.71;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-subheading: 20px;
  --leading-subheading: 1.6;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.25;
  --tracking-heading-sm: -0.74px;
  --text-heading: 32px;
  --leading-heading: 1.2;
  --tracking-heading: -0.99px;
  --text-display: 64px;
  --leading-display: 1.13;
  --tracking-display: -1.34px;

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

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-40: 40px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-120: 120px;
  --spacing-160: 160px;

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

  /* Border Radius */
  --radius-md: 6px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 40px;
  --radius-full: 50px;
  --radius-full-2: 100px;
  --radius-full-3: 1000px;

  /* Named Radii */
  --radius-tags: 100px;
  --radius-cards: 16px;
  --radius-icons: 6px;
  --radius-inputs: 6px;
  --radius-buttons: 40px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.2) 0px 1px 2px 0px, rgba(0, 0, 0, 0.08) 0px 6px 16px 0px;
  --shadow-subtle-2: rgba(0, 0, 0, 0.08) 0px 1px 2px 0px, rgba(0, 0, 0, 0.06) 0px 4px 8px 0px;
  --shadow-subtle-3: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.08) 0px 1px 2px 0px, rgba(0, 0, 0, 0.06) 0px 4px 8px 0px;
  --shadow-subtle-4: rgba(0, 0, 0, 0.1) 0px 3px 2px -1px, rgba(0, 0, 0, 0.12) 0px 1px 1px -1px;
  --shadow-sm: rgba(0, 0, 0, 0.14) 0px 4px 6px -2px, rgba(0, 0, 0, 0.16) 0px 12px 16px -4px;
  --shadow-sm-2: rgba(0, 0, 0, 0.12) 0px 8px 8px -4px, rgba(0, 0, 0, 0.18) 0px 20px 24px -4px;
  --shadow-lg: rgba(0, 0, 0, 0.08) 0px 12px 24px 0px, rgba(0, 0, 0, 0.06) 0px 2px 4px 0px;

  /* Surfaces */
  --surface-dark-canvas: #151718;
  --surface-light-canvas: #ffffff;
  --surface-soft-band: #f6f7f9;
  --surface-tinted-card: #f1eefe;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-iris: #624de3;
  --color-soft-iris: #8d4af7;
  --color-studio-slate: #1a1d1e;
  --color-obsidian: #151718;
  --color-pure-white: #ffffff;
  --color-cloud: #f6f7f9;
  --color-mist: #ebedef;
  --color-graphite: #8d8e8f;
  --color-iron: #5f6162;
  --color-noir: #000000;
  --color-cobalt-pop: #1d58c0;
  --color-fern-pop: #009639;
  --color-lilac-wash: #f1eefe;
  --color-mint-wash: #e5fbeb;
  --color-apricot-wash: #feeadd;

  /* Typography */
  --font-sans-serif: 'sans-serif', 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-fira-code: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-inter-medium: 'Inter-Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-inter-semibold: 'Inter-SemiBold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-inter-bold: 'Inter-Bold', 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.71;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-subheading: 20px;
  --leading-subheading: 1.6;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.25;
  --tracking-heading-sm: -0.74px;
  --text-heading: 32px;
  --leading-heading: 1.2;
  --tracking-heading: -0.99px;
  --text-display: 64px;
  --leading-display: 1.13;
  --tracking-display: -1.34px;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-40: 40px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-120: 120px;
  --spacing-160: 160px;

  /* Border Radius */
  --radius-md: 6px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 40px;
  --radius-full: 50px;
  --radius-full-2: 100px;
  --radius-full-3: 1000px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.2) 0px 1px 2px 0px, rgba(0, 0, 0, 0.08) 0px 6px 16px 0px;
  --shadow-subtle-2: rgba(0, 0, 0, 0.08) 0px 1px 2px 0px, rgba(0, 0, 0, 0.06) 0px 4px 8px 0px;
  --shadow-subtle-3: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.08) 0px 1px 2px 0px, rgba(0, 0, 0, 0.06) 0px 4px 8px 0px;
  --shadow-subtle-4: rgba(0, 0, 0, 0.1) 0px 3px 2px -1px, rgba(0, 0, 0, 0.12) 0px 1px 1px -1px;
  --shadow-sm: rgba(0, 0, 0, 0.14) 0px 4px 6px -2px, rgba(0, 0, 0, 0.16) 0px 12px 16px -4px;
  --shadow-sm-2: rgba(0, 0, 0, 0.12) 0px 8px 8px -4px, rgba(0, 0, 0, 0.18) 0px 20px 24px -4px;
  --shadow-lg: rgba(0, 0, 0, 0.08) 0px 12px 24px 0px, rgba(0, 0, 0, 0.06) 0px 2px 4px 0px;
}
```