# Viewport

> Viewport — Style Reference

## Prompt Content

```
# Viewport — Style Reference
> Sticky notes mint trên bàn kính. Một không gian làm việc sạch sẽ, nơi một nút indigo rực rỡ là thứ duy nhất 'bật sáng' trên nền bề mặt teal nhạt và tường trắng.

**Theme:** light

Viewport sử dụng ngôn ngữ workspace sáng, thoáng: canvas trắng tinh, khoảng thở rộng rãi, và bề mặt mint-teal đặc trưng làm mềm các section mà không làm tối chúng. Toàn bộ câu chuyện màu sắc là một bộ đôi hai màu chặt chẽ — indigo rực rỡ cho các hành động và mint-teal cho bề mặt — được kết nối bởi một gradient cyan-to-violet chỉ xuất hiện trên primary CTA. Typography mang phong cách hình học, nhẹ nhàng: HK Sentiments Bold cho headline ở weight 700 nặng, Silka cho mọi thứ chức năng ở 14–18px, tracking được siết chặt trên toàn bộ scale. Các component trông như những tile mượt mà: border-radius 16px lớn trên card, 12px trên button, pill 100px cho tag, và shadow hoặc là màu xám nhạt gần như không thấy hoặc là cyan glow có thương hiệu — không bao giờ dùng mid-tone trung tính. Layout tập trung một headline duy nhất cho mỗi section, sau đó để ảnh chụp màn hình sản phẩm rộng làm nhiệm vụ chính, thường nổi trên bề mặt mint như sticky notes trên bàn kính.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Indigo Voltage | `linear-gradient(0deg, rgb(0,202,242) 0%, rgb(77,77,255) 100%)` | `--color-indigo-voltage` | Primary action buttons, active nav states, accent borders, heading highlights — màu thương hiệu duy nhất, khiến mọi phần tử tương tác đều không thể nhầm lẫn; Primary CTA button fill — gradient duy nhất trong hệ thống, chảy từ cyan sang indigo theo chiều dọc |
| Mint Whisper | `radial-gradient(102% 82% at 50% 107.7%, rgba(0,202,242,0.3) 0%, rgb(241,243,245) 100%)` | `--color-mint-whisper` | Bề mặt section đặc trưng — thay thế màu xám cho feature panels, product wrappers, và comparison cards; một teal nhẹ đọc như một canvas có màu thay vì một card có màu; Radial hero wash — cyan nở ra thành xám trung tính tạo bầu không khí xung quanh cho các showcase section |
| Cyan Pulse | `#00caf2` | `--color-cyan-pulse` | Điểm gốc gradient và link glow shadow; chỉ xuất hiện bên trong gradient button cyan→indigo và radial brand wash |
| Cyan Mist | `#66dff7` | `--color-cyan-mist` | Cyan nhẹ dùng làm link-focus glow ring; cầu nối giữa Mint Whisper và các điểm cuối gradient |
| Ink Black | `#000000` | `--color-ink-black` | Primary text, icons, hairline borders, và image outlines — dùng tần suất cao cho các cạnh cấu trúc hơn là fill |
| Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surfaces, button text trên indigo fills |
| Fog Veil | `#f8f9fa` | `--color-fog-veil` | Secondary card và section surface — bước tiếp theo từ trắng tinh trước khi đến Mint Whisper |
| Ash Border | `#c8c9cf` | `--color-ash-border` | Muted borders và dividers; các cạnh cấu trúc cần hiển thị nhưng không bao giờ quá mạnh |
| Graphite Depth | `#333333` | `--color-graphite-depth` | Deep accent cho headings và section frames nơi đen tuyền sẽ quá sắc |
| Steel Caption | `#7f8087` | `--color-steel-caption` | Body helper text, link base color, icon fills, và secondary metadata — mid-neutral mặc định cho văn xuôi |
| Haze Card | `#e3e6ec` | `--color-haze-card` | Tertiary card surface cho các grouped content blocks và inner panels |

## Tokens — Typography

### Silka SemiBold — Silka SemiBold — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-silka-semibold`
- **Weights:** 400, 600, 700
- **Sizes:** 14px, 16px
- **Line height:** 1, 1.2, 1.4
- **Letter spacing:** -0.036
- **Vai trò:** Silka SemiBold — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả

### HK Sentiments — Display và section headings — một sans-serif đậm, gần giống serif, mang giọng nói của headline, được siết chặt bằng negative tracking · `--font-hk-sentiments`
- **Thay thế:** Manrope
- **Weights:** 700
- **Sizes:** 24px, 28px, 32px
- **Line height:** 1.10-1.20
- **Letter spacing:** -0.018em ở 32px, -0.017em ở 28px, -0.006em ở 24px
- **Vai trò:** Display và section headings — một sans-serif đậm, gần giống serif, mang giọng nói của headline, được siết chặt bằng negative tracking

### Silka — Tất cả UI text, body copy, button labels, và inline links — một geometric sans trung tính cho lớp chức năng · `--font-silka`
- **Thay thế:** Inter
- **Weights:** 400, 500, 600, 700
- **Sizes:** 14px, 16px, 18px
- **Line height:** 1.00-1.40
- **Letter spacing:** -0.036em đến 0.010em tùy theo weight
- **Vai trò:** Tất cả UI text, body copy, button labels, và inline links — một geometric sans trung tính cho lớp chức năng

### Silka Italic — Accent italic cho các cụm từ được nhấn mạnh bên trong body copy · `--font-silka-italic`
- **Thay thế:** Inter Italic
- **Weights:** 400
- **Sizes:** 
- **Line height:** 1.20
- **Letter spacing:** 0.010em
- **Vai trò:** Accent italic cho các cụm từ được nhấn mạnh bên trong body copy

### system-ui sans-serif — Micro UI text — tag labels, fine print, timestamp-style metadata · `--font-system-ui-sans-serif`
- **Thay thế:** system-ui
- **Weights:** 400
- **Sizes:** 12px
- **Line height:** 1.20
- **Vai trò:** Micro UI text — tag labels, fine print, timestamp-style metadata

### Silka Regular — Silka Regular — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-silka-regular`
- **Weights:** 400
- **Sizes:** 14px, 16px, 18px
- **Line height:** 1, 1.2
- **Letter spacing:** 0.01
- **Vai trò:** Silka Regular — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả

### Silka Medium Italic — Silka Medium Italic — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-silka-medium-italic`
- **Weights:** 400
- **Sizes:** 18px
- **Line height:** 1.2
- **Letter spacing:** 0.01
- **Vai trò:** Silka Medium Italic — đượ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 | 12px | 1.2 | — | `--text-caption` |
| body-sm | 14px | 1.2 | -0.144px | `--text-body-sm` |
| body | 16px | 1.3 | -0.176px | `--text-body` |
| subheading | 18px | 1.2 | -0.198px | `--text-subheading` |
| heading-sm | 24px | 1.2 | -0.144px | `--text-heading-sm` |
| heading | 28px | 1.2 | -0.476px | `--text-heading` |
| display | 32px | 1.1 | -0.576px | `--text-display` |

## Tokens — Spacing & Shapes

**Đơn vị cơ sở:** 4px

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 60 | 60px | `--spacing-60` |
| 72 | 72px | `--spacing-72` |
| 80 | 80px | `--spacing-80` |
| 100 | 100px | `--spacing-100` |
| 120 | 120px | `--spacing-120` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 100px |
| cards | 16px |
| inputs | 8px |
| buttons | 12px |
| featureFrames | 20px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| md | `rgba(0, 202, 242, 0.6) 0px 4px 12px 0px` | `--shadow-md` |
| md-2 | `rgba(0, 0, 0, 0.25) 0px 8px 16px 0px` | `--shadow-md-2` |
| lg | `rgba(0, 0, 0, 0.1) 0px 15px 20px -5px` | `--shadow-lg` |

### Layout

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

## Components

### Gradient Primary Button
**Vai trò:** Hero CTA — hành động fill duy nhất và quan trọng nhất

Gradient dọc cyan-to-indigo (rgb(0,202,242) → rgb(77,77,255)), text trắng Silka Medium 16px, border-radius 12px, padding 12px 24px, không border, drop shadow nhẹ rgba(0,0,0,0.25) 0 8px 16px. Đây là phần tử nổi bật nhất của thương hiệu và chỉ nên xuất hiện một lần mỗi section.

### Outlined Sign-In Button
**Vai trò:** Secondary nav action

Transparent fill, border 1px solid #000000, radius 12px, Silka Medium 14px màu #000000, padding 8px 16px. Nằm ở top nav bên cạnh gradient CTA.

### Section Tag Pill
**Vai trò:** Eyebrow label phía trên section headings

Pill radius 100px, nền #e3e6ec, chữ in hoa Silka SemiBold 12px màu #4d4dff, padding 6px 14px. Đánh dấu chủ đề của section tiếp theo trong một chip mềm mại.

### Before/After Comparison Card
**Vai trò:** Hero dual-card thể hiện giá trị sản phẩm

Hai card đặt cạnh nhau với radius 16px, padding 24px, nền #f8f9fa. Mỗi card chứa một khung ảnh chụp màn hình với một status badge hình tròn nhỏ căn giữa phía trên (màu đỏ #ff4d4d X hoặc indigo #4d4dff check), kèm một caption ngắn Silka Regular 14px #333333.

### Mint Feature Panel
**Vai trò:** Product showcase wrapper full-width

Nền full-bleed #c5fbee, vertical padding rộng 64px, ảnh chụp màn hình sản phẩm căn giữa được đóng khung bên trong một card trắng với radius 16px và drop shadow nhẹ. Bề mặt mint thay thế section màu xám điển hình.

### Product Screenshot Frame
**Vai trò:** Inset preview của product UI

Card trắng, radius 16px, hairline border 1px #c8c9cf, inner padding 0 (ảnh tràn ra mép), drop shadow rgba(0,0,0,0.1) 0 15px 20px -5px. Luôn được căn giữa bên trong một Mint Feature Panel.

### Brand Showcase Carousel Card
**Vai trò:** Mẫu thiết kế thương hiệu full-bleed

Card rộng với lưới nhiều ảnh bên trong, radius 20px, xếp lớp trên nền cyan radial wash. Chứa các sub-panel có nhãn màu trắng với radius 12px riêng và caption nhỏ.

### Status Icon Badge
**Vai trò:** Chỉ thị hình tròn nhỏ phía trên card

Hình tròn 40px, solid fill màu #4d4dff (tích cực) hoặc đỏ ấm (tiêu cực), icon trắng căn giữa, cách card 8px phía dưới. Trông như một miếng dán.

### Top Navigation Bar
**Vai trò:** Site-wide header

Nền trắng, không border, chiều cao 64px, flex row với logo bên trái, link căn giữa Silka Medium 14px #333333, cặp CTA căn phải. Giả định sticky behavior cho các trang dài.

### Footer Link Group
**Vai trò:** Bottom-of-page navigation

Các link xếp chồng Silka Regular 14px màu #7f8087 với row gap 10px, column gap 24px giữa các nhóm. Group headings Silka SemiBold 12px in hoa màu #333333.

### Section Heading Block
**Vai trò:** Cặp tiêu đề + phụ đề phía trên một feature

Cụm căn giữa: HK Sentiments Bold 28-32px màu #000000 với letter-spacing -0.476 đến -0.576px, subtitle tùy chọn một dòng Silka Regular 18px #7f8087. Vertical rhythm 16px giữa các dòng.

### Ghost Link
**Vai trò:** Inline text link

Silka Regular 14px màu #7f8087, dotted underline 1px #7f8087, hover state thêm cyan glow ring rgba(0,202,242,0.6) 0 4px 12px xung quanh text.

## Do's and Don'ts

### Do
- Chỉ dùng gradient dọc cyan→indigo (rgb(0,202,242) → rgb(77,77,255)) trên CTA ưu tiên cao nhất duy nhất mỗi section; không bao giờ áp dụng lên card, nav, hoặc secondary buttons
- Dành #c5fbee Mint Whisper cho full-bleed feature panels phía sau ảnh chụp màn hình sản phẩm; không bao giờ dùng làm accent nhỏ hoặc badge fill
- Đặt hero và section headings ở HK Sentiments Bold 28–32px với letter-spacing -0.476 đến -0.576px để giữ giọng nói hình học chặt chẽ
- Áp dụng radius 16px cho tất cả card, 12px cho tất cả button, và 100px cho tất cả tag và pill — ba radius này định nghĩa hệ thống
- Dùng border 1px solid #000000 hoặc #c8c9cf cho hairline borders; không bao giờ dùng border trang trí dày hơn
- Căn giữa heading block của mỗi section (tag pill + title + optional subtitle) và để ảnh chụp màn hình sản phẩm làm nhiệm vụ thị giác bên dưới
- Kéo Silka tracking xuống -0.036em trên SemiBold 14–16px để khớp với micro-tightening đã trích xuất ở kích thước UI

### Don't
- Đừng thêm màu bão hòa mới — hệ thống màu sắc chính xác là hai: indigo #4d4dff và mint #c5fbee, được kết nối bởi cyan trong gradient
- Đừng dùng #c5fbee trên card trắng làm hover state hoặc chip fill; nó là surface-level treatment, không phải foreground accent
- Đừng áp shadow cho text, nav, hoặc tags; elevation chỉ thuộc về product frames, comparison cards, và gradient CTA
- Đừng chuyển sang serif hoặc display script cho headings — HK Sentiments Bold 700 là giọng display duy nhất, và tracking luôn âm ở mọi kích thước
- Đừng xếp nhiều feature block trên mỗi section; một headline, một product frame, một khoảng thở là nhịp điệu
- Đừng dùng dark mode patterns — canvas luôn là #ffffff hoặc #f8f9fa, không bao giờ là bề mặt gần đen
- Đừng thay thế gradient cyan→indigo bằng fill #4d4dff phẳng trên hero CTA; gradient là thứ làm cho primary action cảm thấy 'được bật sáng'

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Paper White Canvas | `#ffffff` | Nền trang mặc định |
| 1 | Fog Veil | `#f8f9fa` | Section separators và quiet content blocks |
| 2 | Haze Card | `#e3e6ec` | Tertiary grouped panels |
| 3 | Mint Whisper | `#c5fbee` | Bề mặt feature đặc trưng và product wrapper |

## Elevation

- **Comparison cards và feature panels:** `rgba(0, 0, 0, 0.1) 0px 15px 20px -5px`
- **Showcase frames và elevated tiles:** `rgba(0, 0, 0, 0.25) 0px 8px 16px 0px`
- **Cyan link glow:** `rgba(0, 202, 242, 0.6) 0px 4px 12px 0px`

## Imagery

Ảnh chụp màn hình sản phẩm chiếm ưu thế trong ngôn ngữ hình ảnh — UI captures thực tế của Viewport board, asset library, và brand kit views, không phải mockup trừu tượng. Ảnh chụp màn hình được trình bày dưới dạng card trắng nổi trên bề mặt mint với hairline borders và soft shadows, không bao giờ có gradient hoặc color overlays áp lên chúng. Nội dung hình ảnh duy nhất không phải sản phẩm nằm bên trong chính các ảnh chụp màn hình (mẫu thiết kế trong bảng màu xanh-teal). Không có lifestyle photography, không có người, không có hero illustration — sản phẩm CHÍNH LÀ hero. Icons tối giản và outlined, dùng cùng màu #4d4dff hoặc #000000 với text xung quanh. Đồ họa trang trí chỉ giới hạn ở cyan radial wash phía sau brand showcase carousel.

## Layout

Trang có max-width 1200px căn giữa với top nav cố định. Hero mở ra dưới dạng cột đơn căn giữa: eyebrow-style headline HK Sentiments Bold 32px, subtitle một câu Silka Regular 18px #7f8087, sau đó là gradient CTA, rồi một hàng so sánh hai cột với gap 24px. Các section xen kẽ giữa canvas trắng và các dải full-bleed Mint Whisper (#c5fbee), cách nhau bởi vertical padding 64px. Mỗi feature section tuân theo cùng một pattern: tag pill tùy chọn, heading block căn giữa, sau đó là một product frame rộng duy nhất hoặc lưới 2–3 cột preview sản phẩm. Navigation là một sticky top bar tối giản — không sidebar, không mega-menu. Content density luôn thấp; mỗi section chiếm toàn bộ viewport-width với khoảng thở rộng rãi thay vì nhồi nhét thông tin cạnh nhau.

## Agent Prompt Guide

primary action: #4d4dff (filled action)
Tạo Primary Action Button: nền #4d4dff, text #ffffff, radius 9999px, padding pill gọn. Dùng filled treatment này cho main CTA.

Ví dụ Component Prompts:
1. Xây dựng hero CTA: gradient dọc từ #00caf2 đến #4d4dff, label trắng Silka Medium 16px, radius 12px, padding 12px 24px, drop shadow rgba(0,0,0,0.25) 0 8px 16px.
2. Xây dựng Mint Feature Panel: nền full-width #c5fbee, vertical padding 64px, heading căn giữa HK Sentiments Bold 28px #000000 với tracking -0.476px, sau đó là product frame trắng (radius 16px, border 1px #c8c9cf, shadow rgba(0,0,0,0.1) 0 15px 20px -5px) chứa ảnh chụp màn hình sản phẩm.
3. Xây dựng section tag pill: radius 100px, fill #e3e6ec, chữ in hoa Silka SemiBold 12px màu #4d4dff, padding 6px 14px.
4. Xây dựng before/after comparison card: radius 16px, fill #f8f9fa, padding 24px, status badge hình tròn 40px (đỏ hoặc indigo) nổi cách 8px phía trên tâm card, ảnh chụp màn hình sản phẩm bên trong, và caption Silka Regular 14px #333333 bên dưới.

## Gradient System

Gradient được phân bổ hạn chế — có chính xác hai gradient trong toàn bộ hệ thống. CTA gradient chảy dọc từ cyan rgb(0,202,242) ở 0% đến indigo rgb(77,77,255) ở 100%, chỉ dùng trên filled button ưu tiên cao nhất mỗi trang. Radial wash là một cyan bloom (rgba(0,202,242,0.3)) mở rộng từ dưới cùng vào xám trung tính (rgb(241,243,245)), chỉ dùng làm ambient backdrop cho brand showcase carousel. Không có gradient nào khác, không diagonal sweeps, không trang trí nhiều màu.

## Similar Brands

- **Pitch** — Cùng cách tiếp cận light-canvas-plus-one-vivid-accent với section spacing rộng rãi và layout dẫn dắt bằng ảnh chụp màn hình sản phẩm
- **Notion** — Bề mặt trắng yên tĩnh, chrome tối giản, và ảnh chụp màn hình sản phẩm được xử lý như tile nổi với soft shadows
- **Linear** — Type scale chặt chẽ với letter-spacing âm trên bold headings và một màu thương hiệu bão hòa duy nhất làm công việc của cả một bảng màu
- **Frame.io** — Trang marketing công cụ sáng tạo dẫn dắt bằng hero copy căn giữa, kể chuyện trực quan before/after, và khung preview sản phẩm rộng

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-indigo-voltage: #4d4dff;
  --gradient-indigo-voltage: linear-gradient(0deg, rgb(0,202,242) 0%, rgb(77,77,255) 100%);
  --color-mint-whisper: #c5fbee;
  --gradient-mint-whisper: radial-gradient(102% 82% at 50% 107.7%, rgba(0,202,242,0.3) 0%, rgb(241,243,245) 100%);
  --color-cyan-pulse: #00caf2;
  --color-cyan-mist: #66dff7;
  --color-ink-black: #000000;
  --color-paper-white: #ffffff;
  --color-fog-veil: #f8f9fa;
  --color-ash-border: #c8c9cf;
  --color-graphite-depth: #333333;
  --color-steel-caption: #7f8087;
  --color-haze-card: #e3e6ec;

  /* Typography — Font Families */
  --font-silka-semibold: 'Silka SemiBold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-hk-sentiments: 'HK Sentiments', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-silka: 'Silka', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-silka-italic: 'Silka Italic', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-system-ui-sans-serif: 'system-ui sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-silka-regular: 'Silka Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-silka-medium-italic: 'Silka Medium Italic', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.2;
  --text-body-sm: 14px;
  --leading-body-sm: 1.2;
  --tracking-body-sm: -0.144px;
  --text-body: 16px;
  --leading-body: 1.3;
  --tracking-body: -0.176px;
  --text-subheading: 18px;
  --leading-subheading: 1.2;
  --tracking-subheading: -0.198px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.144px;
  --text-heading: 28px;
  --leading-heading: 1.2;
  --tracking-heading: -0.476px;
  --text-display: 32px;
  --leading-display: 1.1;
  --tracking-display: -0.576px;

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

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-60: 60px;
  --spacing-72: 72px;
  --spacing-80: 80px;
  --spacing-100: 100px;
  --spacing-120: 120px;

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

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

  /* Named Radii */
  --radius-tags: 100px;
  --radius-cards: 16px;
  --radius-inputs: 8px;
  --radius-buttons: 12px;
  --radius-featureframes: 20px;

  /* Shadows */
  --shadow-md: rgba(0, 202, 242, 0.6) 0px 4px 12px 0px;
  --shadow-md-2: rgba(0, 0, 0, 0.25) 0px 8px 16px 0px;
  --shadow-lg: rgba(0, 0, 0, 0.1) 0px 15px 20px -5px;

  /* Surfaces */
  --surface-paper-white-canvas: #ffffff;
  --surface-fog-veil: #f8f9fa;
  --surface-haze-card: #e3e6ec;
  --surface-mint-whisper: #c5fbee;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-indigo-voltage: #4d4dff;
  --color-mint-whisper: #c5fbee;
  --color-cyan-pulse: #00caf2;
  --color-cyan-mist: #66dff7;
  --color-ink-black: #000000;
  --color-paper-white: #ffffff;
  --color-fog-veil: #f8f9fa;
  --color-ash-border: #c8c9cf;
  --color-graphite-depth: #333333;
  --color-steel-caption: #7f8087;
  --color-haze-card: #e3e6ec;

  /* Typography */
  --font-silka-semibold: 'Silka SemiBold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-hk-sentiments: 'HK Sentiments', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-silka: 'Silka', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-silka-italic: 'Silka Italic', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-system-ui-sans-serif: 'system-ui sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-silka-regular: 'Silka Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-silka-medium-italic: 'Silka Medium Italic', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.2;
  --text-body-sm: 14px;
  --leading-body-sm: 1.2;
  --tracking-body-sm: -0.144px;
  --text-body: 16px;
  --leading-body: 1.3;
  --tracking-body: -0.176px;
  --text-subheading: 18px;
  --leading-subheading: 1.2;
  --tracking-subheading: -0.198px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.144px;
  --text-heading: 28px;
  --leading-heading: 1.2;
  --tracking-heading: -0.476px;
  --text-display: 32px;
  --leading-display: 1.1;
  --tracking-display: -0.576px;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-60: 60px;
  --spacing-72: 72px;
  --spacing-80: 80px;
  --spacing-100: 100px;
  --spacing-120: 120px;

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

  /* Shadows */
  --shadow-md: rgba(0, 202, 242, 0.6) 0px 4px 12px 0px;
  --shadow-md-2: rgba(0, 0, 0, 0.25) 0px 8px 16px 0px;
  --shadow-lg: rgba(0, 0, 0, 0.1) 0px 15px 20px -5px;
}
```