YpoCamp

Overview

YpoCamp is a French network of 20 RV and campervan dealerships that transforms the vehicle-buying experience into an aspirational lifestyle journey. The brand serves adventure-seekers and practical travelers alike, combining commerce with emotional storytelling through a design aesthetic rooted in **Accessible Minimalism with Warmth**—clean, functional interfaces punctuated by moments of teal-green accent and human-scale typography. The UI evokes clarity and approachability: every interaction feels guided rather than overwhelming, every color choice deliberate. The brand personality is conversational, knowledgeable, and encouraging—never corporate, never cold. Voice example: 'Trouvez votre compagnon de route parfait parmi nos 20 concessions en France.'

Colors

The color system balances a neutral, professional foundation with a distinctive teal-green secondary accent (#76bcbf) that signals trust, adventure, and the outdoors. Primary (#333333) is the deep charcoal used for body text, CTAs, and structural elements—it commands attention without aggression. Secondary (#76bcbf) appears on accent buttons ('Contactez-nous'), links, and highlights, evoking water and natural landscapes. Tertiary (#c2452a) is reserved for error states and occasional accent moments. The surface stack (#ffffff → #ededed → #e9ecef) provides subtle depth through layered grays, enabling card hierarchies without heavy shadows. On-surface-variant (#666666) softens secondary text. Use primary (#333333) for all body copy and primary CTAs; secondary (#76bcbf) for secondary CTAs and

Typography

The type system pairs Futura PT (Book weight for body, Demi for labels) with Roboto and Caveat for warmth and personality. Display and headline-lg use Futura PT Book at 40–60px with tight line-height (1.13–1.2x) and subtle negative letter-spacing (-0.02em to -0.015em) to create visual impact without heaviness. Caveat (a handwritten serif) appears at 32px for section headlines, adding human touch and breaking the austere minimalism. Body text (Roboto, 16–18px, 400 weight, 1.5x line-height) ensures readability across devices. Labels use Futura PT Demi at 14px with 0.01em letter-spacing for crisp, authoritative button text. On small labels over busy backgrounds (e.g., badges on vehicle cards), apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) to maintain legibility. Avoid mixing more than two t

Layout

The page grid is a 12-column fluid layout with a max-width of 1280px, centered with equal margins on desktop. Spacing follows an 8px unit system: use lg (40px) for section separation, md (24px) for component padding and card gaps, sm (12px) for internal component spacing. The gutter between columns is 24px. Hero sections span full width with a semi-transparent dark overlay (rgba(0, 0, 0, 0.3)) over background imagery, allowing white headline text to read clearly. Card grids use 3 columns on desktop, 2 on tablet, 1 on mobile, with md spacing between items. Modals are centered with a max-width of 600px and use lg padding (40px) internally. Whitespace is generous—avoid cramping; the brand values breathing room and clarity over density.

Elevation & Depth

Depth is achieved through subtle shadows and layered surfaces rather than dramatic drop-shadows. Level 1 (Base): flat surface (#ffffff) with no shadow. Level 2 (Cards, inputs): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with 1px border in outline (#d0d0d0). Level 3 (Modals, elevated cards on hover): box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.05)—a dual-shadow technique that creates a soft, layered appearance. Modals also use backdrop-filter: blur(4px) on the overlay to soften the background and focus attention. Focus states on inputs use a 3px inset box-shadow: 0 0 0

Shapes

The shape philosophy is **Soft-Technical**: rounded corners are used strategically to soften the utilitarian feel while maintaining clarity. Buttons and inputs use full (9999px) border-radius for a pill shape, creating a friendly, approachable CTA aesthetic (e.g., 'Contactez-nous' at 44px height with 12px 25px padding). Cards use lg (1rem / 16px) border-radius for a balanced, modern look—not too sharp, not overly rounded. Modals use lg (16px) radius on corners. Small UI elements (badges, tags) use full (9999px) for consistency. The rationale: full-radius buttons signal 'click me' with warmth;

Components

Action Elements Buttons are the primary interaction driver. Primary buttons (bg: #333333, text: white, 44px height, 12px 25px padding, border-radius: 9999px) use Futura PT Demi at 14px with 0.01em letter-spacing. On hover, background shifts to #505050 with a 0.15s ease transition. Secondary buttons (bg: white, text: #333333, 1px border in #d0d0d0) provide lower-emphasis alternatives. Tertiary buttons use the secondary teal (#76bcbf) for accent CTAs like 'Trouvez une concession'. All buttons include a focus state with box-shadow: 0 0 0 3px rgba(118, 188, 191, 0.15) for keyboard accessibility.

Containers & Surfaces Cards are the primary content container: white background (#ffffff), 1px border in #d0d0d0, 16px border-radius, 24px padding, and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15

Do's and Don'ts

**Do**

• Do use Futura PT Book for body text and headlines to maintain the brand's clean, modern voice—avoid mixing serif fonts.
• Do apply the secondary teal (#76bcbf) sparingly on CTAs and interactive highlights; it's the brand's signature accent and loses impact if overused.
• Do maintain 24px (md) spacing between major sections and 12px (sm) within components; whitespace is a design feature, not wasted space.
• Do use the full-radius (9999px) border-radius exclusively on buttons and inputs to signal interactivity; cards and modals use 16px (lg) for visual distinction.
• Do test all focus states with keyboard navigation; the 3px teal inset shadow must be visible on every interactive element.

**Don't**

• Don't use primary (#333333) as a background color; it's reserved for text and CTAs. Use surface (#ffffff) or surface-container (#ededed) for backgrounds.
• Don't mix Caveat (handwritten) with body text; reserve it for section headlines and decorative moments only.
• Don't apply shadows heavier than 0 4px 24px rgba(0, 0, 0, 0.15); the brand favors subtle depth, not dramatic drop-shadows.
• Don't use the tertiary red (#c2452a) for non-error states; it signals caution and should be reserved for validation errors and alerts.
• Don't override the 0.15s ease transition timing on hover/focus states; consistency in motion timing reinforces the polished, professional feel.