---
title: "Uniswap design system"
variant: extended
source: https://app.uniswap.org/
captured_at: 2026-10-12
theme: light
industry: crypto
generator: Design DNA (https://four.wiralomi.com/style/app-uniswap-org)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Uniswap · Design System

> Bright, open DeFi with a vivid pink signal

**Theme:** light · **Industry:** crypto · **Source:** https://app.uniswap.org/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Uniswap pairs a spacious white canvas and crisp typography with a vivid pink signal for its core actions. The homepage balances a centered swap interface with colorful token art, product cards, protocol statistics, and compact resource links.

## North star

Keep the trading action unmistakable on a white, spacious canvas, and reserve saturated color for interaction and illustrative accents.

## Overview

The page uses white as a dominant canvas, keeping the swap experience legible and making the high-chroma pink CTA and wordmark immediately recognizable. Near-black text provides strong contrast; muted gray supports supporting copy, while pale gray and lightly tinted surfaces separate interface fields, cards, and product stories without heavy framing. Basel Grotesk supplies a contemporary, rounded sans-serif voice, with large centered hero typography and compact navigation and utility text. The top viewport is deliberately sparse: a slim navigation row sits above a centered headline and exchange form, while soft, blurred token illustrations float around the edges. Lower sections shift into editorial splits and a colorful feature-card grid, using pastel pink, lilac, blue, orange, and mint chiefly as contextual product illustration colors. Rounded cards, subtle hairlines, and generous whitespace keep these varied blocks cohesive.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Dominant page canvas and the clean base for navigation, swap fields, and market cards. |
| Soft Ink | `#131313` | `--color-soft-ink` | neutral | Primary headings, body copy, and navigation labels. |
| Quiet Line | `#ececec` | `--color-quiet-line` | neutral | Fine card and interface dividers; keep borders subtle against white. |
| Uniswap Pink | `#ff37c7` | `--color-uniswap-pink` | brand | Wordmark, primary CTA, selected-token control, and highlighted links. |
| Pink Veil | `#ffeeff` | `--color-pink-veil` | surface | Soft pink-tinted navigation, button, and link surfaces. |
| Muted Graphite | `#6a6a6a` | `--color-muted-graphite` | neutral | Secondary copy, navigation details, and explanatory text. |
| Fog Gray | `#c4c4c4` | `--color-fog-gray` | semantic | Measured in a gradient alongside white; treat as a subtle tonal transition, not a core brand fill. |
| Cloud Surface | `#f9f9f9` | `--color-cloud-surface` | surface | Secondary card and control backgrounds, including lightly distinguished feature panels. |
| Token Orange | `#ff4d00` | `--color-token-orange` | semantic | Accent text within colorful product and token illustrations, not a primary page control. |
| Vivid Fuchsia | `#f50db4` | `--color-vivid-fuchsia` | accent | Additional bright pink accent in headings and illustrated product content. |
| Lilac Mist | `#f8f5ff` | `--color-lilac-mist` | surface | Pale violet-tinted link and feature surfaces. |
| Token Blue | `#2abdff` | `--color-token-blue` | semantic | Blue text and accents appearing in token and feature illustrations. |
| Pool Mint | `#00c3a0` | `--color-pool-mint` | semantic | Mint-colored type and graphics in liquidity-related product illustration. |
| Orbit Violet | `#8251fb` | `--color-orbit-violet` | semantic | Violet accent in token art and illustrated feature panels. |
| Market Green | `#0c8911` | `--color-market-green` | semantic | Green market or positive-value details; mostly a data and token-art accent. |
| Button Mist | `#f2f2f2` | `--color-button-mist` | surface | Subtle button border and hovered secondary-surface tone. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#ffeeff` (Pink Veil) · `--color-surface-2` → `#f9f9f9` (Cloud Surface) · `--color-surface-3` → `#f8f5ff` (Lilac Mist) · `--color-text` → `#131313` (Soft Ink) · `--color-text-muted` → `#6a6a6a` (Muted Graphite) · `--color-border` → `#ececec` (Quiet Line) · `--color-accent` → `#ff37c7` (Uniswap Pink) · `--color-accent-2` → `#ff4d00` (Token Orange) · `--color-accent-3` → `#f50db4` (Vivid Fuchsia) · `--color-on-accent` → `#0a0a0a`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#131313` | `#ffffff` | 18.58:1 | AAA |
| `#131313` | `#ffeeff` | 16.74:1 | AAA |
| `#131313` | `#f9f9f9` | 17.65:1 | AAA |
| `#131313` | `#f8f5ff` | 17.25:1 | AAA |
| `#6a6a6a` | `#ffffff` | 5.41:1 | AA |
| `#6a6a6a` | `#ffeeff` | 4.87:1 | AA |
| `#6a6a6a` | `#f9f9f9` | 5.14:1 | AA |
| `#6a6a6a` | `#f8f5ff` | 5.02:1 | AA |
| `#ff37c7` | `#ffffff` | 3.17:1 | AA-large |
| `#ff37c7` | `#ffeeff` | 2.86:1 | fail |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0) 100%, rgb(255, 255, 255) 100%)`
- `radial-gradient(rgba(19, 19, 19, 0.25) 0.5px, rgba(0, 0, 0, 0) 0px)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Basel | `--font-body` | webfont | 485, 535, 500 | Brand-wide sans-serif for navigation, hero and section headings, interface labels, and body copy. | DM Sans |

- **Basel:** Use the measured medium weights; keep tracking neutral and casing natural, with no forced uppercase.

### Type scale — Perfect Fourth (ratio ≈ 1.373, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 485 | 1.19 | 0 | — | Basel | Large hero headline, centered above the swap interface. |
| h1 | 52px | 500 | 1 | 0 | — | Basel | Primary hero or major section heading. |
| h2 | 36px | 485 | 1.11 | 0 | — | Basel | Prominent section headings, including the lower protocol introduction. |
| h3 | 24px | 485 | 1.17 | 0 | — | Basel | Feature-card titles and subordinate content headings. |
| body | 18px | 535 | 1.15 | 0 | — | Basel | Main descriptive copy and explanatory text. |
| caption | 16px | 485 | 1.38 | 0 | — | Basel | Compact helper text, labels, and card details. |
| nav | 18px | 485 | 1.33 | 0 | — | Basel | Top-level navigation items and site links. |
| link | 24px | 485 | 1.17 | 0 | — | Basel | Prominent resource links and linked feature titles. |

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 2, 4, 5, 6, 8, 12, 16, 20, 24, 32, 40, 48 px.
- Section rhythm 40px · element gap 8px · card padding 18px · max content width 741px.

Use a compact top navigation, then a centered hero with a narrow exchange form and ample open space around it. The measured content max width is 741px; preserve a readable central column rather than stretching content across the viewport. Lower content alternates editorial split sections, statistic cards, and a multi-column feature-card grid, followed by resource rows and a compact footer. Align the hero centrally and lower editorial copy to the left. Maintain the measured 8px spacing base and 40px section gap as a consistent rhythm, with a compact overall density.

## Shape & elevation

- Radius: button `50%` · card `20px` · media `50%` · nav `50%` · link `32px` · xs `3px` · sm `4px` · md `5px` · lg `12px` · xl `20px` · 2xl `32px` · pill `9999px`
- Shadow `md` (button): `color(srgb 0.0745098 0.0745098 0.0745098 / 0.00313726) 0px 0px 10px 0px`
- Shadow `hairline` (other): `oklab(0.547571 -0.143118 0.108348 / 0.24) 0px 0px 0px 3.94576px`
- Motion: standard transition `0.1s cubic-bezier(0.17, 0.67, 0.45, 1)` on interactive elements.

The design is mostly flat: white cards and pale surfaces rely on contrast and fine borders rather than strong shadows. Use rounded card shapes and thin light-gray hairlines to define groups. Reserve very subtle elevation for interactive controls, and let the hero's blurred token artwork create depth without adding heavy interface shadows.

## Imagery

No photographic or video-led treatment defines the page. The hero is surrounded by softly blurred, floating token marks, while lower feature panels use colorful product illustrations and interface mockups. Keep these visuals contained within their respective cards or around the hero edges; their vivid colors belong to illustration and ecosystem identity, not to the neutral page canvas.

## Components

### Top navigation

A compact horizontal row with the pink Uniswap mark, text links, small utility icons, and a bright pink rounded Get started CTA.

### Swap form

Centered, stacked sell and buy areas with large amount inputs, token selection, a direction switch, and a full-width CTA.

### Token selector

A pill-shaped Select token control using #ff37c7 with dark text and a small dropdown indicator.

### Market cards

White rounded cards for token and price details; use restrained separation and pink emphasis for linked or highlighted values.

### Protocol statistics

A grouped light-gray statistic panel with compact labels and clear separation between metrics.

### Feature cards

Rounded product panels with pastel-tinted surfaces, concise copy, a link, and a contained product illustration.

### Resource rows

Simple help, blog, docs, and social links set in clear horizontal rows with subtle divider lines and directional icons.

### Measured component styles

- **Primary button** (“Get started”): background #ff37c7 · text #0a0a0a · border 1px solid · radius 12px · padding 8px 12px · 485 16px Basel
- **Secondary button** (“Get started”): background #ffeffb · text #0a0a0a · border 1px solid · radius 20px · padding 16px 20px · 485 16px Basel
- **Link** (“Wallet”): transparent background · text #ff37c7 · radius 0px · padding 4px 0px 0px 0px · 535 16px Basel
- **Input**: transparent background · text #131313 · radius 0px · padding 0px · 485 36px Basel
- **Card** (“Ethereum ETH $2,569.87 2.82%”): background #ffffff · text #ff37c7 · radius 20px · padding 16px 24px 16px 16px · 485 16px Basel
- **Navigation item** (“Uniswap”): transparent background · text #ff37c7 · radius 0px · padding 0px · 485 16px Basel

## Do

- Keep the main page canvas white and uncluttered.
- Use Uniswap Pink #ff37c7 to emphasize primary actions and brand links.
- Center the hero headline and swap form as one focal group.
- Separate content with pale surfaces and delicate hairlines.
- Use pastel accent colors mainly within token art and feature illustrations.
- Use rounded cards and controls consistent with the measured component radii.

## Don't

- Do not flood the page with saturated accent backgrounds.
- Do not introduce heavy shadows or thick borders.
- Do not stretch the swap interface across the full viewport.
- Do not use token illustration colors as the main text palette.
- Do not crowd the hero with extra copy or decorative controls.
- Do not force uppercase styling or exaggerated letter spacing.

## Agent prompt

Build a new page in Uniswap's visual style using a white canvas (#ffffff), Soft Ink (#131313) typography, and delicate Quiet Line (#ececec) dividers. Use Uniswap Pink (#ff37c7) sparingly for primary actions, links, and brand cues; pale surfaces such as Cloud Surface (#f9f9f9) and Pink Veil (#ffeeff) should distinguish controls and cards. Set all text in Basel or a close sans-serif substitute, with neutral tracking and natural case. Keep the header compact and the main action centered in a narrow column, surrounded by generous whitespace. For supporting content, use editorial text-and-stat splits and rounded feature cards with contained illustrations. Keep blue, mint, violet, and orange accents inside visual assets rather than broad page fills. Favor flat surfaces, subtle borders, and quick, understated interaction feedback.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Single long homepage: compact navigation, centered swap hero, editorial protocol content, feature-card grid, resource links, and footer. | Token amount entry, Token selection, Swap direction control, Primary get-started action | Centered hero, Floating token artwork, Rounded swap fields, Pastel feature cards, Resource link rows |

## Source CSS custom properties (selected)

```css
--font-basel: "Basel Grotesk", sans-serif;
--shadow-short: 0px 1px 6px 2px #00000008, 0px 1px 2px 0px #00000005;
--shadow-medium: 0px 6px 12px -3px #1313130a, 0px 2px 5px -2px #13131308;
--shadow-large: 0px 10px 20px -5px #1313130d, 0px 4px 12px -3px #1313130a;
--shadow-color: #00000026;
--shadow-color-hover: #0003;
--radius: .625rem;
--background: #fff;
--foreground: oklch(14.5% 0 0);
--card-foreground: oklch(14.5% 0 0);
--popover-foreground: oklch(14.5% 0 0);
--primary: oklch(20.5% 0 0);
--primary-foreground: oklch(98.5% 0 0);
--secondary: oklch(97% 0 0);
--secondary-foreground: oklch(20.5% 0 0);
--muted-foreground: oklch(55.6% 0 0);
--accent: oklch(97% 0 0);
--accent-foreground: oklch(20.5% 0 0);
--border: oklch(92.2% 0 0);
--sidebar-foreground: oklch(14.5% 0 0);
--sidebar-primary: oklch(20.5% 0 0);
--sidebar-primary-foreground: oklch(98.5% 0 0);
--sidebar-accent: oklch(97% 0 0);
--sidebar-accent-foreground: oklch(20.5% 0 0);
--sidebar-border: oklch(92.2% 0 0);
--surface1: #fff;
--surface1-hovered: #fcfcfc;
--surface2: #f9f9f9;
--surface2-hovered: #f2f2f2;
--surface3: #13131314;
--surface3-hovered: #1313131a;
--surface3-solid: #f2f2f2;
--surface4: #ffffffa3;
--surface5: #0000000a;
--surface5-hovered: #0000000f;
--accent1: #ff37c7;
--accent1-hovered: #e500a5;
--accent2: #ff37c714;
--accent2-hovered: #ff37c71f;
--accent2-solid: #fff3fc;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/app-uniswap-org