ojonah

Overview

ojonah is a Web3 creative platform that democratizes NFT minting by enabling users to transform their own content into blockchain-native assets. The design language embraces 'Dark Maximalism with Neon Accents'—a contemporary aesthetic that pairs deep, atmospheric navy-to-charcoal gradients (#15162c to #282c34) with vibrant, high-saturation accent colors (#f1376f magenta, #435793 periwinkle) to create visual tension and energy. The UI evokes a sense of playful rebellion and digital sophistication, inviting users into a space where creativity meets decentralization. The emotional response is one of empowerment: users feel they are entering a premium, exclusive creative studio rather than a utilitarian tool.

The brand voice is casual, irreverent, and confident—never corporate or overly technical. Vocabulary patterns favor directness and wit: 'Make a meme and mint the NFT' and 'Trash or treasure, your choice' exemplify the tone. The platform speaks to creators as peers, using imperative, action-oriented language that assumes agency and humor. Example sentence in brand voice: 'Your chaos deserves to live forever on-chain.'

Colors

The color system is built on a high-contrast, dark-first foundation that prioritizes legibility and visual drama. Surface colors range from #15162c (primary surface) through #282c34 (container-highest), creating a subtle depth hierarchy without sacrificing the immersive dark aesthetic. The primary accent is #f1376f (vibrant magenta), used exclusively for call-to-action buttons, active navigation states, and brand-critical interactive elements—this color commands attention and signals interactivity with 87% saturation and 58% lightness, making it unmistakable even against the dark background. Secondary accent #435793 (periwinkle) serves as the navigation text color and outline, providing a cooler counterpoint that suggests trust and technical sophistication. Tertiary #bae8ff (light cyan) is

Typography

The type system uses Roboto as the primary typeface, chosen for its geometric clarity and Web3-native familiarity. The hierarchy spans from display (80px, 800 weight) for hero headlines down to label-sm (12px, 500 weight) for supporting text and metadata. Display and headline-lg use tight letter-spacing (-0.04em and -0.02em respectively) to create visual compression and energy, while body text maintains standard spacing (0em) for readability. The system enforces a 4px baseline grid: all font sizes and line heights are multiples of 4 (80px, 40px, 28px, 24px, 18px, 16px, 14px, 12px), ensuring consistent vertical rhythm across the interface. When small labels (12–14px) appear over busy glass-morphism backgrounds, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to maintain legibility. Font wei

Layout

The page layout uses a fluid 12-column grid that collapses to single-column on mobile (< 768px) and expands to full-width on desktop (up to 1280px container max-width). The hero section occupies the full viewport height (min-h-screen), centering content both horizontally and vertically using flexbox (justify-center, items-center). Section separation uses lg spacing (40px) for major breaks and md spacing (24px) for subsections, creating a breathing rhythm that prevents visual fatigue. The header is sticky (position: sticky, top: 0, z-index: 50) with a semi-transparent backdrop (rgba(21, 22, 44, 0.95)) and blur effect (backdrop-filter: blur(8px)), allowing content to scroll beneath while maintaining navigation accessibility. Cards and interactive containers use md padding (24px) internally,

Elevation & Depth

Depth in this system is conveyed through layered glass-morphism and subtle shadow elevation rather than traditional drop shadows. Level 1 (Base) is the animated gradient background (from-[#282c34] to-[#15162c]), which provides the visual foundation and energy. Level 2 (Standard Card) uses backdrop-filter: blur(8px), background: rgba(255, 255, 255, 0.1), and a 1px border at rgba(255, 255, 255, 0.15)—this creates a frosted-glass effect that sits subtly above the background. Level 3 (Elevated/Hover) increases the backdrop blur to blur(12px) and the background opacity to rgba(255, 255, 255, 0.2),

Shapes

The shape philosophy is 'Soft-Technical Minimalism'—rounded corners are used strategically to soften the geometric precision of the interface without introducing organic or playful curves. Buttons and primary interactive elements use rounded-lg (1rem / 16px), creating a subtle softness that feels approachable yet professional. Cards and glass containers use rounded-xl (0.75rem / 12px), slightly more pronounced to define them as distinct surfaces. Input fields and smaller components use rounded-md (0.75rem / 12px) or rounded-DEFAULT (0.5rem / 8px), maintaining visual consistency while reducing

Components

Action Elements Buttons are the primary interaction mechanism and use two distinct styles. Primary buttons (button-primary) have backgroundColor: {colors.primary} (#f1376f), textColor: white, rounded-lg (16px), padding: 16px 24px, and height: 48px (touch-target minimum). On hover (button-primary-hover), the background shifts to {colors.primary-fixed-dim} (#d91e5f) with a 200ms ease-in-out transition, signaling state change without animation jank. Secondary buttons (button-secondary) use transparent background with a 1px border at {colors.secondary} (#435793), maintaining the same padding and height for consistency. On hover, secondary buttons fill with {colors.surface-container-high} (#1f2139) to indicate interactivity. Navigation links (nav-link) use {colors.secondary} text with label

Do's and Don'ts

**Do**

• Do use {colors.primary} (#f1376f) exclusively for primary CTAs, active states, and brand-critical moments—never dilute its impact by using it for secondary UI.
• Do maintain the glass-morphism aesthetic on all card surfaces with backdrop-filter: blur(8px) minimum and rgba(255, 255, 255, 0.1) background to preserve the immersive dark atmosphere.
• Do apply 200ms ease-in-out transitions on all interactive state changes (hover, focus, active) to create smooth, responsive feedback without animation jank.
• Do enforce the 4px baseline grid for all typography sizes and line heights (80px, 40px, 28px, 24px, 18px, 16px, 14px, 12px) to maintain vertical rhythm across the interface.
• Do use Roboto as the single typeface family across all UI text—never mix typefaces or introduce serif fonts, which would break the geometric, technical aesthetic.

**Don't**

• Don't use {colors.primary} (#f1376f) for body text, disabled states, or background fills—reserve it for interactive elements only to maintain visual hierarchy and prevent color fatigue.
• Don't apply shadows deeper than 0 3px 8px rgba(0, 0, 0, 0.15) or use hard drop-shadows; the glass-morphism aesthetic relies on blur and transparency, not darkness.
• Don't exceed 2 levels of nesting in the color hierarchy (surface → container → highest); more than 3 distinct background colors creates visual confusion in the dark theme.
• Don't use rounded corners smaller than 0.5rem (8px) on interactive elements—this breaks the soft-technical aesthetic and makes small buttons feel cramped and inaccessible.
• Don't animate opacity or transform properties for longer than 300ms; the platform should feel responsive and snappy, not sluggish or over-designed.