# Busuu

> Busuu — Style Reference

## Prompt Content

```
# Busuu — Style Reference
> tấm hộ chiếu vui tươi kết nối toàn cầu. Bầu trời gradient rực rỡ, bong bóng lời chào và cờ hình tròn khiến toàn bộ giao diện như một lời mời ấm áp đến với thế giới.

**Theme:** light

Design system của Busuu toát lên năng lượng ấm áp, dễ tiếp cận thông qua hero gradient tím-xanh rực rỡ, tràn đầy sự tự tin trước khi chuyển sang không gian làm việc nhẹ nhàng, gần như trắng. Giao diện chủ đạo được xây dựng trên nền canvas xanh lam rất nhạt (#f2f7fd) với các thẻ trắng nổi bên trên, và một màu spring-green bão hòa duy nhất (#11ee92) đóng vai trò là điểm nhấn hành động chính — một lựa chọn độc đáo giúp nó ngay lập tức khác biệt giữa hàng loạt CTA xanh lam trong edtech. Typography là font tùy chỉnh (Nista) với bộ weight nhỏ gọn, thiên về đậm: weight 800 cho display, 700 cho heading, và 400 sạch sẽ cho body, mang đến cho hệ thống giọng nói tự tin, hơi hướng hình học. Ngôn ngữ hình ảnh được minh họa nhiều — character art phẳng, nhiều màu sắc với khung hình tròn — và bố cục dựa trên padding rộng rãi, pill-shaped controls và ô cờ hình tròn để việc học ngôn ngữ toàn cầu trở nên trực quan và hấp dẫn thay vì hàn lâm.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Deep Indigo | `#3b1e90` | `--color-deep-indigo` | Mép trái của hero gradient — neo giữ bầu trời tím của landing banner |
| Signal Blue | `#116eee` | `--color-signal-blue` | Brand links, nav accents, heading highlights, logo wordmark — màu xanh duy nhất mang ý nghĩa thương hiệu |
| Spring Mint | `#11ee92` | `--color-spring-mint` | Green supporting accent cho các chi tiết trang trí và điểm nhấn tần suất thấp. Không nâng cấp nó thành màu CTA chính |
| Hero Sky Blue | `linear-gradient(90deg, #3b1e9 0%, #5a3cc4 30%, #3a6ef0 100%)` | `--color-hero-sky-blue` | Mép phải của hero gradient — chuyển từ deep indigo sang xanh lam sạch hơn, làm dịu tâm trạng của landing page |
| Charcoal | `#252b2f` | `--color-charcoal` | Màu body text và heading chính — mềm hơn đen thuần, giữ cho văn bản dài thoải mái khi đọc |
| Pure Black | `#000000` | `--color-pure-black` | Icon strokes, decorative illustration linework, text có độ tương phản cao nhất — dùng khi cần weight tối đa |
| Canvas Mist | `#f2f7fd` | `--color-canvas-mist` | Nền trang — gần trắng pha chút xanh lam nhẹ, lớp nền tĩnh lặng bên dưới hero |
| Paper White | `#ffffff` | `--color-paper-white` | Bề mặt thẻ, nền nav, content panels — nằm một lớp trên canvas mist |
| Steel Border | `#d6dee6` | `--color-steel-border` | Viền input, đường phân cách, đường cấu trúc tinh tế — tông màu lạnh để hài hòa với canvas mist |
| Slate Caption | `#666e7e` | `--color-slate-caption` | Muted helper text, secondary body copy, metadata — dễ đọc nhưng lùi lại so với charcoal |
| Shadow Gray | `#b3b3b3` | `--color-shadow-gray` | Lớp elevation mềm và nền bóng nút — dùng trong shadow stack 1px tinh tế |
| Trustpilot Star | `#ffcf00` | `--color-trustpilot-star` | Màu tô sao đánh giá trên dòng Trustpilot social-proof — màu vàng duy nhất trong hệ thống, chỉ dùng cho xếp hạng |

## Tokens — Typography

### Nista — Kiểu chữ duy nhất cho toàn bộ hệ thống — Sự ấm áp hình học và bộ weight thiên về đậm của Nista xử lý mọi thứ từ metadata 10px đến display headlines 40px. Weight 800 trên hero text tạo uy quyền mà không cảm giác nặng nề hay công ty; body 400 giữ cho mô tả bài học dài thoáng đãng. Thay thế: 'Poppins' hoặc 'Nunito' cho chất hình học thân thiện, hoặc 'DM Sans' cho một lựa chọn sạch sẽ hơn. · `--font-nista`
- **Thay thế:** Poppins
- **Weights:** 400, 700, 800
- **Cỡ chữ:** 10, 12, 14, 16, 18, 24, 36, 40
- **Line height:** 1.14, 1.20, 1.30, 1.33, 1.50, 1.70
- **Letter spacing:** normal trên tất cả các cỡ — metrics tự nhiên của Nista đủ chặt nên không cần điều chỉnh tracking
- **Vai trò:** Kiểu chữ duy nhất cho toàn bộ hệ thống — Sự ấm áp hình học và bộ weight thiên về đậm của Nista xử lý mọi thứ từ metadata 10px đến display headlines 40px. Weight 800 trên hero text tạo uy quyền mà không cảm giác nặng nề hay công ty; body 400 giữ cho mô tả bài học dài thoáng đãng. Thay thế: 'Poppins' hoặc 'Nunito' cho chất hình học thân thiện, hoặc 'DM Sans' cho một lựa chọn sạch sẽ hơn.

### Type Scale

| Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 10px | 1.2 | — | `--text-caption` |
| body | 14px | 1.5 | — | `--text-body` |
| body-lg | 16px | 1.5 | — | `--text-body-lg` |
| subheading | 18px | 1.5 | — | `--text-subheading` |
| heading-sm | 24px | 1.3 | — | `--text-heading-sm` |
| heading | 36px | 1.14 | — | `--text-heading` |
| display | 40px | 1.14 | — | `--text-display` |

## Tokens — Spacing & Shapes

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

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 28 | 28px | `--spacing-28` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 64 | 64px | `--spacing-64` |
| 120 | 120px | `--spacing-120` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| cards | 16px |
| inputs | 5px |
| buttons | 45px |
| circles | 9999px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| subtle | `rgba(0, 0, 0, 0.1) 0px 1px 2px 0px` | `--shadow-subtle` |

### Layout

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

## Components

### Hero Gradient Banner
**Vai trò:** Full-bleed landing section

Deep indigo to sky blue linear gradient (90deg, #3b1e9 → #5a3cc4 → #3a6ef0), full viewport width, chứa white headline ở 40px/1.14 weight 800, body text 16px màu trắng, và illustrated character art với speech bubbles nổi trên bản đồ thế giới mờ. Không có card chrome — gradient CHÍNH LÀ bề mặt.

### Primary CTA Button (Spring Mint)
**Vai trò:** Hành động chuyển đổi chính

Filled pill button: nền #11ee92, text #252b2f weight 700, 14-16px, padding 20px ngang x ~12px dọc, border-radius 45px. Trên hero gradient, nó nổi bật rực rỡ; trên các section trắng, nó mang năng lượng sôi động. Đây là filled action màu sắc DUY NHẤT trong hệ thống.

### Outlined Nav Button (Learn for free)
**Vai trò:** Hành động nav thứ cấp với brand border

Nền trong suốt, viền 1.5-2px solid #116eee, text #116eee, pill radius 45px, padding ~20px ngang. Phản chiếu mint CTA về hình dạng nhưng dùng brand blue để báo hiệu điểm vào nhẹ nhàng hơn.

### Ghost Nav Button (Log in)
**Vai trò:** Hành động cấp ba dạng text

Không fill, không border, text #252b2f, pill radius 45px, padding ~20px ngang. Nằm cùng hàng với outlined button, tạo hệ thống phân cấp filled → outlined → ghost.

### Top Navigation Bar
**Vai trò:** Header toàn trang

Nền trắng (#ffffff), logo lockup bên trái ('Busuu' màu #116eee + tag 'A Chegg service'), nav links và action buttons căn phải. Horizontal padding ~20px, shadow 1px tinh tế hoặc không shadow. Fixed/sticky khi cuộn.

### Language Flag Tile
**Vai trò:** Thẻ chọn ngôn ngữ trong carousel

Container hình tròn (border-radius 9999px), nền trắng, chứa ảnh cờ hình tròn (cũng full radius). Tên ngôn ngữ bên dưới ở 14px #252b2f. Shadow: rgba(0,0,0,0.1) 0px 1px 2px 0px. Các tile được sắp xếp trong một hàng ngang có thể cuộn với chevron controls ở hai mép.

### Trustpilot Rating Strip
**Vai trò:** Social proof bên dưới primary CTA

Bố cục ngang inline: wordmark 'Excellent' ở 12px #252b2f, năm ngôi sao xanh lá (#00b67a Trustpilot green hoặc system green) thành một hàng, số lượng đánh giá ở 12px #666e7e, logo Trustpilot nhỏ ở cuối. Nằm trực tiếp bên dưới hero CTA.

### Carousel Navigation Arrows
**Vai trò:** Scroll controls cho hàng ngôn ngữ

Ghost buttons hình tròn nằm hai bên hàng language tile. Icon chevron xám nhạt (#d6dee6), không fill, đường kính 40px. Thuần túy định hướng, trọng lượng thị giác tối thiểu.

### Section Heading
**Vai trò:** Text tiêu đề section

'I want to learn' ở 24-36px, weight 700, color #252b2f, căn giữa phía trên các hàng nội dung. Sử dụng heading-sm đến heading từ type scale.

### Display Hero Headline
**Vai trò:** Tiêu đề hero của landing page

40px Nista weight 800, line-height 1.14, color trắng trên hero gradient, căn trái trong cột nội dung. Đậm và tự tin mà không mang tính công ty.

### Hero Body Copy
**Vai trò:** Đoạn văn hỗ trợ bên dưới hero headline

16px Nista weight 400, line-height 1.5, trắng ở độ mờ ~90%, max-width ~480px. Nằm giữa headline và CTA với gap 20px.

### Language Selector Dropdown
**Vai trò:** Bộ chọn ngôn ngữ ở footer

Native select element tiêu chuẩn, border-radius 5px, border 1px #d6dee6, text #252b2f, 14px. Nhãn 'Display Language:' phía trên in đậm #252b2f 14px. Nằm trên nền canvas mist trong khu vực footer.

### Footer Band
**Vai trò:** Footer trang với locale controls

Nền mist nhạt (#f2f7fd), padding dọc rộng rãi (~40-60px), chứa language selector và links. Không có border hoặc divider nặng — chảy tự nhiên từ canvas.

## Do's and Don'ts

### Do
- Sử dụng mint pill button (#11ee92 fill, 45px radius) làm primary action duy nhất trên mọi màn hình — không bao giờ giới thiệu màu hành động thứ hai.
- Neo mọi full-bleed hero hoặc banner bằng indigo-to-sky-blue linear gradient (90deg, #3b1e9 → #5a3cc4 → #3a6ef0) khi cần một landing moment tràn đầy năng lượng.
- Đặt nền trang là #f2f7fd và thả nổi các thẻ trên #ffffff để giữ không gian làm việc mát mẻ, tĩnh lặng, pha chút xanh lam.
- Sử dụng Nista weight 800 ở 36-40px cho display và weight 400 ở 14-16px cho body — sự tương phản bold/regular là giọng nói của hệ thống.
- Đóng khung mọi lựa chọn ngôn ngữ hoặc danh mục trong container hình tròn (border-radius 9999px) với shadow 1px ở rgba(0,0,0,0.1) 0px 1px 2px — hình tròn là signature shape của hệ thống.
- Sử dụng #116eee độc quyền cho các khoảnh khắc nhận diện thương hiệu (logo, links, nav accents) — không bao giờ dùng làm nền filled action.
- Áp dụng padding 20px cho thẻ, 64px giữa các section, và 10-20px giữa các element để duy trì nhịp điệu thoải mái, dễ thở.

### Don't
- Không dùng mint (#11ee92) cho bất kỳ thứ gì khác ngoài primary filled CTA — nó phải hiếm để giữ được sức mạnh.
- Không xếp chồng nhiều shadow hoặc sử dụng elevation nặng — hệ thống cố tình phẳng với một shadow 1px duy nhất làm tín hiệu độ sâu sâu nhất.
- Không giới thiệu brand blue thứ hai hoặc thay thế #116eee — Signal Blue là màu xanh duy nhất mang ý nghĩa thương hiệu.
- Không sử dụng góc nhọn trên các controls chính — buttons phải là pill 45px, tiles phải là hình tròn, và cards phải là 16px hoặc tròn hơn.
- Không đặt body text bằng pure black (#000000) cho văn bản dài — sử dụng charcoal #252b2f để đọc thoải mái; dành màu đen cho icons và illustration linework.
- Không đặt màu vàng ở bất kỳ đâu ngoại trừ Trustpilot star — #ffcf00 được dành riêng cho ngữ cảnh xếp hạng.
- Không phá vỡ tông màu minh họa, vui tươi bằng stock photography, corporate gradients hoặc data tables dày đặc — hệ thống do character-driven, không phải chart-driven.

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Canvas Mist | `#f2f7fd` | Nền trang — lớp nền tĩnh lặng cho tất cả nội dung bên dưới hero |
| 1 | Paper White | `#ffffff` | Bề mặt thẻ, nền language tile, nav bar |
| 2 | Hero Gradient | `#3b1e9` | Full-bleed landing banner — deep indigo to sky blue gradient với illustrated character art |

## Elevation

- **Language flag tiles và card surfaces:** `rgba(0, 0, 0, 0.1) 0px 1px 2px 0px`

## Imagery

Ngôn ngữ hình ảnh là illustration-first: character art phẳng, nhiều màu sắc với các dạng tròn, tóc đen và đặc điểm khuôn mặt đơn giản hóa, đặt trên các vầng hào quang pastel hình tròn. Speech bubbles chứa từ chào hỏi bằng các hệ thống chữ viết khác nhau ('Ciao!', 'Bonjour!', 'Hello!', '你好') bay quanh các nhân vật, củng cố chủ đề đa ngôn ngữ một cách trực quan. Một đường viền bản đồ thế giới mờ màu xanh nhạt nằm phía sau hero illustration. Không có ảnh chụp nào xuất hiện trong giao diện hiển thị — mọi yếu tố con người hoặc ngữ cảnh đều được vẽ. Icons tối giản và hình học (chevron, cờ trong hình tròn, xếp hạng sao). Cách xử lý tổng thể là tươi sáng, thân thiện và hơi hoạt hình, với các màu chính được sử dụng tự do trong illustrations trong khi UI xung quanh vẫn trung tính và tĩnh lặng.

## Layout

Mô hình trang được giới hạn max-width (~1200px) trên nền full-bleed light mist canvas. Hero phá vỡ container bằng một gradient banner toàn chiều rộng chứa bố cục hai cột: text stack bên trái (headline, body, CTA, social proof) và illustration bên phải. Bên dưới hero, các content sections nằm trên #f2f7fd với thẻ trắng và khoảng cách dọc 64px rộng rãi. Section 'I want to learn' sử dụng heading căn giữa phía trên một hàng ngang có thể cuộn gồm các language tile hình tròn với chevron controls ở hai bên. Nhịp điệu section nhất quán: không gian thở rộng rãi, không có divider nặng, chuyển tiếp liền mạch giữa các band. Navigation là một sticky top bar trắng đơn giản với logo bên trái, action buttons bên phải — không có mega-menu, không có sidebar. Footer là một light band duy nhất với locale controls.

## Agent Prompt Guide

**Quick Color Reference**
- text: #252b2f (charcoal body), #000000 (icons/illustration), #666e7e (muted/helper)
- background: #f2f7fd (canvas), #ffffff (cards/nav)
- border: #d6dee6 (inputs, dividers)
- accent: #116eee (Signal Blue — links, logo, nav highlights)
- primary action: không có màu CTA riêng biệt
- hero gradient: #3b1e90 → #5a3cc4 → #3a6ef0 (90deg)
- shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px
- radius: 45px (buttons), 9999px (circles/tiles), 16px (cards), 5px (inputs)

**3-5 Example Component Prompts**

1. **Tạo một hero banner:** Full-bleed background với linear-gradient(90deg, #3b1e90 0%, #5a3cc4 30%, #3a6ef0 100%). Cột trái: headline 'Learn a language, live a new life' ở Nista 40px weight 800, trắng, line-height 1.14. Bên dưới, body text 16px weight 400, trắng, max-width 480px, gap 20px. Bên dưới đó, một filled mint pill button — nền #11ee92, text #252b2f, 14px weight 700, padding 12px 20px, border-radius 45px. Cột phải: flat illustration của một nhân vật với speech bubble. Padding 64px dọc.

2. **Tạo một language selection carousel:** Nền #f2f7fd. Heading căn giữa 'I want to learn' ở Nista 24px weight 700, #252b2f, margin-bottom 40px. Hàng ngang gồm 6 tile hình tròn, mỗi tile đường kính 80px, border-radius 9999px, nền #ffffff, box-shadow rgba(0,0,0,0.1) 0px 1px 2px 0px, chứa ảnh cờ hình tròn. Tên ngôn ngữ bên dưới mỗi tile ở 14px #252b2f, gap 10px. Chevron arrows trong ghost circles 40px nằm hai bên hàng.

3. **Tạo một top navigation bar:** Nền trắng (#ffffff), horizontal padding 20px, chiều cao ~64px. Bên trái: logo — icon hình vuông tròn màu xanh + wordmark 'Busuu' ở Nista 18px weight 700, #116eee, với phụ đề 'A Chegg service' ở 10px #666e7e. Bên phải: hai pill buttons — outlined (viền #116eee 1.5px, fill trong suốt, text #116eee, radius 45px, horizontal padding 20px) có nhãn 'Learn for free', sau đó ghost button (text #252b2f, không border, radius 45px) có nhãn 'Log in'.

4. **Tạo một card grid cho course categories:** Nền trang #f2f7fd. Grid ba cột gồm các thẻ trắng (#ffffff), border-radius 16px, padding 20px, box-shadow rgba(0,0,0,0.1) 0px 1px 2px 0px, gap 20px. Mỗi thẻ có một icon container hình tròn 60px ở góc trên bên trái, heading ở Nista 18px weight 700 #252b2f, và body text ở 14px weight 400 #666e7e.

5. **Tạo một footer với locale selector:** Nền #f2f7fd, padding 40px 20px. Nhãn 'Display Language:' ở Nista 14px weight 700, #252b2f, margin-bottom 10px. Native select element bên dưới — border 1px solid #d6dee6, border-radius 5px, padding 8px 12px, text 14px #252b2f, các tùy chọn cho English (UK), Español, Français, Deutsch, v.v.

## Signature Choices

Ba lựa chọn làm cho hệ thống này dễ nhận biết ngay lập tức và phải được bảo tồn trên tất cả các màn hình mới:

1. **Mint là màu hành động duy nhất.** Một spring-green rực rỡ (#11ee92) cho primary CTA trên nền hero gradient tím-xanh là một lựa chọn có chủ đích chống lại phong cách công ty. Hầu hết edtech mặc định dùng CTA xanh lam — mint của Busuu đọc là tươi mới, khuyến khích và phi giao dịch. Không bao giờ làm loãng nó bằng cách thêm các màu hành động khác.

2. **Hình tròn là hình dạng cấu trúc.** Language flags, icon containers và các yếu tố trang trí hầu như luôn là hình tròn (border-radius 9999px). Từ vựng hình tròn này kết nối trực tiếp với motif quả địa cầu/bản đồ thế giới của hero và làm cho giao diện giống như một cuốn hộ chiếu hoặc một bộ tem sưu tầm hơn là một dashboard SaaS tiêu chuẩn.

3. **Nền gần trắng pha xanh lam.** Nền trang là #f2f7fd — không phải trắng tinh, không phải xám, mà là một tông xanh lam mát lạnh gần như không thể nhận thấy. Điều này tạo ra một không gian làm việc tĩnh lặng, hơi mơ màng, bổ sung cho hero gradient đậm mà không cạnh tranh với nó. Các thẻ nổi trên #ffffff phía trên tông màu này, và stack bề mặt hai tông màu tạo ra đủ lớp mà không cần bất kỳ shadow nặng nào.

## Similar Brands

- **Duolingo** — Cùng hero illustrated-character vui tươi, CTA single vivid-accent (xanh lá của Duolingo vs mint của Busuu), và từ vựng tile hình tròn cho việc chọn ngôn ngữ
- **Babbel** — Cùng danh mục edtech language-learning với một display headline đậm duy nhất trên hero đầy màu sắc, mặc dù Babbel thiên về ấm/đỏ trong khi Busuu mát/xanh-tím
- **Khan Academy** — Cùng light-mist canvas, bề mặt thẻ trắng, và khoảng cách section 64px rộng rãi với một trustpilot-style social proof strip duy nhất bên dưới primary CTA
- **Notion** — Cùng thẩm mỹ không gian làm việc yên tĩnh, gần như trắng với thẻ trắng nổi trên nền rất nhạt, và cùng sự kiềm chế khi sử dụng shadow như một gợi ý 1px duy nhất thay vì elevation nặng
- **Headspace** — Cùng hero thân thiện, illustration-driven với gradient đậm và character art tròn, kết hợp với khu vực nội dung pastel tĩnh lặng bên dưới

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-deep-indigo: #3b1e90;
  --color-signal-blue: #116eee;
  --color-spring-mint: #11ee92;
  --color-hero-sky-blue: #3a6ef0;
  --gradient-hero-sky-blue: linear-gradient(90deg, #3b1e9 0%, #5a3cc4 30%, #3a6ef0 100%);
  --color-charcoal: #252b2f;
  --color-pure-black: #000000;
  --color-canvas-mist: #f2f7fd;
  --color-paper-white: #ffffff;
  --color-steel-border: #d6dee6;
  --color-slate-caption: #666e7e;
  --color-shadow-gray: #b3b3b3;
  --color-trustpilot-star: #ffcf00;

  /* Typography — Font Families */
  --font-nista: 'Nista', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.2;
  --text-body: 14px;
  --leading-body: 1.5;
  --text-body-lg: 16px;
  --leading-body-lg: 1.5;
  --text-subheading: 18px;
  --leading-subheading: 1.5;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.3;
  --text-heading: 36px;
  --leading-heading: 1.14;
  --text-display: 40px;
  --leading-display: 1.14;

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

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-120: 120px;

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

  /* Border Radius */
  --radius-md: 5px;
  --radius-2xl: 16px;
  --radius-3xl: 45.04px;

  /* Named Radii */
  --radius-cards: 16px;
  --radius-inputs: 5px;
  --radius-buttons: 45px;
  --radius-circles: 9999px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;

  /* Surfaces */
  --surface-canvas-mist: #f2f7fd;
  --surface-paper-white: #ffffff;
  --surface-hero-gradient: #3b1e9;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-deep-indigo: #3b1e90;
  --color-signal-blue: #116eee;
  --color-spring-mint: #11ee92;
  --color-hero-sky-blue: #3a6ef0;
  --color-charcoal: #252b2f;
  --color-pure-black: #000000;
  --color-canvas-mist: #f2f7fd;
  --color-paper-white: #ffffff;
  --color-steel-border: #d6dee6;
  --color-slate-caption: #666e7e;
  --color-shadow-gray: #b3b3b3;
  --color-trustpilot-star: #ffcf00;

  /* Typography */
  --font-nista: 'Nista', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.2;
  --text-body: 14px;
  --leading-body: 1.5;
  --text-body-lg: 16px;
  --leading-body-lg: 1.5;
  --text-subheading: 18px;
  --leading-subheading: 1.5;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.3;
  --text-heading: 36px;
  --leading-heading: 1.14;
  --text-display: 40px;
  --leading-display: 1.14;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-120: 120px;

  /* Border Radius */
  --radius-md: 5px;
  --radius-2xl: 16px;
  --radius-3xl: 45.04px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}
```