LevvyWifHat

Overview

LevvyWifHat is a Cardano-native meme token brand that celebrates irreverent, playful crypto culture through the character of Levvy, a sloth who wears a hat. The design system embraces Retro-Neon Maximalism—a collision of 1990s arcade energy, hand-drawn whimsy, and crypto-native boldness. The aesthetic evokes nostalgia and humor, transforming what could be a sterile blockchain interface into a vibrant, character-driven experience. Users encounter a world where deep blacks serve as canvas for electric neon purples (#a336bf) and acid yellows (#f6f41e), creating high-contrast visual tension that mirrors the irreverent tone of meme culture itself.

The brand voice is playful, unfiltered, and unapologetically niche. Vocabulary leans into crypto slang ("wif hat," "mint," "sacrifice"), gaming references, and self-aware humor. The tone never lectures; it invites users into an inside joke. Example: "Levvy's been hodling that hat since before you knew what a blockchain was." Typography is deliberately hand-drawn and imperfect—using 'Nothing You Could Do' from Google Fonts—to signal authenticity and human touch in a space often dominated by sterile corporate sans-serifs.

Colors

The color system is built on a stark black-to-neon contrast model. Surface colors range from pure black (#000000) through deep grays (#0a0a0a to #2a2a2a), creating a dark-mode-first aesthetic that emphasizes the luminosity of accent colors. Primary (#a336bf, a saturated purple) is the brand's signature accent—deployed on all CTAs, active navigation states, and interactive focus rings. It commands attention without aggression, sitting at the intersection of crypto-purple and gaming aesthetics. Secondary (#f6f41e, a vivid acid yellow) acts as a complementary accent for text overlays on primary buttons and badge highlights, creating a high-contrast pair that reads clearly even at small sizes. Tertiary (#a04949, a muted rust-red) is reserved for error states and secondary information layers, p

Typography

The type system is unified around 'Nothing You Could Do', a playful, hand-drawn Google Font that communicates personality and breaks from crypto's typical geometric sans-serif conventions. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and brand moments; headline-lg (44px, 700 weight) anchors section titles; body-md (16px, 600 weight) serves as the primary reading size with 24px line-height for comfortable scanning. All weights default to 600 or higher, reinforcing the bold, confident brand voice—there is no 'light' weight in this system. Title-lg (24px, 1000 weight) is used exclusively on primary buttons, creating a visual anchor for CTAs. Letter-spacing is tightened on display sizes (-0.04em) to increase visual impact, while body text uses 0.01em to mai

Layout

The layout system uses a 12-column fluid grid with a max-width of 1600px, allowing the design to scale from mobile (single column) to desktop (multi-column) without losing visual coherence. Container padding is consistently {spacing.gutter} (24px) on all sides, creating breathing room around content. Section separation uses {spacing.lg} (40px) vertical spacing to establish clear rhythm and prevent visual fatigue. The hero section spans full-width with a minimum height of 600px, positioning the Levvy character image and call-to-action prominently. Cards and content blocks use {spacing.md} (24px) internal padding, with {spacing.sm} (12px) gaps between nested elements. The design favors asymmetrical layouts—text on the left, imagery on the right—to create visual interest and guide the eye thr

Elevation & Depth

Depth in this system is achieved through layered shadows and strategic use of backdrop blur, creating a sense of floating elements against the deep black background. Level 1 (Base): The background is pure black (#000000) with subtle grain texture (optional, 1-2% opacity). Level 2 (Standard Cards): Cards use box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) with a 2px border in primary color (rgba(163, 54, 191, 1)) to create definition. Level 3 (Elevated/Modals): Modals and overlays use box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15) with backdrop-filter: blur(10px) applied to the background layer, creatin

Shapes

The shape philosophy is Retro-Technical Roundness—a balance between sharp, geometric precision and approachable softness. Buttons and primary CTAs use 1rem (16px) border-radius, creating a pill-like appearance that feels friendly and inviting while maintaining clear clickability. Cards and containers use 0.75rem (12px) border-radius, slightly sharper than buttons to establish visual hierarchy. Input fields use 0.5rem (8px) border-radius, the smallest radius in the system, signaling functional precision. The logo and avatar elements use 50% (full circle) to create a distinctive, playful visual

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (button-primary) use backgroundColor: rgb(163, 54, 191), textColor: rgb(246, 244, 30), padding: 10px 20px, height: 48px, borderRadius: 15px, fontWeight: 1000, fontSize: 24px. On hover (button-primary-hover), the background shifts to the primary-container color with a 0 4px 12px rgba(163, 54, 191, 0.3) shadow, and the transition occurs over 200ms. Secondary buttons use a transparent background with a 2px border in primary color and the same text color; on hover, they gain a subtle background fill (rgba(163, 54, 191, 0.1)) without changing border color. All buttons use the title-lg typography style (24px, 1000 weight) to ensure prominence.

Containers & Surfaces Cards (card) use backgroundColor: rgba(0, 0,

Do's and Don'ts

**Do**

• Do use the primary purple (#a336bf) exclusively for interactive elements—buttons, links, focus states—to create a consistent, recognizable interaction model.
• Do maintain high contrast between text and background; white text on black surfaces and black/dark text on yellow surfaces ensure accessibility and readability.
• Do apply the hand-drawn 'Nothing You Could Do' font to all text; it is the brand's voice and should never be substituted with a geometric sans-serif.
• Do use the full-width hero section to showcase Levvy and the brand's playful character; this is the primary storytelling moment.
• Do layer shadows with purpose: use Level 2 shadows for cards, Level 3 for modals, and never apply shadow to text elements.
• Do preserve the neon-on-black aesthetic; resist the urge to lighten backgrounds or soften colors—the high contrast is intentional and brand-defining.

**Don't**

• Don't use any color outside the defined palette; resist adding new accent colors or gradients that aren't explicitly documented.
• Don't apply rounded corners below 0.5rem (8px) except for very small UI elements; the brand relies on generous rounding to feel approachable.
• Don't use system fonts or geometric sans-serifs; 'Nothing You Could Do' is non-negotiable and must load from Google Fonts.
• Don't create solid white or light-colored backgrounds; the dark-mode-first aesthetic is core to the brand identity.
• Don't add drop shadows to text or use text-shadow for decorative purposes; the hand-drawn font provides enough visual interest.
• Don't compress or reduce the size of the Levvy character in the hero section; the character is the brand's emotional anchor and must be prominently displayed.