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

# Uniswap — Uniswap Cup · Design System

> A crisp tournament bracket with a vivid magenta pulse

**Theme:** light · **Industry:** crypto · **Source:** https://unicup.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 Cup presents a single-day crypto soccer tournament as a large, symmetrical knockout bracket. A white canvas, black typography, and magenta scoring lines keep the dense match information legible while leaving the final at center stage.

## North star

Make the bracket itself the hero: balance both sides around a quiet center and reserve magenta for match-state emphasis.

## Overview

The page treats the tournament bracket as the product: a white canvas carries a broad, balanced composition with match rounds advancing inward from both sides. Black establishes the core information hierarchy in scores, labels, and team marks, while vivid magenta highlights selected scores, round labels, and the thin bracket connectors. Pale gray and near-white surfaces soften the surrounding interface without competing with the match data. Typography combines a clean sans-serif for the main event label with bold monospace for bracket headings, uppercase stage labels, and compact captions. The center is deliberately open, giving the final matchup and “Road to final” mark room to read as focal points. Team logos and small badges supply most of the visual variety; the page otherwise stays flat, spacious, and focused on data rather than decoration.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Bracket Mist | `#f9f9f9` | `--color-bracket-mist` | surface | Soft section and badge surface behind tournament labels and match content. |
| Canvas White | `#ffffff` | `--color-canvas-white` | neutral | Main page canvas and open space around the bracket. |
| Scoreboard Ink | `#000000` | `--color-scoreboard-ink` | neutral | Primary text, score numerals, dark badges, and team-mark tiles. |
| Lilac Veil | `#fef4ff` | `--color-lilac-veil` | surface | Very pale tinted surface and subtle border treatment. |
| Cup Magenta | `#f50db4` | `--color-cup-magenta` | accent | Bracket connectors, stage chips, highlighted scores, and winner emphasis. |
| Quiet Divider | `#efefef` | `--color-quiet-divider` | semantic | Hairline borders and understated card or button outlines. |
| Charcoal Note | `#222222` | `--color-charcoal-note` | neutral | Secondary dark text and supporting labels where softer contrast is appropriate. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Canvas White) · `--color-surface` → `#f9f9f9` (Bracket Mist) · `--color-surface-2` → `#fef4ff` (Lilac Veil) · `--color-text` → `#000000` (Scoreboard Ink) · `--color-text-muted` → `#f9f9f9` (Bracket Mist) · `--color-text-subtle` → `#222222` (Charcoal Note) · `--color-border` → `#fef4ff` (Lilac Veil) · `--color-accent` → `#f50db4` (Cup Magenta)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f9f9f9` | 19.95:1 | AAA |
| `#000000` | `#fef4ff` | 19.6:1 | AAA |
| `#f9f9f9` | `#ffffff` | 1.05:1 | fail |
| `#f9f9f9` | `#fef4ff` | 1.02:1 | fail |
| `#222222` | `#ffffff` | 15.91:1 | AAA |
| `#222222` | `#f9f9f9` | 15.11:1 | AAA |
| `#222222` | `#fef4ff` | 14.85:1 | AAA |
| `#f50db4` | `#ffffff` | 3.75:1 | AA-large |
| `#f50db4` | `#f9f9f9` | 3.56:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ui-monospace | `--font-mono` | system | 700, 500 | Tournament stage labels, scores, badges, captions, and compact bracket metadata. | IBM Plex Mono |
| ui-sans-serif | `--font-display` | system | 500, 600, 400 | Main event title, central matchup names, and interface labels. | Inter |
| Basel | `--font-basel` | webfont | 500 | Small share of branded interface text where the custom webfont appears. | Inter |

- **ui-monospace:** Bold labels and captions; uppercase body treatment creates a compact scoreboard character.
- **ui-sans-serif:** Medium-weight display text with tight tracking on the main title; keep supporting labels clean and neutral.
- **Basel:** Use sparingly as a restrained sans-serif accent; measured usage is limited.

### Type scale — Perfect Fifth (ratio ≈ 1.491, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 500 | 1 | -0.04em | — | ui-sans-serif | Main event title and central page heading. |
| h2 | 32px | 700 | 1 | -0.02em | — | ui-monospace | Prominent tournament section or bracket heading. |
| body | 18px | 500 | 1 | 0 | uppercase | ui-monospace | Uppercase stage labels and primary bracket copy. |
| caption | 12px | 700 | 1.33 | 0 | — | ui-monospace | Compact round markers, date details, and secondary metadata. |
| code | 12px | 700 | 1.33 | 0 | — | ui-monospace | Small bracket identifiers and data-like labels. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 2, 4, 6, 8, 12, 16 px.
- Section rhythm 224px · element gap 4px · card padding — · max content width 1404px.

A single, spacious bracket section spans a measured maximum width of 1404px. Round columns sit symmetrically on the left and right, with thin magenta connectors drawing each path toward the central final. A narrow top band carries stage navigation and event branding; the center remains deliberately open around the title and matchup. The measured density is spacious, with a large section rhythm and small gaps between tightly related labels. Preserve the measured 8px base spacing system and use qualitative spacing rather than adding arbitrary dimensions.

## Shape & elevation

- Radius: button `9999px` · card `50%`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The visual system is mostly flat: no measured shadows or gradients. Separate match information with pale hairlines, minimal outlined or tinted surfaces, and strong black or magenta marks rather than floating cards. Keep the bracket connectors as thin, precise lines and let whitespace provide most of the layering.

## Imagery

There is no photographic or video-led storytelling. Small team logos and tournament marks sit inside compact tiles, while the central event emblem and opposing team symbols provide the main illustrative moments. Keep these assets crisp and contained, using the surrounding white space and magenta score accents to frame them. Avoid decorative imagery that competes with the bracket information.

## Components

### Stage navigation

A slim top row uses compact uppercase monospace labels for GROUP STAGE and LIVESTREAM, with the cup wordmark centered.

### Round markers

Small magenta chips label R16, QF, and SF positions across the top of the bracket.

### Match score tile

Pair team marks with prominent black or magenta score numerals, aligned along the bracket path.

### Bracket connectors

Fine magenta lines link match rounds and turn inward toward the central final.

### Round seed badge

Compact black rectangular badges with near-white monospace identifiers sit beside match entries.

### Final matchup

The central match gives team marks and names prominence, with a magenta Final label and winner indicator.

### Event date label

A small centered date and time label sits below the final matchup, using dark and magenta text.

### Measured component styles

- **Primary button** (“GROUP STAGE”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px ui-sans-serif
- **Link** (“LIVESTREAM”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px ui-sans-serif
- **Card** (“Road to final November 16 1pm”): transparent background · text #000000 · border 1px solid #f2f2f2 · radius 3.35544e+07px · padding 0px · 400 16px ui-sans-serif
- **Badge** (“#1”): background #000000 · text #f9f9f9 · radius 0px · padding 2px 4px · 700 12px ui-monospace

## Do

- Keep the knockout bracket balanced around a clear central axis.
- Use Cup Magenta #f50db4 for bracket paths and decisive match highlights.
- Keep scores and compact tournament metadata in monospace.
- Preserve ample white space around the final matchup.
- Use small team marks as functional identifiers, not decoration.
- Keep surfaces flat and rely on precise hairlines for separation.

## Don't

- Do not fill the page with gradients or heavy shadows.
- Do not make every label magenta; reserve it for emphasis.
- Do not let team logos overpower score readability.
- Do not collapse the bracket into an unbalanced single column on wide screens.
- Do not add ornamental imagery to the open center.
- Do not use oversized rounded cards that obscure the connector structure.

## Agent prompt

Build a new page in the Uniswap Cup visual style. Use Canvas White #ffffff as the main field, Bracket Mist #f9f9f9 for quiet surfaces, Scoreboard Ink #000000 for key text and scores, and Cup Magenta #f50db4 only for active paths and highlights. Organize information in a spacious, symmetrical layout with a clear center and compact round labels. Set stage names, badges, and data-like captions in bold monospace; use a clean sans-serif for larger event titles and team names. Keep logos small and functional. Prefer flat surfaces, thin pale borders, crisp connectors, and generous open space over shadows, gradients, or decorative cards. Make every score easy to scan and preserve a strong visual distinction between routine rounds and the featured final.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | One wide, symmetrical knockout bracket with rounds advancing from both edges toward a centered final. | Round-by-round progression, Visible scores and winners, Centered final matchup | Magenta bracket connectors, Compact stage chips, Black seed badges, Team logo tiles |

## Source CSS custom properties (selected)

```css
--radius: 0;
```

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