A multichain crypto wallet for NFTs and DeFi. Fits crypto wallets, Web3 products, NFT-marketplace tools, and DeFi-app landing page designs.
Screenshots of 4 pages from phantom.app: homepage, security, learn and explore.
Design tokens
19 colors · 11 type stylesSoft indigo (#ab9ff2) primary on a cream (#fffdf8) canvas, set in Phantom throughout. These values are read from the Phantom DESIGN.md in the Pass bundle, which carries all 19 color tokens, 11 type styles, the radius and spacing scales and the full component rules.
Three ways to ship a Phantom-style UI.
Use in your AI builder, no-code tool, or CMS
Paste the DESIGN.md in and ask the tool to restyle your existing site to match this design, or start a brand new one from scratch with the same visual language.
Not affiliated with Phantom. All trademarks belong to their respective owners.
About Phantom
Home page hero
The home page opens on a pale lavender background with a nav of four plain links (security, learn, explore, support) and a soft violet download pill at the right. A small line, "The crypto wallet that'll take you places," sits above a very large headline in deep purple, "Your trusted companion," in which a violet ghost-shaped mascot stands in for a word. A pill with a browser logo says download for Firefox, with a small note that the wallet is available on other browsers and devices. Below it, a dark phone mockup shows a collectibles screen with a search field, a grid of six character artworks with names and counts and a violet speech bubble that says "Fun!"
Feature cards
A horizontal row of tall rounded cards in lavender, near-black, pink and pale yellow follows, each with a short headline and a product screen or illustration. One shows a wallet balance with deposit, buy and send buttons and a floating "Personalize" sticker, another a dark blob of app and marketplace icons, another a pink search screen of collectibles and a fourth a yellow card of token rows. The sticker-like labels ("Search!", "Personalize", "Fun!") make the product screens feel playful. A section below, "Powerful tools made for everyone," begins with the same mascot inside the headline.
Security page
The security page is a deep violet. A white headline, "We've got your back, always," holds the mascot in place of a word. A rounded white pill, "Your security," labels a carousel with arrow buttons. Cards include "Self-custodial means you control your funds. We never have access." on cream with a pattern of colorful ovals, "Always know exactly what you're signing" on lavender with a transaction approval screen, and "Connect your Ledger to keep your crypto even safer" on grey with a hardware-wallet illustration. A fourth pink card about scam and malicious site warnings is cut off at the edge.
Learn page
The learn page switches to a warm off-white. A headline, "Phantom blog," with the mascot, a one-line description and an outlined pill link to the blog lead into a labeled carousel. Cards show dated posts with level tags such as beginner and read or watch buttons: a post introducing a new brand identity on a purple card with a large grey ghost, one on a Solana-only mode on a grey card with an app icon and a how-to post about transferring tokens from a trading app.
Explore page
The explore page is almost black, with a centered white headline, "Explore the ecosystem," in which the mascot overlaps the letters. Small square collectible images float around the headline at different sizes: pixel-art wolves, a red clay dragon, a robot figure and others. A white pill, "Suggested apps," sits above a row of rounded dark tiles with app logos for marketplaces, a swap tool, an analytics-style tool and others, with arrow controls at the right.
Based on full-page screenshots of phantom.app: the home page and the security, learn and explore pages. Posts, dates, balances and collectibles shown in the captures are examples on the page. This describes the layout of a crypto product's pages and is not financial advice. Check the live site before relying on specific details.
Related designs
