Skip to content
Library

Uniswap Cup. A pink highlighter tracing through a grid of white boxes and hairline rules.

  • Crypto
  • Light theme
  • 6 colors
  • 3 typefaces

Uniswap Cup is a flat, near-monochrome tournament visualization treated as a broadcast overlay — white canvas, hairline gray rules, and a single neon pink that behaves like a highlighter running through a sports bracket. The pink never decorates; it punctuates: filling winner nodes, bordering connectors, stamping group-stage labels, and tagging the final match. Everything else dissolves into a grid of black text on white, monospace numbers, and 1px lines — the interface IS the bracket, nothing competes with the data structure. Type is utilitarian and system-native, with monospace doing the heavy lifting for scores and stages. Components feel diagrammatic rather than designed — thin-bordered boxes, square corners, no shadows, no gradients, no rounding beyond a couple of pixels.

Screenshot of Uniswap Cup
Captured from unicup.uniswap.org on October 11, 2026

Uniswap Cup design system

Uniswap Cup

Brand1

  • Pink outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color

Accent1

  • Soft pink-tinted surface for highlighted match cards and accent panel backgrounds — pink diluted almost to white

Neutrals4

  • Primary text, icon fills, team-name boxes, score text — the typographic and structural anchor

  • Secondary headings and subdued text — softer than pure black for non-critical labels

  • Hairline borders, divider rules, bracket connector lines, card outlines — the structural skeleton of the entire diagram

  • Page canvas, inverted text on dark or pink nodes

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Graphite Black on Bracket Pink

5.60 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictFails AAA 7

More DESIGN.md files. Same web, different personalities.