NMKR

Overview

NMKR is a multi-chain NFT and token creation platform that democratizes blockchain asset minting across Cardano, Bitcoin, Solana, Midnight, and Aptos. The design system embodies "Tech-Forward Minimalism"—a philosophy that prioritizes clarity and accessibility without sacrificing sophistication. The brand personality is confident, precise, and developer-friendly: it speaks to both technical creators and non-technical users with equal respect. The UI uses a clean white canvas (#ffffff) as the foundation, allowing a vivid neon-green accent (#11f250) to command attention on all interactive elements. This creates a high-contrast, energetic aesthetic that signals innovation and trustworthiness simultaneously.

The tone is direct and action-oriented. NMKR avoids jargon bloat; instead, it translates blockchain complexity into human-readable language. Example sentence in brand voice: "Your users choose where they want to receive your NFTs—we handle the infrastructure." The vocabulary emphasizes agency ("choose," "focus," "launch") and removes friction ("we handle"). Every interaction should feel frictionless and empowering.

Colors

The color system is built on a high-contrast, minimalist foundation. Primary (#11f250) is the signature neon-green accent used exclusively on call-to-action buttons, active states, and brand-critical interactive elements. It appears on the "Get Started" button, focus rings (0 0 0 3px rgba(17, 242, 80, 0.1)), and accent text in headlines. On-primary (#021205) is a near-black used for text and icons on top of the primary green, ensuring WCAG AAA contrast (ratio 15.8:1). The surface stack ranges from pure white (#ffffff) at the brightest level down through warm off-whites (#fffefa, #fafafa) to light grays (#efeee9, #eaeaea) for container differentiation. On-surface (#333333) is the default body text color, while on-surface-variant (#697a6f) is used for secondary text, captions, and disabled s

Typography

The type system pairs Aspekta (a geometric, tech-forward typeface loaded via Typekit) for headlines and display text with Inter (a humanist sans-serif from Google Fonts) for body and UI text. This pairing creates visual hierarchy through personality rather than weight alone: Aspekta's geometric precision signals technical confidence, while Inter's warmth keeps the interface approachable. Display (64px, 400 weight, -0.02em letter-spacing) is reserved for hero headlines like "Mint NFTs on Cardano, Bitcoin, Solana, Midnight and Aptos!" Headline-lg (48px, 400 weight) and headline-md (32px, 400 weight) are used for section titles and card headers. Title-lg (20px, 600 weight) anchors subsections and modal titles. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px li

Layout

The layout system uses a 12-column grid with a max-width of 1200px, centered on the viewport. The gutter is 24px, creating breathing room between sections. White-space is used aggressively: the hero section has 40px (lg spacing) between the headline and subtext, and 24px (md spacing) between the subtext and button group. Container padding is 24px on desktop, reducing to 16px on tablet and 12px on mobile. The spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) is used consistently for margins, padding, and gaps. Sections are separated by 64px (xl spacing) vertically, creating a rhythm that feels neither cramped nor sparse. Cards and containers use 24px internal padding (md spacing) with 12px gaps between child elements. The layout prioritizes content hierarchy: the hero occupies

Elevation & Depth

Depth is conveyed through subtle shadows and border definition rather than layering or glassmorphism. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for resting cards and input fields, md (0 3px 8px rgba(0, 0, 0, 0.15)) for hovered cards and dropdowns, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and elevated surfaces. All interactive elements (buttons, cards, inputs) have a 1px border at outline-variant (#a9baad) to define their edges crisply. On hover, cards transition from sm to md shadow over 200ms (ease-out timing), creating a subtle lift effect. Focus st

Shapes

The shape philosophy is "Soft-Technical"—rounded corners signal approachability and modernity without sacrificing clarity. Buttons use full radius (9999px), creating pill-shaped forms that feel friendly and clickable. Cards and containers use lg radius (1rem / 16px), softening corners just enough to feel contemporary without appearing cartoonish. Input fields use DEFAULT radius (0.5rem / 8px), a tighter radius that signals form-like precision. Badges use full radius (9999px) to match buttons and create visual consistency. The rationale: full radius on interactive elements (buttons, badges) mak

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses the signature neon-green (#11f250) background with near-black text (#021205), full radius (9999px), and 12px vertical / 32px horizontal padding for a 48px total height. On hover, the background shifts to primary-fixed-dim (#0d8c1f) over 200ms (ease-out), creating a subtle darkening effect. Button-secondary uses surface-container-high (#dae7dd) background with a 1px outline-variant border, matching the primary button's dimensions and padding. Button-ghost is transparent with on-surface text, used for tertiary actions like "Watch Video." All buttons use label-md typography (14px, 600 weight) and transition all properties over 200ms on state change.

Containers & Surfaces Cards use surface-container-low

Do's and Don'ts

**Do**

• Do use primary green (#11f250) exclusively on CTAs, focus states, and brand-critical interactive elements—it's the signature accent and should never be diluted.
• Do maintain the 24px gutter and 40px section spacing to preserve the clean, breathing aesthetic; white-space is a design feature, not wasted space.
• Do apply the sm/md/lg shadow progression consistently: resting cards use sm, hovered cards use md, and modals use lg—this creates clear visual hierarchy.
• Do use Aspekta for headlines (display, headline-lg, headline-md) and Inter for body and UI text; this pairing signals both technical confidence and approachability.
• Do apply 200ms ease-out transitions to all state changes (hover, focus, active) to create a cohesive, responsive feel without feeling sluggish.

**Don't**

• Don't use primary green on backgrounds, surfaces, or non-interactive elements—it's reserved for actions and focus states only.
• Don't reduce spacing below 12px (sm) or increase section gaps beyond 64px (xl); the system is calibrated for this range.
• Don't apply shadows to buttons; their elevation is signaled through color contrast and the primary background, not depth.
• Don't mix Aspekta and Inter within a single headline; use Aspekta for all display/headline text and Inter for all body/label text.
• Don't use transitions longer than 300ms or easing functions other than ease-out; the interface should feel responsive and snappy, not sluggish.