Matériel Vélo

Overview

Matériel Vélo is a French e-commerce specialist in bicycles, mountain bikes, and cycling components, operating since 2004 with 14 physical boutiques nationwide. The design system embodies "Utilitarian Directness"—a no-nonsense retail aesthetic that prioritizes product discovery and transaction speed over decorative flourish. The visual language combines a warm, energetic golden-yellow accent (#c8b100, #f5d700) against a neutral, light gray canvas (#f2f2f2), evoking both the sun-drenched outdoor lifestyle of cycling and the practical, industrial heritage of bike mechanics. The UI voice is confident, knowledgeable, and conversational—speaking to both casual weekend riders and serious enthusiasts with equal respect.

The brand personality is approachable yet authoritative: Matériel Vélo positions itself as the trusted local shop scaled nationally. Tone examples: "Find your perfect fit with 20 years of expertise" or "Same-day shipping on 5,000+ items." Typography is bold and legible (Roboto 700 for headlines), spacing is generous (24px gutters, 40px section breaks), and interactive elements use high-contrast primary colors to guide action without ambiguity. The system rejects minimalism's coldness and maximalism's clutter, instead favoring clarity through strategic emphasis.

Colors

The color system is anchored by a signature golden-yellow primary (#c8b100, frequency: 137 instances), which appears on all call-to-action buttons, active states, and brand-critical UI. This warm accent is the visual signature of the brand—it commands attention without aggression, evoking both the sun and the metallic sheen of bike components. The primary container (#f5d700, a brighter variant at 48 instances) is used for hover states and secondary emphasis, creating a two-tier accent hierarchy. Secondary blue (#3383d5, 38 instances) supports informational elements, links, and secondary actions, while its lighter container (#7db4ec) provides visual breathing room in dense product listings. Tertiary red (#ad1519, 33 instances) and error red (#e70f00, 26 instances) are reserved for warnings,

Typography

The type system uses Roboto exclusively, a humanist sans-serif that balances technical precision with warmth—ideal for both product specifications and marketing copy. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and category headers with commanding presence. Headline-lg (40px, 700 weight) breaks major content zones; headline-md (28px, 700 weight) introduces subsections. Title-lg (20px, 700 weight) labels product cards and form sections. Body-lg (18px, 400 weight) and body-md (16px, 400 weight) carry product descriptions and instructional text at comfortable reading sizes (28px and 24px line-height respectively). Label-md (14px, 600 weight, 0.01em tracking) and label-sm (12px, 500 weight, 0.05em tracking) handle buttons, badges, and UI chrome. On small labels over busy

Layout

The layout follows a 12-column grid system with a fixed container max-width of 1200px, accommodating both desktop browsing and tablet views without excessive horizontal scrolling. The gutter is 24px (3 × 8px unit), creating rhythmic white space that prevents visual fatigue during product browsing sessions. Section separation uses lg spacing (40px) between major content blocks (hero, category grid, testimonials, footer), while md spacing (24px) separates cards within a grid. Product cards occupy 3–4 columns on desktop, 2 columns on tablet, and full-width on mobile, maintaining consistent aspect ratios and touch targets (minimum 44px height for interactive elements). The page rhythm is "breathing"—generous margins around content, not cramped. Container max-width of 1200px ensures text lines

Elevation & Depth

Depth is conveyed through subtle shadows and layering, not dramatic drop-shadows. Level 1 (Base): the light gray surface (#f2f2f2) with no shadow, establishing the neutral canvas. Level 2 (Cards & Containers): box-shadow: 0 1px 2px rgba(0,0,0,0.06), a barely-perceptible lift that separates cards from the background without visual weight. Level 3 (Hovered Cards & Modals): box-shadow: 0 4px 12px rgba(0,0,0,0.08), a softer, more diffuse shadow that suggests depth and interactivity. Focus states use a 3px colored border (primary: rgba(200,177,0,0.15), error: rgba(231,15,0,0.15)) rather than outer

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are present but restrained, reflecting the practical, engineered nature of bicycles while remaining approachable. Buttons and form inputs use 0.5rem (8px) border-radius, a gentle curve that softens hard edges without appearing playful or frivolous. Cards and containers use the same 0.5rem default, maintaining consistency. Larger containers (modals, full-width sections) use 1rem (16px) for slightly more visual softness. Badges and chips use full (9999px) for a pill shape, signaling their role as discrete, non-interactive labels. The ratio

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses {colors.primary} (#c8b100) with {colors.on-primary} text (black), 12px vertical × 24px horizontal padding, 44px height, and 0.5rem border-radius. On hover, the background shifts to #b39e00 (a 10% darker shade) over 150ms ease-in-out, providing immediate visual feedback. On active/pressed state, the background darkens further to #9d8600 with an inset box-shadow: 0 2px 4px rgba(0,0,0,0.15), simulating a pressed button. Button-secondary uses a transparent background with a 2px solid border in {colors.secondary} (#3383d5) and matching text color; on hover, the background fills with {colors.secondary-container} (#7db4ec) and text becomes {colors.on-secondary-container} (black). Button-danger mirrors button-pr

Do's and Don'ts

**Do**

• Do use {colors.primary} (#c8b100) exclusively for primary CTAs and active states—it's the brand's signature and must remain distinctive.
• Do maintain 24px gutters and 40px section spacing to create breathing room; dense layouts undermine the brand's approachable, confident voice.
• Do apply 700-weight Roboto to all headlines and button text; this weight projects authority and ensures hierarchy is immediately clear.
• Do use semantic badge colors (green for success, red for error, blue for info) with full border-radius; users instantly recognize status without reading labels.
• Do transition interactive states over 150–200ms ease-in-out; this timing feels responsive and professional, not jarring or sluggish.
• Do test all focus states with a 3px colored border (primary or error) to ensure keyboard navigation is accessible and visible.

**Don't**

• Don't use {colors.secondary} (#3383d5) or {colors.tertiary} (#ad1519) for primary CTAs—these are supporting accents and will dilute the brand signature.
• Don't apply border-radius > 1rem (16px) to buttons or form inputs; the brand is technical and practical, not playful or rounded.
• Don't use body-md (16px) for headlines or body-lg (18px) for body text in dense product listings; this breaks the hierarchy and reduces scannability.
• Don't shadow-stack multiple elevation levels on a single element; use only one shadow value at a time (sm, md, or lg) to avoid visual noise.
• Don't apply text-shadow to body text or headlines; reserve it only for small labels over busy backgrounds (e.g., stock badges on product images).
• Don't use pure black (#000000) for interactive text on {colors.primary} backgrounds; always use {colors.on-primary} (black) for contrast, but test WCAG AA compliance.