---
version: alpha
name: "Uniswap"
description: "Uniswap's site is the rare DeFi protocol that has decided playfulness is on-brand. The canvas is white, headings sit in Basel (Lift Type's rounded grotesque) at 56–88px, and the brand color is \"Uniswap Pink\" `#ff007a` — a hot magenta-pink that anchors every CTA. Where MetaMask leaned warm-friendly and Phantom leaned editorial-restrained, Uniswap leaned playful-confident: rounded 16-24px corners, soft pink-tinted shadows, the unicorn brand mark used sparingly (no NFT-bro language, but the unicorn shows up). Voice is direct-friendly: \"Trade tokens\", \"Earn fees on liquidity\". The whole brand reads as \"DeFi for grown-ups who haven't lost their sense of humor\"."
colors:
  bg: "#ffffff"
  bg-soft: "#f5f6fc"
  bg-warm: "#fff4f9"
  surface: "#ffffff"
  surface-soft: "#fafbfd"
  surface-strong: "#f1f3f9"
  brand: "#ff007a"
  brand-hover: "#e60069"
  brand-pressed: "#cc005f"
  brand-deep: "#a60052"
  brand-tint: "#ffe5f1"
  brand-soft: "#ffb3d6"
  on-brand: "#ffffff"
  text: "#131313"
  text-strong: "#000000"
  text-muted: "#5d6785"
  text-soft: "#888d9b"
  text-faint: "#cdcdcd"
  text-on-brand: "#ffffff"
  link: "#ff007a"
  link-hover: "#cc005f"
  selected-bg: "#ffe5f1"
  border: "#ededed"
  border-strong: "#cdcdcd"
  border-soft: "#f7f8fa"
  border-brand: "#ff007a"
  unicorn-purple: "#9c52ff"
  ethereum-blue: "#627eea"
  success: "#27ae60"
  warning: "#f3b71e"
  danger: "#fd4040"
  info: "#0068fc"
typography:
  display:
    fontFamily: "Basel"
    fontSize: "88px"
    lineHeight: 1.5
    letterSpacing: "-0.025em"
  body:
    fontFamily: "Basel"
    fontSize: "16px"
    lineHeight: 1.5
  mono:
    fontFamily: "JetBrains Mono"
rounded:
  button: "12px"
  card: "16px"
  pill: "9999px"
spacing:
  xs: "0px"
  sm: "4px"
  md: "12px"
  lg: "24px"
  xl: "40px"
---

## Overview

## Overview

Uniswap's site is the rare DeFi protocol that has decided playfulness is on-brand. The canvas is white `#ffffff`, headings sit in Basel (Lift Type's rounded grotesque sans) at 56–88px, and the brand color is **Uniswap Pink** `#ff007a` — a hot magenta-pink that anchors every CTA. Where MetaMask leaned warm-friendly and Phantom leaned editorial-restrained, Uniswap leaned **playful-confident**: rounded 16-24px corners, soft pink-tinted shadows, the unicorn brand mark used sparingly (no NFT-bro language, but the unicorn shows up).

The swap interface is the brand's product-as-hero pattern — a 24px-radius card with token selectors, amount inputs, and a single Pink CTA "Swap". Cards have 16px radius elsewhere. Voice is direct-friendly: "Trade tokens", "Earn fees on liquidity". The unicorn-mark wordmark anchors brand identity but doesn't get anthropomorphized.

CTAs are pill-radius (9999px) with white text on Pink bg. Body uses 16px line-height 1.5. Mono renders Solana-style truncated addresses. The whole brand reads as **DeFi-for-grown-ups**: sophisticated enough for V3 concentrated liquidity, friendly enough not to alienate first-time swappers.

**Key Characteristics:**
- White canvas + Uniswap Pink `#ff007a`
- Basel (Lift Type) rounded grotesque sans
- Pill-radius CTAs, 16-24px cards
- Swap-card UI (24px radius) as product hero
- Unicorn wordmark mark, never anthropomorphized
- Soft pink-tinted shadows
- Mono for blockchain addresses
- Light-only canvas (V4 site has both, marketing is light)
- Direct-friendly voice
- Light-grey-tinted purple `#9c52ff` and Ethereum blue accents in chips

## Colors

### Primary
- **Background** (`#ffffff`): white.
- **Bg Soft** (`#f5f6fc`): cool-blue-tinted alternate.
- **Bg Warm** (`#fff4f9`): pale-pink wash for hero.
- **Text** (`#131313`): body.

### Brand — Uniswap Pink
- **Brand** (`#ff007a`): primary CTA, brand mark.
- **Brand Hover** (`#e60069`), **Pressed** (`#cc005f`), **Deep** (`#a60052`).
- **Brand Tint** (`#ffe5f1`): selection wash.

### Accent
- **Unicorn Purple** (`#9c52ff`): rare accent, sometimes in unicorn mark
- **Ethereum Blue** (`#627eea`): chain chip color

### Surface
- **Surface** (`#ffffff`), **Surface Soft** (`#fafbfd`), **Surface Strong** (`#f1f3f9`).

### Borders
- **Border** (`#ededed`), **Border Strong** (`#cdcdcd`), **Border Soft** (`#f7f8fa`).

### Semantic
- success `#27ae60`, warning `#f3b71e`, danger `#fd4040`, info `#0068fc`.

## Typography

### Font Family
- **Display + Body**: Basel (Lift Type's rounded grotesque). Falls back to Inter → Söhne.
- **Mono**: JetBrains Mono / IBM Plex Mono for addresses.

### Hierarchy

| Role | Font | Size | Weight | LH | Tracking |
|------|------|------|--------|-----|----------|
| display-hero | Basel | 88 | 600 | 1.0 | -0.025em |
| display-lg | Basel | 56 | 600 | 1.1 | -0.015em |
| h1 | Basel | 40 | 600 | 1.15 | -0.012em |
| h2 | Basel | 32 | 500 | 1.2 | -0.008em |
| h3 | Basel | 24 | 500 | 1.25 | -0.005em |
| eyebrow | Basel | 12 | 600 | 1.2 | 0.10em UPPER |
| body | Basel | 16 | 400 | 1.5 | 0 |
| label | Basel | 13 | 600 | 1.3 | 0.04em |
| button | Basel | 16 | 600 | 1.0 | 0.02em |
| address | JetBrains Mono | 13 | 400 | 1.5 | 0 |
| swap-amount | Basel | 36 | 500 | 1.0 | -0.012em |

### Principles
- **Basel for everything**, mono for addresses.
- **600 weight on display + buttons** — confident but not aggressive.
- **Tight tracking on display** (-0.025em hero).
- **Mixed case display, UPPER eyebrows.**

## Layout

- Base 4px, 96-160px between sections
- Page max width 1280px
- Hero: swap-card centered with overlapping headline above
- Feature grid: 3-up at desktop, 2-up at tablet

mobile <479: hero 88→48; nav hamburger; swap-card full-width. tablet: 2-up grid. desktop+: 3-up.

## Elevation & Depth

| Level | Treatment |
|-------|-----------|
| 1 | `0 2px 12px rgba(255,0,122,0.06)` resting cards |
| 2 | `0 8px 24px rgba(255,0,122,0.14)` hover |
| 3 | `0 12px 32px rgba(255,0,122,0.18)` swap-card |
| 4 | `0 24px 64px rgba(0,0,0,0.20)` modal |

## Shapes

| Tier | Value | Use |
|------|-------|-----|
| Micro | 4 | indicators |
| Standard | 8 | tooltips |
| Comfortable | 12 | dropdowns |
| Relaxed | 16 | **default cards** |
| Featured | 24 | **swap card** (product hero) |
| Pill | 9999 | **buttons + token pills** |

## Components

### Buttons (3 variants — pill-radius)

**Primary** — Uniswap Pink:
- bg `#ff007a`, text white, 16px Basel 600 0.02em
- Padding 14×32, radius 9999 (pill)
- Hover: bg `#e60069`, scale 1.02

**Secondary** — pink tint:
- bg `brand-tint`, text `brand-pressed`, pill radius

**Ghost**: bg transparent, text pink, padding 10×20.

### Cards
- bg white, **16px radius**, padding 24
- Soft pink-tinted shadow `0 2px 12px rgba(255,0,122,0.06)`
- Hover: shadow shifts to `0 8px 24px rgba(255,0,122,0.14)`

### Swap Card (the product hero)
- bg white, **24px radius**, padding 24, 1px soft border, soft pink shadow
- "From" + "To" sections with 16px radius inner inputs
- Token selector pills (pill-radius, surface-strong bg)
- Single Pink CTA "Swap" full-width pill at bottom

### Pills (token selectors, network chips)
- Token: pill radius, surface-strong bg, with token icon + symbol
- Network: pill radius, network-color outlined

### Inputs (token amount)
- bg surface-soft, 1px soft border, 16px radius (rounded for swap-card aesthetic)
- Focus: border pink

### Navigation
- 72px sticky header, white bg
- Uniswap unicorn wordmark left (pink), top-level nav center, "Connect Wallet" pink pill CTA right

- Standard ease, emphasized for celebrate states
- 150ms hover, 240ms standard, 400ms slow
- Swap-card hover: shadow lift + 1.005 scale
- Token selector dropdown: 240ms slide-down

- text on bg = **18.0:1** AAA
- on-brand on brand: white on Uniswap Pink = **4.6:1** AA
- 3px Uniswap Pink focus ring

Token selectors `role="combobox"` with proper aria. Swap card flow accessible via keyboard tab order. Address truncation has full-address available via tooltip.

### Tone
**Direct-friendly.** Sophisticated DeFi without lecturing.

### Microcopy patterns
- Primary CTA: **"Connect Wallet"** / **"Swap"** / **"Provide liquidity"**
- Errors: **"Insufficient balance — add more ETH to swap"**
- Loading: **"Confirming swap…"**
- Success: **"Swapped 100 USDC for 0.05 ETH"**

### CTA verb conventions
- **Connect / Swap / Provide / Stake / Bridge**
- Avoid: NFT-bro language, "Get started" alone

**Light-only** marketing site. The Uniswap Interface (app.uniswap.org) has both modes — dark uses bg `#191b1f` with pink unchanged.

Uniswap descends from Hayden Adams's 2018 DEX origin, refined through V2 (2020) and V3 (2021) brand iterations. Uniswap Pink `#ff007a` was anchored in V2 — differentiating from Aave/Compound/Curve's brutalist black-and-blue. Basel (Lift Type) handles typography. The unicorn wordmark is the brand's defining identity.

**Named influences:**
- **Hayden Adams (founder, 2018)** — DEX origin
- **Basel by Lift Type** — rounded grotesque sans
- **Uniswap Pink (V2, 2020)** — brand anchor
- **Aave / Compound / Curve** — DeFi peers differentiated against
- **Unicorn mark heritage** — whimsy in sophisticated DeFi

## Do's and Don'ts

### Do
- **Uniswap Pink `#ff007a` for primary CTA + brand only.**
- **Basel (or Inter fallback) for everything.**
- **Pill-radius CTAs, 16px cards, 24px swap-card.**
- **Soft pink-tinted shadows.**
- **Unicorn mark in wordmark, sparingly elsewhere.**
- **Mono for addresses.**
- **Direct-friendly voice.**

### Don't
- **Don't substitute pink.** `#ff007a` is the brand, not Tailwind pink.
- **Don't anthropomorphize the unicorn.**
- **Don't add gradients on CTA.**
- **Don't all-caps headlines.**
- **Don't add NFT-bro microcopy.**
- **Don't use brutalist DeFi aesthetics.** Rounded + pink IS Uniswap.

### Quick Color Reference
- bg: `#ffffff`
- text: `#131313`
- brand (Uniswap Pink): `#ff007a` / hover `#e60069`
- unicorn-purple: `#9c52ff`
- ethereum-blue: `#627eea`
- border: `#ededed`

### Example Component Prompts

> Build a Uniswap-style hero: white canvas, swap-card centered (24px radius, 24px pad, pink shadow), 88px Basel 600 heading "Swap any token, on any chain" above. Pink `#ff007a` CTA "Connect Wallet" pill-radius 16px Basel 600 0.02em.

> Design a swap card: 24px radius, white surface, 1px soft border, pink-tinted shadow. "From" section with token selector pill + amount input. Arrow swap-direction button center. "To" section identical. "Swap" CTA full-width pink pill at bottom.

> Render a token selector pill: pill radius, surface-strong `#f1f3f9` bg, token icon left + symbol "ETH" 16px Basel 600. Chevron right.

> Build a "Connect Wallet" CTA: pill radius, Uniswap Pink bg, white 16px Basel 600 0.02em "Connect Wallet", padding 14×32. Hover: bg `#e60069`, scale 1.02.

> Design an address display: JetBrains Mono 13px gray on white, "0xa1B2...E5f6" truncated, copy-icon button in pink.

### Iteration Guide

1. **White + Uniswap Pink + Basel + Unicorn mark.**
2. **Pill-radius CTAs, 16-24px cards.**
3. **Swap-card 24px radius is the product hero.**
4. **Soft pink-tinted shadows.**
5. **Mono for addresses.**
6. **Sophisticated-friendly voice.**
7. **Reject brutalist DeFi, NFT-bro language, gradient CTAs.**