# Wise Design

> # Wise Design — Style Reference

## Prompt Content

```
# Wise Design — Style Reference
> Quầy hàng chợ đêm neon trên một con phố toàn cầu — bảng hiệu xanh điện rực rỡ hét vang giữa khu chợ đông đúc, rồi giao diện sản phẩm trau chuốt lặng lẽ xuất hiện phía sau.

**Theme:** mixed

Wise Design đánh mạnh như một tấm áp phích in lụa mang tinh thần biểu tình — màu xanh vôi điện (#87ea5c) tràn ngập hero ở độ bão hòa tối đa, rồi chữ màu mực rừng tối (#083400) đập thẳng vào đó ở kích thước display. Bảng màu cố tình không giống fintech: vàng tươi (#ffea4b), đào (#ffbd89), hồng kẹo bông (#ffd5f0), và tím cà tím đậm (#2a0831) cùng tồn tại như một bộ sưu tập tiền tệ toàn cầu. Wise Sans weight 900 với line-height 0.85 là chữ ký — các chữ cái xếp chồng khít đến mức gần như chạm nhau, tạo hiệu ứng nén bảng quảng cáo ở tỷ lệ kỹ thuật số. Pill (border-radius 9999px) là yếu tố UI bo tròn duy nhất, trong khi các khối nội dung lớn dùng bán kính 86px rộng rãi, tạo thẻ bo mềm tương phản với kiểu chữ mạnh mẽ. Hệ thống thiết kế dao động giữa la hét và thì thầm — display type chồng khổng lồ rồi một dòng midsize đơn độc yên tĩnh trên nền trắng.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Lime Volt | `#87ea5c` | `--color-lime-volt` | Nền hero, fill pill button, nền tag danh mục — tín hiệu thương hiệu dễ nhận biết nhất; xanh tươi trên nền mực tối tạo năng lượng mà không fintech xanh nào có được |
| Forest Ink | `#083400` | `--color-forest-ink` | Văn bản chính, headline tối trên nền lime, nav link, fill icon — xanh rừng đậm thay vì đen giữ mọi thứ đúng thương hiệu ngay cả ở kích thước body |
| Volt Yellow | `#ffea4b` | `--color-volt-yellow` | Headline điểm nhấn, màu chữ trang trí trên nền tối — vàng điện kết hợp với đỏ burgundy đậm để tạo độ mạnh tối đa |
| Papaya | `#ffbd89` | `--color-papaya` | Nền thẻ điểm nhấn ấm, highlight phần trang trí |
| Cotton Candy | `#ffd5f0` | `--color-cotton-candy` | Nền điểm nhấn mềm mại, highlight phần trong mosaic grid |
| Aubergine Night | `#2a0831` | `--color-aubergine-night` | Nền thẻ tối, panel tương phản cao trong content grid — tím đen đậm không trung tính |
| Crimson Depth | `#370305` | `--color-crimson-depth` | Nền editorial tối, màu heading trên panel sáng — đỏ gần như đen mang sắc thái tối phong phú mà không trung tính |
| Fog | `#58717a` | `--color-fog` | Văn bản body phụ, màu viền, UI chrome |
| White | `#ffffff` | `--color-white` | Nền trang, bề mặt thẻ, nền phần giữa các khối màu |
| Positive | `#008026` | `--color-positive` | Trạng thái thành công, chỉ báo giao dịch dương |
| Negative | `#cf2929` | `--color-negative` | Trạng thái lỗi, chỉ báo giao dịch âm |
| Accent Blue | `#0097c7` | `--color-accent-blue` | Link tương tác điểm nhấn, trạng thái focus |
| Warning | `#9a6500` | `--color-warning` | Trạng thái cảnh báo, nhãn giao dịch cần chú ý |

## Tokens — Typography

### Inter — Tất cả UI text: nav link, body copy, subheading, và medium display text. Weight 400 cho body, 600 cho subheading và label. Cài đặt 'ss01' và letter-spacing âm ở kích thước lớn (-0.03em ở 72px xuống -0.005em ở 22px) giữ chữ khít mà không bị nén. · `--font-inter`
- **Thay thế:** Inter (Google Fonts — đây chính là Inter)
- **Weights:** 400, 600
- **Kích thước:** 16px, 18px, 22px, 25px, 45px, 58px, 72px, 432px
- **Line height:** 1.00 – 1.50 tùy kích thước (display dùng 1.00–1.03, body dùng 1.44–1.50)
- **Letter spacing:** -2.16px ở 72px, -1.39px ở 58px, -0.50px ở 45px, -0.18px ở 25px, -0.12px ở 22px, -0.09px ở 18px, -0.08px ở 16px
- **OpenType features:** `"calt", "ss01"`
- **Vai trò:** Tất cả UI text: nav link, body copy, subheading, và medium display text. Weight 400 cho body, 600 cho subheading và label. Cài đặt 'ss01' và letter-spacing âm ở kích thước lớn (-0.03em ở 72px xuống -0.005em ở 22px) giữ chữ khít mà không bị nén.

### Wise Sans — Chỉ dùng cho hero và section display headlines. Weight 900 với line-height 0.85 là động thái typography định hình — các dòng chữ xếp chồng khít đến mức cap-height của một dòng gần chạm vùng descender của dòng trên, tạo kiểu chữ xếp chồng nén như bảng quảng cáo. Đây là chữ ký thị giác của hệ thống thiết kế. · `--font-wise-sans`
- **Thay thế:** Obviously (kiểu display siêu nén tương tự), hoặc Neue Haas Grotesk Display ở weight ultra
- **Weights:** 400, 900
- **Kích thước:** 187px, 288px, 306px, 374px, 562px
- **Line height:** 0.85
- **OpenType features:** `"ss01", "calt"`
- **Vai trò:** Chỉ dùng cho hero và section display headlines. Weight 900 với line-height 0.85 là động thái typography định hình — các dòng chữ xếp chồng khít đến mức cap-height của một dòng gần chạm vùng descender của dòng trên, tạo kiểu chữ xếp chồng nén như bảng quảng cáo. Đây là chữ ký thị giác của hệ thống thiết kế.

### Zen Kaku Gothic New — Mega-display dùng một lần cho showcase ký tự CJK — thể hiện phạm vi typography đa ngôn ngữ của hệ thống · `--font-zen-kaku-gothic-new`
- **Thay thế:** Noto Sans JP weight 600
- **Weights:** 600
- **Kích thước:** 432px
- **Line height:** 1.00
- **OpenType features:** `"calt"`
- **Vai trò:** Mega-display dùng một lần cho showcase ký tự CJK — thể hiện phạm vi typography đa ngôn ngữ của hệ thống

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| body-sm | 16px | 1.5 | -0.08px | `--text-body-sm` |
| body | 18px | 1.44 | -0.09px | `--text-body` |
| subheading | 22px | 1.25 | -0.12px | `--text-subheading` |
| heading-sm | 25px | 1.25 | -0.18px | `--text-heading-sm` |
| heading | 45px | 1.17 | -0.5px | `--text-heading` |
| heading-lg | 58px | 1.03 | -1.39px | `--text-heading-lg` |
| display | 72px | 1 | -2.16px | `--text-display` |

## Tokens — Spacing & Shapes

**Đơn vị cơ bản:** 4px

**Mật độ:** spacious

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 5 | 5px | `--spacing-5` |
| 10 | 10px | `--spacing-10` |
| 11 | 11px | `--spacing-11` |
| 14 | 14px | `--spacing-14` |
| 17 | 17px | `--spacing-17` |
| 20 | 20px | `--spacing-20` |
| 22 | 22px | `--spacing-22` |
| 24 | 24px | `--spacing-24` |
| 27 | 27px | `--spacing-27` |
| 29 | 29px | `--spacing-29` |
| 35 | 35px | `--spacing-35` |
| 43 | 43px | `--spacing-43` |
| 63 | 63px | `--spacing-63` |
| 101 | 101px | `--spacing-101` |
| 202 | 202px | `--spacing-202` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| body | 1440px |
| tags | 9999px |
| cards | 86px |
| buttons | 9999px |
| contentBlocks | 86px |

### Layout

- **Page max-width:** 1440px
- **Section gap:** 80-120px
- **Card padding:** 24px
- **Element gap:** 12px

## Components

### Lime Pill Button
**Vai trò:** Primary CTA và navigation tag danh mục

backgroundColor: #87ea5c (display-p3), color: #083400, borderRadius: 9999px, paddingTop: 11px, paddingBottom: 11px, paddingRight: 24px, paddingLeft: 24px. Font: Inter 400 16px. Không viền — fill lime chính là button. Dùng cho navigation danh mục 'Components', 'Flags', 'Tone of voice'.

### Ghost Pill Button
**Vai trò:** Hành động navigation phụ hoặc trong suốt

backgroundColor: transparent, color: #083400, borderRadius: 9999px, paddingTop: 11px, paddingBottom: 11px, paddingRight: 24px, paddingLeft: 24px. Không viền nhìn thấy được. Xuất hiện trên cùng bề mặt nền lime nơi fill lime sẽ bị thừa.

### Hero Display Block
**Vai trò:** Phần tuyên bố thương hiệu toàn viewport

backgroundColor: #87ea5c, full-width. Wise Sans weight 900 ở 288–562px, color: #083400, lineHeight: 0.85. Văn bản căn giữa và xếp chồng — tối đa 2 dòng, mỗi từ hoặc cặp từ gần như lấp đầy chiều rộng. Không giảm padding ở bất kỳ viewport nào — type lấp đầy edge-to-edge một cách mạnh mẽ.

### Navigation Bar
**Vai trò:** Navigation cấp site

backgroundColor: #87ea5c (khớp với hero, liền mạch), logo căn trái với wordmark Wise màu #083400. Nav link căn giữa-phải: 'Design at Wise', 'Foundations', 'Components', 'Patterns', 'Resources' bằng Inter 400 16px #083400 với letter-spacing -0.08px. Icon search (kính lúp) ở ngoài cùng bên phải. Không có divider giữa nav và hero — cố tình hợp nhất.

### Mosaic Content Card
**Vai trò:** Tile showcase phần của design system trong scrolling grid

backgroundColor thay đổi theo từng tile: #87ea5c, #ffd5f0, #ffbd89, #2a0831, #370305, #ffffff. borderRadius: 86px. Chứa display type lớn (Wise Sans 900), minh họa, nhiếp ảnh, hoặc product UI full-bleed trong giới hạn thẻ bo tròn. Mỗi tile là một câu chuyện thị giác độc lập cho một phần của design system.

### Editorial Subheading
**Vai trò:** Văn bản giới thiệu phần giữa các khối thị giác

Inter 600 45px, color: #083400, lineHeight: 1.17, letterSpacing: -0.5px. Hiển thị trên nền #ffffff với khoảng trắng rộng rãi phía trên và dưới (80px+). Dùng cho các tuyên bố như 'Made for the world' — một dòng ngắn, căn giữa hoặc căn trái.

### Typography Specimen Card
**Vai trò:** Tile showcase typography của design system

backgroundColor: #083400 (rừng tối), borderRadius: 86px. Wise Sans weight 900 ở 288px+, color: #87ea5c, lineHeight: 0.85. 'WISE SANS' xếp chồng display — chữ lime trên thẻ rừng. Thể hiện cách phối màu đảo ngược so với hero.

### Category Label Tag
**Vai trò:** Định danh phần hoặc loại nội dung trong mosaic grid

Giống Lime Pill Button — backgroundColor: #87ea5c, color: #083400, borderRadius: 9999px, padding: 11px 24px, Inter 400 16px. Đặt nổi ở cạnh dưới của mosaic section để gắn nhãn danh mục nội dung ('Flags', 'Components', 'Tone of voice').

## Do's and Don'ts

### Do
- Dùng Wise Sans weight 900 với lineHeight 0.85 cho tất cả hero display text — các dòng phải xếp chồng khít, gần như chạm nhau, ở tối thiểu 288px
- Lấp đầy toàn bộ hero và nav section với #87ea5c — lime là nền, không phải điểm nhấn; nó phải chiếm ưu thế, không chỉ làm accent
- Kết hợp #083400 (Forest Ink) làm màu văn bản chính trên nền lime và trắng — không bao giờ dùng đen thuần (#000000) ở bất kỳ đâu trong hệ thống
- Gán border-radius 86px cho content card và mosaic tile; dành 9999px riêng cho pill button và tag
- Dùng toàn bộ bảng màu điểm nhấn (#ffea4b, #ffbd89, #ffd5f0, #2a0831, #370305) làm nền thẻ full-bleed — mỗi màu là một 'căn phòng' riêng biệt, không phải tông màu nhẹ
- Áp dụng Inter font-feature-settings: "calt", "ss01" — biến thể ss01 thay đổi các letterform cụ thể là một phần của bản sắc typography
- Duy trì letter-spacing âm trên Inter ở tất cả kích thước display: -2.16px ở 72px, giảm dần xuống -0.08px ở 16px

### Don't
- Không bao giờ dùng #87ea5c làm chi tiết điểm nhấn nhỏ — nó phải được dùng ở tỷ lệ lớn (nền đầy đủ, button đầy đủ) hoặc không dùng
- Không dùng weight 700 cho body text — Inter chỉ dùng weight 400 (body) và 600 (label/subheading)
- Không bao giờ áp dụng drop shadow hoặc hiệu ứng elevation — hệ thống dùng tương phản màu sắc và tỷ lệ cho phân cấp, không dùng độ sâu bóng
- Không dùng thẻ hình chữ nhật (0px radius) — content block phải dùng radius 86px hoặc pill 9999px; góc nhọn hoàn toàn vắng mặt trong hệ thống
- Không bao giờ dùng xanh fintech thông thường làm màu thương hiệu chính — #0097c7 chỉ tồn tại cho semantic accent link và trạng thái focus, không bao giờ là primary CTA hoặc biểu hiện thương hiệu
- Không đặt Wise Sans ở kích thước dưới 187px — nó là typeface chỉ dành cho display; Inter xử lý tất cả UI và body text
- Không bao giờ trộn nhiều màu nền chromatic trong một section — mỗi panel là đơn sắc, chỉ chuyển màu ở ranh giới section đầy đủ

## Elevation

Không dùng shadow trong toàn bộ hệ thống — elevation và phân cấp được truyền đạt hoàn toàn qua tương phản màu sắc và tỷ lệ. Một thẻ trắng trên nền lime được đọc là 'nổi' đơn giản vì màu trắng phá vỡ trường màu. Radius 86px trên thẻ báo hiệu ranh giới mà không cần độ sâu bóng. Đây là một flat design system nơi bảng màu sống động làm tất cả công việc không gian mà shadow thường đảm nhận.

## Imagery

Ba chế độ thị giác riêng biệt cùng tồn tại trong hệ thống. Thứ nhất: nhiếp ảnh thế giới thực full-bleed (cảnh đường phố với cờ, hình ảnh thành phố) dùng full-width không border-radius — thô, không che đậy, mang phong cách tài liệu, được xử lý như divider phần tạo không khí hơn là minh họa sản phẩm. Thứ hai: ảnh chụp màn hình product UI (thẻ giao dịch, giao diện ứng dụng) nằm trong thẻ trắng radius 86px, nổi trên nền màu — UI là showcase sản phẩm. Thứ ba: mosaic gồm các tile khối màu chứa cờ (crop hình tròn), minh họa máy bay giấy, ký hiệu tiền tệ, và nhân vật minh họa — những yếu tố này phẳng, đồ họa, mang màu thương hiệu và trang trí. Icon hiển thị trong transaction UI là stroke-style đường viền ở weight ~1.5px, đơn sắc #083400. Mật độ tổng thể là nhiều hình ảnh trong vùng mosaic nhưng text-dominant trong phần editorial — hệ thống xen kẽ giữa bữa tiệc thị giác và sự im lặng typography.

## Layout

Section full-bleed không có max-width constraint trên hero và color block; content section dùng ~1152-1440px max-width căn giữa. Hero là full-viewport màu xanh vôi với Wise Sans stacked display type, không có hình ảnh — type CHÍNH LÀ hình ảnh. Navigation hợp nhất liền mạch với nền hero (cùng #87ea5c), tạo một trường màu liên tục duy nhất từ đầu trang qua hero. Nhịp điệu section xen kẽ: hero màu khổng lồ → tạm dừng editorial trắng → nhiếp ảnh full-bleed → mosaic card grid → section trắng → panel tối → lặp lại. Không có divider trang trí — màu sắc là divider. Mosaic grid dùng bố cục tile 3 cột không đều, nơi tile khác nhau về chiều cao và màu nền, tạo hiệu ứng collage. Content section riêng lẻ dùng single-column căn giữa cho tuyên bố editorial và 2-column cho giải thích tính năng. Khoảng trống dọc rộng rãi (80-120px) giữa các section chính đảm bảo mỗi khối màu được đọc như một nhịp thị giác riêng biệt.

## Agent Prompt Guide

**Tham chiếu màu nhanh**
- Văn bản (chính): #083400 (Forest Ink)
- Nền (hero/thương hiệu): #87ea5c (Lime Volt)
- Nền (trang): #ffffff
- Văn bản phụ / viền: #58717a (Fog)
- Fill CTA button: #87ea5c với text #083400
- Panel tối: #2a0831 (Aubergine Night) hoặc #370305 (Crimson Depth)
- Vàng điểm nhấn: #ffea4b

**Ví dụ Component Prompts**

1. **Hero Section**: Nền #87ea5c full-bleed, không padding. Wise Sans (thay thế: Obviously hoặc Impact) weight 900, color #083400, lineHeight 0.85, hai dòng xếp chồng ở ~288px mỗi dòng gần như lấp đầy chiều rộng. Nav bar cùng nền #87ea5c, logo Wise bên trái, link Inter 400 16px #083400 căn giữa-phải, letterSpacing -0.08px.

2. **Category Tag**: backgroundColor #87ea5c, color #083400, borderRadius 9999px, padding 11px 24px, Inter 400 16px, không viền. Dùng cho label như 'Components', 'Flags', 'Tone of voice'.

3. **Transaction Card**: backgroundColor #ffffff, borderRadius 86px, padding 24px. Hàng header: 'Transactions' Inter 600 16px #083400 bên trái, 'See all' Inter 400 16px #083400 gạch chân bên phải. Hai hàng giao dịch: icon hình tròn 32px đường viền, tên Inter 600 16px #083400, số tiền Inter 600 16px #083400 căn phải, trạng thái + ngày Inter 400 14px #58717a bên dưới tên.

4. **Typography Specimen Card (dark)**: backgroundColor #083400, borderRadius 86px, full card. Wise Sans weight 900, color #87ea5c, lineHeight 0.85, text xếp chồng ở 288px+. Đây là hero đảo ngược — lime trên rừng.

5. **Editorial Section**: backgroundColor #ffffff, paddingTop 80px, paddingBottom 80px. Một dòng căn giữa: Inter 600 45px #083400 letterSpacing -0.5px lineHeight 1.17. Không có yếu tố trang trí — weight và tỷ lệ mang cả section.

## Wise Sans Usage Rules

Wise Sans là typeface tùy chỉnh chỉ dùng cho các khoảnh khắc thương hiệu ở tỷ lệ display. Nó không được xuất hiện ở kích thước dưới 187px. Đặc điểm xác định của nó là lineHeight 0.85 — không bao giờ tăng giá trị này trên display headline nếu không hiệu ứng nén xếp chồng sẽ mất. Hai weight (400, 900) phục vụ vai trò khác nhau: weight 900 cho hero stacked headline trong cách phối màu lime-trên-rừng hoặc rừng-trên-lime; weight 400 cho khoảnh khắc display phụ. OpenType feature 'ss01' phải được bật. Khi Wise Sans không có sẵn, dùng một heavy-weight condensed grotesque (Obviously, Neue Haas Grotesk Display 900, hoặc Anton) — độ nén và weight là không thể thương lượng.

## Color Block System

Bảng màu hoạt động như một tập hợp các 'căn phòng' hơn là một hệ thống phân cấp. Mỗi section chính chọn một màu nền từ bộ và lấp đầy toàn bộ chiều rộng viewport. Sáu nền chính là: #87ea5c (Lime Volt), #ffffff (White), #083400 (Forest Ink), #2a0831 (Aubergine Night), #370305 (Crimson Depth), #ffbd89 (Papaya), #ffd5f0 (Cotton Candy). Văn bản trên nền tối (#083400, #2a0831, #370305) dùng #ffffff hoặc #ffea4b. Văn bản trên nền sáng/lime dùng #083400. Không bao giờ dùng nhiều hơn một màu nền trong một section band. Chuyển tiếp giữa các section là hard cuts — không gradient, không blend.

## Similar Brands

- **Monzo** — Màu thương hiệu coral/hot pink chiếm ưu thế trên sản phẩm fintech — một màu bão hòa duy nhất tràn ngập UI, thách thức quy ước ngành
- **Duolingo** — Xanh vôi/tươi làm màu thương hiệu chính với xử lý type dark-on-bright và pill button siêu bo tròn ở 9999px
- **Figma (brand site)** — Tài liệu design system với mosaic tile khối màu, mỗi tile một màu sắc riêng biệt showcase các thành phần hệ thống
- **Cash App** — Cùng màu thương hiệu xanh vôi trong bối cảnh fintech, pill button, và text xanh rừng đậm trên nền sáng
- **Mailchimp** — Editorial display type đậm (siêu nặng, xếp chồng) trên nền màu thương hiệu rực rỡ làm hero treatment chính

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-lime-volt: #87ea5c;
  --color-forest-ink: #083400;
  --color-volt-yellow: #ffea4b;
  --color-papaya: #ffbd89;
  --color-cotton-candy: #ffd5f0;
  --color-aubergine-night: #2a0831;
  --color-crimson-depth: #370305;
  --color-fog: #58717a;
  --color-white: #ffffff;
  --color-positive: #008026;
  --color-negative: #cf2929;
  --color-accent-blue: #0097c7;
  --color-warning: #9a6500;

  /* Typography — Font Families */
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-wise-sans: 'Wise Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-zen-kaku-gothic-new: 'Zen Kaku Gothic New', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-body-sm: 16px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: -0.08px;
  --text-body: 18px;
  --leading-body: 1.44;
  --tracking-body: -0.09px;
  --text-subheading: 22px;
  --leading-subheading: 1.25;
  --tracking-subheading: -0.12px;
  --text-heading-sm: 25px;
  --leading-heading-sm: 1.25;
  --tracking-heading-sm: -0.18px;
  --text-heading: 45px;
  --leading-heading: 1.17;
  --tracking-heading: -0.5px;
  --text-heading-lg: 58px;
  --leading-heading-lg: 1.03;
  --tracking-heading-lg: -1.39px;
  --text-display: 72px;
  --leading-display: 1;
  --tracking-display: -2.16px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-black: 900;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-10: 10px;
  --spacing-11: 11px;
  --spacing-14: 14px;
  --spacing-17: 17px;
  --spacing-20: 20px;
  --spacing-22: 22px;
  --spacing-24: 24px;
  --spacing-27: 27px;
  --spacing-29: 29px;
  --spacing-35: 35px;
  --spacing-43: 43px;
  --spacing-63: 63px;
  --spacing-101: 101px;
  --spacing-202: 202px;

  /* Layout */
  --page-max-width: 1440px;
  --section-gap: 80-120px;
  --card-padding: 24px;
  --element-gap: 12px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-full: 86.4px;
  --radius-full-2: 1152px;
  --radius-full-3: 1440px;
  --radius-full-4: 9999px;

  /* Named Radii */
  --radius-body: 1440px;
  --radius-tags: 9999px;
  --radius-cards: 86px;
  --radius-buttons: 9999px;
  --radius-contentblocks: 86px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-lime-volt: #87ea5c;
  --color-forest-ink: #083400;
  --color-volt-yellow: #ffea4b;
  --color-papaya: #ffbd89;
  --color-cotton-candy: #ffd5f0;
  --color-aubergine-night: #2a0831;
  --color-crimson-depth: #370305;
  --color-fog: #58717a;
  --color-white: #ffffff;
  --color-positive: #008026;
  --color-negative: #cf2929;
  --color-accent-blue: #0097c7;
  --color-warning: #9a6500;

  /* Typography */
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-wise-sans: 'Wise Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-zen-kaku-gothic-new: 'Zen Kaku Gothic New', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-body-sm: 16px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: -0.08px;
  --text-body: 18px;
  --leading-body: 1.44;
  --tracking-body: -0.09px;
  --text-subheading: 22px;
  --leading-subheading: 1.25;
  --tracking-subheading: -0.12px;
  --text-heading-sm: 25px;
  --leading-heading-sm: 1.25;
  --tracking-heading-sm: -0.18px;
  --text-heading: 45px;
  --leading-heading: 1.17;
  --tracking-heading: -0.5px;
  --text-heading-lg: 58px;
  --leading-heading-lg: 1.03;
  --tracking-heading-lg: -1.39px;
  --text-display: 72px;
  --leading-display: 1;
  --tracking-display: -2.16px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-10: 10px;
  --spacing-11: 11px;
  --spacing-14: 14px;
  --spacing-17: 17px;
  --spacing-20: 20px;
  --spacing-22: 22px;
  --spacing-24: 24px;
  --spacing-27: 27px;
  --spacing-29: 29px;
  --spacing-35: 35px;
  --spacing-43: 43px;
  --spacing-63: 63px;
  --spacing-101: 101px;
  --spacing-202: 202px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-full: 86.4px;
  --radius-full-2: 1152px;
  --radius-full-3: 1440px;
  --radius-full-4: 9999px;
}
```