Boudrie Campers

Overview

Boudrie Campers embodies a 'Practical Optimism' aesthetic—a design language that balances professional trustworthiness with approachable warmth. The brand serves recreational vehicle buyers in the Netherlands who value transparency, quality inspection, and fair pricing. The visual identity combines a vibrant cyan accent (#17a2b8) with clean, neutral surfaces (white #ffffff, grays #505050–#6c757d) to create an interface that feels both modern and reassuring. The UI evokes clarity and confidence: users should feel that finding their ideal camper is straightforward, well-organized, and supported by genuine expertise.

The brand voice is conversational yet precise—never overselling, always informative. Boudrie Campers speaks in the language of the road: practical, friendly, and detail-oriented. Example sentence: 'We've inspected and tested every camper for authenticity and roadworthiness—here's what you need to know.' The tone avoids hype; instead, it builds trust through specificity and respect for the buyer's investment.

Colors

The color system is anchored by a vibrant cyan primary (#17a2b8), which appears on all interactive elements—navigation highlights, call-to-action buttons, and focus states. This accent is deliberately bright and energetic, standing out against the neutral palette to signal interactivity and brand presence. The secondary palette uses warm grays (#505050 for outlines, #6c757d for secondary text) to convey professionalism and stability. The surface stack progresses from pure white (#ffffff) for primary content areas through subtle grays (#e9ecef for containers, #d0d0d0 for borders) to create visual hierarchy without introducing darkness. Error states use a warm red (#dc3545) for validation feedback. The cyan primary (#17a2b8) is reserved exclusively for interactive elements—buttons, active na

Typography

The type system uses Droid Sans as the primary typeface, a humanist sans-serif that conveys approachability while maintaining professional clarity. Display and headline levels (56px–40px) use bold weights (700) to establish clear information hierarchy; these are reserved for page titles and major section headings. Body text (14px–16px) runs at regular weight (400) with 21–24px line-height to ensure comfortable reading at typical viewing distances. Labels and interactive text (12px–14px) use medium-to-bold weights (500–600) with 0.01–0.02em letter-spacing to enhance legibility in compact spaces. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) to small labels (12px) when placed over textured or photographic backgrounds to maintain contrast. Headings should never exceed 700 weight; use 600 f

Layout

The layout uses a 12-column grid system with a maximum container width of 1280px, ensuring content remains readable on large displays while adapting fluidly to smaller viewports. The primary spacing unit is 8px, with semantic scales: xs (4px) for micro-spacing within components, sm (12px) for internal padding, md (24px) for section gutters and card padding, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. The header occupies a fixed 80–120px height depending on logo size, followed by a navigation bar (48px). Content sections use md (24px) horizontal gutters and lg (40px) vertical separation to create breathing room. Cards and form fields use md (24px) internal padding with sm (12px) gaps between stacked elements. The design favors generous white space

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than color shifts. The elevation system uses three levels: Level 1 (Base) has no shadow—flat surfaces like body backgrounds and primary content areas. Level 2 (Standard Cards & Dropdowns) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft separation from the background without visual heaviness. Level 3 (Modals & Floating Elements) uses box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12), providing clear visual hierarchy for overlays and elevated panels. All shadows use a 15–20% black opacity to maintain softness; never use pure b

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are minimal and functional, never decorative. Use 4px (DEFAULT) radius for buttons, inputs, and small components; this provides a modern, approachable feel while maintaining clarity. Use 8px (lg) radius for larger cards and panels to soften their visual weight. Use 9999px (full) radius exclusively for badges and pill-shaped elements. Never use sharp corners (0px) on interactive elements; always apply at least 4px radius to buttons and inputs. The rationale: 4px radius is the threshold where a shape feels intentionally rounded rather than

Components

Action Elements Buttons are the primary interactive affordance. Primary buttons use the cyan accent (#17a2b8) background with white text, 44px height, 12px–24px padding, and 4px border-radius. On hover, the background shifts to the darker primary-container (#0d7a94) with a 200ms transition. Secondary buttons use the gray secondary color (#6c757d) with identical sizing and spacing. Ghost buttons have transparent backgrounds with a 1px cyan border and cyan text; on hover, they gain a light gray background (#e9ecef) without changing the border. All buttons must include a focus state with box-shadow: 0 0 0 3px rgba(23, 162, 184, 0.1) when keyboard-focused, ensuring accessibility. Never disable buttons by reducing opacity; instead, use the disabled state background (#e9ecef) with gray text

Do's and Don'ts

**Do**

• Do use the cyan primary (#17a2b8) exclusively for interactive elements—buttons, active states, focus indicators, and links—to maintain a consistent signal of actionability.
• Do maintain at least 4.5:1 contrast between text and background colors; test all color combinations against WCAG AA standards.
• Do apply the 4px border-radius consistently across all buttons, inputs, and small components; never mix sharp and rounded corners in the same interface.
• Do use the md elevation shadow (0 3px 8px rgba(0, 0, 0, 0.15)) as the default card shadow; reserve the lg shadow for hover states and modals.
• Do preserve the 24px gutter spacing between major sections; this breathing room is essential to the brand's approachable, professional aesthetic.
• Do use Droid Sans at 700 weight for headlines and 400 weight for body text; never use weights outside the 400–700 range.

**Don't**

• Don't use cyan (#17a2b8) for body text, backgrounds, or decorative elements; it must remain reserved for interactive affordances only.
• Don't apply opacity-based disabled states to buttons; instead, use the designated disabled background (#e9ecef) with gray text (#6c757d).
• Don't mix border-radius values within the same component family—all buttons must use 4px, all cards must use 4px, all inputs must use 4px.
• Don't use shadows darker than 15% black opacity or with blur radii exceeding 16px; excessive shadows create visual clutter and reduce clarity.
• Don't compress spacing below 12px (sm unit) in primary content areas; tight spacing contradicts the brand's emphasis on clarity and approachability.
• Don't use typefaces other than Droid Sans for body text and UI labels; the humanist character of Droid Sans is core to the brand identity.