France Chauffage Solaire

Overview

France Chauffage Solaire is a professional-grade renewable energy equipment supplier serving both B2B contractors and B2C homeowners across France. The brand embodies 'Technical Pragmatism'—a design philosophy that prioritizes clarity, efficiency, and trustworthiness without sacrificing visual warmth. The interface uses a confident dual-accent palette (vibrant orange #ff6033 for urgency and action, cool teal #36a9e1 for trust and sustainability) against a clean white canvas, creating a sense of professional competence paired with approachable energy. The emotional response is one of confidence: users feel they're making informed decisions about complex technical products with expert guidance.

The brand voice is direct, knowledgeable, and solution-oriented. Vocabulary emphasizes performance metrics, energy savings, and long-term value rather than lifestyle aspirations. Tone avoids hyperbole; instead, it grounds claims in technical specifications and certifications. Example sentence in brand voice: 'Nos panneaux photovoltaïques offrent un rendement de 22% avec une garantie de 25 ans—investissez dans la durabilité sans compromis.'

Colors

The color system is built on a foundation of professional neutrality (white #ffffff surfaces, cool grays #f3f3f3 to #dddddd for depth) with two strategic accent colors that signal different user intents. Primary (#ff6033, a warm coral-orange) is reserved for high-stakes CTAs—'Add to Cart', 'Contact Sales', 'Request Quote'—and conveys urgency and energy conversion. Secondary (#36a9e1, a professional teal) represents trust, sustainability, and technical reliability; it appears in headers, success states, and informational highlights. Tertiary (#05c46b, a vibrant green) reinforces the renewable/eco-friendly positioning and is used sparingly for sustainability badges and positive confirmations.

The surface stack creates visual hierarchy through subtle luminosity shifts: surface-container-lowe

Typography

The type system uses Roboto exclusively, a humanist sans-serif that balances technical precision with approachability—critical for a B2B/B2C hybrid audience. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements; Headline-lg (40px, 600 weight) structures page sections; Headline-md (28px, 600 weight) organizes product categories and feature blocks. Body-lg (18px, 400 weight, 28px line-height) is used for product descriptions and marketing copy, providing generous leading (1.56x) for readability on long-form content. Body-md (16px, 400 weight) handles standard paragraph text and form labels. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text and small UI labels, with Label-sm (12px, 500 weight, 0.05em tracking) reserved for metadata, t

Layout

The layout system uses a 12-column fluid grid with a max-width of 1280px, centered on the viewport. The gutter is consistently 24px (md spacing), creating a breathing room that prevents the interface from feeling cramped even on dense product listing pages. Container max-widths are enforced at 1280px for desktop; on tablet (768px+) the grid collapses to 8 columns with 12px gutters; on mobile (<768px) it becomes a single-column layout with 12px side margins. Section separation uses lg spacing (40px) for major content blocks (hero to product grid, product grid to testimonials), md spacing (24px) for subsections within a feature block, and sm spacing (12px) for tight groupings like form field labels and their inputs. The spacing scale is semantic: use unit (8px) only for micro-adjustments (ic

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids the heavy drop-shadows of older e-commerce sites. Level 1 (Base/Surface): no shadow; white background (#ffffff) with 1px border in outline-variant (#cccccc). Level 2 (Standard Card/Hover): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), applied to cards on hover and to product tiles on interaction, creating a subtle lift. Level 3 (Modal/Elevated): box-shadow: 0 0 20px rgba(0, 0, 0, 0.15), used for modals, dropdowns, and floating elements that demand focus. Transitions between levels use 200ms ease-in-out timing to feel responsive wit

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are present but restrained, signaling approachability without sacrificing the professional edge. Buttons and form inputs use rounded.DEFAULT (5px), a subtle radius that softens hard edges while maintaining geometric clarity. Cards and larger containers use rounded.lg (10px), creating a gentle frame that feels contemporary without being trendy. Badges and pills use rounded.full (9999px) for maximum softness, appropriate for status indicators and secondary information. The rationale: 5px is the threshold where a shape stops feeling corpora

Components

Action Elements Buttons are the primary interaction mechanism and must signal intent clearly. button-primary (#ff6033 background, white text, 44px height, 12px vertical / 24px horizontal padding, 5px radius) is used for high-value actions: 'Add to Cart', 'Request Quote', 'Contact Sales'. On hover, the background shifts to #ff7a52 with box-shadow elevation to md (0 4px 12px rgba(0, 0, 0, 0.08)), and a 200ms transition makes the interaction feel responsive. On active/click, the background darkens to #e55a2b and applies a subtle scale(0.98) transform to provide tactile feedback. button-secondary (#36a9e1 background, white text) follows the same structure but signals secondary actions like 'Learn More' or 'View Details'. button-ghost (transparent background, #ff6033 text, 1px solid #ff6033

Do's and Don'ts

**Do**

• Do use primary (#ff6033) exclusively for high-intent CTAs—never for decorative elements or secondary information.
• Do maintain 24px gutters and 40px section spacing to create visual breathing room; dense layouts undermine the professional aesthetic.
• Do apply 200ms ease-in-out transitions to all hover/focus state changes; instant changes feel jarring in a professional context.
• Do use Roboto 600 weight for all labels and button text; 400 weight body text ensures hierarchy and readability.
• Do include 1px outline-variant borders on all cards and input fields; borderless designs reduce visual definition in product-heavy layouts.
• Do test all interactive elements for keyboard navigation; focus states must use the 3px inset primary-tint shadow, not outline alone.

**Don't**

• Don't mix border-radius values within a single component family (e.g., 5px buttons with 16px card children); inconsistency breaks the 'precision' positioning.
• Don't use secondary (#36a9e1) for CTAs; it signals trust/information, not urgency—reserve it for headers and success states.
• Don't apply shadows heavier than md (0 4px 12px rgba(0, 0, 0, 0.08)) to standard cards; the lg shadow (0 0 20px rgba(0, 0, 0, 0.15)) is reserved for modals and floating elements.
• Don't use more than two accent colors in a single view; the dual-accent system (orange + teal) is intentional; adding tertiary green dilutes the visual hierarchy.
• Don't set line-height below 1.5x for body text; the 28px line-height on 18px body-lg is deliberate for readability on product descriptions.
• Don't disable buttons with opacity alone; use surface-container-highest (#dddddd) background with on-surface-variant (#666666) text and remove box-shadow to signal unavailability clearly.