GMGN.AI

Overview

GMGN.AI is a high-velocity, multi-chain meme token trading terminal designed for traders who demand speed, precision, and real-time market intelligence. The platform serves active traders across Solana, Ethereum, BNB Chain, Base, Monad, and TRON, enabling lightning-fast token discovery, execution, and portfolio management. The aesthetic is rooted in **Data-Driven Minimalism**—a design philosophy that strips away decorative elements to expose pure information hierarchy, using a near-black canvas (#0d0d0f) as the foundation and vibrant accent colors (emerald green #86d99f for buys, coral red #f26666 for sells, golden yellow #f5c20f for warnings) as semantic signals that communicate market action at a glance. The UI evokes a sense of controlled intensity: calm, focused, and unambiguous.

The brand voice is terse, technical, and action-oriented. Vocabulary favors precision over warmth: "Buy," "Sell," "MC," "ATH," "Trending"—no hedging, no marketing speak. Tone is neutral and matter-of-fact, treating the trader as a peer who values speed over reassurance. Example sentence: "SPCX6900 up 27.7% in 9m—MC $179.6K, ATH $215.6K."

Colors

The color system is built on a **semantic signal model** where color communicates market action and urgency, not mood. The surface stack anchors the interface in deep neutrals: surface (#0d0d0f) is the page background, surface-container (#17181b) is the card layer, and surface-container-highest (#26282c) is the interactive hover state. These near-black tones (RGB 13–38 range) create visual separation without distraction, allowing accent colors to dominate attention.

Primary (#86d99f, rgb(134, 217, 159)) is the buy signal—a cool, confident green used on all "Buy" CTAs, positive price movements, and success states. It appears at 100% opacity on buttons (padding: 9px 16px, border-radius: 6px, font-weight: 600) and at 14% opacity (rgba(134, 217, 159, 0.14)) as a background tint for badge-succ

Typography

The type system uses Geist (a geometric sans-serif optimized for screen rendering) across all scales, with weight and size doing the heavy lifting in hierarchy. Display (60px, weight 700, line-height 68px, letter-spacing -0.04em) is reserved for hero headlines; headline-lg (40px, weight 600, line-height 48px) anchors major sections; headline-md (28px, weight 600) is used for modal titles and subsection headers. Body-lg (18px, weight 400, line-height 28px) is the default paragraph text; body-md (16px, weight 400, line-height 24px) is used in table cells and compact layouts. Label-md (14px, weight 600, line-height 20px, letter-spacing 0.01em) is the workhorse for buttons, form labels, and navigation items; label-sm (12px, weight 500, line-height 16px, letter-spacing 0.02em) is used for badge

Layout

The layout uses a 12-column grid with a max-width of 1280px, enabling flexible multi-panel layouts (sidebar + main content + right panel) without reflow. The gutter is 24px, applied consistently between grid columns and major section blocks. White-space is used sparingly and functionally: lg spacing (40px) separates major sections (header, trending table, footer); md spacing (24px) separates cards and form groups; sm spacing (12px) separates list items and inline elements. The container-max-width of 1280px ensures readability on ultra-wide displays while maintaining focus on the data table. Padding inside cards is always md (24px), and input fields use sm padding (12px) to keep form density high without sacrificing touch targets (minimum 32px height for buttons and inputs). The design favo

Elevation & Depth

Depth is conveyed through a minimal shadow system and strategic use of borders, not through layered blur or glassmorphism. Level 1 (Base): the surface (#0d0d0f) has no shadow; it is the ground plane. Level 2 (Cards): cards use a 1px solid border in outline (#26282c) and a subtle shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to separate from the background. Level 3 (Hover/Elevated): on hover, cards elevate to a larger shadow (0 8px 24px rgba(0, 0, 0, 0.25)) and shift to surface-container-high (#1d1e24), signaling interactivity. Modals use the largest shadow (0 8px 24px rgba(0, 0, 0, 0.25)) combined wi

Shapes

The shape language is **Technical Precision**—rounded corners are minimal and functional, never organic. The rounded scale uses sm (4px) for micro-interactions (focus rings, small badges); DEFAULT (8px) for input fields and small components; md (12px) for cards and list items; lg (16px) for modals and large containers; xl (24px) for hero sections and full-width panels; full (9999px) for pills and badges. Buttons use md (12px) to signal a clear tap target while maintaining a modern, tech-forward appearance. Cards use md (12px) to soften edges without appearing soft or approachable—the intent is

Components

Action Elements Buttons are the primary interaction primitive. All buttons use label-md typography (14px, weight 600, line-height 20px) and a fixed height of 32px with padding 9px 16px. The primary button (button-primary) uses background {colors.primary} (#86d99f) with text color {colors.on-primary} (#0d0d0f), border-radius {rounded.md} (12px), and no border. On hover (button-primary-hover), the background shifts to #a8e6b8 and gains a box-shadow: 0 3px 8px rgba(134, 217, 159, 0.2) to signal elevation. The secondary button (button-secondary) uses a transparent background with a 1px solid border in rgba(255, 255, 255, 0.08) and text color {colors.on-surface} (#f5f5f5). On hover, the background becomes rgba(255, 255, 255, 0.08). The danger button (button-danger) mirrors the primary butto

Do's and Don'ts

**Do**

• Do use primary (#86d99f) exclusively for buy signals, positive price movements, and success states—never for neutral or secondary actions.
• Do apply label-md (14px, weight 600) to all button text and form labels to maintain consistent visual weight across interactive elements.
• Do use md spacing (24px) between major content blocks and sm spacing (12px) between list items to create rhythm without clutter.
• Do apply transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1) to all interactive state changes (hover, focus, active) for smooth, predictable feedback.
• Do use on-surface (#f5f5f5) as the default text color and on-surface-variant (#5c6068) only for secondary text, timestamps, and disabled states.
• Do maintain a minimum touch target of 32px height for all buttons and interactive elements to ensure mobile usability.

**Don't**

• Don't use primary (#86d99f) on non-interactive elements or as a background fill for large areas—reserve it for CTAs and semantic signals.
• Don't apply shadows larger than {elevation.lg} (0 8px 24px rgba(0, 0, 0, 0.25)) to non-modal elements; excessive depth flattens the hierarchy.
• Don't use rounded corners larger than {rounded.md} (12px) on cards or buttons—the platform's precision aesthetic demands sharp, technical shapes.
• Don't mix font weights within a single line of body text; use weight 400 for body and weight 600 only for labels, buttons, and headlines.