# Secure and powerful crypto wallet | Ctrl Wallet

> # Secure and powerful crypto wallet | Ctrl Wallet — Style Reference

## Prompt Content

```
# Ví crypto an toàn và mạnh mẽ | Ctrl Wallet — Style Reference
> sticker-bombed white lab — confetti cards on surgical chrome

**Theme:** light

Ctrl sử dụng chủ nghĩa tối giản trên nền trắng tinh, bị ngắt quãng bởi những mảng màu confetti vui tươi — một bảng chrome gần như đơn sắc, nơi chữ đen và viền mỏng đảm nhận vai trò cấu trúc, còn các card màu vàng, hồng, xanh dương và xanh lá bão hòa rải rác khắp layout như những tờ giấy ghi chú. Màu chức năng duy nhất là xanh lá tươi (#05c92f), dành riêng cho pill download/CTA neo giữ mọi màn hình. Typography là một font grotesque tùy chỉnh duy nhất (Tomato Grotesk) được triển khai ở kích thước display cực lớn với leading dày đặc (0.77–0.90), khiến headline mang cảm giác kiến trúc hơn là typographic. Các component phẳng, dựa trên viền, và được bo tròn rộng rãi — pill buttons, card góc bo mềm ở 17.5px, và bán kính lớn hơn 35–52px trên các phần tử tương tác. Hệ thống tránh hoàn toàn elevation; thứ bậc đến từ kích thước, weight, và độ tương phản màu sắc, không phải độ sâu đổ bóng.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Acid Lime | `#05c92f` | `--color-acid-lime` | Lớp phủ xanh lá cho highlight background, dải trang trí, và điểm nhấn mềm phía sau nội dung. Không nâng cấp nó thành màu CTA chính |
| Sticker Yellow | `#fcea59` | `--color-sticker-yellow` | Nền card accent trang trí, icon fills, điểm nhấn confetti trên hero và feature spreads |
| Cotton Pink | `#ffd0e2` | `--color-cotton-pink` | Nền card accent trang trí, dấu câu màu sắc mềm mại trên layout tính năng |
| Powder Blue | `#a7cbf6` | `--color-powder-blue` | Nền card accent trang trí, bề mặt callout thông tin |
| Obsidian | `#000000` | `--color-obsidian` | Văn bản chính, icon strokes chính, viền mảnh, nút download đặc trong nav |
| Carbon | `#0f0f0f` | `--color-carbon` | Bề mặt tối phụ, viền nút, viền card, strokes tương tác mạnh |
| Ash Gray | `#5a585a` | `--color-ash-gray` | Văn bản body mờ, viền link, nav sublabels, icon strokes phụ |
| Slate Gray | `#6e726e` | `--color-slate-gray` | Văn bản trợ giúp, viền ưu tiên thấp, metadata cấp ba |
| Paper White | `#f9faf9` | `--color-paper-white` | Canvas trang, nền chính, bề mặt mục FAQ |
| Pure White | `#ffffff` | `--color-pure-white` | Bề mặt card, trường nhập liệu, panel nội dung nâng cao |
| Bone | `#ecefec` | `--color-bone` | Nền nav pill, hàng accordion FAQ, bề mặt card mềm, chip mờ |
| Plaster | `#eeeeee` | `--color-plaster` | Nền trường nhập liệu, bề mặt disabled tinh tế |

## Tokens — Typography

### Tomato Grotesk — Font duy nhất mang toàn bộ thương hiệu — một geometric grotesque tùy chỉnh được triển khai ở kích thước display cực lớn (lên đến 176px) với leading dày đặc (0.77–0.80) khiến headline có cảm giác như những mảng cắt kiến trúc thay vì type được sắp chữ. Weight 600 ở display, 500 ở body và UI. Line-height dày đặc ở tỷ lệ hero là điểm nhấn: nó xếp chồng 'Take' và 'Ctrl.' thành một khối thị giác duy nhất. · `--font-tomato-grotesk`
- **Thay thế:** Inter Tight, Manrope, Space Grotesk
- **Weights:** 500, 600
- **Kích thước:** 11, 13, 14, 18, 21, 25, 26, 28, 32, 35, 53, 70, 84, 105, 153, 158, 176
- **Line height:** 0.77–0.90 cho display (70–176px), 1.0–1.13 cho subheadings (25–53px), 1.25–1.50 cho body
- **Letter spacing:** normal ở mọi kích thước — tracking giữ mặc định, độ chặt về thị giác đến từ nén line-height, không phải tracking âm
- **Vai trò:** Font duy nhất mang toàn bộ thương hiệu — một geometric grotesque tùy chỉnh được triển khai ở kích thước display cực lớn (lên đến 176px) với leading dày đặc (0.77–0.80) khiến headline có cảm giác như những mảng cắt kiến trúc thay vì type được sắp chữ. Weight 600 ở display, 500 ở body và UI. Line-height dày đặc ở tỷ lệ hero là điểm nhấn: nó xếp chồng 'Take' và 'Ctrl.' thành một khối thị giác duy nhất.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|---------|-----------|-------------|----------------|-------|
| caption | 11px | 1.5 | — | `--text-caption` |
| body-lg | 18px | 1.5 | — | `--text-body-lg` |
| subheading | 25px | 1.13 | — | `--text-subheading` |
| heading-sm | 35px | 1.06 | — | `--text-heading-sm` |
| heading | 53px | 1.02 | — | `--text-heading` |
| heading-lg | 84px | 0.9 | — | `--text-heading-lg` |
| display | 153px | 0.8 | — | `--text-display` |
| display-xl | 176px | 0.77 | — | `--text-display-xl` |

## Tokens — Spacing & Shapes

**Density:** spacious

### Spacing Scale

| Tên | Giá trị | Token |
|-----|--------|-------|
| 4 | 4px | `--spacing-4` |
| 7 | 7px | `--spacing-7` |
| 9 | 9px | `--spacing-9` |
| 11 | 11px | `--spacing-11` |
| 13 | 13px | `--spacing-13` |
| 18 | 18px | `--spacing-18` |
| 26 | 26px | `--spacing-26` |
| 31 | 31px | `--spacing-31` |
| 35 | 35px | `--spacing-35` |
| 42 | 42px | `--spacing-42` |
| 44 | 44px | `--spacing-44` |
| 53 | 53px | `--spacing-53` |
| 55 | 55px | `--spacing-55` |
| 70 | 70px | `--spacing-70` |
| 105 | 105px | `--spacing-105` |
| 149 | 149px | `--spacing-149` |

### Border Radius

| Phần tử | Giá trị |
|---------|--------|
| nav | 9px |
| tags | 14px |
| cards | 17.5px |
| inputs | 35px |
| buttons | 35px |
| largeElements | 53px |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 80px
- **Card padding:** 26px
- **Element gap:** 18px

## Components

### Green Download Pill
**Vai trò:** CTA hành động chính

Pill xanh lá tươi (#05c92f) với chữ trắng, border-radius 35px, padding dọc 18px, padding ngang ~26px. Chứa icon Chrome Dots nhỏ (ba vòng tròn chồng lên nhau màu cyan/vàng/đỏ hoặc màu thương hiệu) theo sau là nhãn 'Download for Chrome' bằng Tomato Grotesk 500 ở 14–18px. Đây là nút màu đặc duy nhất trong hệ thống — mọi CTA khác đều là đen hoặc ghost.

### Black Nav Download Button
**Vai trò:** CTA hành động phụ trong navigation

Pill đen đặc (#0f0f0f), radius 35px, chữ trắng ở 14px weight 500, padding dọc 14px / ngang 18px. Nằm ở góc trên bên phải của header. Nhẹ hơn pill xanh lá — dùng làm hành động hỗ trợ khi pill xanh đã có trên trang.

### Ghost Nav Pill
**Vai trò:** Container navigation với các link phụ

Container bo tròn màu Bone (#ecefec), radius ~9px, padding dọc 18px / ngang 18px+, chứa các link $CTRL | Support | Security | Resources được phân cách bằng dải phân cách dọc mảnh màu #0f0f0f. Link có kích thước 13–14px Tomato Grotesk 500 màu #0f0f0f.

### Confetti Accent Card
**Vai trò:** Card tính năng trang trí với nền màu

Card nền đặc màu Sticker Yellow (#fcea59), Cotton Pink (#ffd0e2), hoặc Powder Blue (#a7cbf6), border-radius 17.5px, padding 26px. Chứa headline ngắn ở 18–25px weight 500 màu #0f0f0f và một pill tag nhỏ (ví dụ 'Simple') ở 11–13px. Các card này rải rác khắp các section tính năng để thêm màu sắc vào hệ thống đơn sắc — không bao giờ dùng quá 3 card màu trên mỗi vùng thị giác.

### FAQ Accordion Row
**Vai trò:** Mục FAQ có thể mở rộng

Nền Bone (#ecefec), border-radius 17.5px, padding dọc 26px, văn bản câu hỏi ở 18px weight 500 màu #0f0f0f bên trái, icon plus tròn (viền 1px, 24px) bên phải. Các hàng xếp chồng với khoảng cách 4–8px. Khi mở rộng hiển thị padding bổ sung và văn bản câu trả lời màu #5a585a.

### Display Headline
**Vai trò:** Văn bản hero và tiêu đề section

Tomato Grotesk 600 ở 153–176px, line-height 0.77–0.80, #0f0f0f hoặc #000000. Nén line-height cực đoan khiến tiêu đề nhiều từ có cảm giác như một khối thị giác duy nhất. Luôn căn giữa hoặc căn trái — không bao giờ justified.

### Section Eyebrow
**Vai trò:** Văn bản nhỏ phía trên display headline

Tomato Grotesk 500 ở 14–18px, #0f0f0f hoặc #5a585a, căn giữa phía trên display headline (ví dụ 'One wallet for all your crypto' phía trên 'Take Ctrl.'). Cung cấp bối cảnh tông màu cho headline khổng lồ bên dưới.

### Social Auth Icon Cluster
**Vai trò:** Nút OAuth provider

Ba icon tròn nhỏ (Google G, Facebook f, Apple logo) ở ~28–35px, mỗi icon trong một vòng tròn pastel mềm (xanh dương, vàng, xanh lá nhạt) với glyph thương hiệu ở trung tâm. Sắp xếp theo hàng ngang trên card đăng nhập xã hội.

### Phone Mockup Container
**Vai trò:** Khung xem trước sản phẩm

Khung thiết bị hình chữ nhật cao (tỷ lệ màn hình điện thoại) với nội thất trắng hiển thị UI ứng dụng, được bao quanh bởi các phần tử confetti rải rác (chip vàng, hồng, xanh dương với văn bản vui tươi). Khung có viền 1px #0f0f0f và radius ~17.5px.

### Chrome Dots Icon
**Vai trò:** Chỉ báo trình duyệt/extension

Ba vòng tròn nhỏ chồng lên nhau theo hàng (thường là xanh lá, vàng, đỏ hoặc màu thương hiệu), đường kính 12–16px mỗi vòng, dùng inline trước nhãn download. Một dấu hiệu nhận biết của thương hiệu Ctrl — xác định tải xuống Chrome extension.

### Plus Toggle Icon
**Vai trò:** Chỉ báo mở rộng/thu gọn cho accordion

Nút tròn, viền 1px #0f0f0f, đường kính ~24px, chứa glyph plus mảnh. Dùng trên hàng FAQ và bất kỳ nội dung có thể thu gọn nào. Không có nền — chỉ outline.

## Do's and Don'ts

### Nên làm
- Dùng #05c92f (Acid Lime) độc quyền cho pill download/CTA chính — đây là màu hành động màu sắc duy nhất trong hệ thống
- Đặt display headline ở 153–176px với line-height 0.77–0.80 để đạt hiệu ứng cắt kiến trúc
- Dùng radius 17.5px cho card và 35px cho nút/input — bo tròn hai cấp này là dấu hiệu cấu trúc của hệ thống
- Thể hiện elevation thông qua chuyển đổi màu bề mặt (#f9faf9 → #ffffff → #ecefec) và viền 1px, không bao giờ dùng drop shadows
- Rải rác card confetti màu (vàng, hồng, xanh dương) khắp các section tính năng để thêm năng lượng vào canvas đơn sắc — giới hạn 2–3 card mỗi vùng thị giác
- Giữ tất cả văn bản body và UI ở weight 500, tất cả văn bản display ở weight 600 — không giới thiệu weight 400 hoặc 700
- Dùng Tomato Grotesk làm font duy nhất; không bao giờ kết hợp với họ font thứ hai

### Không nên làm
- Không dùng drop shadows, glows, hoặc hiệu ứng mờ — hệ thống cố tình phẳng và dựa trên viền
- Không dùng nhiều hơn một màu card accent trong một nhóm thị giác duy nhất — hiệu ứng confetti yêu cầu khoảng cách giữa các màu
- Không đặt văn bản display với line-height trên 0.90 — nén chặt là điều khiến headline có cảm giác hoành tráng
- Không giới thiệu màu hành động thứ hai cho CTA phụ — dùng nút đen đặc hoặc ghost thay vì thêm pill màu
- Không dùng góc nhọn (0px radius) trên bất kỳ phần tử tương tác nào — tối thiểu 9px trên nav, 17.5px trên card, 35px trên nút
- Không kết hợp CTA xanh lá với phần tử xanh lá khác trên cùng màn hình — nó phải là điểm nhấn màu sắc duy nhất
- Không dùng #000000 và #0f0f0f thay thế cho nhau — dành #0f0f0f cho viền và bề mặt tối, #000000 cho văn bản chính và nav

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-----|-----|--------|----------|
| 0 | Canvas | `#f9faf9` | Nền trang — trắng ấm làm mềm độ tương phản gay gắt của trắng tinh |
| 1 | Card | `#ffffff` | Card nội dung, panel tính năng, và khối nội dung nâng cao |
| 2 | Bone Surface | `#ecefec` | Nav pill, hàng accordion FAQ, bề mặt tương tác mờ |
| 3 | Input | `#eeeeee` | Nền trường biểu mẫu, trạng thái disabled |

## Elevation

Hệ thống này cố tình tránh box-shadows. Elevation được thể hiện thông qua chuyển đổi màu bề mặt (canvas #f9faf9 → card #ffffff → bone #ecefec) và viền mảnh 1–2px màu #0f0f0f hoặc #5a585a. Cách tiếp cận phẳng, dựa trên viền giữ cho giao diện có cảm giác đồ họa và giống in ấn, như sticker dán trên giấy. Không giới thiệu drop shadows, glows, hoặc hiệu ứng mờ — chúng sẽ phá vỡ ngôn ngữ sticker/collage.

## Imagery

Ảnh chụp màn hình sản phẩm được trình bày bên trong khung mockup điện thoại với các phần tử confetti màu rải rác (chip giống sticker màu vàng, hồng, xanh dương với văn bản ngắn vui tươi) được sắp xếp xung quanh thiết bị. Không có ảnh chụp lối sống, không có hình ảnh con người. Ngôn ngữ thị giác là sticker-bomb/collage — các mảnh accent giống giấy màu chồng lên nhau và trôi nổi xung quanh khung sản phẩm sạch sẽ trên nền trắng. Icon dạng line, stroke 1–1.5px, đơn sắc (#0f0f0f) trừ khi hoạt động như bảng màu confetti. Thẩm mỹ mang phong cách 'designer's moodboard' — sự hỗn loạn có chủ đích xung quanh một sản phẩm sạch sẽ duy nhất.

## Layout

Các section full-width với nội dung căn giữa max-width ~1200px. Hero căn giữa: eyebrow text → display headline khổng lồ → green CTA pill, tất cả xếp chồng dọc với khoảng trống dọc rộng rãi. Các section tính năng xen kẽ giữa bố cục trái-text/phải-visual và căn giữa. Section FAQ căn trái với eyebrow căn giữa phía trên display heading. Navigation là thanh trên cùng với logo trái, nav pill giữa, nút download phải. Nhịp điệu dọc dùng section gap 80px; card trong section dùng padding 26px. Cảm giác tổng thể rộng rãi nhưng nén trong type — whitespace rộng bao quanh các khối văn bản dày đặc, line-height chặt.

## Agent Prompt Guide

## Quick Color Reference
- Text (primary): #0f0f0f
- Text (muted): #5a585a
- Background (canvas): #f9faf9
- Background (card): #ffffff
- Border: #0f0f0f
- Accent (confetti cards): #fcea59, #ffd0e2, #a7cbf6
- primary action: #0f0f0f (filled action)

## Example Component Prompts

1. Tạo Primary Action Button: nền #0f0f0f, chữ #ffffff, radius 9999px, padding pill nhỏ gọn. Dùng xử lý đặc này cho CTA chính.

2. **Confetti Feature Card**: Nền Cotton Pink (#ffd0e2), radius 17.5px, padding 26px. Headline 'Create your wallet in seconds.' bằng Tomato Grotesk 500, 25px, line-height 1.13, #0f0f0f, kèm icon tia sét nhỏ. Tag 'Simple' ở góc dưới trái bằng 11px weight 500 trên pill trắng với radius 14px.

3. **FAQ Accordion Row**: Nền #ecefec, radius 17.5px, padding dọc 26px. Văn bản câu hỏi bằng Tomato Grotesk 500, 18px, #0f0f0f. Nút plus tròn căn phải: viền 1px #0f0f0f, đường kính 24px, glyph plus mảnh.

4. **Ghost Nav Pill**: Nền #ecefec, radius 9px, padding 7px 18px. Bốn link ('$CTRL', 'Support', 'Security', 'Resources') ở 13px weight 500, #0f0f0f, được phân cách bằng dải phân cách dọc 1px màu #0f0f0f.

5. **Display FAQ Heading**: Section eyebrow 'Any questions?' bằng 18px weight 500, #0f0f0f, căn giữa. Bên dưới: 'FAQ' bằng Tomato Grotesk 600, 153px, line-height 0.80, #0f0f0f, căn trái.

## Similar Brands

- **Phantom Wallet** — Cùng thẩm mỹ confetti-card vui tươi trên nền trắng với một màu nhấn tươi sáng duy nhất dẫn dắt CTA chính, và nút download hình pill tương tự
- **Rainbow Wallet** — Chia sẻ card accent màu giống sticker rải rác trên layout trắng sạch, với headline nén cỡ lớn làm điểm nhấn hero
- **Notion** — Cùng canvas trắng ấm (#f9faf9) và phong cách component phẳng dựa trên viền không có drop shadows, dựa vào chuyển đổi màu bề mặt cho thứ bậc
- **Linear** — Kỷ luật single-typeface giống hệt (một grotesque tùy chỉnh ở weight 500/600), line-height chặt trên văn bản display, và container navigation hình pill
- **Trust Wallet** — Cấu trúc trang sản phẩm crypto-wallet tương tự với hero căn giữa, pill CTA download một màu, và chrome đơn sắc được nhấn bằng accent chức năng

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-acid-lime: #05c92f;
  --color-sticker-yellow: #fcea59;
  --color-cotton-pink: #ffd0e2;
  --color-powder-blue: #a7cbf6;
  --color-obsidian: #000000;
  --color-carbon: #0f0f0f;
  --color-ash-gray: #5a585a;
  --color-slate-gray: #6e726e;
  --color-paper-white: #f9faf9;
  --color-pure-white: #ffffff;
  --color-bone: #ecefec;
  --color-plaster: #eeeeee;

  /* Typography — Font Families */
  --font-tomato-grotesk: 'Tomato Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 11px;
  --leading-caption: 1.5;
  --text-body-lg: 18px;
  --leading-body-lg: 1.5;
  --text-subheading: 25px;
  --leading-subheading: 1.13;
  --text-heading-sm: 35px;
  --leading-heading-sm: 1.06;
  --text-heading: 53px;
  --leading-heading: 1.02;
  --text-heading-lg: 84px;
  --leading-heading-lg: 0.9;
  --text-display: 153px;
  --leading-display: 0.8;
  --text-display-xl: 176px;
  --leading-display-xl: 0.77;

  /* Typography — Weights */
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-7: 7px;
  --spacing-9: 9px;
  --spacing-11: 11px;
  --spacing-13: 13px;
  --spacing-18: 18px;
  --spacing-26: 26px;
  --spacing-31: 31px;
  --spacing-35: 35px;
  --spacing-42: 42px;
  --spacing-44: 44px;
  --spacing-53: 53px;
  --spacing-55: 55px;
  --spacing-70: 70px;
  --spacing-105: 105px;
  --spacing-149: 149px;

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

  /* Border Radius */
  --radius-lg: 8.78054px;
  --radius-xl: 14px;
  --radius-2xl: 17.5611px;
  --radius-3xl: 26.3416px;
  --radius-3xl-2: 35.1222px;
  --radius-full: 52.6833px;

  /* Named Radii */
  --radius-nav: 9px;
  --radius-tags: 14px;
  --radius-cards: 17.5px;
  --radius-inputs: 35px;
  --radius-buttons: 35px;
  --radius-largeelements: 53px;

  /* Surfaces */
  --surface-canvas: #f9faf9;
  --surface-card: #ffffff;
  --surface-bone-surface: #ecefec;
  --surface-input: #eeeeee;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-acid-lime: #05c92f;
  --color-sticker-yellow: #fcea59;
  --color-cotton-pink: #ffd0e2;
  --color-powder-blue: #a7cbf6;
  --color-obsidian: #000000;
  --color-carbon: #0f0f0f;
  --color-ash-gray: #5a585a;
  --color-slate-gray: #6e726e;
  --color-paper-white: #f9faf9;
  --color-pure-white: #ffffff;
  --color-bone: #ecefec;
  --color-plaster: #eeeeee;

  /* Typography */
  --font-tomato-grotesk: 'Tomato Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 11px;
  --leading-caption: 1.5;
  --text-body-lg: 18px;
  --leading-body-lg: 1.5;
  --text-subheading: 25px;
  --leading-subheading: 1.13;
  --text-heading-sm: 35px;
  --leading-heading-sm: 1.06;
  --text-heading: 53px;
  --leading-heading: 1.02;
  --text-heading-lg: 84px;
  --leading-heading-lg: 0.9;
  --text-display: 153px;
  --leading-display: 0.8;
  --text-display-xl: 176px;
  --leading-display-xl: 0.77;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-7: 7px;
  --spacing-9: 9px;
  --spacing-11: 11px;
  --spacing-13: 13px;
  --spacing-18: 18px;
  --spacing-26: 26px;
  --spacing-31: 31px;
  --spacing-35: 35px;
  --spacing-42: 42px;
  --spacing-44: 44px;
  --spacing-53: 53px;
  --spacing-55: 55px;
  --spacing-70: 70px;
  --spacing-105: 105px;
  --spacing-149: 149px;

  /* Border Radius */
  --radius-lg: 8.78054px;
  --radius-xl: 14px;
  --radius-2xl: 17.5611px;
  --radius-3xl: 26.3416px;
  --radius-3xl-2: 35.1222px;
  --radius-full: 52.6833px;
}
```