Hyperlance School

Overview

Hyperlance School is a dark-mode-first entrepreneurship education platform that channels the energy of high-stakes startup culture through a cinematic, neon-accented visual language. The brand serves ambitious founders and business builders seeking mentorship from real entrepreneurs who have walked the path. The aesthetic draws from 'Neon Brutalism'—a fusion of austere, high-contrast dark surfaces (pure black #000000 backgrounds, near-black text containers) with electric neon accents (lime-green #adff00 primary, cyan #03bdff secondary, red #fd0000 tertiary) that pierce the darkness like laser beams cutting through night. The UI evokes intensity, clarity, and forward momentum: every interaction feels deliberate and energized.

The brand voice is direct, confident, and conversational—never corporate, never breathless. Hyperlance speaks to founders as peers: 'Learn entrepreneurship from people who actually built real businesses.' The vocabulary is grounded in lived experience (not buzzwords): 'launching,' 'managing,' 'growing,' 'community,' 'mentorship.' Tone example: 'Experience is the core of Hyperlance—learn from founders who've walked this path themselves.'

Colors

The color system is built on a high-contrast dark foundation with three strategic neon accents that drive interaction and hierarchy. **Primary (#adff00, lime-green)** is the signature brand accent—used exclusively on primary CTAs ('See Programs,' 'Start Free Quiz'), active navigation states, and key highlights. This electric lime creates maximum contrast against the black background (WCAG AAA compliant) and commands visual attention without aggression. **Secondary (#03bdff, cyan)** supports secondary interactions, accent text, and data visualization; it provides a cooler counterpoint to the warm primary. **Tertiary (#fd0000, red)** is reserved for alerts, error states, and high-priority messaging. The surface stack uses pure black (#000000) as the base, with carefully calibrated grays (#26

Typography

The type system uses Ravi (a Persian-optimized sans-serif) across all scales, maintaining a cohesive, modern aesthetic that respects the site's RTL (right-to-left) language context. Display (56px, 700 weight, -0.02em tracking) anchors hero sections with commanding presence; Headline-lg (46px, 700 weight) and Headline-md (32px, 700 weight) structure section breaks and card titles. Body-lg (18px, 400 weight, 28px line-height) and Body-md (16px, 400 weight, 24px line-height) provide readable body copy with generous line-height (1.56–1.5x) to ensure comfort on dark backgrounds. Label-md (14px, 600 weight, 0.01em tracking) and Label-sm (12px, 600 weight, 0.02em tracking) are used for buttons, badges, and UI labels. On dark backgrounds, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to small la

Layout

The layout uses a fixed 12-column grid with a max-width container of 1270px, centered with horizontal borders (1px solid #666666) that frame the content and reinforce the architectural aesthetic. The hero section spans full viewport height (min-height: 78dvh on desktop, 660px on mobile) and uses a layered video background with progressive gradient overlays (rgba(0, 0, 0, 0.35) to rgba(0, 0, 0, 0.95)) to ensure text legibility. Section spacing follows the semantic scale: lg spacing (40px) separates major sections; md spacing (24px) is used for card padding and internal component spacing; sm spacing (12px) for tight groupings. The gutter (24px) is applied consistently to horizontal padding on mobile and tablet, scaling to 40px on desktop. Navigation uses a sticky header with backdrop-filter:

Elevation & Depth

Depth is conveyed through layered surfaces and subtle shadows rather than dramatic drop-shadows. **Level 1 (Base)**: Pure black background (#000000) with no shadow. **Level 2 (Standard Cards/Inputs)**: surface-container (#171717) with 1px border in outline-variant (#666666) and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). **Level 3 (Elevated/Modals)**: surface-container-high (#262626) with 1px border and box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25). The header uses a frosted-glass effect: background: rgba(0, 0, 0, 0.8), backdrop-filter: blur(12px), border-bottom: 1px solid outline-variant (#666666

Shapes

The shape philosophy is 'Minimal Precision'—sharp, clean corners with minimal rounding that emphasizes the architectural, tech-forward aesthetic. **Buttons and CTAs** use rounded: DEFAULT (4px) for a subtle, modern edge that avoids both harsh corners and soft pill-shapes. **Cards and containers** use rounded: DEFAULT (4px) or md (8px) depending on context; larger cards (hero sections, modals) may use lg (12px) for a slightly softer appearance. **Input fields** use rounded: DEFAULT (4px) to match button styling and create visual consistency. **Badges and pills** use rounded: full (9999px) to cr

Components

Action Elements **Button-Primary** (56px height, 0 32px padding, 700 weight, label-md typography) uses background: {colors.primary} (#adff00) with text-color: {colors.on-primary} (#000000). On hover, shift to primary-fixed-dim (#8fcc00) with a 200ms transition. The button has rounded: DEFAULT (4px) and no shadow—the bright lime color provides all necessary visual emphasis. **Button-Secondary** (56px height, 0 32px padding) uses background: rgba(0, 0, 0, 0.3) with a 1px border in outline (#505050), backdrop-filter: blur(8px), and text-color: {colors.on-surface} (#ffffff). On hover, shift border to primary (#adff00) and background to rgba(173, 255, 0, 0.1) with a 200ms ease-in-out transition. This creates a 'frosted glass' effect that feels premium and interactive.

Containers & Surf

Do's and Don'ts

**Do**

• Do use primary (#adff00) exclusively on primary CTAs and active states—it's the brand's signature accent and must never be diluted or overused.
• Do maintain the high contrast between pure black backgrounds and white text (WCAG AAA) to ensure legibility and reinforce the bold, cinematic aesthetic.
• Do apply backdrop-filter: blur(12px) and rgba(0, 0, 0, 0.8) to overlays and sticky elements to create depth without obscuring content.
• Do use 200ms cubic-bezier(0.4, 0, 0.2, 1) transitions on all interactive elements (buttons, links, cards) to create a responsive, tactile feel.
• Do pair Ravi typography with negative letter-spacing (-0.02em on display, -0.01em on headlines) to create a premium, tech-forward visual weight.

**Don't**

• Don't use primary (#adff00) on body text or secondary elements—it will create visual chaos and dilute the brand's impact.
• Don't apply heavy shadows (box-shadow: 0 16px 40px) on dark backgrounds; use subtle shadows (0 3px 8px rgba(0, 0, 0, 0.15)) to maintain the clean, architectural aesthetic.
• Don't use rounded corners larger than lg (12px) on primary components; the brand's precision aesthetic demands sharp, intentional geometry.
• Don't remove the 1px border from cards and containers—borders define edges on dark backgrounds and are essential to the visual hierarchy.
• Don't use system fonts or fallback sans-serifs; Ravi is critical to the brand's identity and must be preloaded and prioritized in the font-family stack.