# Obscura

> # Obscura — Style Reference

## Prompt Content

```
# Obscura — Style Reference
> 8-bit arcade nổi trên nền giấy mây

**Theme:** light

Obscura vận hành trên ngôn ngữ 8-bit arcade vui tươi, đặt trên nền canvas giấy sắc trời mềm mại. Display type (Jersey 10) là chữ ký thị giác: những ký tự pixel chunky đọc như phụ đề Game Boy, kết hợp với hình học Manrope hiện đại, điềm tĩnh cho mọi thứ cần đọc. Một màu cam rực rỡ duy nhất (#ff5e24) đảm nhận vai trò nổi bật — CTA fill, link hover, nhấn mạnh hero, card borders — trong khi phần còn lại của hệ thống giữ tông kem, xanh trời và graphite. Các bề mặt nổi trên nền mây #e3f1fe nhạt với hairline borders và bóng siêu nhẹ; trang web cảm giác như hình nền console pixel-art mà bạn thực sự muốn sống trong đó. Tâm trạng là privacy-as-playfulness, không phải privacy-as-fortress.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Signal Orange | `#ff5e24` | `--color-signal-orange` | Primary CTA fill, nhấn mạnh hero headline, active nav link, card accent border, hover state — giọng màu duy nhất xứng đáng với từng pixel nó chạm tới |
| Ember Crust | `#6c3200` | `--color-ember-crust` | Footer background, dark-mode brand block — dùng khi màu cam cần lùi vào nền nâu ấm sâu |
| Cloud Mist | `#e3f1fe` | `--color-cloud-mist` | Page canvas tint, card surface wash, secondary button border, decorative fill phía sau pixel art — bầu trời mềm mà mọi thứ nổi trên đó |
| Graphite Ink | `#232629` | `--color-graphite-ink` | Primary text, nav links, icon strokes, body copy — màu gần đen pha chút lạnh giúp trang không bị vô cảm |
| Paper White | `#ffffff` | `--color-paper-white` | Card surface, button text trên dark fills, nav background, app-window chrome — lớp sáng nhất có thể đọc được |
| Slate Pencil | `#5c6066` | `--color-slate-pencil` | Secondary body text, subdued button labels, muted icon fills — tông màu của bản sao hữu ích nhưng không vội vã |
| Ash Mist | `#989ea4` | `--color-ash-mist` | Tertiary text, placeholder, disabled icon color, decorative pixel tints — neutral trung tính dễ đọc nhất |
| Blush Shadow | `#dbced0` | `--color-blush-shadow` | Warm-tinted shadow base cho card elevation — giữ cho bóng không bị xanh lạnh trên bề mặt kem |
| Midnight Ink | `#101828` | `--color-midnight-ink` | Headline text và strong links khi màu cam không phù hợp — một lựa chọn gần đen hiếm hoi |

## Tokens — Typography

### Jersey 10 — Chỉ dùng cho display và headline type — font pixel chunky đặt tên cho thương hiệu. Dùng cho hero, section headings, và bất kỳ tiêu đề nào cần cảm giác như màn hình boot Game Boy. Không bao giờ dùng cho body hay UI labels. · `--font-jersey-10`
- **Thay thế:** Press Start 2P, VT323, Pixelify Sans
- **Weights:** 400, 500
- **Sizes:** 36px, 48px, 60px, 72px, 96px
- **Line height:** 0.70, 0.80, 0.85, 1.00, 1.11
- **Letter spacing:** -0.0310em ở 96px, -0.0250em ở 36-72px
- **Vai trò:** Chỉ dùng cho display và headline type — font pixel chunky đặt tên cho thương hiệu. Dùng cho hero, section headings, và bất kỳ tiêu đề nào cần cảm giác như màn hình boot Game Boy. Không bao giờ dùng cho body hay UI labels.

### Manrope Variable — Body, nav, button labels, links, small UI text, captions. Đảm nhận toàn bộ văn xuôi và bản sao chức năng để font pixel có thể giữ vai trò nổi bật. Weight 600-700 cho nhấn mạnh, 400 cho đoạn văn, 500 cho buttons và nav. · `--font-manrope-variable`
- **Thay thế:** Inter, Plus Jakarta Sans, DM Sans
- **Weights:** 400, 500, 600, 700, 800
- **Sizes:** 12px, 14px, 16px, 18px
- **Line height:** 1.33, 1.43, 1.50, 1.56, 1.75
- **Letter spacing:** normal
- **Vai trò:** Body, nav, button labels, links, small UI text, captions. Đảm nhận toàn bộ văn xuôi và bản sao chức năng để font pixel có thể giữ vai trò nổi bật. Weight 600-700 cho nhấn mạnh, 400 cho đoạn văn, 500 cho buttons và nav.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|------|
| caption | 12px | 1.5 | — | `--text-caption` |
| body-sm | 14px | 1.43 | — | `--text-body-sm` |
| body | 16px | 1.5 | — | `--text-body` |
| subheading | 18px | 1.56 | — | `--text-subheading` |
| heading-sm | 36px | 1.11 | -0.9px | `--text-heading-sm` |
| heading | 48px | 0.85 | -1.2px | `--text-heading` |
| heading-lg | 60px | 0.85 | -1.5px | `--text-heading-lg` |
| display | 96px | 0.8 | -3px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 8px

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 8 | 8px | `--spacing-8` |
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 48 | 48px | `--spacing-48` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 96 | 96px | `--spacing-96` |
| 128 | 128px | `--spacing-128` |
| 192 | 192px | `--spacing-192` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| nav | 6px |
| cards | 12px |
| links | 6px |
| images | 24px |
| buttons | 6px |
| cardsLarge | 16px |
| featurePanels | 32px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| xl | `rgba(0, 0, 0, 0.01) 0px 49px 30px 0px, rgba(0, 0, 0, 0.03...` | `--shadow-xl` |
| md | `rgba(15, 34, 52, 0.01) 0px 27px 11px 0px, rgba(15, 34, 52...` | `--shadow-md` |
| subtle | `oklab(1 0 5.96046e-8 / 0.17) 0px 0.5px 0.5px 0.5px inset,...` | `--shadow-subtle` |

### Layout

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

## Components

### Primary CTA Button
**Vai trò:** Hành động duy nhất được fill màu cam — element nổi bật nhất trên mọi trang

Nền fill #ff5e24, chữ trắng Manrope 500 ở 16px, radius 6px, padding 8px 16px hoặc 16px 32px. Mang inset shadow pha cam + outer ring cam 1px để tạo cảm giác 'bị ấn xuống'. Icon mũi tên phải màu trắng nằm bên phải label. Không bao giờ outlined, không bao giờ ghost cho primary.

### Secondary Outlined Button
**Vai trò:** Lựa chọn thay thế ít nhấn mạnh cho CTA cam

Transparent fill, border 1px #e3f1fe (Cloud Mist), chữ Graphite Ink Manrope 500 16px, radius 6px, vertical padding 8px/16px giống primary. Outer shadow Cloud Mist mềm. Dùng cho 'Manage Account' và các hành động tiện ích tương tự.

### Ghost Text Link
**Vai trò:** Inline và nav-link clickable text

Không background, không border, Graphite Ink (#232629) Manrope 500 14-16px. Underline xuất hiện khi hover màu Signal Orange. Active state trong nav dùng chữ cam + 1px orange ring shadow.

### Hero Section
**Vai trò:** Tuyên ngôn thương hiệu ở fold đầu tiên

Centered stack trên canvas Cloud Mist (#e3f1fe). Jersey 10 ở 96px / 60px cho headline hai dòng — dòng đầu Graphite Ink, dòng thứ hai Signal Orange để tương phản. Câu body Manrope 400 16px, màu Slate Pencil, max-width ~560px. Primary CTA căn giữa bên dưới. Pixel-art cloud sprites trôi nổi quanh các cạnh làm decoration, không bao giờ bị cắt bởi container.

### Feature Card
**Vai trò:** Content panels giữa trang kèm illustration

Bề mặt trắng (#ffffff), radius 12px, internal padding 16px, border mềm #e3f1fe. Multi-layer blue-tinted shadow stack (mẫu 4 lớp rgba(15,34,52,…)). Heading Jersey 10 ở 36-48px Graphite Ink, body Manrope bên dưới Slate Pencil. Pixel illustration hoặc icon nằm phía trên heading.

### App Window Mockup
**Vai trò:** Ảnh chụp màn hình UI sản phẩm được nhúng trong marketing

Outer radius bo tròn 12-16px. Hàng traffic-light kiểu macOS (chấm đỏ, vàng, xanh lá) ở góc trên bên trái. Sidebar nội bộ với nav items — active item có background pill màu xanh (#e3f1fe). Main panel màu trắng với status card hiển thị 'Connected to [City]' màu Signal Orange, icon check xanh lá, và nút 'Disconnect' ghost màu hồng/đỏ nhạt.

### Status Pill (Connected / Disconnected)
**Vai trò:** Inline state indicator bên trong app mocks và trust badges

Manrope 500 14px, chữ trắng, radius 6px, full padding 6px 12px. Connected = fill #ff5e24. Disconnected = fill hồng/coral nhạt với chữ tối. Luôn đi kèm icon check hoặc cross nhỏ bên trái label.

### Pixel Cloud Sprite
**Vai trò:** Decorative 8-bit cloud graphic rải rác khắp hero và section dividers

Pixel cloud vẽ tay, ~3-4 sắc thái #e3f1fe và #ffffff để gợi chiều sâu, với outline 1px #5c6066 mỏng. Luôn có 2-3 sprites mỗi section, không bao giờ căn giữa — chúng trôi vào góc và cạnh. Không shadow, không gradient — pure flat pixel blocks.

### Footer Block
**Vai trò:** Bề mặt ấm tối ở cuối trang

Nền full-width #6c3200 (Ember Crust). Chữ trắng và kem ấm Manrope 400-500. Là điểm tương phản tông màu với trang xanh trời — bề mặt tối duy nhất trên toàn bộ site.

### Navigation Bar
**Vai trò:** Top sticky header với logo, links, và account controls

Nền transparent hoặc trắng, không border nhìn thấy được. Logo 'obscura' bên trái Manrope 700 lowercase Graphite Ink. Nav links căn giữa Manrope 500 14px. Cụm bên phải: 'Manage Account' dạng ghost text link + 'Get Started' dạng CTA cam với radius 6px. Active nav item nhận orange ring inset shadow.

### Inline Pixel Mascot
**Vai trò:** Nhân vật thương hiệu (mèo) xuất hiện trong product mocks và section accents

Pixel-art mèo hoặc robot nhỏ tông cam Manrope và xám ấm, cao ~40-80px. Xuất hiện trong app mockup sidebar, làm section accent, và ở góc dưới bên trái hero. Không outline nào ngoài pixel grid — flat 1-2 màu fill mỗi khối.

### Section Divider (Pixel Cloud Cluster)
**Vai trò:** Khoảng thở thị giác giữa các content sections

Cụm 2-3 cloud sprite nằm trong khoảng trống giữa các section, luôn lệch tâm. Không text, không line — chính các đám mây LÀ divider. Dùng cùng bảng màu Cloud Mist với page canvas.

## Do's and Don'ts

### Do
- Dùng Jersey 10 cho mọi display heading (36px trở lên) — đó là giọng nói của thương hiệu và cách nhanh nhất để làm cho trang mang phong cách Obscura.
- Giữ kỷ luật bảng màu CTA: một Signal Orange (#ff5e24) fill duy nhất mỗi màn hình, không gì khác ở ô màu đó.
- Để Cloud Mist (#e3f1fe) canvas làm công việc tạo bầu không khí — áp dụng nó làm full-bleed page background, không chỉ card fills.
- Kết hợp hai display line-heights có chủ đích: 0.80-0.85 cho multi-line heroes để font pixel xếp chặt, 1.11 cho single-line section heads cần khoảng thở.
- Dùng radius 6px cho mọi interactive elements (buttons, nav pills, tags) và dành radius 12px+ cho cards và app mocks — sự tương phản về độ mềm của góc là một phần của hệ thống.
- Neo mỗi trang với 1-2 pixel cloud sprites trôi ở góc; một trang không có chúng sẽ mất cá tính arcade.
- Chỉ áp dụng orange-ring inset shadow cho active nav state và focused primary button — nó báo hiệu tương tác mà không cần chuyển màu.

### Don't
- Không dùng Jersey 10 cho body text, button labels, nav links, hoặc bất kỳ UI copy nào dưới 36px — pixel grid trở nên không đọc được.
- Không giới thiệu màu thương hiệu thứ hai. Blue-tinted surfaces (#e3f1fe) mang tính không khí, không phải màu sắc — chúng không phải là 'blue accents'.
- Không áp dụng Signal Orange cho large background fills; màu cam chỉ dùng cho dấu câu nhỏ (buttons, emphasis words, active states, borders).
- Không dùng pure black (#000000) cho text — Graphite Ink (#232629) pha lạnh là thứ giữ cho bề mặt kem không trông chết chóc.
- Không xếp chồng elevation: một card chỉ dùng đúng một shadow pattern. Thêm outer ring hoặc glow thứ hai sẽ phá vỡ cảm giác giấy mềm.
- Không dùng góc 0px sắc trên feature cards — radius 12-16px là mức tối thiểu cho bất kỳ panel surface nào.
- Không đặt pixel cloud sprites ở giữa, phía sau text, hoặc lớn hơn ~120px — chúng luôn phải cảm giác như trang trí bầu trời, không phải feature illustration.

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Sky Canvas | `#e3f1fe` | Tông xanh nhạt toàn trang tạo bầu không khí giấy mây cho toàn bộ site |
| 1 | Card Paper | `#ffffff` | Bề mặt card và content panel nâng lên — bề mặt đọc nâng cao mặc định |
| 2 | App Window | `#f5f5f7` | Chrome kiểu macOS phía sau UI sản phẩm — hơi lạnh hơn card paper để lùi lại |
| 3 | Ember Ground | `#6c3200` | Footer block — bề mặt ấm tối neo trang |

## Elevation

- **Standard Card:** `rgba(15, 34, 52, 0.01) 0px 27px 11px 0px, rgba(15, 34, 52, 0.02) 0px 15px 9px 0px, rgba(15, 34, 52, 0.04) 0px 7px 7px 0px, rgba(15, 34, 52, 0.04) 0px 2px 4px 0px`
- **Elevated Card:** `rgba(0, 0, 0, 0.01) 0px 49px 30px 0px, rgba(0, 0, 0, 0.03) 0px 22px 22px 0px, rgba(0, 0, 0, 0.03) 0px 5px 12px 0px`
- **Active Nav / Focused Button:** `rgba(255, 94, 36, 0.17) 0px 0.5px 0.5px 0.5px inset, rgba(153, 37, 18, 0.2) 0px -1px 0.5px 0px inset, rgb(255, 94, 36) 0px 0px 0px 1px`

## Imagery

Obscura chạy trên pixel art 8-bit được xây dựng thủ công thay vì nhiếp ảnh hay 3D renders. Từ vựng thị giác là sprite work Game Boy / NES: flat-color pixel blocks, 1-2 sắc thái mỗi đối tượng, không anti-aliasing, không gradient bên trong art. Ba chủ đề lặp lại mang hệ thống — pixel clouds (motif được dùng nhiều nhất, trôi trong tông kem và xanh trời), một pixel cat/robot mascot nhỏ (cam và xám ấm, xuất hiện trong app mocks và góc section), và app window kiểu macOS chứa UI sản phẩm. Product screenshots được tạo kiểu với window chrome thực (traffic-light dots, sidebar nav) để sản phẩm cảm giác native trên desktop. Không có nhiếp ảnh, không stock imagery, không abstract gradient blobs. Illustrations luôn flat-outlined hoặc flat-filled, luôn nằm trong cards hoặc trôi ở lề trang, không bao giờ chồng lên text blocks. Pixel art mang tâm trạng (vui tươi, retro, privacy-as-adventure) trong khi product UI screenshot mang độ tin cậy (thực, đã cài đặt, có thể sử dụng).

## Layout

Page layout được giới hạn max-width (1200px) trên full-bleed Cloud Mist (#e3f1fe) canvas. Hero là centered-stack: headline pixel hai dòng, một đoạn ngắn, một CTA cam duy nhất, và hai ghost platform options bên dưới — với pixel cloud sprites trôi trong khoảng trống bên trái và phải. Sections xếp chồng dọc với gap 48px và thở rộng rãi; không có hard horizontal dividers, các cloud sprites đảm nhận việc phân cách thị giác. Nội dung xen kẽ giữa centered single-column (hero, CTA bands) và 2-column text-plus-card (feature explanations, nơi text block bên trái kết hợp với card mockup hoặc pixel illustration bên phải). Card grids xuất hiện dạng 2- và 3-column trên desktop, thu gọn thành single column trên mobile. App-window mockup nằm như một hero element lớn, căn giữa bên dưới fold, kéo dài đến các cạnh của content column. Navigation là một top bar duy nhất — logo trái, centered links, account cluster phải — transparent hoặc trắng, không sticky shadow. Footer là một dark band full-bleed duy nhất màu Ember Crust (#6c3200), phá vỡ nhịp điệu kem toàn trang.

## Agent Prompt Guide

**Quick Color Reference**
- text: #232629 (Graphite Ink)
- background: #e3f1fe (Cloud Mist) trên cards #ffffff (Paper White)
- border: #e3f1fe (Cloud Mist, 1px)
- accent: #ff5e24 (Signal Orange)
- primary action: #ff5e24 (filled action)
- dark surface: #6c3200 (Ember Crust, chỉ footer)

**Example Component Prompts**

1. Tạo Primary Action Button: background #ff5e24, text #101828, radius 9999px, compact pill padding. Dùng filled treatment này cho main CTA.

2. *Feature card*: Bề mặt trắng (#ffffff), radius 12px, internal padding 16px, border 1px #e3f1fe, 4-layer blue-tinted shadow stack. Heading Jersey 10 36px Graphite Ink letter-spacing -0.9px. Body Manrope 400 16px Slate Pencil. Pixel illustration nhỏ (40-60px) nằm phía trên heading.

3. *Status pill bên trong app mock*: Manrope 500 14px chữ trắng trên Signal Orange (#ff5e24) fill, radius 6px, padding 6px 12px, icon check xanh lá nhỏ bên trái label 'Connected to New York, NY'.

4. *Ghost nav link*: Không background, không border. Manrope 500 14px Graphite Ink. Underline xuất hiện khi hover màu Signal Orange. Active state thêm 1px orange ring inset shadow.

5. *Footer band*: Background Ember Crust (#6b3200) full-width. Logo và links Manrope 400-500 14px màu trắng và kem ấm (#f5e6dc). Internal padding 48px trên và dưới.

## Pixel Art Direction

Tất cả decorative graphics là pixel art 8-bit được tạo thủ công, KHÔNG phải CSS pixels, KHÔNG phải smooth vector illustrations. Mỗi sprite dùng một fixed grid (thường 16x16 hoặc 32x32 base), flat fills 1-3 màu mỗi đối tượng, và outline 1px tông tối hơn. Anti-aliasing bị cấm — nếu một đường cong trông mượt, là sai. Pixel cloud là motif được dùng nhiều nhất: ~3-4 sắc thái #e3f1fe và #ffffff với outline 1px #5c6066, luôn trôi nổi, không bao giờ neo vào baseline. Pixel mascot mèo xuất hiện trong app mockup sidebar và làm section accent — cam ấm + xám ấm, không cao quá 80px. Khi nghi ngờ, ít pixel hơn ở kích thước lớn hơn tốt hơn nhiều pixel nhồi vào không gian nhỏ — pixel grid luôn phải đọc được.

## Similar Brands

- **1Password** — Cùng tông friendly-privacy với một màu accent ấm duy nhất và bề mặt trắng-trên-kem sạch sẽ, dù Obscura nghiêng về vui tươi hơn với pixel font.
- **Proton Mail** — Palette logic trustworthy-privacy tương đương — gần đen trên trắng, một màu thương hiệu duy nhất làm hành động, minimal decorative noise.
- **Linear** — Chia sẻ kỷ luật 'một chromatic accent trên nền neutral canvas yên tĩnh' và body type Manrope hiện đại, kiềm chế kết hợp với display voice mạnh mẽ.
- **Oh My Zsh / Pixel-art developer tools** — Cùng từ vựng 8-bit retro typography và cloud-sprite decoration, dù Obscura dùng nó cho sự ấm áp marketing thay vì nỗi nhớ terminal.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-signal-orange: #ff5e24;
  --color-ember-crust: #6c3200;
  --color-cloud-mist: #e3f1fe;
  --color-graphite-ink: #232629;
  --color-paper-white: #ffffff;
  --color-slate-pencil: #5c6066;
  --color-ash-mist: #989ea4;
  --color-blush-shadow: #dbced0;
  --color-midnight-ink: #101828;

  /* Typography — Font Families */
  --font-jersey-10: 'Jersey 10', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-manrope-variable: 'Manrope Variable', 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.43;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-subheading: 18px;
  --leading-subheading: 1.56;
  --text-heading-sm: 36px;
  --leading-heading-sm: 1.11;
  --tracking-heading-sm: -0.9px;
  --text-heading: 48px;
  --leading-heading: 0.85;
  --tracking-heading: -1.2px;
  --text-heading-lg: 60px;
  --leading-heading-lg: 0.85;
  --tracking-heading-lg: -1.5px;
  --text-display: 96px;
  --leading-display: 0.8;
  --tracking-display: -3px;

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

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

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

  /* Border Radius */
  --radius-md: 6px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-3xl-2: 32px;

  /* Named Radii */
  --radius-nav: 6px;
  --radius-cards: 12px;
  --radius-links: 6px;
  --radius-images: 24px;
  --radius-buttons: 6px;
  --radius-cardslarge: 16px;
  --radius-featurepanels: 32px;

  /* Shadows */
  --shadow-xl: rgba(0, 0, 0, 0.01) 0px 49px 30px 0px, rgba(0, 0, 0, 0.03) 0px 22px 22px 0px, rgba(0, 0, 0, 0.03) 0px 5px 12px 0px;
  --shadow-md: rgba(15, 34, 52, 0.01) 0px 27px 11px 0px, rgba(15, 34, 52, 0.02) 0px 15px 9px 0px, rgba(15, 34, 52, 0.04) 0px 7px 7px 0px, rgba(15, 34, 52, 0.04) 0px 2px 4px 0px;
  --shadow-subtle: oklab(1 0 5.96046e-8 / 0.17) 0px 0.5px 0.5px 0.5px inset, oklab(0.598475 0.14309 0.112215 / 0.2) 0px -1px 0.5px 0px inset, rgb(255, 94, 36) 0px 0px 0px 1px;

  /* Surfaces */
  --surface-sky-canvas: #e3f1fe;
  --surface-card-paper: #ffffff;
  --surface-app-window: #f5f5f7;
  --surface-ember-ground: #6c3200;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-signal-orange: #ff5e24;
  --color-ember-crust: #6c3200;
  --color-cloud-mist: #e3f1fe;
  --color-graphite-ink: #232629;
  --color-paper-white: #ffffff;
  --color-slate-pencil: #5c6066;
  --color-ash-mist: #989ea4;
  --color-blush-shadow: #dbced0;
  --color-midnight-ink: #101828;

  /* Typography */
  --font-jersey-10: 'Jersey 10', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-manrope-variable: 'Manrope Variable', 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.43;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-subheading: 18px;
  --leading-subheading: 1.56;
  --text-heading-sm: 36px;
  --leading-heading-sm: 1.11;
  --tracking-heading-sm: -0.9px;
  --text-heading: 48px;
  --leading-heading: 0.85;
  --tracking-heading: -1.2px;
  --text-heading-lg: 60px;
  --leading-heading-lg: 0.85;
  --tracking-heading-lg: -1.5px;
  --text-display: 96px;
  --leading-display: 0.8;
  --tracking-display: -3px;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-128: 128px;
  --spacing-192: 192px;

  /* Border Radius */
  --radius-md: 6px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-3xl-2: 32px;

  /* Shadows */
  --shadow-xl: rgba(0, 0, 0, 0.01) 0px 49px 30px 0px, rgba(0, 0, 0, 0.03) 0px 22px 22px 0px, rgba(0, 0, 0, 0.03) 0px 5px 12px 0px;
  --shadow-md: rgba(15, 34, 52, 0.01) 0px 27px 11px 0px, rgba(15, 34, 52, 0.02) 0px 15px 9px 0px, rgba(15, 34, 52, 0.04) 0px 7px 7px 0px, rgba(15, 34, 52, 0.04) 0px 2px 4px 0px;
  --shadow-subtle: oklab(1 0 5.96046e-8 / 0.17) 0px 0.5px 0.5px 0.5px inset, oklab(0.598475 0.14309 0.112215 / 0.2) 0px -1px 0.5px 0px inset, rgb(255, 94, 36) 0px 0px 0px 1px;
}
```