Uniswap

Overview

Uniswap is a decentralized exchange protocol that democratizes token trading through an intuitive, high-contrast interface rooted in 'Vibrant Minimalism'—a design philosophy that pairs a clean, light canvas with bold, saturated accent colors to create maximum visual clarity and user confidence. The brand serves traders, liquidity providers, and DeFi participants who demand speed, precision, and trustworthiness. The emotional response is one of empowerment: the interface feels direct, uncluttered, and in control, with the signature magenta accent (#FF37C7) acting as a beacon for critical actions. The design rejects skeuomorphism and unnecessary ornamentation, instead using color, typography weight, and spatial rhythm to guide the eye and communicate hierarchy.

The voice is technical yet approachable, precise without being cold. Uniswap speaks in the language of traders—direct, outcome-focused, and confident. Vocabulary leans toward clarity: 'swap', 'connect', 'select token', 'confirm' rather than flowery metaphors. The tone is matter-of-fact, even when explaining complex DeFi mechanics. Example sentence in brand voice: 'Connect your wallet, select your tokens, and execute the swap in seconds—no intermediaries, no delays.'

Colors

The Uniswap color system is built on a stark contrast model: a near-white surface (#FFFFFF, #F9F9F9) paired with deep, near-black text (#131313) creates maximum legibility and reduces cognitive load. The primary accent is a vibrant magenta (#FF37C7), used exclusively for call-to-action buttons, active states, and brand-critical interactions. This color appears in the header 'Connect' button and the 'Select token' dropdown, signaling that these are the moments where user intent becomes action. Secondary accents include a warm yellow (#FFBF17) for warnings and a vibrant green (#21C95E) for success states, drawn from the extended color palette to communicate status without ambiguity. The surface stack uses subtle grays (surface-container-lowest: #F5F5F5, surface-container-high: #EEEEEE) to cr

Typography

The type system uses Basel as the primary font family, a geometric sans-serif that conveys modernity and precision—critical for a DeFi platform where trust and clarity are paramount. The hierarchy spans from display (52px, fontWeight 485) for hero statements down to label-sm (12px, fontWeight 485) for metadata and timestamps. Headline-lg (36px, fontWeight 535) anchors major sections like 'Swap' or 'Pool', while body-md (16px, fontWeight 485) serves as the baseline for form labels and explanatory text. The system uses consistent lineHeight ratios (1.4–1.5x) to ensure readability even in dense trading interfaces. Font weights are deliberately restrained: 485 (regular) and 535 (medium) dominate, with no ultra-bold weights, maintaining a refined, professional tone. For small labels over intera

Layout

The layout employs a fluid, centered container model with a max-width of 864px, ensuring the swap interface remains focused and scannable on all screen sizes. The 12-column grid provides flexibility for multi-column layouts (e.g., token pair display) while maintaining rhythm. Spacing follows a strict 8px unit system: gutter spacing (24px) separates major sections, md spacing (24px) pads card interiors, and sm spacing (12px) creates breathing room between form fields. The swap card itself uses 24px padding on all sides, with 16px gaps between input fields and buttons, creating a clear visual hierarchy. White space is weaponized: the empty space around the swap form is intentional, drawing focus to the interaction. Sections are separated by lg spacing (40px) to create distinct visual chapter

Elevation & Depth

Depth in Uniswap is achieved through subtle shadows and layering rather than dramatic effects. The base elevation (sm) uses 0 1px 2px rgba(0, 0, 0, 0.06), a barely perceptible shadow that separates text from the background. Standard cards and modals employ md elevation: 0 4px 12px rgba(0, 0, 0, 0.1), creating a clear visual separation from the surface without appearing floating or detached. Dropdowns and popovers use lg elevation: 0 4px 12px rgba(0, 0, 0, 0.1) combined with a 2px border at rgba(0, 0, 0, 0.02), adding a subtle outline that reinforces the layer boundary. Focus states on interact

Shapes

The shape philosophy is 'Functional Geometry'—rounded corners are used strategically to soften the interface without sacrificing clarity. Buttons use the full radius (999999px) to create pill-shaped affordances that feel modern and clickable, particularly the primary CTA 'Connect' button in the header and 'Select token' dropdown. Cards and input fields use md radius (8px), a subtle curve that suggests interactivity without appearing playful. Tab buttons and secondary actions use sm radius (4px), a minimal curve that maintains the geometric precision of the interface. The rationale: full radius

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses backgroundColor: {colors.primary} (#FF37C7), textColor: {colors.on-primary} (#FFFFFF), rounded: {rounded.full}, padding: 12px 24px, and height: 40px. The fontWeight is 535 to create subtle emphasis. On hover, the background shifts to {colors.primary-fixed-dim} (#E500A5), a deeper magenta that provides tactile feedback without changing the text color. The button-ghost variant uses backgroundColor: rgba(255, 55, 199, 0.08), creating a soft tinted background that hints at the primary accent; on hover, this tint deepens to rgba(255, 55, 199, 0.12). All buttons use a 200ms transition on background-color to smooth the state change.

Containers & Surfaces Cards use backgroundColor: {colors.sur

Do's and Don'ts

**Do**

• Do use the primary magenta (#FF37C7) exclusively for call-to-action buttons and critical interactive states—it is the brand's signature accent and must remain visually distinct.
• Do maintain the high-contrast light background (#FFFFFF) and dark text (#131313) pairing to ensure accessibility and clarity, especially for traders who need to scan data quickly.
• Do apply the full border-radius (999999px) to primary buttons and the most important CTAs; use smaller radii (4–8px) for secondary elements to create a clear visual hierarchy.
• Do use the 8px spacing unit consistently; gutter spacing (24px) separates major sections, and md spacing (24px) pads card interiors to maintain rhythm and breathing room.

**Don't**

• Don't use the primary magenta for backgrounds or large surface areas—it is an accent color meant to guide attention to specific actions, not to dominate the interface.
• Don't apply heavy shadows (> 0.12 opacity) or multiple layered shadows; Uniswap's elevation is subtle and precise, using 0 4px 12px rgba(0, 0, 0, 0.1) as the standard.
• Don't introduce new accent colors or gradients; the system is built on a limited, intentional palette (magenta, yellow, green) that communicates status and action without visual chaos.
• Don't use serif fonts, script fonts, or decorative typefaces; Basel (or approved system-ui fallback) is the only font family, maintaining the technical, trustworthy aesthetic.