Pump.fun

Overview

Pump.fun is a fair-launch memecoin platform built on Solana that democratizes token creation and trading through transparent bonding curves. The design system embodies 'Crypto-Native Directness'—a movement that prioritizes clarity, speed, and accessibility over decorative complexity. The interface uses a dark-mode-first canvas (rgb(20, 21, 28)) paired with vivid, high-saturation accent colors (#86efac primary green, #f472b6 secondary pink, #60a5fa tertiary blue) to create visual energy and urgency. Users experience the UI as both approachable and technically credible: the dark background reduces cognitive load during rapid trading decisions, while the neon-bright CTAs command immediate attention without ambiguity.

The brand voice is direct, confident, and peer-to-peer. Pump.fun speaks to users as equals in the crypto ecosystem—no condescension, no corporate jargon. Vocabulary emphasizes fairness ('fair-launch'), transparency ('bonding curve'), and agency ('anyone can create'). The tone is conversational yet precise: 'Trade faster. Pump is better on mobile.' Example sentence in brand voice: 'Your coin, your rules—no gatekeepers, no delays.'

Colors

The color system is built around three primary roles: a vibrant mint-green primary (#86efac, rgb(134, 239, 172)) for all call-to-action elements and interactive states; a hot pink secondary (#f472b6) for alerts, highlights, and secondary actions; and a sky blue tertiary (#60a5fa) for informational elements and tertiary interactions. The surface stack is anchored in deep charcoal (#14151c for base surface, #111113 for lowest container) to minimize eye strain during extended trading sessions and to maximize contrast with bright accent colors. On-surface text is near-white (#fafafa) for maximum legibility against dark backgrounds. The outline and outline-variant tokens (#7a7a7a and #4a4a4a respectively) provide subtle dividers and disabled states without introducing visual noise. Error states

Typography

The type system uses Inter exclusively across all scales, chosen for its geometric clarity and excellent legibility at small sizes—critical for crypto trading interfaces where precision matters. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines and major announcements; headline-lg (40px, 600 weight, -0.02em) anchors section titles and modal headers; headline-md (28px, 600 weight, -0.01em) breaks up content areas. Body-lg (18px, 400 weight) is used for descriptive copy and onboarding text, while body-md (16px, 400 weight) serves as the default paragraph text. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text, form labels, and navigation items—the 600 weight ensures CTAs remain visually dominant even at small sizes. Label-sm (12px, 500 weight, 0

Layout

The layout system uses a 12-column grid with a max-width of 1280px, allowing content to breathe on desktop while remaining compact on mobile. The gutter (24px) is applied consistently between grid columns and as the primary spacing unit for section separation. Container padding uses the lg spacing token (40px) on desktop, reducing to md (24px) on tablet and sm (12px) on mobile. The page rhythm alternates between dense content blocks (cards, lists) and breathing room (40px vertical separation between major sections). The sidebar navigation on the left uses fixed positioning with a width of 200px, leaving the main content area fluid. White-space philosophy prioritizes clarity over density: a 24px gap separates card elements within a grid, and 40px separates major content sections. The search

Elevation & Depth

Visual hierarchy in Pump.fun is achieved through a layered shadow system combined with subtle background color shifts. Level 1 (Base): the main surface at #14151c with no shadow, establishing the foundation. Level 2 (Standard Cards): surface-container (#18191b) with a 1px border at surface-container-high (#212225) and a soft shadow of 0 4px 12px rgba(0, 0, 0, 0.1), creating gentle separation from the base. Level 3 (Elevated/Modals): surface-container (#18191b) with a stronger shadow of 0 16px 40px rgba(0, 0, 0, 0.15) and a 1px border at surface-container-high, signaling modal prominence. Inter

Shapes

The shape system follows 'Crypto-Technical Minimalism'—sharp enough to feel modern and precise, rounded enough to feel approachable. Buttons use lg radius (1rem / 16px) to create a friendly, clickable appearance while maintaining geometric clarity. Cards and containers use lg radius (16px) as the default, with xl radius (1.5rem / 24px) reserved for modals and elevated surfaces to signal importance. Input fields use DEFAULT radius (0.5rem / 8px) for a more technical, form-like appearance. Badges and status indicators use full radius (9999px) to create pill-shaped elements that feel distinct fro

Components

Action Elements Buttons are the primary interaction mechanism and use the full height of 40px with 18px horizontal padding (label-md typography, 600 weight). Primary buttons (#86efac background, #052e16 text) are used for all main CTAs ('Create', 'Continue', 'Sign in'). On hover, the background shifts to the primary-fixed-dim (#34d399) with a smooth 150ms transition. On active/pressed state, the background becomes primary-container (#1fd978) with the text color shifting to on-primary-container (#0a1f0f). Secondary buttons use a transparent background with a 1px border at outline-variant (#4a4a4a) and primary text color; on hover, the background becomes surface-container-high (#212225). All buttons use rounded lg (16px) and apply a box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) on hover to i

Do's and Don'ts

**Do**

• Do use primary green (#86efac) exclusively for main CTAs and interactive states—it is the brand's signature accent and must remain visually dominant.
• Do apply the 40px lg spacing token between major content sections to create breathing room and reduce cognitive load during trading.
• Do use the full 40px button height with lg radius (16px) for all primary actions to maximize clickability and signal importance.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) to small labels over gradient or busy backgrounds to maintain legibility.
• Do use Inter exclusively at all scales—its geometric clarity is essential for crypto trading interfaces where precision matters.
• Do apply the 0 4px 12px rgba(0, 0, 0, 0.1) shadow to hovered cards to indicate liftoff without overwhelming the interface.

**Don't**

• Don't use primary green for anything other than CTAs, focus states, and success indicators—overuse dilutes its signal strength.
• Don't apply shadows larger than 0 16px 40px rgba(0, 0, 0, 0.15) on standard elements; reserve the largest shadow for modals only.
• Don't use border-radius smaller than 8px (DEFAULT) on interactive elements; it reduces perceived clickability and feels technical rather than approachable.
• Don't mix font families—Inter is the only typeface; using system fonts or fallbacks breaks the cohesive visual identity.
• Don't reduce button height below 40px or padding below 0 18px; the crypto audience expects generous touch targets for rapid trading.
• Don't apply opacity changes to primary green; instead, shift to the primary-fixed-dim (#34d399) or primary-container (#1fd978) tokens to maintain color integrity.