Skip to content
Browse
Library

Uniswap. Cotton-candy swap terminal in white air.

  • Crypto
  • Light theme
  • 15 colors
  • 1 typeface

Uniswap presents a light, airy swap terminal aesthetic: a near-white canvas where a single vivid magenta-pink brand color carries every interactive signal, surrounded by soft floating color orbs that lend the page a playful, weightless atmosphere. Typography is confident and tight — a single custom display face (Basel) at near-black weight, with an unusual 485 weight that sits between regular and medium, creating a subtly compressed, modern feel across both display and UI copy. Components stay compact and rounded — 20px radii on swap cards, 16px on buttons, pill shapes for tokens — with barely-there shadows that let the white surface breathe. The overall experience feels like a DeFi command center rendered in pastel air: structured enough to trust with money, colorful enough to feel alive.

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

Uniswap design system

Uniswap

Brand1

  • Pink supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color

Accent7

  • Decorative icon accent and floating orb color — part of the hero atmosphere palette, not a UI state

  • Decorative orb and icon accent in the hero atmosphere

  • Decorative orb accent — deeper sibling to the primary magenta for tonal variety in background blobs

  • Decorative orb and icon accent in the hero atmosphere

  • Decorative orb and icon accent in the hero atmosphere

  • Decorative orb accent and select icon tint

  • Green supporting accent for decorative details and low-frequency emphasis. Use as a supporting accent, not as a status color

Neutrals7

  • Maximum-contrast text and select icon fills where absolute black is required

  • Primary text, nav labels, headings, body copy, and default icon strokes — near-black rather than pure black for a slightly softer read

  • Secondary text and strong UI borders where extra weight is needed without going to pure black

  • Muted helper text, secondary labels, inactive nav items, and supporting copy

  • Disabled states, placeholder text, and faint dividers

  • Subtle button borders and faint surface tints

  • Page canvas, card surfaces, and button text on magenta fills

Try a pairing

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

Aa

Onyx on Uniswap Magenta

6.62 : 1 contrast

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

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