EVANLITE

Overview

EVANLITE is a European manufacturer of high-performance carbon wheels for road, gravel, and mountain biking. The brand embodies **Precision Minimalism**—an aesthetic that strips away ornamentation to expose engineered excellence. Every visual element serves function: sharp geometric forms, high-contrast monochromatic palettes (black, white, deep teal), and bold typography communicate technical mastery and uncompromising quality. The design language evokes the industrial rigor of aerospace and motorsport, where weight savings and aerodynamic efficiency are non-negotiable. Users encounter a brand that feels authoritative, direct, and unapologetically technical—no soft edges, no decorative flourishes, only what matters for speed.

The voice is precise, confident, and performance-obsessed. EVANLITE speaks in concrete metrics (620 km, 41 km/h, weight specs) rather than aspirational language. Tone examples: "Handbuilt and engineered in Poland" (not "crafted with passion"), "Ultra 620 KM" (not "journey-ready"), "High-Performance Carbon Wheels" (not "your next adventure awaits"). The vocabulary is technical but accessible—terms like "boost performance," "carbon construction," and "handbuilt" anchor the brand in tangible engineering, not lifestyle fantasy.

Colors

The color system is built on **high-contrast industrial minimalism**. Primary (#108474, a deep teal-green) is the accent of precision—used sparingly on CTAs, confirmations, and interactive focus states to signal actionable moments. This teal references both natural materials (carbon fiber's depth) and technical reliability. Secondary (#000000, pure black) dominates the interface as the primary text and structural color, reinforcing the no-nonsense engineering ethos. The surface stack is anchored in whites and light grays (#ffffff, #eeeeee, #e6e6e6, #cccccc) to maintain clarity and legibility at all sizes. Tertiary (#408267, a muted sage-green) appears in secondary actions and status indicators, providing visual hierarchy without competing with primary. Error red (#b81c1c) is reserved for w

Typography

The type system pairs **Montserrat (bold, geometric, technical)** for headlines and CTAs with **Roboto (neutral, highly legible, engineered)** for body text. This pairing communicates precision: Montserrat's tight letter-spacing (-0.04em on display, -0.02em on headlines) and heavy weights (700–800) convey structural strength and confidence, while Roboto's open counters and consistent stroke weight ensure readability across all screen sizes. Display (60px, 800 weight, -0.04em letter-spacing) anchors hero sections with maximum impact; headline-lg (40px, 800 weight) is reserved for section titles and product names; body-lg (18px, 400 weight) and body-md (16px, 400 weight) handle descriptive copy with 0.01–0.02em letter-spacing to prevent visual monotony. Label-md (13px, 600 weight, 0.02em) is

Layout

The layout follows a **12-column fluid grid with a 1280px max-width container**, centered on desktop and edge-to-edge on mobile. Page rhythm is established through consistent spacing: lg (40px) separates major sections (hero, product grid, testimonials), md (24px) creates breathing room within components, and sm (12px) is used for internal padding within cards and form fields. The gutter is fixed at 24px on desktop, collapsing to 12px on tablet and mobile. White-space is treated as a design material—negative space around product imagery and CTAs creates visual hierarchy and prevents cognitive overload. Hero sections occupy 100vh with full-bleed imagery and overlay text, establishing immediate brand presence. Product grids use a 3-column layout on desktop (collapsing to 2 on tablet, 1 on mo

Elevation & Depth

Depth is conveyed through **crisp, purposeful shadows and layered surfaces**, never soft diffusion. The elevation system uses three levels: Level 1 (Base, no shadow) for body backgrounds and flat surfaces; Level 2 (Standard Cards, box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)) for product cards, modals, and interactive elements; Level 3 (Elevated, box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12)) for floating modals, dropdowns, and focus states. Shadows are always dark and directional (top-left light source), mimicking industrial lighting. On hover, cards transition from Level 1 to Level 2 over 200ms, s

Shapes

The shape philosophy is **Architectural Sharpness**—minimal rounding that respects the grid and engineering precision. Buttons and inputs use rounded: sm (0.25rem / 4px) for a subtle, professional finish that avoids both hard edges and soft curves. Cards and modals use rounded: DEFAULT (0.5rem / 8px) to create visual softness without compromising the technical aesthetic. Larger containers and hero sections remain unrounded (border-radius: 0) to anchor the layout to the grid. Badges and pills use rounded: full (9999px) only when semantic meaning demands it (e.g., status indicators, count badges

Components

Action Elements Buttons are the primary interaction affordance. **button-primary** uses primary (#108474) background with white text, 16px vertical padding, 24px horizontal padding, and rounded: sm (4px). On hover (button-primary-hover), the background darkens to #0d5a5a over 150ms, signaling state change without animation excess. **button-secondary** mirrors the primary button but uses black (#000000) background, appropriate for destructive or secondary actions. **button-ghost** has a transparent background with a 2px primary border and primary text; on hover, it fills with primary-container (#a8d5c4) and maintains the border, creating a clear visual progression. All buttons use label-md typography (13px, 600 weight, 0.02em letter-spacing) and maintain a minimum 48px height for touch

Do's and Don'ts

**Do**

• Do use primary (#108474) exclusively for CTAs, confirmations, and focus states—it's the brand's signature accent and must remain rare and impactful.
• Do maintain high contrast between text and background; minimum WCAG AA compliance (4.5:1 for body text, 3:1 for large text) ensures legibility across all contexts.
• Do apply consistent 24px gutters and 40px section spacing to create rhythm and prevent visual chaos.
• Do use Montserrat (800 weight, -0.04em letter-spacing) for headlines to reinforce technical authority and precision.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to all elevated surfaces; shadows must be crisp and directional, never soft or diffuse.

**Don't**

• Don't use rounded corners larger than 1rem on any component; sharp edges reinforce the engineering ethos and prevent the interface from feeling soft or approachable.
• Don't introduce secondary colors (greens, teals) outside of primary, tertiary, and error roles; color consistency is critical to brand recognition.
• Don't apply animations longer than 200ms or use easing functions beyond ease-in-out; the brand moves with purpose, not flourish.
• Don't use system fonts or generic sans-serifs; Montserrat and Roboto are non-negotiable for maintaining the technical, engineered aesthetic.
• Don't exceed 1280px container width on desktop; the layout must remain tight and controlled, never sprawling or diffuse.