light · playful · sans · rounded · bright
DESIGN.md inspired by Uniswap
Uniswap Pink on white — DEX design with Basel sans, unicorn-mark whimsy, and rounded-card softness in a usually-brutalist DeFi space.
By webdesignhot · uniswap.org ↗
$ npx @webdesignhot/design-md add uniswap
Learn more about the CLI → Compare to…
Adidas Pure-black sport-utility, AdihausDIN/adidasFG uppercase, three-stripe geometry — the engineering canon for global sportswear. Adobe Creative-suite chrome — paper-white canvas, magenta-to-orange wordmark gradient, and Adobe Clean carrying every product grid. AgentKit Three swappable themes for AI agent products — editorial dark, daylight bright, fintech cool-blue. Airbnb Pure-white marketplace canvas with one Rausch coral and Cereal — generous photography, soft pills, modest type. Airtable White-canvas editorial workflow software with full-bleed coral and forest signature cards punctuating a near-black pill-CTA system. Alibaba Electric orange `#ff6a00` + dense merchant grids — the global B2B wholesale floor as a website. Amazon Smile-orange CTA, Amazon Ember sans, dense product grids — the canonical everything-store interface. Amazon Web Services Squid-ink navy with Smile-orange CTAs — the densest tile-portal on the cloud-platform internet. Anthropic Editorial broadsheet for AI safety — cream canvas, Anthropic Serif body, terracotta clay accent, magazine geometry. Apple White-canvas product theatre — SF Pro Text, 980px pill CTAs, and a single-blue accent system. Apple Music Pink-red gradient hero with album-grid kinesthetics — SF Pro precision, signature `#fa233b` brand pink, glassy dark canvas. Apple TV+ Pure-black cinematic theatre with SF Pro and ruthless minimalism — content as the only voice. Arbitrum Arbitrum Blue on white — Layer 2 chain marketing with Inter sans, structured grids, sophisticated-restraint contrasted with Solana's cinematic. Arc Browser-as-personality marketing — buttery cream canvas, Marlin Soft display, hand-tooled blue-and-coral palette. Are.na Bare grey-and-orange minimalism — a single Helvetica-class sans, hairline borders, and a stubborn refusal to optimise for engagement. Asana Approachable work management in soft purple — Asana Sans at modest weights with a rainbow accent palette and warm sky-tinted whitespace. Astro Cosmos navy canvas with violet-to-orange brand gradient — Mona Sans display, Inter body, Astro''s star-chart MPA framework dressed as an observatory dashboard. ASUS Republic of Gamers red `#cd0000` on black with bold sans — Taiwan engineering meets esports brutalism. Audi Vorsprung durch Technik on near-black — Audi Type sans, four-rings precision, and a near-monochrome canvas with `#bb0a30` reserved for sport. Auth0 Twilight-blue dark canvas with TWK Lausanne 300 display + Aeonik body — the original identity-platform aesthetic. Axiom Deep-navy observability with a cyan electric accent — Inter for body, JetBrains Mono for every event label, and a structural grid that reads as logs at planet scale. Axios Smart-brevity in chromatic form — blocky white canvas, Tiempos-flavored Atiza serif, signature `Why it matters:` time-bars and bullet-first prose. Bandcamp Bandcamp Cyan + Helvetica — indie-music marketplace honesty, no streaming-platform polish, no algorithmic carousels. Base Coinbase-adjacent L2 minimalism — coinbaseSans on white, signature electric blue Baseten White canvas with Inter and a signature `#6c5ce7` purple — ML model deployment dressed in approachable workshop chrome. BBC News Signature BBC red (`#bb1919`), Reith Sans + Reith Serif, the global broadcaster authority typography of the world''s public-service news. Bear Off-white canvas, a custom bearsans display, a red bear icon, and tealish handwritten underlines — a Markdown notes app dressed as a Mac Pro magazine. beehiiv Aggressive black-on-yellow newsletter punch — heavy display sans, hyper-flat cards, and a `#ffd60a` highway-yellow that reads like a tabloid front page. Binance Trading-floor near-black with a single high-voltage Binance Yellow doing all the brand work — BinanceNova for type, BinancePlex for numbers. Bloomberg Iconic black-orange financial broadsheet — BWHaasHead headlines, AvenirNextPForBBG chrome, terminal-grade data density. Bluesky Sky-blue `#0085ff` on bright white with Inter sans — the AT-Protocol social network rendered as airy, federated, open. Blur Pure-black canvas, neon `#ff8700` orange voltage, and JetBrains-Mono-default everywhere — brutalist NFT trader terminal as competitive instrument. BMW Corporate-blue calm — BMW Type Next on a cream-tinted white, dark navy hero bands, and the M-stripe triplet in reserve. BMW M Performance black on M-blue/M-violet/M-red — the motorsport variant that turns BMW corporate into track-day theatre. Booking.com Deep-blue commerce engine — Bookin Sans on white, yellow CTA voltage, dense booking-funnel maximalism. Booking.com Booking Blue + signal yellow — the deal-finder design language at maximum density, optimized for conversion not contemplation. Bose Pure black canvas, Helvetica restraint, and premium-audio confidence — sound presented as engineering art. Brex Cool grey-blue surfaces, magenta-to-purple-to-indigo gradient, Söhne 600 — fintech as fast, modern, slightly flashy. Brilliant STEM education with playful diagram-energy — warm coral CTA on near-black, custom Brilliant Sans, illustrated geometry as hero. Bugatti French-engineered austerity — pure black canvas, three Bugatti typefaces, and full-bleed photography as the only voltage. Bun Cream canvas with chunky pink accents and the wide-eyed mascot — a JS runtime dressed as a 1970s bakery sign. Cal.com Open-source calendly with one bold custom font — Cal Sans on a soft `#f4f4f4` paper canvas. Calm Signature `#0066ff` deep blue + Aktiv Grotesk + meditation-deep cool atmospheric calm. Calm Mindfulness in a serif — Calm Cream canvas, soft moonlit blue and forest green, Visby Round display, breathing-pace motion. Capacities Cream-yellow canvas, Inter at 700 with a Crimson Pro serif fallback, and a yellow underline as page ornament — a PKM that thinks like a sketchbook. Cartesia Bright clinical white with a single deep-blue action — voice-AI presented as scientific instrument rather than consumer product. Cash App Electric `#00d54b` green on near-black, Cash Sans monospace-flavoured geometry, and p2p-money youth aesthetic. Character.AI Cool zinc canvas, custom atHauss sans, and dark pill CTAs — a roleplay social product dressed in TikTok-grade neutrality. Chevrolet Gold-cross American classic — Louis sans on white with a `#cd9834` bowtie, a `#003876` corporate blue, and Camaro/Corvette red drama in reserve. ClassPass Wellness-marketplace energy — coral-pink CTA on warm white, GT America sans, photographed-class-as-hero pattern. Claude.ai Cream paper canvas, Anthropic Sans for body and Anthropic Serif for the headline — an AI assistant set in literary type. Clerk Geist + Suisse on near-black canvas with `#6c47ff` violet CTA — the drop-in-auth dev-tool aesthetic. ClickHouse Near-pure black canvas with electric yellow as the brand voltage — database performance dressed in voltmeter chrome. Cloudinary Media-API technical infrastructure in confident blue — Inter at modest weights with a deep navy-blue brand and a single chromatic accent for media moments. Cohere Stark white editorial canvas with deep green-black product bands and a CohereText/Unica77 type split. Coinbase Institutional-grade calm — pure white canvas, a single Coinbase Blue, and Coinbase Display set at weight 400 instead of 700. Composio Near-black canvas with deep-electric-blue voltage and a 2x2 terminal-mockup hero — agent infrastructure dressed as developer instrumentation. Corsair Yellow `#ffff00` lightning on black with Roboto — RGB-everything peripherals and PC components. Costco Warehouse blue + signature red, Helvetica utilitarian — bulk-buying signage translated to web. Coursera University-blue `#0056d2` on warm-white parchment with Source Sans — the canonical online-degree marketplace. Cursor Warm cream IDE-marketing — `#f7f7f4` canvas, `#26251e` ink, custom CursorGothic display, JetBrains Mono code, vivid orange accent. Datadog NationalWeb on white with the iconic `#632ca6` purple — observability dressed as an enterprise dashboard, structurally dense, chromatically restrained, multicolour where the data demands it. Deel A warm dark canvas with electric coral and orange accents — global payroll dressed as a confident product portrait. DeepSeek Deep-blue Chinese-tech minimalism — a research lab dressed in `#4d6bfe` and stark white space. Deliveroo Deliveroo Teal on white — food-delivery design at maximum saturation, custom Roo Sans, kangaroo-mark mascot energy. Dell Pragmatic blue `#007db8` with custom Roboto-derivative — business-first PC commerce since the dorm room. Delta Air Lines Whitney sans on near-white, Delta navy + signal red — the Hartsfield-Jackson aircraft livery translated to web typography. Deno Inkwell black on warm white with the dinosaur mascot — TypeScript runtime as Eric Carle children's book. Descript Cream-pink canvas, a custom Brett display serif, and a wine-dark CTA — an AI video editor that ships like a magazine. Discord Indigo-ground hangout — gg sans body, ABC Ginto Nord display, 12-16px tile radii, white pill CTAs. Disney+ Deep navy gradient streaming hall with custom Inspire display sans and the unmistakable Disney+ wordmark arc. DoorDash Signature red-orange CTA, custom DoorDash Sans, delivery-funnel commerce — the dominant on-demand local marketplace. Duolingo Owl-green confidence and DIN-Round buttons that lift like candy — the gamified language app distilled to four colors and one mascot. Dyson Engineering-greyscale on white — Dyson Futura Light at 44px (weight `300`, never bold), body ink `#333` not pure black, zero-radius CTAs with a fluid-dynamics ripple hover, and a single magenta accent reserved for haircare. The web brand of an engineering company that refuses to look like a marketing site. ElevenLabs Near-black voice-tech ground with white voice-wave aesthetic — Inter at studio scale, pill CTAs, and a single saturated accent that reads as both wayfinding and brand. Epic Games Pure-black canvas with custom Brutal Type / Heading Now display — Fortnite-saturated marketing meets PC-storefront merchandising. Ethereum Off-white canvas, ethereum-blue `#1c64f2` voltage, and Inter + serif duet — community-owned protocol as open documentation. Etsy Burnt-orange CTA, Graphik humanist sans, handcrafted-warmth aesthetic — the marketplace for makers and small batch. Excalidraw Literal hand-drawn whiteboard — wobbly SVG strokes, Virgil-style handwriting, and a deliberately primitive UI that turns digital sketching into nostalgia. Expedia Navy commerce + Mango yellow voltage — Expedia Sans, dense travel-funnel density with One Key loyalty colour-coding. Fantastical White paper, Effra geometric sans, full-round blue pills, and a rainbow of app-icon glass squares — a calendar app marketed like Apple''s Pro Apps. Ferrari Cinematic editorial in near-black — Rosso Corsa restraint, FerrariSans 500, and full-bleed cavallino photography. Figma Bright multi-color section bands with figmaSans display and figmaMono eyebrows — a marketing site that designs in scenes. Financial Times Salmon-pink page (`#fff1e5`) — the world''s most recognizable newspaper background, paired with Financier display + MetricWeb sans for global markets coverage. Fireworks AI Light canvas with Inter sans and a signature `#6720ff` purple-amber-orange spark — fast-inference platform dressed in speed-of-light kinetic chrome. Fly.io Mackinac display + Fragment Mono on a violet-saturated canvas — a PaaS that dresses like a small-press magazine. Ford American-truck heritage in corporate blue — Antenna sans, oval-script wordmark, and a deep `#003478` voltage that has carried the brand since 1927. Fortnite Battle-royale design at maximum saturation — neon yellow + electric blue on near-black, Burbank Big condensed display, season-driven brand kaleidoscope. Framer Black-on-white maximalism with electric gradient floods — Inter Display at heroic sizes, motion as a first-class material. Frontegg PP Neue Machina display + Neue Montreal body — plug-and-play user-management with deep-blue gravitas. Gemini (Google) Blue-into-violet gradient, Google Sans, soft Material 3 surfaces — Google''s house style applied to a chat interface. Ghost Warm-cream content CMS aesthetic — Inter for chrome, a soft serif for the writing surface, and a single confident green for action. GitHub Dark-canvas developer-platform marketing — Mona Sans variable headings, lime-green accent, near-black ground. GitHub Copilot Pure-white canvas, pure-black inverted CTAs, Mona Sans display — GitHub's editorial confidence applied to AI tooling. Glossier Post-pink austerity — white canvas, single-family Apercu, 0px radius rectangles. The brand that invented millennial-pink chrome in 2014 has retired pink to a footer wash and a single badge color. Grafana Dark observability canvas with the iconic `#f46800` orange — Inter for body, Roboto Mono everywhere a label hides, multi-colour chart palette ripped straight from a real dashboard. Granola White paper, a custom Quadrant book serif, and an olive-green CTA — an AI notepad that dresses like a stationery shop. Grubhub Friendly red-orange CTA, Sentinel display + Avenir body, dense delivery-app commerce — the long-running incumbent. HashiCorp Black canvas hosting a per-product color portfolio — Terraform purple, Vault yellow, Consul red, Waypoint cyan — multi-product identity made literal. Hashnode Developer publishing platform — deep navy canvas, electric blue brand, Inter sans + JetBrains Mono code chrome. HBO Max Deep purple-black premium streaming canvas with custom Sharp Grotesk and the unmistakable Max wordmark. Headspace Signature `#ffac1d` orange + custom round display + meditation-friendly playful warmth. Height AI-PM workspace dressed in chalk pastels — Inter at modest weights over a near-paper canvas, with a single confident accent and an AI-purple voltage moment. Hilton Hilton Blue on white — confident-contemporary hospitality with Söhne-adjacent sans, blue-on-white photography-led layouts. Honda Reliability-first restraint — HondaGlobalFont on white, signature red HP Cyan-blue `#0096d6` HP-circle on white with Forma DJR — the 84-year-old technology brand''s mainstream face. Hugging Face AI community canvas — deep blue-black ground, Source Sans Pro headlines, pill auth + 8px tile cards. Hulu Near-black canvas anchored on Hulu Green `#1ce783` with Graphik sans — the bright, cable-meets-streaming UI. IBM Carbon Design System made literal — pure-white canvas, IBM Plex Sans at light 300, square corners, and one assertive `#0f62fe` blue. Ideogram A bright white canvas with a single saturated violet cue — a typography-first AI image tool that lets the gallery do all the talking. Instacart Grocery-shopping-list practical — Instacart Sans on white, signature carrot green JetBlue JetBlue Blue on white — friendly aviation with a custom rounded sans, Mint cabin orange accent, lower-case microcopy. Kagi A premium search engine dressed in warm cream and Plex — the indie answer to ad-funded search. KAYAK Burnt-orange flight-search density — Open Sans on white, comparison-engine maximalism, price-graph data viz. Khan Academy Signature `#14bf96` mint green on white with Lato sans — free-for-everyone education in a warm, encouraging register. Kinde White canvas with Inter 72/500 display + dev-friendly pink-coral accent — the approachable auth-billing-access platform. Kit A cream newsletter canvas with a custom KitSans display, a Libre Franklin secondary, and a pastel-rainbow chip set — the editorial register reborn from ConvertKit. Kraken Kraken Purple `#7132f5` on white — Kraken-Brand display + Kraken-Product UI for a calmer, less-bombastic crypto exchange. Krea A pure-black studio with Suisse Intl set quietly at 60px — a creative-AI gallery that lets the work and the cobalt CTA carry the colour. Lamborghini Cathedral of darkness — true black canvas, Lamborghini Gold accents, and LamboType angled-terminal display. LangChain Deep navy canvas with Inter precision and a quietly confident teal accent — agent orchestration dressed as engineering documentation. Lego Lego Yellow + Red on white — primary-color toy theatre, custom Lego Sans, brick-as-hero photography. Linear Dark-canvas product surface — pure-black ground, indigo accent, custom Inter weights, pill CTAs. LiveKit Realtime audio-video infra — Public Sans 300 weight on near-black, signature cyan LlamaIndex White canvas with Inter and a signature `#1b9aff` blue — RAG infrastructure dressed as a clean technical reference card. Logitech Soft consumer-tech blue gradients with Brown sans — design for the way you work, play, and create. Lovable Pink-into-violet gradient on white — vibe-coding dressed in playful, friendly chromatics. lululemon Quiet-luxury athleisure — Saans variable on bone-off-white, off-black ink (`#140f0f`, not pure black), pill CTAs on square product cards, mixed-case sentence-cased headlines tracked −4px. The athletic brand that murmurs. Magic Eden Mint-cream canvas, magenta-mint accent duet, and a custom Foundry display — Solana-native marketplace as boutique gallery. Mailchimp Cavendish-yellow chunkiness — a custom display serif (Cooper Light), the signature `#ffe01b` block, and a brand voice that hugs you while it ships campaigns. Marriott Luxury-hospitality restraint — Caudex serif for editorial moments, off-white canvas, gold-bronze CTA, photographed-resort hero. Mastercard Cream-canvas editorial fintech, circular-portrait orbits, MarkForMC at 450 weight — institutional-but-warm payments brand. MasterClass Pure-black cinema with custom display serif and editorial reverence — celebrity-instructor learning as a premium streaming product. Medium Editorial reading-first publishing — magazine-grade serif body, GT Super display, signature green-on-white pill CTAs. Mercedes-Benz Three-pointed-star authority — MBCorpo on near-black canvas, silver-blue Mercury A near-pure white canvas with a literary serif headline and a signature mercury-mint accent — banking dressed as a quiet magazine. Meta Optimistic blue (#0467df) on a white corporate canvas — Optimistic Display headlines, generous space, social-platform conglomerate at rest. MetaMask Foxy Orange on white — Ethereum wallet design with custom MM Sans, 8-bit fox mascot, friendly-utility voice. Microsoft Fluent surfaces — off-white canvas, Segoe UI Variable Display, and a Cortana-blue action color carrying every product. Midjourney A deep cosmic canvas where JetBrains Mono headlines float over a wide-gamut OKLCH rainbow — a research lab dressed as a chapel. MiniMax Stark monochrome canvas broken open by vibrant gradient product cards — coral, magenta, blue, purple as model identity. Mintlify Documentation-platform marketing — pure white canvas, mint-green accent, Inter at tight tracking, near-black pill CTAs. Miro Canary-yellow Mistral Butter-yellow canvas, Arial as a deliberate anti-tech statement, and zero-radius rectangles — French AI as a brutalist art-school manifesto. Modal Serverless GPU infra in lime-green — `#0c0c0c` canvas, electric `#7fee64` accent, custom Modal Mono on every chip and code block. Monday.com Project management in confident red-pink — Poppins display at bold weights with a colorful saturated palette and a playfully energetic visual rhythm. MongoDB Signature MongoDB green Motion AI-calendar productivity in green-and-purple — Inter at modest weights with a green-to-purple voltage gradient signaling the AI scheduler, anchored by a clean white canvas. MSI Dragon-red `#ff0000` on jet black with bold display sans — the Taipei dragon-heritage gaming hardware brand. Mux Video API for developers — Aeonik on light-cream, Rotonto display, JetBrainsMono CTAs, sharp 0px corners. MyFitnessPal Fitness-tracking utility — MFP Blue on white, Inter sans, dense calorie-and-macro grids, conversion-first navigation. Neon Serverless Postgres dressed in late-night green — a near-black canvas with a single electric mint accent. Netflix Pure-black streaming theatre with signature `#e50914` red and Netflix Sans — the canonical media-tile grid. Nike Pure black, pure white, Helvetica Now — pill CTAs and full-bleed athletic photography on a single soft cloud gray. Nintendo Joyful red on paper-white — Nintendo's site is the toy-aisle of the web, illustration-rich and refusal-of-darkness intentional. Notion Off-white canvas with Lyon serif accents and a custom NotionInter — a workspace dressed as a literary magazine. Nuxt Forest-green `#00dc82` glow on a near-black canvas — Vue-flavored warmth dressed for the cosmos. NVIDIA Engineering-grade canvas — pure black hero / paper-white body / one violently saturated `#76b900` green that carries every CTA and corner square. Omnivore Open-source read-it-later — near-white reading canvas, focused emerald-on-paper brand, archival elegance after the Eleven Labs sunset. OpenAI Pure white canvas, OpenAI Sans set in calm 500-weight, and a single black pill for the only action that matters — try ChatGPT. OpenRouter Pure-black canvas with custom display typography and pragmatic mono — LLM-router infrastructure dressed as a terminal billing dashboard. OpenSea Pure-black canvas, electric `#2081e2` blue, and Inter at trader-pro density — the original NFT marketplace as financial terminal. Optimism Pure-white canvas, signature `#ff0420` red voltage, and Inter at confident L2 register — Ethereum rollup as bold optimistic infrastructure. Ory White canvas with Inter 48/400 display + signature deep-navy `#0f172a` CTA — open-source-first identity for technical teams. Oura Pure-black canvas with Inter precision and gold-stamped scores — the premium-ring health-precision aesthetic. Paper Website A literal sheet-of-paper website — single literary serif, off-white sheet canvas, narrow reading columns, ink-blue links. Patagonia Outdoor-cooperative editorial — Futura sans on cream, ranger-station palette, photography-led story-first marketing. Patreon Patreon Coral on white — creator-economy patronage with Söhne sans, photographer-led marketing, mid-2024 brand refresh language. PayPal Dual-blue corporate trust — PayPal Sans Big over white, with a deep-navy ink and a sky-blue counterpoint. Peloton Signature `#cb1e4e` red on midnight ink, Inter display, instructor-led premium-fitness storefront. Perplexity Cream paper canvas, custom pplxSans, and the unmistakable Tropic-cyan accent — a reference-library answer engine dressed in warm tones. Phantom Phantom Purple on near-black — crypto wallet design that respects the user's intelligence with editorial restraint. Pinecone White canvas with Inter and a signature `#1cb0d0` cyan — vector database technical-marketing dressed in clean blueprint chrome. Plaid Pale blue trust on white, classical Stripe-adjacent type, and a Benjamin-Franklin-as-mascot moment of personality. Plain B2B support tool with a Dinamo grotesk and a single radioactive `#1ad379` action — Linear-restraint applied to support. PlanetScale Pure-black canvas, blood-red accent, mono-set numerals — a database brand styled like a financial terminal. PlayStation Sony's Cinema-Black canvas with PS Blue and a custom SST sans — gaming-as-cinema, premium hardware in editorial restraint. Polar Dev-tool obsidian — 8rem editorial display headlines, indigo accents, Louize serif moments. Polygon Deep purple `#8247e5` voltage, soft surface ladder, and Inter at enterprise calm — Ethereum L2 as institutional infrastructure. Porsche Engineering-purity black-on-white — Porsche Next at 96px regular, Rosso PostHog Cream-canvas analytics with mustard-yellow CTAs and IBM Plex — open-source craft, not SaaS gloss. Postmark Postal-yellow #ffde00 + warm-black #1c1d1f + paper-white canvas — the transactional email API designed like a friendly post office sign. Prime Video Amazon-blue streaming canvas with Ember sans and the dense, utility-first marketplace UI vocabulary. PropelAuth White canvas with SF Pro Rounded display 60/900 + deep-navy ink — B2B multi-tenant auth with Apple-tinted polish. Quizlet Study-buddy design — Quizlet purple-blue on white, custom Hurmes Geometric, flashcard-as-hero pattern. Qwik Electric purple-to-blue gradient on near-black — resumable execution dressed as a lightning bolt. Railway Ship software peacefully — IBM Plex Serif headlines on a deep eggplant canvas, with a single confident violet for action. Raindrop.io White paper, system-ui sans, soft watercolor blob backgrounds, and a vivid `#0b7ed0` blue CTA — a bookmark manager that ships like a creative-tool sketch. Ramp Off-yellow `#fcfb70` and black-on-white editorial — finance ops dressed as a printed annual report. Rare Beauty Soft lavender on cream — Selena Gomez's beauty brand with mental-health-aware editorial restraint and serif-led product cards. Raycast Near-black canvas, glowing keycaps, monospaced shortcut chips — a marketing site that thinks like a launcher. Razer Neon `#44d62c` snake-green on jet black with Roboto — the For Gamers, By Gamers visual signature. Readwise Pastel-orange book-club warmth — soft cream canvas, friendly Tiempos serif accents, and a tangerine that signals 'this is your library.' Reddit Front-page-of-the-internet orange — community-card density, IBM Plex Sans display, and a confident Remix Signature `#3992ff` blue on pure white with Inter — a nested-routes web framework dressed as a manifesto poster. Render Lavender on white — a PaaS that swapped Heroku purple for a candy-bright #8a05ff and kept the airy whitespace. Replicate AI-API marketing — light page chrome, dark hero canvas, rb-Freigeist Neue display, JetBrains Mono code, sharp 0px corners. Replit Saturated turquoise on `#0e1525` ink — the cloud-IDE aesthetic with IBM Plex DNA and a JetBrains Mono soul. Resend Pure-black canvas with Domaine Display serif at 96px and Commit Mono code chips — email infra that thinks in italics. Retool Pragmatic blue #3a55fc + Inter + dense product mocks — the internal-tool platform that designed itself like a well-organised admin panel. Reuters Global newswire restraint — signature orange (`#ff8000`), Knowledge Medium custom sans, broadsheet rigor for the world''s oldest news agency. Riot Games Crimson `#d13639` red on near-black with custom Riot Beam display — esports-tournament drama and competitive-MOBA editorial. Rive Chunky animated display type and saturated playful colour — interactive graphics platform that wears its motion design on its sleeve. Roblox Bright `#ed1d24` red on white with Builder Sans — the youth-block-builder playground turned multi-billion-game social platform. RunPod Deep slate canvas with Inter and a signature `#673ab7` purple — accessible GPU cloud dressed in friendly developer chrome. Runway A near-black research canvas with ABC Normal headlines pulled tight at -2.5px — a film studio, an ML lab, and a brutalist gallery in one shell. Salesforce Cloud-trust dashboards — Salesforce Sans on a sky-blue ground, with Astro the bear standing guard over a dense CRM portal. SAP Enterprise-ERP precision in cobalt — SAP72 sans, signal-blue accents, and a calm white canvas built for trust. Segment Twilio Segment's customer-data-platform canvas — Whitney SSm humanist sans, navy-on-white, single confident `#1866ee` blue. Semafor Paper-cream canvas (`#f8f5d7`) with FeatureFlatHeadline serif and signature flag-style topic columns — global-news editorial built for the post-Twitter era. SendGrid Functional API-blue on white — the email-platform dashboard aesthetic, now folded under the Twilio umbrella. Sentry Deep-aubergine observability — Dammit Sans display, Rubik body, JetBrains Mono code, signature violet #7553ff and pill CTAs. shadcn/ui Copy-paste components in pure black-on-white — the most influential design system not actually shipped as a library. Shopify Dark-first commerce theatre — 96px NeueHaasGrotesk at weight 330, electric mint focus rings, and stacked multi-layer shadows. Signal Privacy-first messaging in `#3a76f0` Signal blue with Inter sans — minimal, ad-free, end-to-end-encrypted by default. Slack Aubergine workspace marketing — Salesforce-Avant-Garde headlines, all-caps 4px CTAs, white canvas with `#4a154b` accents. Solana Solana Gradient + Diatype on near-black — Layer 1 chain marketing as cinematic experiment, magenta-purple-cyan brand prism. SolidJS Deep navy with a blue-to-cyan brand gradient — reactive primitives dressed as a circuit diagram. Sonos Pure black canvas, Inter typography, and audio-system minimalism — speakers presented as gallery objects. SoundCloud Signature `#ff5500` orange on `#f2f2f2` paper with Interstate sans — waveform-first audio social UI. SpaceX Pure-black cinematic photography, D-DIN aerospace stencil type, ghost-button minimalism — the interface disappears. Spotify Electric `#1ed760` green on near-black canvas with Spotify Mix sans — the canonical streaming-audio tile grid. Square Pure black on pure white, Square Sans grids, and retail-POS minimalism — commerce as black-and-white geometry. Starbucks Forest-green storefront — SoDoSans, full-pill buttons, warm-cream canvas, and a floating Frap CTA the brand calls home. Steam Deep blue-gray `#1b2838` with Motiva Sans — the utilitarian PC-gaming library that runs the world's largest digital storefront. SteelSeries Esports orange `#ff6900` on near-black with Inter — Danish precision peripherals for competitive play. Strava Signature `#fc4c02` orange + Inter on white — endurance-athlete data-driven storefront with map-overlay heritage. Stripe Editorial fintech polish — light Söhne headlines at weight 300, navy-not-black text, signature `#533afd` purple CTAs. Stytch Paper-cream canvas with Booton display + Chivo Mono body — passwordless-modern auth, joined Twilio. Substack Magazine-on-the-internet — Spectral serif body at 19px, Cahuenga display, signature `#ff6719` orange CTAs. Suno A near-black booth with cream Neue Montreal and a hot-pink cue light — a music studio, a record sleeve, and a chat app fused into one canvas. Sunsama Thoughtful daily planning in warm cream and ink — Inter at modest weights over a paper-cream canvas with sage and rose accents and a calm, unhurried voice. Supabase Off-black canvas, signature emerald `#3ecf8e`, Circular as display, Postgres-grade type discipline. Superhuman White paper canvas, a custom Super Sans variable, and a single confident lavender — premium email dressed as a stationery brand. Supreme Box-logo red, Courier monospace, skate-deadpan minimalism — the most influential streetwear store on the web. Svelte Hot orange #ff3e00 against clean white with a confident sans — the framework that wears its flame as a wordmark. Tailwind CSS The system applied to itself — Inter Variable on white canvas, signature cyan #06b6d4, every component built from Tailwind utilities. Tana Pure black canvas, a custom tanaClassic serif at 83px, and a pale-pistachio CTA — a knowledge graph dressed as a literary supplement. Target Bullseye red CTA, Helvetica Neue, photographic hero — friendly mass-market design with confident chromatic restraint. Telegram Cloud-blue messaging — Tesla Cinematic showroom on white — one Electric Blue CTA, Universal Sans, and viewport-height car photography. The Atlantic Modern serif headlines on cream-paper, signature Atlantic orange `#fbb33b`, long-form magazine reading rendered for the web. The Economist Deep cinnabar red `#e3120b`, Milo serif body, Econ Sans labels — the global-affairs weekly rendered with cover-illustration discipline. The Guardian Guardian Egyptian slab serif, signature navy `#052962`, structured ruled hierarchy with bold section accents. The New York Times Cheltenham serif headlines on paper-white, signature breaking-news red, the canonical American broadsheet rendered for the web. The New Yorker Adobe Caslon Pro + Irvin headline cap — a century of editorial gravitas in cream paper, ink black, and signature cartoon line. The Washington Post Postoni serif blackletter masthead, "Democracy Dies in Darkness" tagline, sober ink-on-paper political broadsheet. Things Cool light-blue canvas, system-ui sans, vivid Things-blue accent — a task manager that ships like an Apple Pro Display. Threads Instagram-adjacent text-first social — pure-black canvas, system-sans clarity, and a quiet brand restraint built from the @ glyph alone. TikTok Electric cyan-magenta on pure black — vertical-video voltage with custom Proxima Nova display and a bold neon brand grammar. tldraw Casual whiteboard sketchy — hand-drawn UI primitives, dotted-grid canvas, and a soft pastel palette that wears its toy-like energy with confidence. Together AI Deep navy on near-white with Inter sans — open-source LLM cloud rendered as developer-platform infrastructure. Toyota Japanese-reliability mainstream — `#eb0a1e` Toyota red on white, ToyotaType sans, and a calm-confident marketing surface for the world's most-sold automotive brand. Turbo Vercel-grade pure-black canvas with a magenta-to-blue Turbo gradient — the build system that wears its speed as a sweep. Turso SQLite at the edge — a deep-teal canvas with a CRT-bright cyan accent (#00face) that reads as a glowing edge node. Twilio Signal-red `#f22f46` against clean white — communications APIs given the visual weight of a broadcast colour. Twitch Purple `#9146ff` on `#0e0e10` canvas with Inter — the live-streaming UI built around chat, raids, and gaming density. Uber Eats Pure-black ground, Uber Move custom sans, Uber-app continuity — the operating system of food delivery. Udemy Signature `#a435f0` purple on white with Sailec sans — the open course-marketplace bazaar made approachable. Uniqlo Signature red `#ff0000`, Helvetica Neue system stack, japanese-utility-functional grid — the LifeWear engine. v0 A near-white prompt canvas with GeistSans and pure OKLCH grayscale — Vercel''s AI builder dressed as the calmest text editor on the internet. Valorant Tactical-shooter design language — Tungsten condensed all-caps, signal-red CTAs, and an off-white text the brand calls "ECE8E1". Venmo A single confident `#3d95ce` blue, Aktiv Grotesk geometry, and a social-feed informality — payments dressed as group chat. Vercel Brutalist developer-product polish — near-white canvas, near-pure black-on-near-white type, Geist sans + mono, conic-gradient accents. Vite Electric purple #646cff + Manrope display + a literal lightning-bolt mark — the build tool that designed itself to feel as fast as it is. Vodafone Vodafone Red broadcast band, monumental 144px display, two-tier button system — corporate-newsroom telecom design. Volkswagen People's-car blue — the deep `#001e50` corporate hue, custom VW Sans, and a friendly-German marketing surface that sells everyday mobility with confidence. Walmart Spark-yellow on big-box blue, Antonio Display + Bogle sans — everyday low prices made loud. Warp Near-black canvas, neon-lime cursor, real terminal screenshots — a marketing site that boots like a shell. Weaviate White canvas with Inter and a signature `#1cdb46` open-source green — modular vector database dressed in approachable engineering chrome. webdesignhot AI-era editorial dark — pure black with one acid-lime accent. Webflow Indigo-to-purple gradient discipline with a precise structural sans — the visual builder that markets itself like a design conference. WHOOP Lime `#a0d10b` voltage on jet-black, Inter precision, recovery-data athlete-grade aesthetic. Wikipedia System-default information design — Linux Libertine serif headings, Vector skin, deliberate non-branding for the encyclopedia of record. WIRED Newsstand-density editorial grid, sharp-corner buttons, mono ALL-CAPS kickers — Conde Nast meets engineering lab. Wise A flexible bright-lime green on cream-white — money that travels in sans-serif and a single confident accent. Workday HR-warm professional in tangerine — Adelle Sans humanist curves, signature `#f37721` orange, and a calm white people-first canvas. WorkOS Pure-white canvas with Untitled Sans 80/500 display + indigo-violet h2 — the B2B-enterprise gravitas aesthetic. X Pure-black canvas with Chirp display — algorithmic minimalism, single-letter wordmark, ruthless type discipline. Xbox Xbox Green on near-black, Microsoft's Segoe UI Display dialed to gamer-coded confidence — bold, energetic, Game Pass-first. Y Combinator Brutalist orange monolith — system-font sans on white canvas, signature `#f26625` orange-red blocks with hard 0px corners. You.com Crisp white developer-doc canvas, custom Lumen Sans, and the indigo `#5368EE` accent — a search API rebrand done as enterprise infrastructure. YouTube YouTube Sans + Roboto + signature `#ff0000` red — content-density at planetary scale. Zora Cream-white canvas, electric purple-orange duet, and a custom display — onchain creator network as zine cover.
try on →
theme
mobile · 390 × 844
Tokens webdesignhot/0.1
- bg
#ffffff - bg-soft
#f5f6fc - bg-warm
#fff4f9 - surface
#ffffff - surface-soft
#fafbfd - surface-strong
#f1f3f9 - brand AA·LG · 3.8
#ff007a - brand-hover
#e60069 - brand-pressed
#cc005f - brand-deep
#a60052 - brand-tint
#ffe5f1 - brand-soft
#ffb3d6 - on-brand
#ffffff - text AAA · 18.6
#131313 - text-strong
#000000 - text-muted
#5d6785 - text-soft
#888d9b - text-faint — · 1.6
#cdcdcd - text-on-brand
#ffffff - link
#ff007a - link-hover
#cc005f - selected-bg
#ffe5f1 - border — · 1.2
#ededed - border-strong — · 1.6
#cdcdcd - border-soft
#f7f8fa - border-brand
#ff007a - unicorn-purple
#9c52ff - ethereum-blue
#627eea - success
#27ae60 - warning
#f3b71e - danger
#fd4040 - info
#0068fc
Ship faster than ever.
display-hero "Basel" 88px w600 -0.025em
Ship faster than ever.
display-xl "Basel" 72px w600 -0.02em
Ship faster than ever.
display-lg "Basel" 56px w600 -0.015em
Ship faster than ever.
h1 "Basel" 40px w600 -0.012em
The quick brown fox jumps over the lazy dog.
swap-amount "Basel" 36px w500 -0.012em
Built for teams that ship.
h2 "Basel" 32px w500 -0.008em
A complete kit
h3 "Basel" 24px w500 -0.005em
The quick brown fox jumps over the lazy dog.
h4 "Basel" 18px w500 0
The quick brown fox jumps over the lazy dog.
body-lg "Basel" 18px w400 0
The quick brown fox jumps over the lazy dog.
body "Basel" 16px w400 0
The quick brown fox jumps over the lazy dog.
button "Basel" 16px w600 0.02em
The quick brown fox jumps over the lazy dog.
body-sm "Basel" 14px w400 0
OUR DESIGN SYSTEM
label "Basel" 13px w600 0.04em
The quick brown fox jumps over the lazy dog.
address "JetBrains Mono" 13px w400 0
The quick brown fox jumps over the lazy dog.
eyebrow "Basel" 12px w600 0.10em
- step-0 0px
- step-1 4px
- step-2 8px
- step-3 12px
- step-4 16px
- step-5 20px
- step-6 24px
- step-7 32px
- step-8 40px
- step-9 56px
- step-10 80px
- step-11 96px
- step-12 120px
- step-13 160px
- micro
4px - sm
8px - md
12px - lg
16px - xl
24px - pill
9999px
Text link →
Card preview
A complete kit — everything your product needs.
Hero, pricing, FAQ, dashboard, docs — every layout your product needs.
New
Stable
v1.0
Design roles 7/8 mapped · webdesignhot/0.1
Maps the 8 canonical role names to this entry's actual tokens. Use these to plug the design into role-aware tools — shadcn/ui themes, role-aware Tailwind plugins, atelier-lint — without hard-coding token names.
- background → bg
- foreground → text
- primary → brand
- primary-foreground → on-brand
- accent → —
- muted → text-muted
- border → border
- ring → border-brand
Uniswap's marketing system descends from Hayden Adams's 2018 DEX origin, refined through V2 (2020) and V3 (2021) brand iterations. Uniswap Pink `#ff007a` was anchored in V2 — picked specifically to differentiate from the brutalist black-and-blue DeFi default of Aave, Compound, and Curve. Basel (Lift Type's rounded grotesque sans) handles every heading. The unicorn-mark wordmark is Uniswap's defining identity element, used sparingly as accent ornament rather than mascot. Cards have 16-24px radius — softer than typical DeFi protocols. Voice is direct-friendly: "Trade tokens", "Earn fees on liquidity". The whole brand reads as DeFi-for-grown-ups: sophisticated enough to handle V3 concentrated liquidity, friendly enough not to alienate first-time swappers.
- DEX origin shaping protocol-as-design instinct
- rounded grotesque sans for friendly DeFi typography
- brand color anchored in V2 design refresh
- DeFi peers — Uniswap differentiated via pink + rounded
- whimsy in sophisticated DeFi context
Export
4 formats · paste-ready
Tailwind
theme.extend block for tailwind.config.js
CSS variables
:root { --bg, --text, --brand, … } you can paste anywhere
DTCG JSON
W3C Design Tokens Community Group format
Figma Variables
Importable into Figma → Variables → Import
---
name: Uniswap
tagline: Uniswap Pink on white — DEX design with Basel sans, unicorn-mark whimsy, and rounded-card softness in a usually-brutalist DeFi space.
updated_at: 2026-05-08T00:00:00.000Z
published_at: 2026-05-07T20:02:45.378Z
author: webdesignhot
source_url: https://uniswap.org
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [fintech]
tags: [light, playful, sans, rounded, bright]
preview_swatch: ['#ffffff', '#ff007a', '#131313']
related: [phantom-app, metamask, arbitrum]
description: 'Uniswap''s site is the rare DeFi protocol that has decided playfulness is on-brand. The canvas is white, headings sit in Basel (Lift Type''s rounded grotesque) at 56–88px, and the brand color is "Uniswap Pink" `#ff007a` — a hot magenta-pink that anchors every CTA. Where MetaMask leaned warm-friendly and Phantom leaned editorial-restrained, Uniswap leaned playful-confident: rounded 16-24px corners, soft pink-tinted shadows, the unicorn brand mark used sparingly (no NFT-bro language, but the unicorn shows up). Voice is direct-friendly: "Trade tokens", "Earn fees on liquidity". The whole brand reads as "DeFi for grown-ups who haven''t lost their sense of humor".'
# Canonical 8-role aliases (per google-labs-code/design.md PR #76).
# Maps role names to this entry's actual token names so role-aware
# downstream tools resolve `theme.background` → entry's `bg`, etc.
# Auto-generated by scripts/add-aliases.mjs — do not edit manually;
# regenerate after changing color token names.
aliases:
background: bg
foreground: text
primary: brand
primary-foreground: on-brand
muted: text-muted
border: border
ring: border-brand
colors:
bg: '#ffffff'
bg-soft: '#f5f6fc'
bg-warm: '#fff4f9'
surface: '#ffffff'
surface-soft: '#fafbfd'
surface-strong: '#f1f3f9'
brand: '#ff007a'
brand-hover: '#e60069'
brand-pressed: '#cc005f'
brand-deep: '#a60052'
brand-tint: '#ffe5f1'
brand-soft: '#ffb3d6'
on-brand: '#ffffff'
text: '#131313'
text-strong: '#000000'
text-muted: '#5d6785'
text-soft: '#888d9b'
text-faint: '#cdcdcd'
text-on-brand: '#ffffff'
link: '#ff007a'
link-hover: '#cc005f'
selected-bg: '#ffe5f1'
border: '#ededed'
border-strong: '#cdcdcd'
border-soft: '#f7f8fa'
border-brand: '#ff007a'
unicorn-purple: '#9c52ff'
ethereum-blue: '#627eea'
success: '#27ae60'
warning: '#f3b71e'
danger: '#fd4040'
info: '#0068fc'
typography:
display:
family: '"Basel", "Inter", "Söhne", -apple-system, BlinkMacSystemFont, sans-serif'
weights: [500, 600, 700]
body:
family: '"Basel", "Inter", -apple-system, BlinkMacSystemFont, sans-serif'
weights: [400, 500, 600]
mono:
family: '"JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace'
weights: [400, 500]
scale:
display-hero: { size: 88, weight: 600, lineHeight: 1.0, tracking: '-0.025em', family: display }
display-xl: { size: 72, weight: 600, lineHeight: 1.05, tracking: '-0.02em', family: display }
display-lg: { size: 56, weight: 600, lineHeight: 1.1, tracking: '-0.015em', family: display }
h1: { size: 40, weight: 600, lineHeight: 1.15, tracking: '-0.012em', family: display }
h2: { size: 32, weight: 500, lineHeight: 1.2, tracking: '-0.008em', family: display }
h3: { size: 24, weight: 500, lineHeight: 1.25, tracking: '-0.005em', family: display }
h4: { size: 18, weight: 500, lineHeight: 1.3, tracking: '0', family: display }
eyebrow: { size: 12, weight: 600, lineHeight: 1.2, tracking: '0.10em', family: body }
body-lg: { size: 18, weight: 400, lineHeight: 1.5, tracking: '0', family: body }
body: { size: 16, weight: 400, lineHeight: 1.5, tracking: '0', family: body }
body-sm: { size: 14, weight: 400, lineHeight: 1.45, tracking: '0', family: body }
label: { size: 13, weight: 600, lineHeight: 1.3, tracking: '0.04em', family: body }
button: { size: 16, weight: 600, lineHeight: 1.0, tracking: '0.02em', family: body }
address: { size: 13, weight: 400, lineHeight: 1.5, tracking: '0', family: mono }
swap-amount: { size: 36, weight: 500, lineHeight: 1.0, tracking: '-0.012em', family: display }
radius:
micro: 4
sm: 8
md: 12
lg: 16
xl: 24
pill: 9999
spacing:
base: 4
scale: [0, 4, 8, 12, 16, 20, 24, 32, 40, 56, 80, 96, 120, 160]
layout:
page-width: 1280
prose-width: 720
header-height: 72
motion:
ease-standard: 'cubic-bezier(0.25, 0.1, 0.25, 1)'
ease-emphasized: 'cubic-bezier(0.34, 1.56, 0.64, 1)'
duration-fast: 150
duration-standard: 240
duration-slow: 400
reduced-motion: 'respects prefers-reduced-motion: reduce'
breakpoints:
mobile: 480
tablet: 768
desktop: 1280
wide: 1440
shadows:
card: '0 2px 12px rgba(255, 0, 122, 0.06)'
card-hover: '0 8px 24px rgba(255, 0, 122, 0.14)'
modal: '0 24px 64px rgba(0, 0, 0, 0.20)'
accessibility:
contrast-text-on-bg: 18.0
contrast-text-on-brand: 4.6
focus-ring: '3px solid #ff007a'
reduced-motion-honored: true
components:
button-primary: { bg: brand, text: on-brand, padding: '14px 32px', radius: pill, font: button }
button-secondary: { bg: brand-tint, text: brand-pressed, padding: '12px 30px', radius: pill, font: button }
button-ghost: { bg: transparent, text: brand, padding: '10px 20px' }
card: { bg: surface, radius: 16, padding: 24, shadow: 'card' }
swap-card: { bg: surface, radius: 24, padding: 24, border: '1px solid border-soft', shadow: 'card' }
pill: { bg: surface-strong, text: text, radius: pill, padding: '4px 12px', font: 'label' }
input: { bg: surface-soft, border: '1px solid border-soft', text: text, radius: 16, padding: '16px 20px', focus-border: brand }
lineage:
summary: 'Uniswap''s marketing system descends from Hayden Adams''s 2018 DEX origin, refined through V2 (2020) and V3 (2021) brand iterations. Uniswap Pink `#ff007a` was anchored in V2 — picked specifically to differentiate from the brutalist black-and-blue DeFi default of Aave, Compound, and Curve. Basel (Lift Type''s rounded grotesque sans) handles every heading. The unicorn-mark wordmark is Uniswap''s defining identity element, used sparingly as accent ornament rather than mascot. Cards have 16-24px radius — softer than typical DeFi protocols. Voice is direct-friendly: "Trade tokens", "Earn fees on liquidity". The whole brand reads as DeFi-for-grown-ups: sophisticated enough to handle V3 concentrated liquidity, friendly enough not to alienate first-time swappers.'
influences:
- { name: 'Hayden Adams (founder, 2018)', role: 'DEX origin shaping protocol-as-design instinct', url: 'https://en.wikipedia.org/wiki/Uniswap' }
- { name: 'Basel by Lift Type', role: 'rounded grotesque sans for friendly DeFi typography', url: 'https://lift-type.fr' }
- { name: 'Uniswap Pink (V2 introduction, 2020)', role: 'brand color anchored in V2 design refresh', url: 'https://uniswap.org' }
- { name: 'Aave / Compound / Curve', role: 'DeFi peers — Uniswap differentiated via pink + rounded', url: 'https://aave.com' }
- { name: 'Unicorn mark heritage', role: 'whimsy in sophisticated DeFi context', url: 'https://uniswap.org' }
---
## 1. Visual Theme & Atmosphere
Uniswap's site is the rare DeFi protocol that has decided playfulness is on-brand. The canvas is white `#ffffff`, headings sit in Basel (Lift Type's rounded grotesque sans) at 56–88px, and the brand color is **Uniswap Pink** `#ff007a` — a hot magenta-pink that anchors every CTA. Where MetaMask leaned warm-friendly and Phantom leaned editorial-restrained, Uniswap leaned **playful-confident**: rounded 16-24px corners, soft pink-tinted shadows, the unicorn brand mark used sparingly (no NFT-bro language, but the unicorn shows up).
The swap interface is the brand's product-as-hero pattern — a 24px-radius card with token selectors, amount inputs, and a single Pink CTA "Swap". Cards have 16px radius elsewhere. Voice is direct-friendly: "Trade tokens", "Earn fees on liquidity". The unicorn-mark wordmark anchors brand identity but doesn't get anthropomorphized.
CTAs are pill-radius (9999px) with white text on Pink bg. Body uses 16px line-height 1.5. Mono renders Solana-style truncated addresses. The whole brand reads as **DeFi-for-grown-ups**: sophisticated enough for V3 concentrated liquidity, friendly enough not to alienate first-time swappers.
**Key Characteristics:**
- White canvas + Uniswap Pink `#ff007a`
- Basel (Lift Type) rounded grotesque sans
- Pill-radius CTAs, 16-24px cards
- Swap-card UI (24px radius) as product hero
- Unicorn wordmark mark, never anthropomorphized
- Soft pink-tinted shadows
- Mono for blockchain addresses
- Light-only canvas (V4 site has both, marketing is light)
- Direct-friendly voice
- Light-grey-tinted purple `#9c52ff` and Ethereum blue accents in chips
## 2. Color Palette & Roles
### Primary
- **Background** (`#ffffff`): white.
- **Bg Soft** (`#f5f6fc`): cool-blue-tinted alternate.
- **Bg Warm** (`#fff4f9`): pale-pink wash for hero.
- **Text** (`#131313`): body.
### Brand — Uniswap Pink
- **Brand** (`#ff007a`): primary CTA, brand mark.
- **Brand Hover** (`#e60069`), **Pressed** (`#cc005f`), **Deep** (`#a60052`).
- **Brand Tint** (`#ffe5f1`): selection wash.
### Accent
- **Unicorn Purple** (`#9c52ff`): rare accent, sometimes in unicorn mark
- **Ethereum Blue** (`#627eea`): chain chip color
### Surface
- **Surface** (`#ffffff`), **Surface Soft** (`#fafbfd`), **Surface Strong** (`#f1f3f9`).
### Borders
- **Border** (`#ededed`), **Border Strong** (`#cdcdcd`), **Border Soft** (`#f7f8fa`).
### Semantic
- success `#27ae60`, warning `#f3b71e`, danger `#fd4040`, info `#0068fc`.
## 3. Typography Rules
### Font Family
- **Display + Body**: Basel (Lift Type's rounded grotesque). Falls back to Inter → Söhne.
- **Mono**: JetBrains Mono / IBM Plex Mono for addresses.
### Hierarchy
| Role | Font | Size | Weight | LH | Tracking |
|------|------|------|--------|-----|----------|
| display-hero | Basel | 88 | 600 | 1.0 | -0.025em |
| display-lg | Basel | 56 | 600 | 1.1 | -0.015em |
| h1 | Basel | 40 | 600 | 1.15 | -0.012em |
| h2 | Basel | 32 | 500 | 1.2 | -0.008em |
| h3 | Basel | 24 | 500 | 1.25 | -0.005em |
| eyebrow | Basel | 12 | 600 | 1.2 | 0.10em UPPER |
| body | Basel | 16 | 400 | 1.5 | 0 |
| label | Basel | 13 | 600 | 1.3 | 0.04em |
| button | Basel | 16 | 600 | 1.0 | 0.02em |
| address | JetBrains Mono | 13 | 400 | 1.5 | 0 |
| swap-amount | Basel | 36 | 500 | 1.0 | -0.012em |
### Principles
- **Basel for everything**, mono for addresses.
- **600 weight on display + buttons** — confident but not aggressive.
- **Tight tracking on display** (-0.025em hero).
- **Mixed case display, UPPER eyebrows.**
## 4. Component Stylings
### Buttons (3 variants — pill-radius)
**Primary** — Uniswap Pink:
- bg `#ff007a`, text white, 16px Basel 600 0.02em
- Padding 14×32, radius 9999 (pill)
- Hover: bg `#e60069`, scale 1.02
**Secondary** — pink tint:
- bg `brand-tint`, text `brand-pressed`, pill radius
**Ghost**: bg transparent, text pink, padding 10×20.
### Cards
- bg white, **16px radius**, padding 24
- Soft pink-tinted shadow `0 2px 12px rgba(255,0,122,0.06)`
- Hover: shadow shifts to `0 8px 24px rgba(255,0,122,0.14)`
### Swap Card (the product hero)
- bg white, **24px radius**, padding 24, 1px soft border, soft pink shadow
- "From" + "To" sections with 16px radius inner inputs
- Token selector pills (pill-radius, surface-strong bg)
- Single Pink CTA "Swap" full-width pill at bottom
### Pills (token selectors, network chips)
- Token: pill radius, surface-strong bg, with token icon + symbol
- Network: pill radius, network-color outlined
### Inputs (token amount)
- bg surface-soft, 1px soft border, 16px radius (rounded for swap-card aesthetic)
- Focus: border pink
### Navigation
- 72px sticky header, white bg
- Uniswap unicorn wordmark left (pink), top-level nav center, "Connect Wallet" pink pill CTA right
## 5. Layout Principles
- Base 4px, 96-160px between sections
- Page max width 1280px
- Hero: swap-card centered with overlapping headline above
- Feature grid: 3-up at desktop, 2-up at tablet
## 6. Shapes & Radius Scale
| Tier | Value | Use |
|------|-------|-----|
| Micro | 4 | indicators |
| Standard | 8 | tooltips |
| Comfortable | 12 | dropdowns |
| Relaxed | 16 | **default cards** |
| Featured | 24 | **swap card** (product hero) |
| Pill | 9999 | **buttons + token pills** |
## 7. Depth & Elevation
| Level | Treatment |
|-------|-----------|
| 1 | `0 2px 12px rgba(255,0,122,0.06)` resting cards |
| 2 | `0 8px 24px rgba(255,0,122,0.14)` hover |
| 3 | `0 12px 32px rgba(255,0,122,0.18)` swap-card |
| 4 | `0 24px 64px rgba(0,0,0,0.20)` modal |
## 8. Interaction & Motion
- Standard ease, emphasized for celebrate states
- 150ms hover, 240ms standard, 400ms slow
- Swap-card hover: shadow lift + 1.005 scale
- Token selector dropdown: 240ms slide-down
## 9. Accessibility & A11y
- text on bg = **18.0:1** AAA
- on-brand on brand: white on Uniswap Pink = **4.6:1** AA
- 3px Uniswap Pink focus ring
Token selectors `role="combobox"` with proper aria. Swap card flow accessible via keyboard tab order. Address truncation has full-address available via tooltip.
## 10. Responsive Behavior
mobile <479: hero 88→48; nav hamburger; swap-card full-width. tablet: 2-up grid. desktop+: 3-up.
## 11. Content & Voice
### Tone
**Direct-friendly.** Sophisticated DeFi without lecturing.
### Microcopy patterns
- Primary CTA: **"Connect Wallet"** / **"Swap"** / **"Provide liquidity"**
- Errors: **"Insufficient balance — add more ETH to swap"**
- Loading: **"Confirming swap…"**
- Success: **"Swapped 100 USDC for 0.05 ETH"**
### CTA verb conventions
- **Connect / Swap / Provide / Stake / Bridge**
- Avoid: NFT-bro language, "Get started" alone
## 12. Dark Mode & Theming
**Light-only** marketing site. The Uniswap Interface (app.uniswap.org) has both modes — dark uses bg `#191b1f` with pink unchanged.
## 13. Lineage & Influences
Uniswap descends from Hayden Adams's 2018 DEX origin, refined through V2 (2020) and V3 (2021) brand iterations. Uniswap Pink `#ff007a` was anchored in V2 — differentiating from Aave/Compound/Curve's brutalist black-and-blue. Basel (Lift Type) handles typography. The unicorn wordmark is the brand's defining identity.
**Named influences:**
- **Hayden Adams (founder, 2018)** — DEX origin
- **Basel by Lift Type** — rounded grotesque sans
- **Uniswap Pink (V2, 2020)** — brand anchor
- **Aave / Compound / Curve** — DeFi peers differentiated against
- **Unicorn mark heritage** — whimsy in sophisticated DeFi
## 14. Do's and Don'ts
### Do
- **Uniswap Pink `#ff007a` for primary CTA + brand only.**
- **Basel (or Inter fallback) for everything.**
- **Pill-radius CTAs, 16px cards, 24px swap-card.**
- **Soft pink-tinted shadows.**
- **Unicorn mark in wordmark, sparingly elsewhere.**
- **Mono for addresses.**
- **Direct-friendly voice.**
### Don't
- **Don't substitute pink.** `#ff007a` is the brand, not Tailwind pink.
- **Don't anthropomorphize the unicorn.**
- **Don't add gradients on CTA.**
- **Don't all-caps headlines.**
- **Don't add NFT-bro microcopy.**
- **Don't use brutalist DeFi aesthetics.** Rounded + pink IS Uniswap.
## 15. Agent Prompt Guide
### Quick Color Reference
- bg: `#ffffff`
- text: `#131313`
- brand (Uniswap Pink): `#ff007a` / hover `#e60069`
- unicorn-purple: `#9c52ff`
- ethereum-blue: `#627eea`
- border: `#ededed`
### Example Component Prompts
> Build a Uniswap-style hero: white canvas, swap-card centered (24px radius, 24px pad, pink shadow), 88px Basel 600 heading "Swap any token, on any chain" above. Pink `#ff007a` CTA "Connect Wallet" pill-radius 16px Basel 600 0.02em.
> Design a swap card: 24px radius, white surface, 1px soft border, pink-tinted shadow. "From" section with token selector pill + amount input. Arrow swap-direction button center. "To" section identical. "Swap" CTA full-width pink pill at bottom.
> Render a token selector pill: pill radius, surface-strong `#f1f3f9` bg, token icon left + symbol "ETH" 16px Basel 600. Chevron right.
> Build a "Connect Wallet" CTA: pill radius, Uniswap Pink bg, white 16px Basel 600 0.02em "Connect Wallet", padding 14×32. Hover: bg `#e60069`, scale 1.02.
> Design an address display: JetBrains Mono 13px gray on white, "0xa1B2...E5f6" truncated, copy-icon button in pink.
### Iteration Guide
1. **White + Uniswap Pink + Basel + Unicorn mark.**
2. **Pill-radius CTAs, 16-24px cards.**
3. **Swap-card 24px radius is the product hero.**
4. **Soft pink-tinted shadows.**
5. **Mono for addresses.**
6. **Sophisticated-friendly voice.**
7. **Reject brutalist DeFi, NFT-bro language, gradient CTAs.**
1. Visual Theme & Atmosphere
Uniswap’s site is the rare DeFi protocol that has decided playfulness is on-brand. The canvas is white #ffffff, headings sit in Basel (Lift Type’s rounded grotesque sans) at 56–88px, and the brand color is Uniswap Pink #ff007a — a hot magenta-pink that anchors every CTA. Where MetaMask leaned warm-friendly and Phantom leaned editorial-restrained, Uniswap leaned playful-confident: rounded 16-24px corners, soft pink-tinted shadows, the unicorn brand mark used sparingly (no NFT-bro language, but the unicorn shows up).
The swap interface is the brand’s product-as-hero pattern — a 24px-radius card with token selectors, amount inputs, and a single Pink CTA “Swap”. Cards have 16px radius elsewhere. Voice is direct-friendly: “Trade tokens”, “Earn fees on liquidity”. The unicorn-mark wordmark anchors brand identity but doesn’t get anthropomorphized.
CTAs are pill-radius (9999px) with white text on Pink bg. Body uses 16px line-height 1.5. Mono renders Solana-style truncated addresses. The whole brand reads as DeFi-for-grown-ups: sophisticated enough for V3 concentrated liquidity, friendly enough not to alienate first-time swappers.
Key Characteristics:
- White canvas + Uniswap Pink
#ff007a - Basel (Lift Type) rounded grotesque sans
- Pill-radius CTAs, 16-24px cards
- Swap-card UI (24px radius) as product hero
- Unicorn wordmark mark, never anthropomorphized
- Soft pink-tinted shadows
- Mono for blockchain addresses
- Light-only canvas (V4 site has both, marketing is light)
- Direct-friendly voice
- Light-grey-tinted purple
#9c52ffand Ethereum blue accents in chips
2. Color Palette & Roles
Primary
- Background (
#ffffff): white. - Bg Soft (
#f5f6fc): cool-blue-tinted alternate. - Bg Warm (
#fff4f9): pale-pink wash for hero. - Text (
#131313): body.
Brand — Uniswap Pink
- Brand (
#ff007a): primary CTA, brand mark. - Brand Hover (
#e60069), Pressed (#cc005f), Deep (#a60052). - Brand Tint (
#ffe5f1): selection wash.
Accent
- Unicorn Purple (
#9c52ff): rare accent, sometimes in unicorn mark - Ethereum Blue (
#627eea): chain chip color
Surface
- Surface (
#ffffff), Surface Soft (#fafbfd), Surface Strong (#f1f3f9).
Borders
- Border (
#ededed), Border Strong (#cdcdcd), Border Soft (#f7f8fa).
Semantic
- success
#27ae60, warning#f3b71e, danger#fd4040, info#0068fc.
3. Typography Rules
Font Family
- Display + Body: Basel (Lift Type’s rounded grotesque). Falls back to Inter → Söhne.
- Mono: JetBrains Mono / IBM Plex Mono for addresses.
Hierarchy
| Role | Font | Size | Weight | LH | Tracking |
|---|---|---|---|---|---|
| display-hero | Basel | 88 | 600 | 1.0 | -0.025em |
| display-lg | Basel | 56 | 600 | 1.1 | -0.015em |
| h1 | Basel | 40 | 600 | 1.15 | -0.012em |
| h2 | Basel | 32 | 500 | 1.2 | -0.008em |
| h3 | Basel | 24 | 500 | 1.25 | -0.005em |
| eyebrow | Basel | 12 | 600 | 1.2 | 0.10em UPPER |
| body | Basel | 16 | 400 | 1.5 | 0 |
| label | Basel | 13 | 600 | 1.3 | 0.04em |
| button | Basel | 16 | 600 | 1.0 | 0.02em |
| address | JetBrains Mono | 13 | 400 | 1.5 | 0 |
| swap-amount | Basel | 36 | 500 | 1.0 | -0.012em |
Principles
- Basel for everything, mono for addresses.
- 600 weight on display + buttons — confident but not aggressive.
- Tight tracking on display (-0.025em hero).
- Mixed case display, UPPER eyebrows.
4. Component Stylings
Buttons (3 variants — pill-radius)
Primary — Uniswap Pink:
- bg
#ff007a, text white, 16px Basel 600 0.02em - Padding 14×32, radius 9999 (pill)
- Hover: bg
#e60069, scale 1.02
Secondary — pink tint:
- bg
brand-tint, textbrand-pressed, pill radius
Ghost: bg transparent, text pink, padding 10×20.
Cards
- bg white, 16px radius, padding 24
- Soft pink-tinted shadow
0 2px 12px rgba(255,0,122,0.06) - Hover: shadow shifts to
0 8px 24px rgba(255,0,122,0.14)
Swap Card (the product hero)
- bg white, 24px radius, padding 24, 1px soft border, soft pink shadow
- “From” + “To” sections with 16px radius inner inputs
- Token selector pills (pill-radius, surface-strong bg)
- Single Pink CTA “Swap” full-width pill at bottom
Pills (token selectors, network chips)
- Token: pill radius, surface-strong bg, with token icon + symbol
- Network: pill radius, network-color outlined
Inputs (token amount)
- bg surface-soft, 1px soft border, 16px radius (rounded for swap-card aesthetic)
- Focus: border pink
Navigation
- 72px sticky header, white bg
- Uniswap unicorn wordmark left (pink), top-level nav center, “Connect Wallet” pink pill CTA right
5. Layout Principles
- Base 4px, 96-160px between sections
- Page max width 1280px
- Hero: swap-card centered with overlapping headline above
- Feature grid: 3-up at desktop, 2-up at tablet
6. Shapes & Radius Scale
| Tier | Value | Use |
|---|---|---|
| Micro | 4 | indicators |
| Standard | 8 | tooltips |
| Comfortable | 12 | dropdowns |
| Relaxed | 16 | default cards |
| Featured | 24 | swap card (product hero) |
| Pill | 9999 | buttons + token pills |
7. Depth & Elevation
| Level | Treatment |
|---|---|
| 1 | 0 2px 12px rgba(255,0,122,0.06) resting cards |
| 2 | 0 8px 24px rgba(255,0,122,0.14) hover |
| 3 | 0 12px 32px rgba(255,0,122,0.18) swap-card |
| 4 | 0 24px 64px rgba(0,0,0,0.20) modal |
8. Interaction & Motion
- Standard ease, emphasized for celebrate states
- 150ms hover, 240ms standard, 400ms slow
- Swap-card hover: shadow lift + 1.005 scale
- Token selector dropdown: 240ms slide-down
9. Accessibility & A11y
- text on bg = 18.0:1 AAA
- on-brand on brand: white on Uniswap Pink = 4.6:1 AA
- 3px Uniswap Pink focus ring
Token selectors role="combobox" with proper aria. Swap card flow accessible via keyboard tab order. Address truncation has full-address available via tooltip.
10. Responsive Behavior
mobile <479: hero 88→48; nav hamburger; swap-card full-width. tablet: 2-up grid. desktop+: 3-up.
11. Content & Voice
Tone
Direct-friendly. Sophisticated DeFi without lecturing.
Microcopy patterns
- Primary CTA: “Connect Wallet” / “Swap” / “Provide liquidity”
- Errors: “Insufficient balance — add more ETH to swap”
- Loading: “Confirming swap…”
- Success: “Swapped 100 USDC for 0.05 ETH”
CTA verb conventions
- Connect / Swap / Provide / Stake / Bridge
- Avoid: NFT-bro language, “Get started” alone
12. Dark Mode & Theming
Light-only marketing site. The Uniswap Interface (app.uniswap.org) has both modes — dark uses bg #191b1f with pink unchanged.
13. Lineage & Influences
Uniswap descends from Hayden Adams’s 2018 DEX origin, refined through V2 (2020) and V3 (2021) brand iterations. Uniswap Pink #ff007a was anchored in V2 — differentiating from Aave/Compound/Curve’s brutalist black-and-blue. Basel (Lift Type) handles typography. The unicorn wordmark is the brand’s defining identity.
Named influences:
- Hayden Adams (founder, 2018) — DEX origin
- Basel by Lift Type — rounded grotesque sans
- Uniswap Pink (V2, 2020) — brand anchor
- Aave / Compound / Curve — DeFi peers differentiated against
- Unicorn mark heritage — whimsy in sophisticated DeFi
14. Do’s and Don’ts
Do
- Uniswap Pink
#ff007afor primary CTA + brand only. - Basel (or Inter fallback) for everything.
- Pill-radius CTAs, 16px cards, 24px swap-card.
- Soft pink-tinted shadows.
- Unicorn mark in wordmark, sparingly elsewhere.
- Mono for addresses.
- Direct-friendly voice.
Don’t
- Don’t substitute pink.
#ff007ais the brand, not Tailwind pink. - Don’t anthropomorphize the unicorn.
- Don’t add gradients on CTA.
- Don’t all-caps headlines.
- Don’t add NFT-bro microcopy.
- Don’t use brutalist DeFi aesthetics. Rounded + pink IS Uniswap.
15. Agent Prompt Guide
Quick Color Reference
- bg:
#ffffff - text:
#131313 - brand (Uniswap Pink):
#ff007a/ hover#e60069 - unicorn-purple:
#9c52ff - ethereum-blue:
#627eea - border:
#ededed
Example Component Prompts
Build a Uniswap-style hero: white canvas, swap-card centered (24px radius, 24px pad, pink shadow), 88px Basel 600 heading “Swap any token, on any chain” above. Pink
#ff007aCTA “Connect Wallet” pill-radius 16px Basel 600 0.02em.
Design a swap card: 24px radius, white surface, 1px soft border, pink-tinted shadow. “From” section with token selector pill + amount input. Arrow swap-direction button center. “To” section identical. “Swap” CTA full-width pink pill at bottom.
Render a token selector pill: pill radius, surface-strong
#f1f3f9bg, token icon left + symbol “ETH” 16px Basel 600. Chevron right.
Build a “Connect Wallet” CTA: pill radius, Uniswap Pink bg, white 16px Basel 600 0.02em “Connect Wallet”, padding 14×32. Hover: bg
#e60069, scale 1.02.
Design an address display: JetBrains Mono 13px gray on white, “0xa1B2…E5f6” truncated, copy-icon button in pink.
Iteration Guide
- White + Uniswap Pink + Basel + Unicorn mark.
- Pill-radius CTAs, 16-24px cards.
- Swap-card 24px radius is the product hero.
- Soft pink-tinted shadows.
- Mono for addresses.
- Sophisticated-friendly voice.
- Reject brutalist DeFi, NFT-bro language, gradient CTAs.
Drop uniswap into your project, then ship the actual sections in an afternoon.
1 · install design
npx @webdesignhot/design-md add uniswap 2 · ship landing page
npx agentkit init --design uniswap