WankzVR

Overview

WankzVR is a premium adult entertainment platform delivering immersive virtual reality content through a high-contrast, dark-mode-first interface. The design aesthetic is 'Aggressive Minimalism'—a bold, no-nonsense approach that prioritizes rapid content discovery and conversion through stark visual contrast and urgent call-to-action placement. The brand serves adult audiences seeking premium VR experiences, and the UI evokes confidence, directness, and unambiguous intent through its use of pure blacks (#111111), pure whites (#ffffff), and a vibrant action green (#00a803) that commands immediate attention. The emotional response is one of clarity and purpose: every element on the page exists to guide the user toward engagement, with zero visual noise or decorative distraction. Voice: direct, confident, unapologetic. Vocabulary: 'premium,' 'immersive,' 'award-winning,' 'exclusive.' Example sentence: 'Experience 180-degree 4K VR at 60fps—enter now.'

Colors

The color system is built on extreme contrast for accessibility and psychological urgency. Primary surface (#111111) and primary text (#ffffff) create maximum legibility and visual separation. The accent green (#00a803, rgb(0, 168, 3)) is the brand's signature action color—used exclusively on primary CTAs ('I AGREE - ENTER NOW'), conversion buttons, and active states. This green is not a soft or muted tone; it is a vivid, almost neon-adjacent hue that triggers immediate recognition and click intent. Secondary blue (#3499e0) supports navigation links, secondary CTAs, and informational elements, providing visual hierarchy without competing with the primary action. Tertiary red (#f03f36) signals urgency, promotional overlays, and error states—reinforcing the brand's bold, direct personality.

Typography

The type system uses Lato exclusively, a geometric sans-serif that conveys modernity and approachability while maintaining the directness required by the brand. Display (56px, 700 weight, -0.02em letter-spacing) is reserved for hero statements and major section headings, commanding attention through scale and weight. Headline-lg (40px, 700 weight) anchors content sections and modal titles. Headline-md (28px, 700 weight) breaks up page rhythm and introduces new topics. Title-lg (20px, 700 weight) labels cards and subsections. Body-lg (18px, 400 weight, 28px line-height) is the primary reading size for disclaimers, terms, and descriptive copy—the 28px line-height ensures legibility on dark backgrounds. Body-md (16px, 400 weight, 24px line-height) is used for secondary text, input placeholder

Layout

The layout uses a fluid, mobile-first grid that adapts from single-column (mobile) to multi-column (tablet/desktop) without a fixed container max-width until 1920px, where it locks to 1280px. The page rhythm is driven by the spacing scale: xs (4px) for micro-interactions, sm (12px) for tight grouping, md (24px) for standard section padding, lg (40px) for major section separation, and xl (64px) for hero/footer spacing. The gutter (24px) is applied consistently to left/right padding on all content containers. Cards are laid out in a 3-column grid on tablet (576px+) and 4-column on desktop (1200px+), with 0.5em horizontal margins between items to create breathing room. The header is fixed at 51px height (65px on 1367px+), and the main content area (layout__body) sits 51px below it, creating a

Elevation & Depth

Depth is achieved through a three-level shadow system that mimics physical layering without introducing blur or glassmorphism. Level 1 (Base/Surface): no shadow; elements sit flush on the #111111 background. Level 2 (Standard Cards/Dropdowns): box-shadow: 0 1px 5px rgba(20, 20, 20, 0.25), 0 2px 15px rgba(20, 20, 20, 0.15), 0 3px 25px rgba(10, 10, 10, 0.25)—a multi-layer shadow that creates subtle depth and separation from the background. Level 3 (Modals/Elevated Containers): box-shadow: 0 13px 30px -5px rgba(59, 59, 105, 0.3), 0 9px 15px -9px rgba(0, 0, 0, 0.35), 0 -4px 15px -5px rgba(0, 0, 0,

Shapes

The shape philosophy is 'Functional Sharpness'—minimal rounding that suggests precision and modernity without softness. Buttons use 4px border-radius (rounded.DEFAULT), creating a subtle, modern appearance that avoids both hard corners and excessive roundness. Cards use 8px border-radius (rounded.md), providing slightly more visual softness for content containers while maintaining the sharp aesthetic. Inputs use 4px border-radius to match buttons, creating visual consistency in interactive elements. Modals and elevated containers use 12px border-radius (rounded.lg) to signal elevation and impo

Components

Action Elements Buttons are the primary conversion mechanism and use the primary green (#00a803) with 100% opacity and a 700-weight uppercase label. Standard button height is 44px (padding: 0 15px, font-size: 14px, letter-spacing: 1px, text-transform: uppercase). On hover, the background darkens to #008a02 and a 0 2px 8px rgba(0, 168, 3, 0.3) shadow appears, signaling interactivity over 150ms. Secondary buttons use a transparent background with a 1px solid border in the secondary blue (#3499e0) and matching text color; on hover, the background becomes rgba(52, 153, 224, 0.1). Tertiary buttons (e.g., 'Leave this site') use transparent backgrounds with tertiary red text (#f03f36); on hover, the background becomes rgba(240, 63, 54, 0.1). All buttons use Lato 700 weight and uppercase trans

Do's and Don'ts

**Do**

• Do use the primary green (#00a803) exclusively for primary CTAs and conversion buttons—it is the brand's signature action color and must not be diluted across secondary elements.
• Do maintain the dark surface (#111111) as the dominant background; it is not a neutral—it is a strategic choice that maximizes contrast and urgency.
• Do apply the 4px/8px/12px border-radius hierarchy consistently: buttons and inputs at 4px, cards at 8px, modals at 12px, badges at full.
• Do use Lato 700 weight and uppercase transformation on all button labels to create visual weight and signal interactivity.
• Do apply the three-level shadow system (Level 1: none, Level 2: 0 1px 5px rgba(20,20,20,0.25)..., Level 3: 0 13px 30px -5px rgba(59,59,105,0.3)...) to create depth without blur.
• Do use the secondary blue (#3499e0) for navigation links and secondary CTAs; it provides hierarchy without competing with primary green.
• Do maintain generous whitespace: md (24px) for standard section padding, lg (40px) for major section separation, ensuring the interface feels spacious and intentional.

**Don't**

• Don't use soft shadows, blur filters, or glassmorphism effects—the brand is sharp and direct, not ethereal or decorative.
• Don't apply the primary green to non-interactive elements or backgrounds; reserve it exclusively for CTAs and active states to maintain urgency.
• Don't mix typefaces; Lato is the sole font family. Avoid system fonts, Georgia, or serif alternatives.
• Don't use rounded corners larger than 12px on standard components; excessive rounding softens the brand's aggressive minimalism.
• Don't reduce contrast for aesthetic reasons; all text must meet WCAG AA standards (4.5:1 for body text, 3:1 for large text) on dark backgrounds.
• Don't add decorative elements, gradients, or patterns to the dark surface; the interface must remain clean and focused on content and CTAs.
• Don't use transparency or opacity to create hierarchy; use the surface-container stack (#050505 to #2a2a2a) instead for clear, legible depth.