dark · structured · sans · cool · playful
DESIGN.md inspired by Phantom
Phantom Purple on near-black — crypto wallet design that respects the user's intelligence with editorial restraint.
By webdesignhot · phantom.com ↗
$ npx @webdesignhot/design-md add phantom-app
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. 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. Uniswap Uniswap Pink on white — DEX design with Basel sans, unicorn-mark whimsy, and rounded-card softness in a usually-brutalist DeFi space. 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
#0c0c0e - bg-deep
#06060a - bg-section
#15151a - bg-elev
#1f1f25 - surface
#15151a - surface-strong
#22222a - surface-translucent
rgba(12, 12, 14, 0.85) - brand AAA · 8.4
#ab9ff2 - brand-hover
#bdb3f6 - brand-pressed
#9b8ee8 - brand-deep
#534bb1 - brand-deeper
#3d3686 - brand-tint
rgba(171, 159, 242, 0.15) - on-brand
#0c0c0e - text AAA · 19.5
#ffffff - text-strong
#ffffff - text-muted
#a8a8b8 - text-soft
#7a7a8c - text-faint — · 2.9
#5a5a6c - text-on-brand
#0c0c0e - link
#ab9ff2 - link-hover
#ffffff - selected-bg
rgba(171, 159, 242, 0.15) - border — · 1.2
rgba(255, 255, 255, 0.08) - border-strong — · 1.5
rgba(255, 255, 255, 0.16) - border-brand
#ab9ff2 - ghost-glow
#ab9ff2 - success
#5dd4a8 - warning
#f5c842 - danger
#ff6b6b - info
#ab9ff2
Ship faster than ever.
display-hero "Phantom Sans" 88px w700 -0.025em
Ship faster than ever.
display-xl "Phantom Sans" 72px w700 -0.02em
Ship faster than ever.
display-lg "Phantom Sans" 56px w700 -0.015em
Ship faster than ever.
h1 "Phantom Sans" 40px w700 -0.012em
Built for teams that ship.
h2 "Phantom Sans" 32px w600 -0.008em
A complete kit
h3 "Phantom Sans" 24px w600 -0.005em
The quick brown fox jumps over the lazy dog.
h4 "Phantom Sans" 18px w600 0
The quick brown fox jumps over the lazy dog.
body-lg "Phantom Sans" 18px w400 0
The quick brown fox jumps over the lazy dog.
body "Phantom Sans" 15px w400 0
The quick brown fox jumps over the lazy dog.
button "Phantom Sans" 14px w600 0.02em
The quick brown fox jumps over the lazy dog.
body-sm "Phantom Sans" 13px w400 0
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 "Phantom Sans" 12px w600 0.14em
OUR DESIGN SYSTEM
label "Phantom Sans" 12px w600 0.06em
- 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
- micro
2px - sm
4px - md
8px - lg
12px - xl
16px - 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
Phantom's marketing system is the rare crypto wallet that has decided not to look like a crypto wallet. The brand emerged in 2021 with the Solana ecosystem and almost immediately differentiated through editorial restraint — single pastel purple on near-black, magazine typography, spectral ghost mascot used sparingly. Phantom Purple `#ab9ff2` (light periwinkle, with deeper variant `#534bb1`) was picked specifically not to overlap MetaMask's foxy-orange or Coinbase's blue. Phantom Sans (custom, Söhne-adjacent grotesque sans) handles every heading. The ghost-mascot animation appears only on hero and 404; never on dashboards, never animated in marketing photos. Voice is sophisticated-friendly: confident enough to skip explainers, friendly enough not to feel cliquey.
- Layer 1 chain that Phantom was purpose-built for
- closest commercial relative to Phantom Sans
- crypto-wallet contemporaries Phantom differentiated against
- magazine typography references in dark crypto context
- tech-editorial dark-canvas contemporaries
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: Phantom
tagline: Phantom Purple on near-black — crypto wallet design that respects the user's intelligence with editorial restraint.
updated_at: 2026-05-08T00:00:00.000Z
published_at: 2026-05-07T20:02:40.130Z
author: webdesignhot
source_url: https://phantom.com
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [fintech]
tags: [dark, structured, sans, cool, playful]
preview_swatch: ['#0c0c0e', '#ab9ff2', '#ffffff']
related: [metamask, solana-com, arbitrum]
description: 'Phantom''s site is the rare crypto wallet that has decided not to look like a crypto wallet. The canvas is near-black `#0c0c0e`, headings sit in Tobias Frere-Jones''s Söhne-adjacent custom Phantom Sans at 56–88px, and the brand color is "Phantom Purple" `#ab9ff2` (light periwinkle, with a deeper variant `#534bb1`). Where MetaMask leaned foxy-friendly and Coinbase leaned blue-corporate, Phantom picked editorial restraint — a single pastel purple on dark, magazine typography, illustrative spectral mascot used sparingly. Cards have 12-16px radius and soft purple-tinted shadows. Voice is sophisticated-friendly: "Your wallet for everything Solana" — confident enough to skip explainers, friendly enough not to feel cliquey.'
# 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: '#0c0c0e'
bg-deep: '#06060a'
bg-section: '#15151a'
bg-elev: '#1f1f25'
surface: '#15151a'
surface-strong: '#22222a'
surface-translucent: 'rgba(12, 12, 14, 0.85)'
brand: '#ab9ff2'
brand-hover: '#bdb3f6'
brand-pressed: '#9b8ee8'
brand-deep: '#534bb1'
brand-deeper: '#3d3686'
brand-tint: 'rgba(171, 159, 242, 0.15)'
on-brand: '#0c0c0e'
text: '#ffffff'
text-strong: '#ffffff'
text-muted: '#a8a8b8'
text-soft: '#7a7a8c'
text-faint: '#5a5a6c'
text-on-brand: '#0c0c0e'
link: '#ab9ff2'
link-hover: '#ffffff'
selected-bg: 'rgba(171, 159, 242, 0.15)'
border: 'rgba(255, 255, 255, 0.08)'
border-strong: 'rgba(255, 255, 255, 0.16)'
border-brand: '#ab9ff2'
ghost-glow: '#ab9ff2'
success: '#5dd4a8'
warning: '#f5c842'
danger: '#ff6b6b'
info: '#ab9ff2'
typography:
display:
family: '"Phantom Sans", "Söhne", "Inter", -apple-system, BlinkMacSystemFont, sans-serif'
weights: [500, 700]
body:
family: '"Phantom Sans", "Söhne", "Inter", -apple-system, sans-serif'
weights: [400, 500, 600, 700]
mono:
family: '"JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace'
weights: [400, 500]
scale:
display-hero: { size: 88, weight: 700, lineHeight: 1.0, tracking: '-0.025em', family: display }
display-xl: { size: 72, weight: 700, lineHeight: 1.05, tracking: '-0.02em', family: display }
display-lg: { size: 56, weight: 700, lineHeight: 1.1, tracking: '-0.015em', family: display }
h1: { size: 40, weight: 700, lineHeight: 1.15, tracking: '-0.012em', family: display }
h2: { size: 32, weight: 600, lineHeight: 1.2, tracking: '-0.008em', family: display }
h3: { size: 24, weight: 600, lineHeight: 1.25, tracking: '-0.005em', family: display }
h4: { size: 18, weight: 600, lineHeight: 1.3, tracking: '0', family: display }
eyebrow: { size: 12, weight: 600, lineHeight: 1.2, tracking: '0.14em', family: body }
body-lg: { size: 18, weight: 400, lineHeight: 1.55, tracking: '0', family: body }
body: { size: 15, weight: 400, lineHeight: 1.6, tracking: '0', family: body }
body-sm: { size: 13, weight: 400, lineHeight: 1.5, tracking: '0', family: body }
label: { size: 12, weight: 600, lineHeight: 1.3, tracking: '0.06em', family: body }
button: { size: 14, weight: 600, lineHeight: 1.0, tracking: '0.02em', family: body }
address: { size: 13, weight: 400, lineHeight: 1.5, tracking: '0', family: mono }
radius:
micro: 2
sm: 4
md: 8
lg: 12
xl: 16
pill: 9999
spacing:
base: 4
scale: [0, 4, 8, 12, 16, 20, 24, 32, 40, 56, 80, 96, 120]
layout:
page-width: 1280
prose-width: 720
header-height: 72
motion:
ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
ease-emphasized: 'cubic-bezier(0.34, 0.07, 0.34, 1)'
duration-fast: 120
duration-standard: 200
duration-slow: 320
duration-cinematic: 480
reduced-motion: 'respects prefers-reduced-motion: reduce — disables ghost-mascot float'
breakpoints:
mobile: 480
tablet: 768
desktop: 1280
wide: 1440
shadows:
card: '0 2px 8px rgba(171, 159, 242, 0.08)'
card-hover: '0 8px 24px rgba(171, 159, 242, 0.16)'
glow: '0 0 32px rgba(171, 159, 242, 0.40)'
modal: '0 24px 64px rgba(0, 0, 0, 0.80)'
accessibility:
contrast-text-on-bg: 17.6
contrast-text-on-brand: 9.4
focus-ring: '2px solid #ab9ff2'
reduced-motion-honored: true
components:
button-primary: { bg: brand, text: on-brand, padding: '14px 28px', radius: pill, font: button }
button-secondary: { bg: transparent, text: text, padding: '12px 26px', radius: pill, border: '1px solid border-strong' }
button-ghost: { bg: transparent, text: brand, padding: '10px 20px' }
card: { bg: surface, radius: 16, padding: 24, border: '1px solid border' }
pill: { bg: surface-strong, text: text, radius: pill, padding: '4px 12px', font: 'label' }
input: { bg: bg-elev, border: '1px solid border-strong', text: text, radius: 12, padding: '12px 16px', focus-border: brand }
lineage:
summary: 'Phantom''s marketing system is the rare crypto wallet that has decided not to look like a crypto wallet. The brand emerged in 2021 with the Solana ecosystem and almost immediately differentiated through editorial restraint — single pastel purple on near-black, magazine typography, spectral ghost mascot used sparingly. Phantom Purple `#ab9ff2` (light periwinkle, with deeper variant `#534bb1`) was picked specifically not to overlap MetaMask''s foxy-orange or Coinbase''s blue. Phantom Sans (custom, Söhne-adjacent grotesque sans) handles every heading. The ghost-mascot animation appears only on hero and 404; never on dashboards, never animated in marketing photos. Voice is sophisticated-friendly: confident enough to skip explainers, friendly enough not to feel cliquey.'
influences:
- { name: 'Solana ecosystem (2020-)', role: 'Layer 1 chain that Phantom was purpose-built for', url: 'https://solana.com' }
- { name: 'Söhne by Klim Type Foundry', role: 'closest commercial relative to Phantom Sans', url: 'https://klim.co.nz/retail-fonts/sohne/' }
- { name: 'MetaMask foxy + Coinbase blue', role: 'crypto-wallet contemporaries Phantom differentiated against', url: 'https://metamask.io' }
- { name: 'Editorial design (Apartamento, The Gentlewoman)', role: 'magazine typography references in dark crypto context', url: 'https://www.apartamentomagazine.com' }
- { name: 'Vercel + Linear brand languages', role: 'tech-editorial dark-canvas contemporaries', url: 'https://vercel.com' }
---
## 1. Visual Theme & Atmosphere
Phantom's site is the rare crypto wallet that has decided not to look like a crypto wallet. The canvas is near-black `#0c0c0e` (very slight cool tilt, never pure black), headings sit in Phantom Sans at 56–88px, and the brand color is **Phantom Purple** `#ab9ff2` — a light periwinkle that's almost a pastel, with a deeper variant `#534bb1` for emphasis. Where MetaMask leaned foxy-friendly and Coinbase leaned corporate-blue, Phantom picked editorial restraint.
The spectral ghost mascot — a soft purple wisp — appears on hero and 404 pages only. It's animated to slowly float ±4px on idle, glowing subtly. Marketing photos never feature anthropomorphized ghosts, never NFT-bro language, never "to the moon" energy. The brand commits to "we're a wallet that respects you" — magazine typography, dark canvas, single pastel accent, occasional ghost.
CTAs are pill-radius (9999px), with bg `#ab9ff2` and **dark text** `#0c0c0e` for accessibility (the light purple is too pastel for white text body sizes — 9.4:1 contrast with dark text vs ~3:1 with white). Cards have 16px radius and soft purple-tinted shadows. Body uses 15px line-height 1.6 in monochrome; Solana addresses use mono.
**Key Characteristics:**
- Near-black canvas `#0c0c0e`
- Phantom Purple `#ab9ff2` light periwinkle CTA + brand
- Phantom Sans (Söhne-adjacent custom)
- **Dark text on purple bg** (accessibility — purple too light for white body)
- Pill-radius CTAs
- 16px card radius
- Spectral ghost mascot — hero/404 only
- Soft purple-tinted shadows + occasional glow
- Mono for blockchain addresses
- Dark-only canvas
## 2. Color Palette & Roles
### Primary
- **Background** (`#0c0c0e`): near-black with cool tilt.
- **Text** (`#ffffff`): pure white.
### Brand — Phantom Purple
- **Brand** (`#ab9ff2`): light periwinkle, primary CTA + brand mark.
- **Brand Hover** (`#bdb3f6`), **Pressed** (`#9b8ee8`).
- **Brand Deep** (`#534bb1`): emphasis purple for headlines, accent strokes.
- **Brand Deeper** (`#3d3686`): pressed deep.
- **Brand Tint** (15% purple): selection wash.
### Surface
- **Surface** (`#15151a`), **Surface Strong** (`#22222a`), **Bg Elev** (`#1f1f25`).
### Borders
- **Border** (8% white), **Border Strong** (16% white), **Border Brand** = purple.
### Semantic
- success `#5dd4a8`, warning `#f5c842`, danger `#ff6b6b`, info = brand.
## 3. Typography Rules
### Font Family
- **Display + Body**: Phantom Sans (custom, Söhne-adjacent). Falls back to Söhne → Inter.
- **Mono**: JetBrains Mono / IBM Plex Mono for Solana addresses + transaction signatures.
### Hierarchy
| Role | Font | Size | Weight | LH | Tracking |
|------|------|------|--------|-----|----------|
| display-hero | Phantom Sans | 88 | 700 | 1.0 | -0.025em |
| display-lg | Phantom Sans | 56 | 700 | 1.1 | -0.015em |
| h1 | Phantom Sans | 40 | 700 | 1.15 | -0.012em |
| h2 | Phantom Sans | 32 | 600 | 1.2 | -0.008em |
| h3 | Phantom Sans | 24 | 600 | 1.25 | -0.005em |
| eyebrow | Phantom Sans | 12 | 600 | 1.2 | 0.14em UPPER |
| body | Phantom Sans | 15 | 400 | 1.6 | 0 |
| label | Phantom Sans | 12 | 600 | 1.3 | 0.06em |
| button | Phantom Sans | 14 | 600 | 1.0 | 0.02em |
| address | JetBrains Mono | 13 | 400 | 1.5 | 0 |
### Principles
- **Phantom Sans for everything**, mono for addresses.
- **Tight tracking on display** (-0.025em hero).
- **Body 15px / 1.6** — editorial reading rhythm.
- **Mixed case display, UPPER eyebrows.**
## 4. Component Stylings
### Buttons (3 variants — pill-radius)
**Primary** — Phantom Purple:
- bg `#ab9ff2`, **text `#0c0c0e`** (dark on light purple — accessibility)
- 14px Phantom Sans 600 0.02em, padding 14×28, **radius 9999 (pill)**
- Hover: bg `#bdb3f6`, scale 1.02
**Secondary** — bordered:
- bg transparent, text white, 1px white-16% border, pill radius
**Ghost**: bg transparent, text purple, padding 10×20.
### Cards
- bg `#15151a`, **16px radius**, padding 24
- 1px white-8% border + soft purple-tinted shadow `0 2px 8px rgba(171,159,242,0.08)`
- Hover: shadow shifts to `0 8px 24px rgba(171,159,242,0.16)`
- Featured cards: glow shadow `0 0 32px rgba(171,159,242,0.40)`
### Pills (token tags, network labels)
- bg `surface-strong`, text white, pill radius
- Solana network pill: brand-tint bg, brand text
### Inputs
- bg bg-elev, 1px white-16% border, 12px radius
- Focus: border purple
### Navigation
- 72px sticky header, near-black bg
- Phantom wordmark left (white with purple ghost icon), top-level nav center, "Get Phantom" purple pill CTA right
## 5. Layout Principles
- Base 4px, 96-120px between sections
- Page max width 1280px
- Hero: spectral ghost mascot center with overlapping headline
- Feature grid: 3-up at desktop, 2-up at tablet, 1-up at mobile
## 6. Shapes & Radius Scale
| Tier | Value | Use |
|------|-------|-----|
| Micro | 2 | indicators |
| Standard | 4 | tooltips |
| Comfortable | 8 | tags, dropdowns |
| Relaxed | 12 | inputs |
| Featured | 16 | **cards** |
| Pill | 9999 | **buttons + tags** |
## 7. Depth & Elevation
| Level | Treatment |
|-------|-----------|
| 1 | `0 2px 8px rgba(171,159,242,0.08)` resting |
| 2 | `0 8px 24px rgba(171,159,242,0.16)` hover |
| 3 | `0 0 32px rgba(171,159,242,0.40)` featured glow |
| 4 | `0 24px 64px rgba(0,0,0,0.80)` modal |
## 8. Interaction & Motion
- Standard ease, emphasized for cinematic
- 120ms hover, 200ms standard, 480ms cinematic for ghost-mascot float
- Ghost-mascot floats ±4px on idle (8s loop)
- Card glow appears on featured items only
## 9. Accessibility & A11y
- text on bg = **17.6:1** AAA
- on-brand on brand: dark `#0c0c0e` on `#ab9ff2` = **9.4:1** AAA
- 2px purple focus ring
Solana addresses use `<code>` semantic markup for screen-reader discrimination from prose. Ghost mascot is `aria-hidden`. Network selectors have `aria-label`.
## 10. Responsive Behavior
mobile <479: hero 88→44; nav hamburger; 1-up. tablet: 2-up. desktop+: 3-up.
## 11. Content & Voice
### Tone
**Sophisticated-friendly.** Confident enough to skip "what is crypto" explainers, friendly enough not to feel cliquey.
### Microcopy patterns
- Primary CTA: **"Get Phantom"** / **"Connect wallet"** / **"Continue"**
- Sign-up: implicit — wallet is the auth
- Errors: **"Couldn't connect. Try again."**
- Loading: **"Confirming on Solana…"**
- Empty: **"No NFTs yet. Browse Magic Eden to start collecting."**
### CTA verb conventions
- **Get Phantom / Connect / Send / Swap / Stake**
- Avoid: NFT-bro ("Ape in", "WAGMI"), corporate ("Onboard", "Start your journey")
## 12. Dark Mode & Theming
**Dark-only.** The brand has no light mode. Spectral ghost on near-black IS the brand identity.
## 13. Lineage & Influences
Phantom's marketing system emerged in 2021 with the Solana ecosystem and differentiated through editorial restraint — single pastel purple on near-black, magazine typography, spectral ghost mascot used sparingly. Phantom Purple `#ab9ff2` was picked specifically not to overlap MetaMask's foxy-orange or Coinbase's blue.
**Named influences:**
- **Solana ecosystem (2020-)** — Layer 1 chain
- **Söhne by Klim Type Foundry** — Phantom Sans relative
- **MetaMask + Coinbase** — wallet contemporaries differentiated against
- **Editorial design (Apartamento, The Gentlewoman)** — magazine typography
- **Vercel + Linear brand languages** — tech-editorial dark-canvas contemporaries
## 14. Do's and Don'ts
### Do
- **Phantom Purple `#ab9ff2` for primary CTA + brand only.**
- **Dark text on purple bg** — accessibility-correct.
- **Phantom Sans (or Söhne fallback) for everything.**
- **Pill-radius CTAs, 16px cards.**
- **Spectral ghost on hero/404 only** — never on dashboard.
- **Mono for blockchain addresses + transactions.**
- **Near-black canvas, never pure black.**
- **Soft purple-tinted shadows.**
### Don't
- **Don't put white text on Phantom Purple bg** — 3:1 contrast fails AA.
- **Don't substitute purple.** `#ab9ff2` is the brand.
- **Don't anthropomorphize the ghost.** No personality moments, no waving.
- **Don't add NFT-bro microcopy.** "Ape in" / "WAGMI" off-brand.
- **Don't use gradients on CTA.**
- **Don't all-caps headlines.**
- **Don't add a light mode** without explicit Phantom approval.
## 15. Agent Prompt Guide
### Quick Color Reference
- bg: `#0c0c0e`
- text: `#ffffff`
- brand (Phantom Purple): `#ab9ff2` / hover `#bdb3f6`
- brand-deep: `#534bb1`
- border: 8% white / strong 16% white
### Example Component Prompts
> Build a Phantom-style hero: near-black canvas, soft spectral ghost mascot center floating ±4px (8s loop), 88px Phantom Sans 700 heading "Your wallet for everything Solana" mixed-case `-0.025em` in white. Pill-radius purple `#ab9ff2` "Get Phantom" CTA with **dark text** `#0c0c0e` 14px Phantom Sans 600 0.02em.
> Design a token card: surface `#15151a`, 16px radius, 24px pad, 1px white-8% border, soft purple-tinted shadow. 24px Phantom Sans h3 token name, address in mono 13px `#a8a8b8`. Token-network pill in purple.
> Render an address display: JetBrains Mono 13px `#a8a8b8` on near-black, "ABCD...1234" truncated, copy-icon button in purple ghost style.
> Build a "Connect Wallet" CTA: pill radius, Phantom Purple bg, **dark text** 14px Phantom Sans 600 0.02em, padding 14×28. Hover: bg `#bdb3f6`, scale 1.02.
> Design a featured swap card: surface, 16px radius, 24px pad, glow shadow `0 0 32px rgba(171,159,242,0.40)`, 32px Phantom Sans 600 token-pair "SOL → USDC".
### Iteration Guide
1. **Near-black + Phantom Purple + Phantom Sans (or Söhne).**
2. **Dark text on purple bg** — never white at body sizes.
3. **Pill-radius CTAs, 16px cards.**
4. **Mono for blockchain addresses.**
5. **Ghost mascot on hero/404 only.**
6. **Soft purple-tinted shadows + occasional glow.**
7. **Editorial restraint — no NFT-bro microcopy, no gradients.**
8. **Reject white-on-purple at body, anthropomorphized ghost, light mode.**
1. Visual Theme & Atmosphere
Phantom’s site is the rare crypto wallet that has decided not to look like a crypto wallet. The canvas is near-black #0c0c0e (very slight cool tilt, never pure black), headings sit in Phantom Sans at 56–88px, and the brand color is Phantom Purple #ab9ff2 — a light periwinkle that’s almost a pastel, with a deeper variant #534bb1 for emphasis. Where MetaMask leaned foxy-friendly and Coinbase leaned corporate-blue, Phantom picked editorial restraint.
The spectral ghost mascot — a soft purple wisp — appears on hero and 404 pages only. It’s animated to slowly float ±4px on idle, glowing subtly. Marketing photos never feature anthropomorphized ghosts, never NFT-bro language, never “to the moon” energy. The brand commits to “we’re a wallet that respects you” — magazine typography, dark canvas, single pastel accent, occasional ghost.
CTAs are pill-radius (9999px), with bg #ab9ff2 and dark text #0c0c0e for accessibility (the light purple is too pastel for white text body sizes — 9.4:1 contrast with dark text vs ~3:1 with white). Cards have 16px radius and soft purple-tinted shadows. Body uses 15px line-height 1.6 in monochrome; Solana addresses use mono.
Key Characteristics:
- Near-black canvas
#0c0c0e - Phantom Purple
#ab9ff2light periwinkle CTA + brand - Phantom Sans (Söhne-adjacent custom)
- Dark text on purple bg (accessibility — purple too light for white body)
- Pill-radius CTAs
- 16px card radius
- Spectral ghost mascot — hero/404 only
- Soft purple-tinted shadows + occasional glow
- Mono for blockchain addresses
- Dark-only canvas
2. Color Palette & Roles
Primary
- Background (
#0c0c0e): near-black with cool tilt. - Text (
#ffffff): pure white.
Brand — Phantom Purple
- Brand (
#ab9ff2): light periwinkle, primary CTA + brand mark. - Brand Hover (
#bdb3f6), Pressed (#9b8ee8). - Brand Deep (
#534bb1): emphasis purple for headlines, accent strokes. - Brand Deeper (
#3d3686): pressed deep. - Brand Tint (15% purple): selection wash.
Surface
- Surface (
#15151a), Surface Strong (#22222a), Bg Elev (#1f1f25).
Borders
- Border (8% white), Border Strong (16% white), Border Brand = purple.
Semantic
- success
#5dd4a8, warning#f5c842, danger#ff6b6b, info = brand.
3. Typography Rules
Font Family
- Display + Body: Phantom Sans (custom, Söhne-adjacent). Falls back to Söhne → Inter.
- Mono: JetBrains Mono / IBM Plex Mono for Solana addresses + transaction signatures.
Hierarchy
| Role | Font | Size | Weight | LH | Tracking |
|---|---|---|---|---|---|
| display-hero | Phantom Sans | 88 | 700 | 1.0 | -0.025em |
| display-lg | Phantom Sans | 56 | 700 | 1.1 | -0.015em |
| h1 | Phantom Sans | 40 | 700 | 1.15 | -0.012em |
| h2 | Phantom Sans | 32 | 600 | 1.2 | -0.008em |
| h3 | Phantom Sans | 24 | 600 | 1.25 | -0.005em |
| eyebrow | Phantom Sans | 12 | 600 | 1.2 | 0.14em UPPER |
| body | Phantom Sans | 15 | 400 | 1.6 | 0 |
| label | Phantom Sans | 12 | 600 | 1.3 | 0.06em |
| button | Phantom Sans | 14 | 600 | 1.0 | 0.02em |
| address | JetBrains Mono | 13 | 400 | 1.5 | 0 |
Principles
- Phantom Sans for everything, mono for addresses.
- Tight tracking on display (-0.025em hero).
- Body 15px / 1.6 — editorial reading rhythm.
- Mixed case display, UPPER eyebrows.
4. Component Stylings
Buttons (3 variants — pill-radius)
Primary — Phantom Purple:
- bg
#ab9ff2, text#0c0c0e(dark on light purple — accessibility) - 14px Phantom Sans 600 0.02em, padding 14×28, radius 9999 (pill)
- Hover: bg
#bdb3f6, scale 1.02
Secondary — bordered:
- bg transparent, text white, 1px white-16% border, pill radius
Ghost: bg transparent, text purple, padding 10×20.
Cards
- bg
#15151a, 16px radius, padding 24 - 1px white-8% border + soft purple-tinted shadow
0 2px 8px rgba(171,159,242,0.08) - Hover: shadow shifts to
0 8px 24px rgba(171,159,242,0.16) - Featured cards: glow shadow
0 0 32px rgba(171,159,242,0.40)
Pills (token tags, network labels)
- bg
surface-strong, text white, pill radius - Solana network pill: brand-tint bg, brand text
Inputs
- bg bg-elev, 1px white-16% border, 12px radius
- Focus: border purple
Navigation
- 72px sticky header, near-black bg
- Phantom wordmark left (white with purple ghost icon), top-level nav center, “Get Phantom” purple pill CTA right
5. Layout Principles
- Base 4px, 96-120px between sections
- Page max width 1280px
- Hero: spectral ghost mascot center with overlapping headline
- Feature grid: 3-up at desktop, 2-up at tablet, 1-up at mobile
6. Shapes & Radius Scale
| Tier | Value | Use |
|---|---|---|
| Micro | 2 | indicators |
| Standard | 4 | tooltips |
| Comfortable | 8 | tags, dropdowns |
| Relaxed | 12 | inputs |
| Featured | 16 | cards |
| Pill | 9999 | buttons + tags |
7. Depth & Elevation
| Level | Treatment |
|---|---|
| 1 | 0 2px 8px rgba(171,159,242,0.08) resting |
| 2 | 0 8px 24px rgba(171,159,242,0.16) hover |
| 3 | 0 0 32px rgba(171,159,242,0.40) featured glow |
| 4 | 0 24px 64px rgba(0,0,0,0.80) modal |
8. Interaction & Motion
- Standard ease, emphasized for cinematic
- 120ms hover, 200ms standard, 480ms cinematic for ghost-mascot float
- Ghost-mascot floats ±4px on idle (8s loop)
- Card glow appears on featured items only
9. Accessibility & A11y
- text on bg = 17.6:1 AAA
- on-brand on brand: dark
#0c0c0eon#ab9ff2= 9.4:1 AAA - 2px purple focus ring
Solana addresses use <code> semantic markup for screen-reader discrimination from prose. Ghost mascot is aria-hidden. Network selectors have aria-label.
10. Responsive Behavior
mobile <479: hero 88→44; nav hamburger; 1-up. tablet: 2-up. desktop+: 3-up.
11. Content & Voice
Tone
Sophisticated-friendly. Confident enough to skip “what is crypto” explainers, friendly enough not to feel cliquey.
Microcopy patterns
- Primary CTA: “Get Phantom” / “Connect wallet” / “Continue”
- Sign-up: implicit — wallet is the auth
- Errors: “Couldn’t connect. Try again.”
- Loading: “Confirming on Solana…”
- Empty: “No NFTs yet. Browse Magic Eden to start collecting.”
CTA verb conventions
- Get Phantom / Connect / Send / Swap / Stake
- Avoid: NFT-bro (“Ape in”, “WAGMI”), corporate (“Onboard”, “Start your journey”)
12. Dark Mode & Theming
Dark-only. The brand has no light mode. Spectral ghost on near-black IS the brand identity.
13. Lineage & Influences
Phantom’s marketing system emerged in 2021 with the Solana ecosystem and differentiated through editorial restraint — single pastel purple on near-black, magazine typography, spectral ghost mascot used sparingly. Phantom Purple #ab9ff2 was picked specifically not to overlap MetaMask’s foxy-orange or Coinbase’s blue.
Named influences:
- Solana ecosystem (2020-) — Layer 1 chain
- Söhne by Klim Type Foundry — Phantom Sans relative
- MetaMask + Coinbase — wallet contemporaries differentiated against
- Editorial design (Apartamento, The Gentlewoman) — magazine typography
- Vercel + Linear brand languages — tech-editorial dark-canvas contemporaries
14. Do’s and Don’ts
Do
- Phantom Purple
#ab9ff2for primary CTA + brand only. - Dark text on purple bg — accessibility-correct.
- Phantom Sans (or Söhne fallback) for everything.
- Pill-radius CTAs, 16px cards.
- Spectral ghost on hero/404 only — never on dashboard.
- Mono for blockchain addresses + transactions.
- Near-black canvas, never pure black.
- Soft purple-tinted shadows.
Don’t
- Don’t put white text on Phantom Purple bg — 3:1 contrast fails AA.
- Don’t substitute purple.
#ab9ff2is the brand. - Don’t anthropomorphize the ghost. No personality moments, no waving.
- Don’t add NFT-bro microcopy. “Ape in” / “WAGMI” off-brand.
- Don’t use gradients on CTA.
- Don’t all-caps headlines.
- Don’t add a light mode without explicit Phantom approval.
15. Agent Prompt Guide
Quick Color Reference
- bg:
#0c0c0e - text:
#ffffff - brand (Phantom Purple):
#ab9ff2/ hover#bdb3f6 - brand-deep:
#534bb1 - border: 8% white / strong 16% white
Example Component Prompts
Build a Phantom-style hero: near-black canvas, soft spectral ghost mascot center floating ±4px (8s loop), 88px Phantom Sans 700 heading “Your wallet for everything Solana” mixed-case
-0.025emin white. Pill-radius purple#ab9ff2“Get Phantom” CTA with dark text#0c0c0e14px Phantom Sans 600 0.02em.
Design a token card: surface
#15151a, 16px radius, 24px pad, 1px white-8% border, soft purple-tinted shadow. 24px Phantom Sans h3 token name, address in mono 13px#a8a8b8. Token-network pill in purple.
Render an address display: JetBrains Mono 13px
#a8a8b8on near-black, “ABCD…1234” truncated, copy-icon button in purple ghost style.
Build a “Connect Wallet” CTA: pill radius, Phantom Purple bg, dark text 14px Phantom Sans 600 0.02em, padding 14×28. Hover: bg
#bdb3f6, scale 1.02.
Design a featured swap card: surface, 16px radius, 24px pad, glow shadow
0 0 32px rgba(171,159,242,0.40), 32px Phantom Sans 600 token-pair “SOL → USDC”.
Iteration Guide
- Near-black + Phantom Purple + Phantom Sans (or Söhne).
- Dark text on purple bg — never white at body sizes.
- Pill-radius CTAs, 16px cards.
- Mono for blockchain addresses.
- Ghost mascot on hero/404 only.
- Soft purple-tinted shadows + occasional glow.
- Editorial restraint — no NFT-bro microcopy, no gradients.
- Reject white-on-purple at body, anthropomorphized ghost, light mode.
Drop phantom-app into your project, then ship the actual sections in an afternoon.
1 · install design
npx @webdesignhot/design-md add phantom-app 2 · ship landing page
npx agentkit init --design phantom-app