# Uniswap

> Uniswap — Style Reference

## Prompt Content

```
# Uniswap — Style Reference
> Swap terminal kẹo bông gòn trên nền trắng. Những điểm nhấn magenta rực rỡ xuyên qua giao diện vốn không màu, lơ lửng, trong khi các quả cầu màu mềm mại trôi nổi ở nền như tiền tệ được hiện hình.

**Theme:** light

Uniswap mang thẩm mỹ swap terminal nhẹ nhàng, thoáng đãng: một canvas gần như trắng, nơi một màu thương hiệu magenta-hồng rực rỡ duy nhất mang mọi tín hiệu tương tác, được bao quanh bởi các quả cầu màu mềm mại lơ lửng, tạo cho trang một bầu không khí vui tươi, không trọng lượng. Typography tự tin và chặt chẽ — một display face tùy chỉnh (Basel) ở weight gần đen, với weight 485 độc đáo nằm giữa regular và medium, tạo cảm giác nén nhẹ, hiện đại trên cả display copy và UI copy. Các component nhỏ gọn và bo tròn — radius 20px trên swap cards, 16px trên buttons, pill shapes cho tokens — với shadow cực nhẹ giúp bề mặt trắng thoáng đãng. Trải nghiệm tổng thể giống như một trung tâm điều khiển DeFi được thể hiện bằng không khí pastel: đủ cấu trúc để tin tưởng giao dịch tiền, đủ màu sắc để cảm thấy sống động.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|-----|---------|-------|---------|
| Uniswap Magenta | `#ff37c7` | `--color-uniswap-magenta` | Accent hồng hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên thành màu CTA chính |
| Ink | `#131313` | `--color-ink` | Văn bản chính, nav labels, headings, body copy, và icon strokes mặc định — gần đen thay vì đen tuyền để đọc mềm hơn |
| Charcoal | `#222222` | `--color-charcoal` | Văn bản phụ và border UI đậm khi cần thêm trọng lượng mà không dùng đen tuyền |
| Steel | `#6a6a6a` | `--color-steel` | Helper text mờ, secondary labels, inactive nav items, và supporting copy |
| Fog | `#acacac` | `--color-fog` | Disabled states, placeholder text, và divider mờ |
| Pure White | `#ffffff` | `--color-pure-white` | Canvas trang, bề mặt card, và button text trên nền magenta |
| Bone | `#f2f2f2` | `--color-bone` | Border button nhẹ và surface tint mờ |
| Onyx | `#000000` | `--color-onyx` | Văn bản tương phản tối đa và icon fills chọn lọc khi cần đen tuyệt đối |
| Electric Violet | `#8251fb` | `--color-electric-violet` | Accent icon trang trí và màu quả cầu nổi — thuộc bảng màu bầu không khí hero, không phải UI state |
| Ember Orange | `#ff4d00` | `--color-ember-orange` | Quả cầu trang trí và accent icon trong bầu không khí hero |
| Hot Pink | `#f50db4` | `--color-hot-pink` | Accent quả cầu trang trí — phiên bản đậm hơn của magenta chính để tạo biến thể tông màu trong các đám mây nền |
| Sky Cyan | `#2abdff` | `--color-sky-cyan` | Quả cầu trang trí và accent icon trong bầu không khí hero |
| Mint Teal | `#00c3a0` | `--color-mint-teal` | Quả cầu trang trí và accent icon trong bầu không khí hero |
| Coral Red | `#e01a2b` | `--color-coral-red` | Accent quả cầu trang trí và tint icon chọn lọc |
| Forest Green | `#0c8911` | `--color-forest-green` | Accent xanh lá hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Dùng làm accent hỗ trợ, không phải màu trạng thái |

## Tokens — Typography

### Basel — Typeface duy nhất cho mọi bề mặt văn bản — nav, body, buttons, headings, và display. Weight 485 đặc trưng (hơi nặng hơn regular, nhẹ hơn medium) tạo cảm giác nén nhẹ độc đáo mà không system font nào tái tạo được. Tracking -0.02em nhất quán giúp nhịp điệu chặt chẽ ở mọi tỷ lệ, từ caption 12px đến display 64px. · `--font-basel`
- **Thay thế:** Inter (free match gần nhất cho cấu trúc geometric grotesque) hoặc General Sans; tái tạo weight 485 bằng cách dùng 500 ở độ mờ 96%
- **Weights:** 400, 485, 500, 535
- **Kích thước:** 12, 13, 14, 16, 18, 24, 36, 52, 64
- **Line height:** 1.2–1.5 body, 0.96–1.19 display
- **Letter spacing:** -0.02em trên mọi kích thước
- **Vai trò:** Typeface duy nhất cho mọi bề mặt văn bản — nav, body, buttons, headings, và display. Weight 485 đặc trưng (hơi nặng hơn regular, nhẹ hơn medium) tạo cảm giác nén nhẹ độc đáo mà không system font nào tái tạo được. Tracking -0.02em nhất quán giúp nhịp điệu chặt chẽ ở mọi tỷ lệ, từ caption 12px đến display 64px.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|---------|------------|-------------|----------------|-------|
| caption | 12px | 1.33 | -0.24px | `--text-caption` |
| body-sm | 14px | 1.25 | -0.28px | `--text-body-sm` |
| body | 16px | 1.49 | -0.32px | `--text-body` |
| subheading | 18px | 1.33 | -0.36px | `--text-subheading` |
| heading-sm | 24px | 1.2 | -0.48px | `--text-heading-sm` |
| heading | 36px | 1.15 | -0.72px | `--text-heading` |
| heading-lg | 52px | 1 | -1.04px | `--text-heading-lg` |
| display | 64px | 0.96 | -1.28px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 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` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 60 | 60px | `--spacing-60` |
| 120 | 120px | `--spacing-120` |

### Border Radius

| Element | Giá trị |
|---------|---------|
| nav | 20px |
| cards | 20px |
| links | 32px |
| tokens | 999999px |
| buttons | 12-16px |
| swap-widget | 20px |

### Shadows

| Tên | Giá trị | Token |
|-----|---------|-------|
| md | `color(srgb 0.0745098 0.0745098 0.0745098 / 0.00313726) 0p...` | `--shadow-md` |

### Layout

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

## Components

### Filled Magenta CTA
**Vai trò:** Primary action button — Connect wallet, Get started, Select token

Nền #ff37c7, chữ trắng, radius 16px, padding 12px 20px, Basel 485 ở 16px. Nền magenta đặc trên canvas trắng là khoảnh khắc UI nổi bật nhất; không bao giờ dùng quá một cái trên mỗi viewport.

### Soft Pink CTA
**Vai trò:** Secondary full-width action — Get started trong hero

Nền hồng nhạt (gần #f2f2f2 với pha magenta), chữ magenta, radius 20px, padding 16px 24px. Được xem như phiên bản nhẹ nhàng hơn của filled magenta button cho các trường hợp phiên bản full-saturation sẽ lấn át hero.

### Ghost Text Link
**Vai trò:** Tertiary navigation — Trade without fees, Get the app

Không nền, không border. Basel 485 ở 14–16px màu #131313 với mũi tên glyph ở cuối. Nằm inline với body copy hoặc trong cụm nav góc trên bên phải.

### Swap Input Card
**Vai trò:** Container giao diện token swap — Panel Sell và Buy

Bề mặt trắng, border 1px màu #f2f2f2, radius 20px, padding 16px 20px. Label (Sell/Buy) ở 14px Steel, giá trị input ở 36px Ink. Token selector chip là một pill (radius 999999px) với token icon + ticker + chevron.

### Token Selector Pill
**Vai trò:** Token picker inline bên trong swap cards

Pill trắng, radius 999999px, border 1px #f2f2f2, padding 6px 12px. Chứa token icon hình tròn 24px (ETH, v.v.) và ticker Basel 500 16px, kèm chevron 12px.

### Stat Tile
**Vai trò:** Hiển thị số liệu — All time volume, TVL, swapper count, 24H volume

Card trắng, border 1px #f2f2f2, radius 20px, padding 20px. Label ở 14px Steel, giá trị ở 36–52px Ink. Biến thể 24H volume dùng #0c8911 cho text giá trị và nền tint #c5e3c6 để báo hiệu dữ liệu thời gian thực.

### Nav Bar
**Vai trò:** Navigation cấp cao nhất

Màu trắng với hiệu ứng mờ/sương mờ nhẹ. Logo (kỳ lân magenta) bên trái, nav links Basel 485 14–16px, ô tìm kiếm trung tâm (pill bo tròn, border 1px, placeholder text màu Fog), cụm bên phải với Ghost text link + nút Connect filled magenta. Active nav item có highlight nền magenta nhẹ.

### Search Field
**Vai trò:** Tìm kiếm token/pool/wallet trung tâm trong nav

Hình pill (radius 999999px), border 1px #f2f2f2, nền trắng, cao 40px. Icon search dẫn đầu màu Steel, placeholder ở 14px Fog. Badge gợi ý phím slash ở bên phải.

### Feature Card
**Vai trò:** Điểm vào sản phẩm — Web App, Uniswap Wallet

Card bo tròn với radius 20px, nền tint nhẹ (pastel blue hoặc pink wash), padding 24px. Icon góc trên bên trái bằng chromatic accent, heading ở 24px Ink, text mô tả nhẹ bên dưới.

### Floating Decorative Orb
**Vai trò:** Element nền tạo bầu không khí trong hero

Hình tròn mờ lớn (đường kính 60–120px) rải rác khắp hero với màu violet, cam, hồng, cyan, teal, và đỏ. Không border, không shadow — thuần đám mây màu. Chúng mang cá tính của trang mà không thêm trọng lượng UI.

### Section Heading
**Vai trò:** Tiêu đề section cấp trang — Build for all the ways you swap

Basel 485 ở 36–52px màu #131313, line-height 1.15, letter-spacing -0.02em. Căn trái với lề trái thoải mái; không gạch chân, không accent bar.

## Do's and Don'ts

### Nên làm
- Dùng #ff37c7 cho filled action buttons — khoảnh khắc chromatic duy nhất trong UI
- Đặt tất cả type thành Basel weight 485 với letter-spacing -0.02em trên mọi kích thước
- Dùng radius 20px cho mọi bề mặt card và 999999px cho token pills và search fields
- Giữ canvas trang là pure white (#ffffff); để floating orbs cung cấp toàn bộ màu nền
- Dùng #0c8911 riêng cho các giá trị thống kê thời gian thực được làm nổi bật — không dùng màu khác cho nhấn mạnh dữ liệu
- Kết hợp padding 16px bên trong card với gap 8px giữa các element để tạo nhịp điệu gọn nhưng thoáng
- Đặt tối đa một filled magenta CTA trên mỗi viewport; dùng ghost hoặc soft-pink variants cho các hành động bổ sung

### Không nên làm
- Không đưa chromatic accent thứ hai vào UI — hệ thống là monochrome + magenta theo thiết kế
- Không dùng pure black (#000000) cho body copy — dùng #131313 để đọc mềm hơn, ấm hơn
- Không áp dụng drop shadow nhìn thấy được; shadow duy nhất được phép là shadow 10px black-3% trên elevated widgets
- Không dùng bất kỳ màu nào ngoài bảng màu orb cho nền — orbs trang trí, bề mặt giữ màu trắng
- Không bo tròn buttons thành 999999px (pill) trừ khi chúng là token selectors hoặc search; dùng 12–16px cho CTAs
- Không dùng text màu cho body hoặc nav labels; chỉ #ff37c7 (hành động), #0c8911 (dữ liệu), và thang neutral Ink/Steel
- Không giảm kích thước display 64px hoặc tăng line-height 0.96 — nhịp điệu display chặt chẽ là đặc trưng

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-----|-----|---------|----------|
| 0 | Canvas | `#ffffff` | Nền toàn trang; khoảng trắng giúp magenta và floating orbs mang toàn bộ năng lượng thị giác |
| 1 | Card Surface | `#ffffff` | Swap input cards, stat tiles, và feature cards nằm trên cùng nền trắng nhưng được xác định bởi border mờ hoặc shadow gần như vô hình |
| 2 | Elevated Widget | `#ffffff` | Swap terminal và overlay surfaces; cùng màu trắng nhưng được phân tách bằng shadow 10px black-3% cực kỳ khó nhận thấy |

## Elevation

- **Elevated widget (swap terminal, overlays):** `0px 0px 10px 0px rgba(19, 19, 19, 0.003) — shadow gần như vô hình giúp phân tách bề mặt mà không thêm trọng lượng thị giác`

## Imagery

Ngôn ngữ thị giác bị chi phối bởi các quả cầu màu mờ mềm mại rải rác khắp hero — hình tròn lớn với màu violet, cam, hồng, cyan, teal, và đỏ trôi nổi trên nền canvas trắng như những đám mây chromatic. Đây là hình ảnh bầu không khí duy nhất; không có nhiếp ảnh, không minh họa, không screenshot sản phẩm trong hero. Token icons là logo tròn đơn giản với màu thương hiệu gốc (ETH violet, USDC blue, v.v.) và đóng vai trò là hình ảnh nhận diện chính. Trang chủ yếu là UI-và-typography, với các quả cầu mang lại cá tính mà không cạnh tranh sự chú ý.

## Layout

Container centered max-width 1200px với gutter trái/phải rộng rãi. Hero là một stack dọc căn giữa: display headline 64px, subtitle, swap terminal widget (contained max-width ~420px), và soft-pink CTA bên dưới. Các section bên dưới dùng full-width bands với cùng vùng nội dung centered 1200px. Stats section dùng grid 2 cột với 4 stat tiles. Product feature cards tạo thành grid nhiều cột bên dưới. Navigation là một top bar duy nhất với hiệu ứng mờ/sương mờ, ô tìm kiếm trung tâm, và cụm hành động căn phải. Nhịp điệu dọc được xây dựng trên section gaps 64px với element gaps 8px trong cards.

## Agent Prompt Guide

**Tham chiếu màu nhanh**
- text: #131313
- background: #ffffff
- border: #f2f2f2
- muted text: #6a6a6a
- accent (chỉ decorative orbs): #ff37c7 / #8251fb / #2abdff / #00c3a0 / #ff4d00
- primary action: không có màu CTA riêng biệt

**3-5 Ví dụ Component Prompts**

1. **Hero Section**: Nền trắng #ffffff. Display headline '64px' bằng Basel weight 485, #131313, letter-spacing -1.28px, line-height 0.96. Decorative orbs mềm (hình tròn mờ 120px màu #ff37c7, #2abdff, #8251fb) rải rác trong nền. Swap widget căn giữa (card trắng, radius 20px, border 1px #f2f2f2, padding 20px).

2. **Swap Input Card**: Nền trắng #ffffff, border 1px #f2f2f2, radius 20px, padding 16px 20px. Label 'Sell' ở 14px Basel 485, #6a6a6a, letter-spacing -0.28px. Giá trị input ở 36px Basel 485, #131313. Token selector pill (radius 999999px, nền trắng, border 1px #f2f2f2, padding 6px 12px) với icon ETH 24px và label 'ETH' ở 16px Basel 500.

Không quan sát thấy màu primary action riêng biệt; dùng các neutral button treatments đã trích xuất thay vì phát minh màu CTA filled.

4. **Stat Tile**: Card trắng #ffffff, border 1px #f2f2f2, radius 20px, padding 20px. Label '24H swap volume' ở 14px Basel 485, #6a6a6a. Giá trị ở 36–52px Basel 485, #0c8911, letter-spacing -0.72px. Tùy chọn nền tint #c5e3c6 cho các biến thể dữ liệu thời gian thực.

5. **Ghost Text Link**: Không nền, không border. Text 'Trade without fees' ở 16px Basel 485, #131313, với mũi tên glyph ở cuối →. Đặt inline bên cạnh body copy hoặc trong nav.

## Similar Brands

- **Coinbase** — Cùng cách tiếp cận light-canvas, single-accent-color với swap/trade hero sạch sẽ; cả hai đều dùng CTA filled màu xanh hoặc brand-color trên nền trắng
- **Phantom Wallet** — Giao diện crypto light-mode tương tự với card bo tròn gọn nhẹ, token selectors hình pill, và bảng màu gần như monochrome tối giản được điểm xuyết bởi một accent rực rỡ
- **1inch** — Cả hai đều trình bày swap terminal tập trung làm hero interaction với hệ thống typography chặt chẽ và bề mặt card trắng trên nền sáng
- **Rainbow Wallet** — Chia sẻ thẩm mỹ floating-orb vui tươi trong hero và cách dùng một màu thương hiệu bão hòa duy nhất trên nền giao diện trắng tối giản

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-uniswap-magenta: #ff37c7;
  --color-ink: #131313;
  --color-charcoal: #222222;
  --color-steel: #6a6a6a;
  --color-fog: #acacac;
  --color-pure-white: #ffffff;
  --color-bone: #f2f2f2;
  --color-onyx: #000000;
  --color-electric-violet: #8251fb;
  --color-ember-orange: #ff4d00;
  --color-hot-pink: #f50db4;
  --color-sky-cyan: #2abdff;
  --color-mint-teal: #00c3a0;
  --color-coral-red: #e01a2b;
  --color-forest-green: #0c8911;

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

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.33;
  --tracking-caption: -0.24px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.25;
  --tracking-body-sm: -0.28px;
  --text-body: 16px;
  --leading-body: 1.49;
  --tracking-body: -0.32px;
  --text-subheading: 18px;
  --leading-subheading: 1.33;
  --tracking-subheading: -0.36px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.48px;
  --text-heading: 36px;
  --leading-heading: 1.15;
  --tracking-heading: -0.72px;
  --text-heading-lg: 52px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -1.04px;
  --text-display: 64px;
  --leading-display: 0.96;
  --tracking-display: -1.28px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-w485: 485;
  --font-weight-medium: 500;
  --font-weight-w535: 535;

  /* 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-48: 48px;
  --spacing-60: 60px;
  --spacing-120: 120px;

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

  /* Border Radius */
  --radius-md: 4.8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 24px;
  --radius-3xl-2: 32px;
  --radius-full: 999999px;

  /* Named Radii */
  --radius-nav: 20px;
  --radius-cards: 20px;
  --radius-links: 32px;
  --radius-tokens: 999999px;
  --radius-buttons: 12-16px;
  --radius-swap-widget: 20px;

  /* Shadows */
  --shadow-md: color(srgb 0.0745098 0.0745098 0.0745098 / 0.00313726) 0px 0px 10px 0px;

  /* Surfaces */
  --surface-canvas: #ffffff;
  --surface-card-surface: #ffffff;
  --surface-elevated-widget: #ffffff;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-uniswap-magenta: #ff37c7;
  --color-ink: #131313;
  --color-charcoal: #222222;
  --color-steel: #6a6a6a;
  --color-fog: #acacac;
  --color-pure-white: #ffffff;
  --color-bone: #f2f2f2;
  --color-onyx: #000000;
  --color-electric-violet: #8251fb;
  --color-ember-orange: #ff4d00;
  --color-hot-pink: #f50db4;
  --color-sky-cyan: #2abdff;
  --color-mint-teal: #00c3a0;
  --color-coral-red: #e01a2b;
  --color-forest-green: #0c8911;

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

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.33;
  --tracking-caption: -0.24px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.25;
  --tracking-body-sm: -0.28px;
  --text-body: 16px;
  --leading-body: 1.49;
  --tracking-body: -0.32px;
  --text-subheading: 18px;
  --leading-subheading: 1.33;
  --tracking-subheading: -0.36px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.48px;
  --text-heading: 36px;
  --leading-heading: 1.15;
  --tracking-heading: -0.72px;
  --text-heading-lg: 52px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -1.04px;
  --text-display: 64px;
  --leading-display: 0.96;
  --tracking-display: -1.28px;

  /* 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-48: 48px;
  --spacing-60: 60px;
  --spacing-120: 120px;

  /* Border Radius */
  --radius-md: 4.8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 24px;
  --radius-3xl-2: 32px;
  --radius-full: 999999px;

  /* Shadows */
  --shadow-md: color(srgb 0.0745098 0.0745098 0.0745098 / 0.00313726) 0px 0px 10px 0px;
}
```