# HoneyBook

> HoneyBook — Style Reference

## Prompt Content

```
# HoneyBook — Style Reference
> creative studio ngập nắng trên nền kem ấm — một marquee vàng tươi mở ra những mảng workspace trắng và những con dấu pill tối màu.

**Theme:** light

HoneyBook sử dụng ngôn ngữ sunlit-creative-studio: hero vàng tươi bão hòa, text xanh navy đậm ấm áp, và bề mặt sản phẩm trắng. Hệ thống thị giác được xây dựng trên sự căng thẳng giữa giọng display serif (STK Bureau Serif) và một sans geometric đầy tự tin (STK Bureau Sans), với một mặt chữ eyebrow all-caps nhỏ xíu (STK Gerhard) thì thầm 'editorial' phía trên các section header. Các nút là pill tuyệt đối — bo tròn hoàn toàn, màu navy đậm, không đổ bóng — khiến mỗi hành động như một con dấu vật lý đóng lên trang giấy. Các bề mặt vẫn yên tĩnh và trắng bên dưới fold; màu vàng xuất hiện như một khối màu có chủ đích cho các khoảnh khắc hero/marquee thay vì trang trí rải rác, tạo ra nhịp điệu entry-and-rest dễ nhận biết trên các trang dài.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Honey Yellow | `#fffa77` | `--color-honey-yellow` | Yellow wash cho highlight backgrounds, decorative bands, và soft emphasis phía sau nội dung. |
| Marigold | `#fffa56` | `--color-marigold` | Accent fills trên card, headline underline strokes, icon highlights, secondary callouts — phiên bản hơi mạnh hơn của Honey Yellow cho những khoảnh khắc cần nổi bật trên nền trắng |
| Inkwell | `#142127` | `--color-inkwell` | Dark borders và separators cho elevated surfaces và inverted UI. Không dùng làm màu CTA chính |
| Carbon | `#131416` | `--color-carbon` | Body text và high-contrast borders trên light surfaces, alt dark fill cho emphasis blocks |
| Slate Gray | `#343c40` | `--color-slate-gray` | Dark borders và separators cho elevated surfaces và inverted UI. Không dùng làm màu CTA chính |
| Pebble | `#63696c` | `--color-pebble` | Muted helper text, secondary metadata, low-emphasis captions |
| River Mist | `#c7d5d9` | `--color-river-mist` | Card và link borders trên white surfaces, hairline dividers — đủ lạnh để tạo cảm giác khác biệt so với hệ thống vàng ấm |
| Fog | `#e0e5e7` | `--color-fog` | Subtle borders, disabled state outlines, very light separators |
| Paper White | `#ffffff` | `--color-paper-white` | Page và card surfaces, text trên dark fills, primary button text |

## Tokens — Typography

### STK Bureau Serif — Mặt chữ Display và large headline — giọng editorial cho hero statements, section titles, và feature headlines. Tracking chặt (-0.027em đến -0.05em) kéo các chữ cái thành một khối dày đặc, kiểu tạp chí. Một serif trong hero của SaaS là nước đi đặc trưng; nó nhân bản hóa sản phẩm và báo hiệu 'được chế tác cho giới sáng tạo'. · `--font-stk-bureau-serif`
- **Thay thế:** Playfair Display, Lora, hoặc DM Serif Display
- **Weights:** 400
- **Kích thước:** 16px, 28px, 40px, 48px, 56px, 64px
- **Line height:** 1.00–1.20
- **Letter spacing:** -0.0500em, -0.0420em, -0.0310em, -0.0270em
- **Vai trò:** Mặt chữ Display và large headline — giọng editorial cho hero statements, section titles, và feature headlines. Tracking chặt (-0.027em đến -0.05em) kéo các chữ cái thành một khối dày đặc, kiểu tạp chí. Một serif trong hero của SaaS là nước đi đặc trưng; nó nhân bản hóa sản phẩm và báo hiệu 'được chế tác cho giới sáng tạo'.

### STK Bureau Sans — Mặt chữ UI và body chính — navigation, buttons, paragraphs, form fields, cards. Weights 500–700 xử lý subheads và CTAs. Sự kết hợp với serif display tạo ra một hệ thống phân cấp giọng nói rõ ràng: serif cho chất thơ, sans cho hướng dẫn. · `--font-stk-bureau-sans`
- **Thay thế:** Inter, Söhne, hoặc General Sans
- **Weights:** 400, 500, 600, 700
- **Kích thước:** 12px, 14px, 16px, 18px, 20px, 24px, 28px, 32px, 48px
- **Line height:** 1.20–1.80
- **Letter spacing:** -0.0500em, -0.0360em, -0.0300em
- **Vai trò:** Mặt chữ UI và body chính — navigation, buttons, paragraphs, form fields, cards. Weights 500–700 xử lý subheads và CTAs. Sự kết hợp với serif display tạo ra một hệ thống phân cấp giọng nói rõ ràng: serif cho chất thơ, sans cho hướng dẫn.

### STK Gerhard — Nhãn eyebrow all-caps nhỏ xíu phía trên section headers (ví dụ 'CAPTURE LEADS') — tracking rộng (+0.071em) ở dạng uppercase mang đến cho mỗi section một điểm vào được gắn nhãn, mang phong cách editorial. Được dùng có chừng mực; một cái mỗi section, không bao giờ trong body copy. · `--font-stk-gerhard`
- **Thay thế:** Inter ở 14px với text-transform uppercase và letter-spacing 0.08em
- **Weights:** 500
- **Kích thước:** 14px
- **Line height:** 1.20–1.50
- **Letter spacing:** 0.994px
- **Vai trò:** Nhãn eyebrow all-caps nhỏ xíu phía trên section headers (ví dụ 'CAPTURE LEADS') — tracking rộng (+0.071em) ở dạng uppercase mang đến cho mỗi section một điểm vào được gắn nhãn, mang phong cách editorial. Được dùng có chừng mực; một cái mỗi section, không bao giờ trong body copy.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.5 | — | `--text-caption` |
| body-sm | 14px | 1.5 | -0.7px | `--text-body-sm` |
| body | 16px | 1.5 | -0.8px | `--text-body` |
| subheading | 20px | 1.4 | -0.6px | `--text-subheading` |
| heading-sm | 24px | 1.3 | -0.72px | `--text-heading-sm` |
| heading | 32px | 1.2 | -0.96px | `--text-heading` |
| heading-lg | 48px | 1.1 | -2.4px | `--text-heading-lg` |
| display | 56px | 1.05 | -2.8px | `--text-display` |
| display-lg | 64px | 1 | -1.98px | `--text-display-lg` |

## Tokens — Spacing & Shapes

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

**Mật độ:** 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` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 60 | 60px | `--spacing-60` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 112 | 112px | `--spacing-112` |
| 216 | 216px | `--spacing-216` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 9999px |
| cards | 20px |
| images | 20px |
| inputs | 10px |
| buttons | 9999px |

### Layout

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

## Components

### Dark Pill CTA
**Vai trò:** Nút call-to-action chính trên hero, nav, và product sections

Pill bo tròn hoàn toàn (border-radius: 9999px), background #142127, text #ffffff trong STK Bureau Sans 16px weight 600, padding 20px 32px, không border, không shadow. Hình dạng là điểm đặc trưng — các vòng tròn tuyệt đối ở hai đầu khiến mỗi hành động như một con dấu vật lý.

### Ghost Pill Button
**Vai trò:** Nút outlined thứ cấp dùng trong nav và inline actions

Border-radius: 9999px, background #ffffff, border 1px solid #c7d5d9, text #142127 trong STK Bureau Sans 16px weight 500, padding 20px 32px. Dùng cho 'Log in' và các CTA ít nhấn mạnh hơn.

### Promo Banner Bar
**Vai trò:** Thông báo theo mùa hoặc ưu đãi ở đầu trang

Thanh ngang full-bleed, background xám nhạt (ngụ ý #edf1f3), text căn giữa trong STK Bureau Sans 14px weight 500, được bao quanh bởi họa tiết minh họa hoa, kèm inline ghost pill CTA ('CLAIM OFFER'). Chiều cao ~56px.

### Navigation Bar
**Vai trò:** Navigation chính của trang

Background trắng, sticky, max-width 1200px căn giữa, logo bên trái, nav links ở giữa (STK Bureau Sans 16px weight 500, #142127), Log in (ghost) + Start for free (dark pill) bên phải. Không đổ bóng — phân cách bằng border dưới 1px #e0e5e7.

### Yellow Hero Section
**Vai trò:** Value proposition ở màn hình đầu tiên

Background full-bleed #fffa77, content stack căn giữa. Hàng social proof (★★★★★ 15K+ REVIEWS) trong STK Gerhard 14px caps. Headline trong STK Bureau Serif 56–64px weight 400, màu #142127, tracking chặt. Subtext trong STK Bureau Sans 18–20px weight 400, #142127. Dark pill CTA bên dưới. Tabbed product preview (Project pipeline, Lead capture, v.v.) ở cạnh dưới với underline active state.

### Feature Split Section
**Vai trò:** Hai cột làm nổi bật tính năng với screenshot bên phải

Background trắng, max-width 1200px, grid 2 cột (40% text / 60% visual). Eyebrow label trong STK Gerhard 14px caps (#142127). Headline trong STK Bureau Serif 48px weight 400. Body trong STK Bureau Sans 16px. Bên phải: app screenshot hoặc composite card mockup với radius 20px.

### Product App Screenshot
**Vai trò:** Ảnh chụp UI sản phẩm hoặc composite illustration nhúng

border-radius 20px, white card background, border 1px nhẹ #c7d5d9, không drop shadow. Hiển thị giao diện sản phẩm thực tế (Projects view, Lead form, v.v.) — được dùng làm 'bằng chứng' ở bên phải của feature splits.

### Tab Navigation Strip
**Vai trò:** Bộ chuyển đổi danh mục tính năng bên dưới hero

Hàng ngang gồm 5 tab label trong STK Bureau Sans 16px weight 500, text #142127. Tab active có border dưới 2px solid #142127; tab inactive không được tạo kiểu. Không thay đổi background fill — chỉ có underline.

### Lead Capture Form Card
**Vai trò:** Trình diễn tính năng sản phẩm — form builder preview

Card trắng, radius 10px, border 1px #c7d5d9, padding 24px. Chứa form fields: text inputs với radius 6px, border 1px #c7d5d9, placeholder #63696c. Phía trên form: stats badge nổi (trắng, radius 10px, shadow nhẹ) hiển thị 'New leads: 7' và 'Unread messages: 8'.

### Stats Badge
**Vai trò:** Metric callout nổi, xếp lớp trên hình ảnh sản phẩm

Bề mặt trắng, border-radius 10px, border 1px #c7d5d9, drop shadow mềm (0 4px 12px rgba(20,33,39,0.08)). Bố cục hai cột: label trong STK Bureau Sans 12px weight 500 #63696c, số trong STK Bureau Serif 28px weight 400 #142127.

### Eyebrow Section Label
**Vai trò:** Thẻ danh mục caps nhỏ phía trên section headlines

STK Gerhard 14px weight 500, uppercase, letter-spacing 0.994px, màu #142127. Luôn nằm cách 8–12px phía trên section headline. Một cái mỗi section, không bao giờ lặp lại.

## Do's and Don'ts

### Nên làm
- Dùng border-radius: 9999px cho tất cả interactive buttons và tag pills — hình dạng bo tròn hoàn toàn là yếu tố dễ nhận biết nhất của hệ thống.
- Đặt display headlines trong STK Bureau Serif 48–64px với tracking từ -0.027em đến -0.05em; khối serif chặt là signature editorial.
- Áp dụng eyebrow label STK Gerhard 14px all-caps (+0.071em tracking) phía trên mọi major section headline, chính xác một lần mỗi section.
- Dùng #fffa77 làm background block full-bleed hero/marquee; không bao giờ dùng làm inline accent nhỏ — sức mạnh của nó nằm ở mảng phẳng lớn.
- Dùng Inkwell (#142127) cho tất cả primary CTA fills và body text; nó cung cấp độ tương phản 16:1+ trên cả bề mặt trắng và vàng.
- Giữ bề mặt UI sản phẩm trên Paper White (#ffffff) với border 1px River Mist (#c7d5d9); tránh drop shadows trên card.
- Duy trì khoảng cách dọc 80px giữa các major section và padding trong 24px trên card.

### Không nên làm
- Không dùng drop shadows trên card, button, hoặc nav — hệ thống dựa vào border 1px và độ tương phản màu để phân cách.
- Không áp dụng màu vàng cho các UI element nhỏ (badges, dots, icon backgrounds); nó chỉ hoạt động ở tỷ lệ hero/marquee.
- Không dùng STK Bureau Sans ở kích thước display; dành sans cho 32px trở xuống và để serif chiếm lĩnh những khoảnh khắc lớn.
- Không trộn lẫn giá trị radius trong cùng một nhóm component — buttons luôn là 9999px, cards luôn là 20px hoặc 10px, không bao giờ là 16px.
- Không thêm gradients; hệ thống hoàn toàn là các khối màu phẳng — ngay cả hero vàng cũng là fill đồng nhất.
- Không dùng ghost pill cho primary actions; dark fill được dành riêng cho hành động quan trọng nhất trên một màn hình nhất định.
- Không phá vỡ cặp serif/sans bằng cách dùng serif cho body copy hoặc sans cho display headlines — sự tương phản giọng nói chính là hệ thống.

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Paper White | `#ffffff` | Page canvas mặc định và card surfaces cho product UI và hầu hết content sections |
| 1 | Honey Yellow | `#fffa77` | Hero band full-bleed, marquee promotional blocks, attention-anchoring sections |
| 2 | Marigold | `#fffa56` | Accent feature panels, highlight cards, decorative inline fills |

## Elevation

- **Stats Badge (floating metric card):** `0 4px 12px rgba(20, 33, 39, 0.08)`
- **Product App Screenshot (elevated variant):** `0 8px 24px rgba(20, 33, 39, 0.06)`

## Imagery

Imagery tối giản và mang tính trang trí: minh họa hoa vẽ tay với màu pastel nhẹ nhàng (hồng, vàng, tím, xanh lá) chỉ xuất hiện trong promo banner và một vài khoảnh khắc marketing rải rác. Product screenshots là tài sản hình ảnh chủ đạo — ảnh chụp UI thực tế được hiển thị ở tỷ lệ lớn trên bề mặt card trắng. Không có stock photography, không có lifestyle imagery, không có abstract gradients. Trọng lượng thị giác nằm ở chính sản phẩm và hệ thống typographic.

## Layout

Container căn giữa max-width 1200px với side padding rộng rãi. Trang mở đầu bằng hero vàng full-bleed (trải dài từ mép này sang mép kia), sau đó xen kẽ giữa các content section trắng và các dải accent vàng thỉnh thoảng. Feature sections sử dụng split 2 cột nhất quán: text bên trái (40%), visual sản phẩm bên phải (60%). Cards xếp chồng theo chiều dọc trong một cột trong các feature blocks, thỉnh thoảng tạo thành grid 3 cột cho feature lists. Nhịp điệu dọc được thiết lập bởi section gaps 80px với internal padding 24px. Navigation là thanh trắng sticky với logo bên trái, links ở giữa, CTAs bên phải. Không có sidebar, không có mega-menu phức tạp.

## Agent Prompt Guide

Tham khảo màu nhanh:
- text: #142127 (Inkwell)
- background: #ffffff (Paper White)
- border: #c7d5d9 (River Mist)
- accent: #fffa56 (Marigold)
- hero/marquee: #fffa77 (Honey Yellow)
- primary action: #fffa56 (filled action)

3-5 Ví dụ Component Prompts:

1. Tạo Primary Action Button: background #fffa56, text #131416, radius 9999px, padding pill nhỏ gọn. Dùng filled treatment này cho CTA chính.

2. Feature Split Section: Background trắng, max-width 1200px, grid 2 cột (40% / 60% gap 64px). Cột trái: eyebrow STK Gerhard 14px caps #142127, headline STK Bureau Serif 48px weight 400 #142127 letter-spacing -2.4px, body STK Bureau Sans 16px #142127. Cột phải: product app screenshot card với radius 20px, border 1px #c7d5d9, background trắng.

3. Stats Badge Overlay: Card trắng, radius 10px, border 1px #c7d5d9, padding 24px, shadow 0 4px 12px rgba(20,33,39,0.08). Hai cột: label trái 'New leads' STK Bureau Sans 12px weight 500 #63696c, số trái '7' STK Bureau Serif 28px weight 400 #142127; label phải 'Unread messages' cùng style, số phải '8'.


5. Tab Navigation Strip: Hàng ngang, 5 mục, STK Bureau Sans 16px weight 500 #142127, gap 32px giữa các mục. Tab active: border dưới 2px solid #142127, padding-bottom 4px. Inactive: không trang trí. Không thay đổi background fill.

## Color Block Strategy

Màu vàng được triển khai như một 'color block' thay vì accent — nó xuất hiện dưới dạng các dải background full-width đóng khung hoặc ngắt quãng các section, không bao giờ là inline decoration. Điều này tạo ra nhịp điệu trang: vào (vàng) → làm việc (trắng) → làm nổi bật (vàng) → làm việc (trắng). Sự chuyển tiếp giữa các khối luôn là một cạnh cứng với zero gradient hoặc blend, củng cố cảm giác in ấn-editorial.

## Similar Brands

- **Squarespace** — Cùng cặp serif/sans editorial, các khối hero màu full-bleed, và display headlines lớn tự tin trên nền bão hòa
- **Notion** — Cách xử lý bề mặt sản phẩm trắng tối giản tương tự với một accent color đậm duy nhất và các điều khiển navigation hình pill
- **ConvertKit** — SaaS dành cho doanh nhân sáng tạo nhắm đến đối tượng tương tự; chia sẻ giọng điệu ấm áp tự tin, pill buttons, và cách tiếp cận banner minh họa phong cách sống
- **Mailchimp** — Cá tính thương hiệu vui tươi được thể hiện qua các khối màu đậm, minh họa, và hệ thống chữ mang cảm giác tùy chỉnh thay vì xám SaaS chung chung

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-honey-yellow: #fffa77;
  --color-marigold: #fffa56;
  --color-inkwell: #142127;
  --color-carbon: #131416;
  --color-slate-gray: #343c40;
  --color-pebble: #63696c;
  --color-river-mist: #c7d5d9;
  --color-fog: #e0e5e7;
  --color-paper-white: #ffffff;

  /* Typography — Font Families */
  --font-stk-bureau-serif: 'STK Bureau Serif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-stk-bureau-sans: 'STK Bureau Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-stk-gerhard: 'STK Gerhard', 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.5;
  --tracking-body-sm: -0.7px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.8px;
  --text-subheading: 20px;
  --leading-subheading: 1.4;
  --tracking-subheading: -0.6px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.3;
  --tracking-heading-sm: -0.72px;
  --text-heading: 32px;
  --leading-heading: 1.2;
  --tracking-heading: -0.96px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: -2.4px;
  --text-display: 56px;
  --leading-display: 1.05;
  --tracking-display: -2.8px;
  --text-display-lg: 64px;
  --leading-display-lg: 1;
  --tracking-display-lg: -1.98px;

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

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 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-64: 64px;
  --spacing-80: 80px;
  --spacing-112: 112px;
  --spacing-216: 216px;

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

  /* Border Radius */
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-2xl: 20px;
  --radius-3xl: 30px;
  --radius-full: 100px;
  --radius-full-2: 999px;
  --radius-full-3: 159984px;

  /* Named Radii */
  --radius-tags: 9999px;
  --radius-cards: 20px;
  --radius-images: 20px;
  --radius-inputs: 10px;
  --radius-buttons: 9999px;

  /* Surfaces */
  --surface-paper-white: #ffffff;
  --surface-honey-yellow: #fffa77;
  --surface-marigold: #fffa56;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-honey-yellow: #fffa77;
  --color-marigold: #fffa56;
  --color-inkwell: #142127;
  --color-carbon: #131416;
  --color-slate-gray: #343c40;
  --color-pebble: #63696c;
  --color-river-mist: #c7d5d9;
  --color-fog: #e0e5e7;
  --color-paper-white: #ffffff;

  /* Typography */
  --font-stk-bureau-serif: 'STK Bureau Serif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-stk-bureau-sans: 'STK Bureau Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-stk-gerhard: 'STK Gerhard', 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.5;
  --tracking-body-sm: -0.7px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.8px;
  --text-subheading: 20px;
  --leading-subheading: 1.4;
  --tracking-subheading: -0.6px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.3;
  --tracking-heading-sm: -0.72px;
  --text-heading: 32px;
  --leading-heading: 1.2;
  --tracking-heading: -0.96px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: -2.4px;
  --text-display: 56px;
  --leading-display: 1.05;
  --tracking-display: -2.8px;
  --text-display-lg: 64px;
  --leading-display-lg: 1;
  --tracking-display-lg: -1.98px;

  /* Spacing */
  --spacing-4: 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-64: 64px;
  --spacing-80: 80px;
  --spacing-112: 112px;
  --spacing-216: 216px;

  /* Border Radius */
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-2xl: 20px;
  --radius-3xl: 30px;
  --radius-full: 100px;
  --radius-full-2: 999px;
  --radius-full-3: 159984px;
}
```