MNFT.fun

Overview

MNFT.fun is a Solana-native platform that transforms any Metaplex Core NFT into a revenue-generating meme coin with a fixed 1B supply, zero custody requirements, and permanent fee-sharing mechanics for NFT holders. The aesthetic is 'Crypto-Maximalist Minimalism'—a dark, high-contrast interface that prioritizes clarity and speed over decoration, with strategic use of vibrant accent colors (purple, cyan, teal) to signal interactivity and urgency. The brand personality is direct, technical, and irreverent: it speaks to power users and developers who value efficiency and transparency. Voice example: 'Your NFT never leaves your wallet. 20% of trading fees flow to you forever.'

Colors

The color system is built on a near-black foundation (#0a0a0a) with a carefully curated accent palette. Primary (#b366ff, a vivid purple) is reserved exclusively for the main CTA ('Memefy your NFT') and interactive focus states—it commands attention without overwhelming the dark canvas. Secondary (#00d9ff, cyan) highlights secondary actions and status indicators like 'Devnet live' badges. Tertiary (#1db884, teal) is used for success states, positive metrics, and confirmation elements. The surface stack ranges from #050505 (surface-dim, for recessed elements) to #2e2e2e (surface-container-highest, for elevated cards). All interactive elements use rgba(255, 255, 255, 0.05–0.12) for subtle layering, creating depth through transparency rather than color shifts. On-surface text is #f4f4f8 (near

Typography

The type system uses Inter exclusively, a geometric sans-serif that conveys technical precision and modernity. Display (60px, 600 weight, -0.02em tracking) anchors hero sections with commanding presence; Headline-lg (40px, 600 weight) breaks up major sections; Body-md (16px, 400 weight, 24px line-height) is the workhorse for copy and descriptions. Label-md (14px, 600 weight, 0.01em tracking) is applied to buttons and small UI labels to ensure legibility at small sizes. All type uses a unitless line-height ratio (1.5 for body, 1.2 for headlines) to scale responsively. On dark backgrounds with high contrast, no text-shadow is needed; instead, apply a subtle letter-spacing increase (0.01em) to labels under 14px to prevent visual blur.

Layout

The page uses a 12-column fluid grid with a max-width of 1280px, centering on larger screens. The hero section spans full width with 24px horizontal gutter on mobile, 40px on tablet, and 64px on desktop. The primary CTA and secondary CTA sit side-by-side in the hero, with the primary button (purple gradient) taking visual precedence. The right-side card stack (showing 'Fixed Supply', 'Zero Custody', 'Creator Revenue') uses a 3-column layout on desktop, stacking vertically on mobile. Spacing follows the semantic scale: lg (40px) separates major sections, md (24px) separates component groups, sm (12px) separates inline elements. The container maintains a 24px padding on all sides to prevent edge-bleed on mobile.

Elevation & Depth

Depth is achieved through a combination of subtle shadows and backdrop-filter blur. Level 1 (Base): the background is a solid #0a0a0a with no shadow. Level 2 (Standard Card): cards use backdrop-filter: blur(8px) with background: rgba(255, 255, 255, 0.05) and a 1px border at rgba(255, 255, 255, 0.08), paired with box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1). Level 3 (Elevated/Hover): on hover, cards shift to background: rgba(255, 255, 255, 0.08) with box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15). Buttons on hover receive a colored shadow: box-shadow: 0 4px 12px rgba(179, 102, 255, 0.3) for primary bu

Shapes

The shape philosophy is 'Functional Softness'—curves are used strategically to soften hard edges and guide the eye, but never at the expense of clarity. Buttons use full-radius (border-radius: 9999px) to create pill-shaped affordances that feel modern and clickable. Cards and containers use lg (1rem / 16px) for a subtle roundness that distinguishes them from the background without appearing cartoonish. Input fields also use full-radius to match button styling and create a cohesive input family. Badges and small UI elements use full-radius for consistency. The only sharp corners (DEFAULT: 0.5re

Components

Action Elements Buttons are the primary interaction mechanism. The primary button uses background: {colors.primary} (#b366ff) with text-color: {colors.on-primary} (#1a0033), padding: 8px 24px, height: 44px, and border-radius: 9999px. On hover, the background shifts to {colors.primary-container} (#8833ff) with an added box-shadow: 0 4px 12px rgba(179, 102, 255, 0.3) for depth. The secondary button uses a transparent background with a 1px border at rgba(255, 255, 255, 0.12) and text-color: {colors.on-surface}. On hover, the background becomes rgba(255, 255, 255, 0.12) with box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2). All buttons use label-md typography (14px, 600 weight) and transition: background-color 200ms ease, box-shadow 200ms ease for smooth state changes.

Containers & Surfaces

Do's and Don'ts

**Do**

• Do use primary (#b366ff) exclusively for the main CTA and interactive focus states—it's the brand's signature accent and must remain rare and impactful.
• Do apply backdrop-filter: blur(8px) to all card surfaces to create visual separation from the dark background without relying on heavy shadows.
• Do use full-radius (border-radius: 9999px) for all buttons and input fields to create a cohesive, modern interaction family.
• Do maintain a minimum contrast ratio of 7:1 between on-surface text (#f4f4f8) and surface backgrounds (#0a0a0a) to ensure accessibility on dark mode.
• Do use the secondary color (#00d9ff) sparingly for status badges and secondary CTAs to maintain visual hierarchy.

**Don't**

• Don't use pure white (#ffffff) for text—use on-surface (#f4f4f8) instead to reduce eye strain on dark backgrounds.
• Don't apply multiple shadows to a single element; use either a subtle shadow (0 4px 12px rgba(0, 0, 0, 0.1)) or a colored glow, never both.
• Don't mix border-radius values within the same component family; buttons, inputs, and cards should all use consistent rounding (full-radius or lg).
• Don't use the primary color (#b366ff) for non-interactive elements like labels or dividers—reserve it exclusively for CTAs and focus states.
• Don't remove the backdrop-filter blur from cards; it's essential to the visual hierarchy and depth perception on the dark background.