NMKR

Overview

NMKR is a multi-chain NFT and token creation platform that democratizes digital asset minting across five major blockchains. The design system embodies "Technical Minimalism with Organic Warmth"—a philosophy that strips away unnecessary complexity while maintaining approachable, human-centered interactions. The visual language combines a clean white canvas (rgb(255, 255, 255)) with a signature neon-green accent (#11f250) that signals energy, growth, and blockchain innovation. The brand personality is confident yet accessible: it speaks to both technical builders and creative entrepreneurs without condescension. Voice example: "Your users choose where they want to receive your NFTs. We handle the infrastructure." The tone is direct, solution-focused, and never hype-driven—emphasizing capability over buzzwords.

Colors

The color system is anchored by a vibrant primary green (#11f250) that appears on all call-to-action buttons, interactive elements, and brand highlights. This neon accent is the visual signature of NMKR's multi-chain capability and appears at high frequency (21 instances in the DOM). The secondary palette introduces a sophisticated dark green (#37483b) for navigation, headers, and structural elements, creating visual hierarchy without competing with the primary. Supporting neutrals include a warm off-white (#dae7dd) for subtle backgrounds, a mid-tone gray (#697a6f) for secondary text, and a light gray (#eaeaea) for borders and dividers. The surface stack progresses from pure white (#ffffff) at the base through increasingly warm off-whites (#f4f5f5, #efeee9) for layered containers, enabling

Typography

The type system pairs Aspekta (a geometric, technical typeface loaded via TypeKit) for display and headline scales with Inter (Google Fonts) for body and label text. This pairing communicates precision and accessibility: Aspekta's clean geometry reinforces the technical nature of blockchain infrastructure, while Inter's humanist proportions keep the interface approachable. Display text (64px, 400 weight, -0.02em tracking) is reserved for hero headlines like "Mint NFTs on Cardano, Bitcoin, Solana, Midnight and Aptos!" and uses a gradient effect (green to dark green) to emphasize multi-chain capability. Headline-lg (40px, 400 weight) scales down for section titles, while body-md (16px, 400 weight, 24px line-height) serves as the primary reading text for descriptions and form labels. Label-md

Layout

The layout system uses a 12-column grid with a max-width of 1200px (container-max-width: 1200px), centered on the viewport with symmetric padding. The hero section spans full width with 64px horizontal padding (xl spacing) on desktop, reducing to 24px (md spacing) on tablet and 12px (sm spacing) on mobile. Section separation uses lg spacing (40px) between major content blocks, creating a breathing rhythm that guides users through the minting workflow. The gutter width is 24px (md spacing), applied between grid columns and between card groups. White-space philosophy prioritizes clarity: cards and input fields are never crowded; minimum padding inside containers is 24px (md spacing), with 12px (sm spacing) reserved for compact elements like badges and small buttons. Container max-widths vary

Elevation & Depth

Depth in NMKR's design is achieved through subtle shadows and layered surfaces rather than dramatic drop-shadows. The elevation system defines three levels: Level 1 (Base) uses no shadow, relying on the white background (#ffffff) as the foundation. Level 2 (Standard Card) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft lift that distinguishes cards from the background without visual heaviness. Level 3 (Elevated/Modal) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), reserved for modals, dropdowns, and prominent overlays. Hover states on interactive elements transition from L

Shapes

The shape philosophy is "Soft-Technical Precision"—rounded corners are used strategically to soften the technical nature of blockchain infrastructure while maintaining a modern, professional appearance. Buttons use the full radius (9999px / border-radius: 9999px), creating pill-shaped CTAs that are instantly recognizable and feel friendly. Cards and containers use lg radius (1rem / 16px), providing enough rounding to feel contemporary without appearing overly playful. Input fields and smaller interactive elements use DEFAULT radius (0.5rem / 8px), striking a balance between softness and clarit

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses #11f250 (primary green) background with #021205 (dark on-primary) text, 14px Inter 600 weight, 12px vertical and 32px horizontal padding, full border-radius (9999px), and no border. On hover, the background shifts to #0ae041 (a slightly darker green) over 200ms ease-out, providing clear feedback without animation jank. The button-secondary uses #37483b (dark green) with white text, same padding and radius, and darkens to #2a3a2e on hover. A button-ghost variant exists for tertiary actions: transparent background, dark gray text, 1px solid #a9baad border, and transitions to #e8e8e8 background on hover. All buttons have cursor: pointer and disabled states reduce opacity to 0.5 with pointer-ev

Do's and Don'ts

**Do**

• Do use the primary green (#11f250) exclusively for primary CTAs, focus states, and brand-critical interactive elements—it's the visual signature of multi-chain capability.
• Do apply full border-radius (9999px) to all primary buttons to create instant visual recognition and hierarchy.
• Do maintain 24px (md spacing) minimum padding inside cards and containers; cramped layouts undermine the clean, technical aesthetic.
• Do use Aspekta for headlines and Inter for body text; this pairing reinforces the balance between technical precision and human accessibility.
• Do transition all interactive states over 200ms ease-out to provide smooth, non-jarring feedback without animation fatigue.
• Do layer surfaces using the surface-container stack (#ffffff → #fafafa → #f4f5f5 → #efeee9) to create subtle depth without heavy shadows.

**Don't**

• Don't use the primary green (#11f250) for body text, backgrounds, or non-interactive elements—reserve it for actions and highlights only.
• Don't apply sharp corners (0px radius) to any component; the brand requires softness even in technical contexts.
• Don't exceed 1200px container max-width on desktop; wider layouts dilute the focused, intentional design.
• Don't use shadows heavier than 0 8px 24px rgba(0, 0, 0, 0.12); excessive shadows make the interface feel dated and heavy.
• Don't mix Aspekta and Inter weights arbitrarily; follow the typography scale strictly (Aspekta 400 for headlines, Inter 400/600 for body/labels).
• Don't apply color overlays or gradients to the primary green; use it pure (#11f250) to maintain brand recognition and accessibility contrast.