---
name: Uniswap
description: "Worth including as a prime example of a clean, accessible, and playful fintech UI that successfully balances complex functionality with a friendly, approachable aesthetic."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#131313"
  secondary: "rgba(19, 19, 19, 0.63)"
  tertiary: "#FF37C7"
  neutral: "#222222"
  bg-soft: "#F9F9F9"
  bg-quiet: "rgba(19, 19, 19, 0.08)"
  muted-soft: "rgba(19, 19, 19, 0.04)"
  line: "rgba(19, 19, 19, 0.12)"

typography:
  display:
    fontFamily: Humanist Sans-Serif
    fontSize: 52px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  headline:
    fontFamily: Humanist Sans-Serif
    fontSize: 36px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-0.5px"
  body:
    fontFamily: Humanist Sans-Serif
    fontSize: 16px
    lineHeight: 1.3
    fontWeight: 485
    letterSpacing: "0px"
  label:
    fontFamily: Humanist Sans-Serif
    fontSize: 14px
    lineHeight: 1.48
    fontWeight: 485
    letterSpacing: "0px"
  small:
    fontFamily: Humanist Sans-Serif
    fontSize: 18px
    lineHeight: 1.6
    fontWeight: 485
    letterSpacing: "0px"

rounded:
  sm: 12px
  md: 20px
  lg: 32px
  pill: 999999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px

---

## Overview

A playful and accessible decentralized exchange platform with a clean, high-contrast design.

*A clean, friendly fintech interface that feels like a modern banking app but with a crypto-native aesthetic.*

## Colors

A light, clean foundation with a vibrant magenta accent and high-contrast text.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#131313`)** — uses `ink` token
- **Secondary text (`rgba(19, 19, 19, 0.63)`)** — uses `ink-soft` token
- **Accent (`#FF37C7`)** — uses `accent` token
- **Muted (`#222222`)** — uses `muted` token
- **Borders (`rgba(19, 19, 19, 0.12)`)** — uses `line` token

## Typography

- **Display:** Humanist Sans-Serif
- **Body:** Humanist Sans-Serif
- **Mono:** Humanist Sans-Serif

- Use the system font stack (Basel, -apple-system, system-ui, sans-serif) for all text.
- Set display headline size to 52px with a weight of 500.
- Set body text size to 16px with a weight of 485.
- Use a negative letter spacing of -1px for large display text.

## Layout

A single-column centered layout on desktop, expanding to a full-width mobile layout.

*Rhythm:* A 4px base grid is used throughout, with common gaps of 8px, 16px, and 24px.

## Elevation & Depth

- rgba(19, 19, 19, 0.04) 0px 6px 12px -3px
- rgba(19, 19, 19, 0.03) 0px 2px 5px -2px
- Borders: 1px solid rgba(19, 19, 19, 0.12)

## Shapes

- `sm`: 12px
- `md`: 20px
- `lg`: 32px
- `pill`: 999999px

## Components

- **button:** Pill-shaped buttons with a 32px border radius, filled with the magenta accent color.
- **card:** Cards with a 20px border radius, 12px padding, and subtle shadows or light gray backgrounds.
- **chip:** Small, pill-shaped badges with light backgrounds and text colors matching their category.
- **input:** Large, rounded input fields with a 12px border radius and a light gray background.
- **hero:** A prominent, centered hero section featuring a large 52px headline and the main swap widget.

## Do's and Don'ts

**Don't:**
- Don't use sharp, small border radii — the screenshot shows 12px to 32px radii on cards and buttons.
- Don't use dark backgrounds as the primary canvas — the screenshot shows a predominantly white (#FFFFFF) and light gray (#F9F9F9) palette.
- Don't use high-contrast dark mode for the entire interface — the screenshot shows a light theme with high-contrast text.
- Don't use thin, light typography for headlines — the screenshot shows a 500 weight for 52px headlines.
- Don't use a wide range of primary colors — the screenshot shows a single dominant magenta (#FF37C7) accent.
- Don't use rigid, grid-heavy layouts with heavy borders — the screenshot shows soft shadows and rounded corners for separation.

---

## System Prompt (paste into AI agent)

```
This is Uniswap, a decentralized finance platform. The design is clean and accessible, using a light theme with a white (#FFFFFF) and light gray (#F9F9F9) background. The primary accent is a vibrant magenta (#FF37C7). The typography uses a humanist sans-serif (Basel) with a display headline weight of 500 and size of 52px. Critical donts: 1) Do not use dark backgrounds for the main UI. 2) Do not use sharp corners; use generous border radii (12px to 32px). 3) Do not use thin fonts for headlines; keep them at a 500 weight. The overall feel is friendly and playful, not corporate or heavy.
```