# AI for Business

> # AI for Business — Style Reference

## Prompt Content

```
# AI for Business — Style Reference
> Swiss editorial spread trên nền giấy lạnh

**Theme:** light

Dayos vận hành một hệ thống thị giác Swiss-editorial: nền canvas xám nhạt, display headline siêu đặc (ultra-condensed) cỡ lớn, body text grotesque tiết chế, và một giọng mono nhỏ xíu dành cho tag và micro-label. Trang hoạt động như một spread in ấn — mỗi section chỉ có một tuyên bố typography khổng lồ, set tight (line-height 0.90, tracking -3%), được hỗ trợ bởi khoảng trắng rộng rãi thay vì divider hay rule. Màu sắc gần như vắng bóng trong chrome và gần như bùng nổ trong 3D illustration; UI accent chỉ có một mint nhẹ và một vàng điện, được dùng như highlight wash một cách có chủ đích. Bề mặt phẳng — không shadow, không gradient — và dựa vào 5-level tonal stack (canvas → white card → mist → mint → yellow) để phân tách layer. Component nhỏ gọn và tự tin: nav bar hình pill màu trắng, button tối gần vuông, card bo tròn cỡ lớn. Cảm giác là sự tiết chế có tính toán, với một object vui tươi ở trung tâm trang.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|-----|---------|-------|---------|
| Canvas Mist | `#e5e7eb` | `--color-canvas-mist` | Nền trang, section canvas, hairline divider và UI border — mặt phẳng tĩnh lặng làm nền cho mọi display type |
| Pure White | `#ffffff` | `--color-pure-white` | Bề mặt card, navigation pill background, elevated panel, button và nav text |
| Surface Mist | `#f3f3f3` | `--color-surface-mist` | Secondary surface nhẹ, button hover wash, low-emphasis panel cách canvas một bước |
| Ink Black | `#000000` | `--color-ink-black` | Heading chính, body text, icon fill trên nền sáng. Không dùng làm primary CTA color |
| Steel Gray | `#979797` | `--color-steel-gray` | Secondary body text, caption, muted link text, placeholder fill — neutral dễ đọc nhất |
| Graphite | `#444444` | `--color-graphite` | Navigation text ở trạng thái nghỉ, secondary border, subdued button outline |
| Mint Pulse | `#d1ffca` | `--color-mint-pulse` | Highlight wash duy nhất phía sau inline link được nhấn mạnh hoặc tag được chọn — một khoảnh khắc chromatic nhẹ nhàng trên nền đơn sắc |
| Electric Yellow | `#fff100` | `--color-electric-yellow` | Inline text emphasis, marker highlight, và hue chủ đạo trong 3D hero illustration — giọng nói to nhất trong hệ thống, dành riêng cho những khoảnh khắc cần thu hút ánh nhìn |

## Tokens — Typography

### SuisseIntl — Primary UI và body face — nav link, button, body copy, subheading. Medium weight (450) đóng vai trò semibold nhẹ nhàng cho button và heading nhỏ mà không cần thêm giọng bold nặng. · `--font-suisseintl`
- **Thay thế:** Inter hoặc Neue Haas Grotesk
- **Weights:** 400, 450, 500
- **Cỡ chữ:** 14, 16, 18, 20, 28, 40
- **Line height:** 1.10–1.33
- **Letter spacing:** -0.0100em ở 40px → -0.40px, -0.0110em ở 18–20px → -0.20 đến -0.22px, -0.0200em ở 14–16px → -0.28 đến -0.32px, -0.0300em ở 12px → -0.36px
- **Vai trò:** Primary UI và body face — nav link, button, body copy, subheading. Medium weight (450) đóng vai trò semibold nhẹ nhàng cho button và heading nhỏ mà không cần thêm giọng bold nặng.

### SuisseIntlCond — Display headline face cho hero và section statement. Line-height 0.90 và condensed weight 700 xếp chữ thành khối hoành tráng; 130px dành cho hero, 80px cho section opener cấp hai. Lựa chọn đặc trưng — mọi hệ thống khác đều chọn display weight có độ rộng thông thường; hệ thống này nhồi mật độ dọc vào không gian headline. · `--font-suisseintlcond`
- **Thay thế:** Barlow Condensed Bold hoặc Roboto Condensed Bold
- **Weights:** 700
- **Cỡ chữ:** 48, 64, 80, 130
- **Line height:** 0.90
- **Letter spacing:** -0.0300em ở mọi cỡ → -1.44px ở 48px, -1.92px ở 64px, -2.40px ở 80px, -3.90px ở 130px
- **Vai trò:** Display headline face cho hero và section statement. Line-height 0.90 và condensed weight 700 xếp chữ thành khối hoành tráng; 130px dành cho hero, 80px cho section opener cấp hai. Lựa chọn đặc trưng — mọi hệ thống khác đều chọn display weight có độ rộng thông thường; hệ thống này nhồi mật độ dọc vào không gian headline.

### SuisseIntlMono — Mono micro-voice cho tag, category label, small button text, và inline marker. 12px là cỡ duy nhất — nó hoạt động như chữ ký của hệ thống typography, không phải body alternative. · `--font-suisseintlmono`
- **Thay thế:** JetBrains Mono hoặc IBM Plex Mono
- **Weights:** 400
- **Cỡ chữ:** 12
- **Line height:** 1.30–1.60
- **Letter spacing:** -0.0300em ở 12px → -0.36px
- **Vai trò:** Mono micro-voice cho tag, category label, small button text, và inline marker. 12px là cỡ duy nhất — nó hoạt động như chữ ký của hệ thống typography, không phải body alternative.

### Type Scale

| Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token |
|---------|--------|-------------|----------------|-------|
| caption | 12px | 1.3 | -0.36px | `--text-caption` |
| body-sm | 14px | 1.3 | -0.28px | `--text-body-sm` |
| body | 16px | 1.33 | -0.32px | `--text-body` |
| subheading | 20px | 1.25 | -0.22px | `--text-subheading` |
| heading-sm | 28px | 1.2 | -0.31px | `--text-heading-sm` |
| heading | 40px | 1.14 | -0.4px | `--text-heading` |
| heading-lg | 48px | 1.1 | -1.44px | `--text-heading-lg` |
| display | 80px | 0.9 | -2.4px | `--text-display` |
| display-xl | 130px | 0.9 | -3.9px | `--text-display-xl` |

## 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` |
| 40 | 40px | `--spacing-40` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 96 | 96px | `--spacing-96` |

### Border Radius

| Element | Giá trị |
|---------|---------|
| tags | 20px |
| cards | 32px |
| buttons | 4px |
| nav-pill | 48px |
| button-pill | 8px |
| cards-large | 64px |

### Layout

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

## Components

### Navigation Pill
**Vai trò:** Primary header container

Pill màu trắng (#ffffff), border-radius 48px, một thanh ngang duy nhất nổi trên nền canvas #e5e7eb. Giữ brand mark bên trái, 6–7 nav item trong một hàng ngang ở cỡ 14–16px SuisseIntl 500, và một filled dark button bên phải. Nằm với khoảng padding trên/dưới trang rộng rãi (~24px) và cảm giác không trọng lượng — không shadow, không border, chỉ là hình dạng trên nền xám.

### Filled Dark Button
**Vai trò:** Primary conversion surface

Nền #000000, text #ffffff, SuisseIntl 450–500 ở 14px, tracking -0.0200em. Border-radius 8px, padding dọc 10px / ngang 20px. Dùng cho một nút 'Schedule a Demo' duy nhất trong header và mọi conversion tương đương. Dạng hình chữ nhật gọn, không border, không shadow.

### Ghost Nav Link
**Vai trò:** Navigation link trong pill

Nền trong suốt, không border, text màu #444444 hoặc #000000 ở 14–16px SuisseIntl 500, letter-spacing -0.0200em. Chỉ underline hoặc đổi màu khi hover — không đổi fill, không background pill.

### Display Headline
**Vai trò:** Hero hoặc section statement

SuisseIntlCond 700 màu #000000. Hero instance ở 80–130px, secondary section opener ở 48–64px. Line-height cố định 0.90, letter-spacing -0.0300em. Có thể bao gồm inline accent highlight màu #fff100 hoặc #d1ffca dưới dạng nhấn mạnh toàn bộ text hoặc một từ.

### Subheadline Body
**Vai trò:** Hero và section supporting copy

SuisseIntl 400 màu #000000 ở 18–20px, line-height 1.20–1.25, tracking -0.0110em. Đặt trong một cột hẹp (thường dưới 480px) ngay dưới display headline. Không xử lý màu muted — copy giữ nguyên màu đen để có trọng lượng editorial.

### Highlighted Link
**Vai trò:** Inline link được nhấn mạnh

SuisseIntl 500 text màu #000000 với background highlight #d1ffca phía sau dòng text. Khối mint nằm sau glyph chữ (không phải toàn bộ dòng), trông giống như một vệt marker. Padding dọc 4px / ngang 8px được ngụ ý bởi độ lệch của marker.

### Yellow Marker Word
**Vai trò:** Inline display emphasis

Một từ hoặc cụm từ ngắn bên trong display headline được đặt màu #fff100 thay vì #000000. Letter-spacing và weight giữ nguyên — chỉ đổi màu, để từ chromatic đọc như một phần của chữ, không phải trang trí.

### Mono Micro Tag
**Vai trò:** Category hoặc section label

SuisseIntlMono 400 ở 12px màu #000000 hoặc #444444, tracking -0.0300em. Có thể viết hoa toàn bộ. Hoạt động như typographic kicker phía trên display headline hoặc như button label trên chip nhỏ.

### Oversized Card
**Vai trò:** Feature hoặc content block surface

Bề mặt #ffffff trên nền canvas #e5e7eb. Border-radius 32px (tiêu chuẩn) hoặc 64px (feature panel). Padding 24px trên card tiêu chuẩn, lên đến 40–46px trên oversized feature card. Không border, không shadow — sự phân tách đến từ tương phản trắng-trên-xám.

### 3D Hero Object
**Vai trò:** Primary visual trên hero

3D render điêu khắc — đế hình học (cột lục giác) bằng đá/gỗ trung tính với các khối màu sáng (#fff100 vàng, #d1ffca xanh mint, magenta accent) bung ra từ đỉnh. Nằm bên phải hero text, chiếm khoảng 45% viewport bên phải. Không border, không shadow plate trên canvas — object tự chiếu sáng và tự đổ bóng.

### Footer / Section Divider
**Vai trò:** Vertical rhythm marker

Không có rule nhìn thấy được. Section break được tạo bởi khoảng trắng dọc 80px và sự chuyển đổi từ white card trở lại canvas #e5e7eb. Functional divider, nếu cần, là đường 1px #e5e7eb (trùng với canvas, dùng trên nền trắng).

## Do's and Don'ts

### Nên làm
- Đặt hero và section opener bằng SuisseIntlCond 700 ở 48–130px với line-height 0.90 và letter-spacing -0.0300em
- Giữ page canvas ở #e5e7eb; để card #ffffff nổi trên đó thay vì tô toàn bộ trang màu trắng
- Dành #fff100 cho một từ nhấn mạnh duy nhất bên trong display headline hoặc cho hero 3D object — không bao giờ dùng làm button hoặc bề mặt lớn
- Sử dụng 5-level surface stack theo thứ tự (canvas → white → mist → mint → yellow); không thêm neutral mới giữa các level
- Đặt body copy bằng SuisseIntl 400–500 ở 16–20px, tracking từ -0.0100em đến -0.0110em
- Dùng card radius 32px (tiêu chuẩn) và 64px (oversized feature); dành 48px cho navigation pill và 4–8px cho button
- Duy trì khoảng cách 80px giữa các section chính; element gap 24px, card padding baseline 16px

### Không nên làm
- Không chuyển canvas sang #ffffff — nền xám là chữ ký của hệ thống, không phải mặc định
- Không áp dụng SuisseIntlCond cho body, nav, hoặc button copy — line-height 0.90 của nó làm mất khả năng đọc dưới 40px
- Không thêm drop shadow, inner shadow, hoặc gradient fill vào card, button, hoặc nav — hệ thống cố tình phẳng
- Không thêm hue chromatic nào khác; mint và vàng là hai accent color duy nhất được phép trong UI
- Không dùng #fff100 hoặc #d1ffca làm section background full-width ngoài ngữ cảnh 3D illustration
- Không đặt display headline ở weight nào khác ngoài 700 condensed, hoặc ở cỡ nào dưới 48px
- Không làm mềm headline tracking; -0.0300em là bắt buộc ở mọi display size để giữ chữ gắn kết ở line-height 0.90

## Surfaces

| Level | Tên | Giá trị | Mục đích |
|-------|-----|---------|----------|
| 1 | Canvas | `#e5e7eb` | Nền trang và section |
| 2 | Card | `#ffffff` | Card, nav pill, elevated content block |
| 3 | Subtle Surface | `#f3f3f3` | Secondary wash cho button, hovered row, low-contrast panel |
| 4 | Accent Wash | `#d1ffca` | Mint highlight phía sau link được nhấn mạnh hoặc tag được chọn |
| 5 | Accent Loud | `#fff100` | Yellow marker surface cho spotlight moment và illustration |

## Elevation

- **Cards:** `none — sự phân tách đến từ bề mặt #ffffff trên canvas #e5e7eb`
- **Navigation Pill:** `none — hình dạng và tương phản trắng-trên-xám mang lại affordance`
- **Buttons:** `none — fill #000000 đặc trên nền sáng xung quanh`

## Imagery

Hình ảnh chủ đạo là một 3D-rendered hero object duy nhất: đế cột lục giác bằng đá và gỗ, với các khối hình học màu sắc rực rỡ (#fff100 vàng, mint xanh, magenta) bung ra từ đỉnh. Object được chiếu sáng với self-shadow, chứa depth riêng, và nằm trên một floor reflection nhẹ. Không có photography, không lifestyle imagery, không secondary illustration. Icon trong UI tối thiểu — stroked mark nhỏ cho nav indicator và button chevron. Phần còn lại của không gian thị giác là chữ trên nền canvas xám.

## Layout

Trang là container centered max-width 1280px trên nền canvas full-bleed #e5e7eb. Hero là split bất đối xứng: text chiếm khoảng 55% bên trái trong một cột hẹp, 3D object lấp đầy khoảng 45% bên phải không có border hay card phía sau. Display headline thiết lập tỷ lệ dọc của trang — nó quyết định section padding chứ không phải ngược lại. Bên dưới hero, section xen kẽ giữa bề mặt card trắng #ffffff (với radius 32–64px) và canvas mở #e5e7eb, cách nhau bởi khoảng trắng dọc ~80px thay vì rule nhìn thấy được. Navigation là một pill bar trắng duy nhất ở đầu trang, không phải header full-bleed. Nhịp điệu tổng thể thưa thớt và editorial: một tuyên bố typography mỗi section, khoảng thở rộng rãi, không có dense card grid.

## Agent Prompt Guide

**Quick Color Reference**
- text: #000000
- background (canvas): #e5e7eb
- border / divider: #e5e7eb
- accent (mint highlight): #d1ffca
- accent (yellow emphasis): #fff100
- primary action: không có màu CTA riêng biệt

**Example Component Prompts**
1. **Hero section** — Canvas #e5e7eb, full-bleed. Cột trái (max 520px): display headline bằng SuisseIntlCond 700 ở 80–130px, #000000, line-height 0.90, letter-spacing -0.0300em. Bên dưới, body subheadline bằng SuisseIntl 400 ở 18px, #000000, line-height 1.25. Cột phải: 3D-rendered geometric object (cột lục giác với các khối màu vàng, xanh mint, và magenta bung ra từ đỉnh) chiếm 45% viewport bên phải, không border, không card.

2. **Navigation pill** — Pill trắng (#ffffff), border-radius 48px, căn giữa theo chiều ngang gần đầu trang. Brand mark (sao nhỏ + 'dayos') bên trái ở 16px SuisseIntl 500 #000000. Hàng ngang căn giữa gồm 6 nav link bằng SuisseIntl 500 ở 14–16px, #444444, không underline. Bên phải là filled surface button: nền #000000, text #ffffff bằng SuisseIntl 450 ở 14px, radius 8px, padding dọc 10px / ngang 20px.

3. **Highlighted link** — Inline link đặt bằng SuisseIntl 500 ở 16px, text #000000, với background marker-highlight #d1ffca phía sau dòng text (offset dọc 4px, khớp với gutter line-height). Khối mint nên bám sát glyph, không phải toàn bộ dòng.

4. **Feature card** — Bề mặt #ffffff, border-radius 32px, padding 24px, trên nền section #e5e7eb. Không border, không shadow. Trên cùng: label 12px SuisseIntlMono 400 màu #444444, tracking -0.0300em. Bên dưới: heading bằng SuisseIntl 500 ở 28px, #000000, line-height 1.20. Body copy bằng SuisseIntl 400 ở 16px, #000000.

5. **Section opener với yellow emphasis** — SuisseIntlCond 700 cỡ lớn ở 64px, #000000, line-height 0.90, letter-spacing -0.0300em, trên canvas #e5e7eb. Một từ bên trong headline đặt màu #fff100 thay vì #000000. Từ chromatic dùng cùng font, weight, và tracking — chỉ đổi màu.

## Typographic Discipline

Ba font family, mỗi font một nhiệm vụ: SuisseIntlCond nói một lần mỗi section và chiếm ưu thế trên trang; SuisseIntl mang mọi tương tác và đoạn văn; SuisseIntlMono gắn nhãn và tag ở chính xác 12px. Display face condensed không bao giờ xuất hiện dưới 48px, và mono face không bao giờ xuất hiện trên 12px. Sự phân tách này là hệ thống typography — thêm giọng thứ tư hoặc nới lỏng một trong hai ranh giới sẽ phá vỡ nhịp điệu.

## Similar Brands

- **Linear** — Cùng sự tiết chế editorial với chrome đơn sắc, display type hình học cỡ lớn, và một accent duy nhất dành cho emphasis thay vì trang trí
- **Vercel** — Bề mặt phẳng, không shadow trên nền gần trắng, với một saturated accent color duy nhất chỉ dùng cho marker highlight và emphasis word
- **Runway** — AI-product brand dùng massive condensed display headline kết hợp với 3D sculptural object trên nền xám nhẹ, với chromatic accent vui tươi chỉ trong illustration
- **Anthropic** — Editorial layout chịu ảnh hưởng Swiss, cột text hẹp bên cạnh một visual chủ đạo duy nhất, palette tiết chế với một warm accent và display tracking rất chặt
- **Loom** — Trang comfortable-density với oversized headline, canvas xám mang card trắng, và UI palette gần như vắng bóng để product/illustration cung cấp toàn bộ màu sắc

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-canvas-mist: #e5e7eb;
  --color-pure-white: #ffffff;
  --color-surface-mist: #f3f3f3;
  --color-ink-black: #000000;
  --color-steel-gray: #979797;
  --color-graphite: #444444;
  --color-mint-pulse: #d1ffca;
  --color-electric-yellow: #fff100;

  /* Typography — Font Families */
  --font-suisseintl: 'SuisseIntl', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-suisseintlcond: 'SuisseIntlCond', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-suisseintlmono: 'SuisseIntlMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.3;
  --tracking-caption: -0.36px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.3;
  --tracking-body-sm: -0.28px;
  --text-body: 16px;
  --leading-body: 1.33;
  --tracking-body: -0.32px;
  --text-subheading: 20px;
  --leading-subheading: 1.25;
  --tracking-subheading: -0.22px;
  --text-heading-sm: 28px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.31px;
  --text-heading: 40px;
  --leading-heading: 1.14;
  --tracking-heading: -0.4px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: -1.44px;
  --text-display: 80px;
  --leading-display: 0.9;
  --tracking-display: -2.4px;
  --text-display-xl: 130px;
  --leading-display-xl: 0.9;
  --tracking-display-xl: -3.9px;

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

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-40: 40px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;

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

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-3xl-2: 32px;
  --radius-full: 48px;
  --radius-full-2: 64px;

  /* Named Radii */
  --radius-tags: 20px;
  --radius-cards: 32px;
  --radius-buttons: 4px;
  --radius-nav-pill: 48px;
  --radius-button-pill: 8px;
  --radius-cards-large: 64px;

  /* Surfaces */
  --surface-canvas: #e5e7eb;
  --surface-card: #ffffff;
  --surface-subtle-surface: #f3f3f3;
  --surface-accent-wash: #d1ffca;
  --surface-accent-loud: #fff100;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-canvas-mist: #e5e7eb;
  --color-pure-white: #ffffff;
  --color-surface-mist: #f3f3f3;
  --color-ink-black: #000000;
  --color-steel-gray: #979797;
  --color-graphite: #444444;
  --color-mint-pulse: #d1ffca;
  --color-electric-yellow: #fff100;

  /* Typography */
  --font-suisseintl: 'SuisseIntl', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-suisseintlcond: 'SuisseIntlCond', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-suisseintlmono: 'SuisseIntlMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.3;
  --tracking-caption: -0.36px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.3;
  --tracking-body-sm: -0.28px;
  --text-body: 16px;
  --leading-body: 1.33;
  --tracking-body: -0.32px;
  --text-subheading: 20px;
  --leading-subheading: 1.25;
  --tracking-subheading: -0.22px;
  --text-heading-sm: 28px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.31px;
  --text-heading: 40px;
  --leading-heading: 1.14;
  --tracking-heading: -0.4px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: -1.44px;
  --text-display: 80px;
  --leading-display: 0.9;
  --tracking-display: -2.4px;
  --text-display-xl: 130px;
  --leading-display-xl: 0.9;
  --tracking-display-xl: -3.9px;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-40: 40px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-3xl-2: 32px;
  --radius-full: 48px;
  --radius-full-2: 64px;
}
```