Xpert Coach Formation

Overview

Xpert Coach Formation is a transformational learning platform designed for French-speaking professionals seeking to build inner security and meaningful impact through structured coaching. The brand embodies 'Confident Minimalism'—a design philosophy that balances sophisticated typography with vibrant accent colors, creating an environment where complex psychological frameworks feel accessible and empowering. The visual language combines deep slate backgrounds (evoking trust and stability) with bright lime-green CTAs (#6bca44) and warm gold accents (#fbb50b), signaling both professional rigor and human warmth. The UI evokes a sense of guided transformation: every interaction feels intentional, every color choice reinforces the promise of inner security.

The brand voice is warm, direct, and deeply purposeful. Sentences are constructed with clarity and emotional resonance—never breathless, always grounded in the real work of personal development. Example: 'Grâce à la Pleine Confiance et la Théorie Polyvagale, vous deviendrez un acteur important du marché de l'accompagnement, du bien-être et de la santé.' The vocabulary emphasizes agency ('deviendrez', 'acteur'), transformation ('nouveau sens'), and collective impact ('à chacun'). Typography choices—Playfair Display for headlines, Montserrat for labels, Open Sans for body—create a hierarchy that feels both editorial and accessible, reinforcing the brand's position as a premium yet approachable coaching authority.

Colors

The color system is built on a foundation of trust and transformation. Primary (#6bca44, a vibrant lime-green) is the signature accent used exclusively on call-to-action buttons, interactive states, and focus indicators—it signals 'go, take action, transform.' Secondary (#fbb50b, a warm golden-amber) appears in headline accents and supporting CTAs, creating visual rhythm and warmth without competing for attention. Tertiary (#ff5e34, a coral-orange) is reserved for alerts, testimonials, and secondary emphasis, adding energy to the palette. The surface stack anchors the design: surface (#f5f5f5) is the default light background, surface-container-lowest (#e8e8e8) creates subtle depth for cards and panels, and surface-bright (#ffffff) is used for inputs and elevated surfaces. On-surface (#2d2d

Typography

The type system reflects the brand's dual nature: sophisticated yet accessible. Playfair Display (serif, 400 weight) anchors headlines and the hero display at 85px/92px line-height, evoking editorial authority and timeless elegance. Montserrat (sans-serif, 600 weight) powers labels, buttons, and section titles at 14–32px, providing geometric clarity and modern energy. Open Sans (sans-serif, 400 weight) carries body copy and descriptive text at 16–18px with 24–28px line-height, ensuring readability on screens and print. The hierarchy is strict: display (85px) for hero H1, headline-lg (48px) for section titles, headline-md (32px) for subsections, body-lg (18px) for descriptive paragraphs, and label-md (14px) for buttons and metadata. Letter-spacing is minimal (0 to -0.02em) to maintain densi

Layout

The page uses a fluid 12-column grid with a max-width of 1280px, centered on desktop and full-bleed on mobile. The hero section spans full-width with 64px (lg spacing) padding on desktop, 40px (md spacing) on tablet, and 24px (gutter) on mobile, creating breathing room around the Xpert logo, headline, and CTA buttons. Section separation uses lg spacing (40px) between major content blocks, md spacing (24px) between subsections, and sm spacing (12px) between related elements. The container max-width of 1280px ensures text remains readable (60–80 characters per line at body-lg). White-space is generous but purposeful: the hero section occupies ~600px of vertical space, giving the hero image and text room to breathe. Cards and input fields use md spacing (24px) for internal padding, creating a

Elevation & Depth

Depth is conveyed through a three-tier shadow system that creates subtle visual hierarchy without heaviness. Level 1 (Base/Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) applied to standard cards, input fields, and default buttons. This shadow is soft and close to the surface, suggesting proximity and approachability. Level 2 (Elevated/Hover): box-shadow: 0 10px 36px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.06) applied on card-hover and button-hover states. The larger blur radius (36px) and increased vertical offset (10px) create a sense of lift and interactivity. The secondary 1px ou

Shapes

The shape philosophy is 'Geometric Warmth'—combining sharp, modern border-radius values with generous padding to create a design that feels both professional and approachable. Buttons use rounded: full (9999px), creating pill-shaped CTAs that are instantly recognizable and inviting. This extreme roundness signals 'click me, take action' while maintaining sophistication through precise typography and color. Cards and panels use rounded: md (0.75rem / 12px), a moderate radius that softens corners without appearing childish. Input fields use rounded: DEFAULT (0.5rem / 8px), a subtle radius that d

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses background: {colors.primary} (#6bca44), textColor: {colors.on-primary} (#ffffff), rounded: full, padding: 16px 32px, and height: 56px. The border is 3px solid {colors.primary}, creating a defined edge. On hover, background shifts to #5ab83a (darker, more saturated) with transform: scale(1.02) and transition: all 200ms ease-out, providing tactile feedback. Button-secondary mirrors the structure but uses {colors.secondary} (#fbb50b) and on-secondary (#2d2d2d), creating visual contrast for secondary actions. Button-tertiary uses {colors.tertiary} (#ff5e34) for alerts or destructive actions. All buttons use typography: label-md (Montserrat, 14px, 600 weight, 20px line-height) for consistent labeling.

Cont

Do's and Don'ts

**Do**

• Do use primary (#6bca44) exclusively on CTAs and interactive states—it's the brand's signature action signal and loses impact if overused.
• Do pair Playfair Display headlines with Open Sans body copy to create visual contrast between editorial authority and accessible clarity.
• Do apply md spacing (24px) between major sections and lg spacing (40px) between page sections to maintain breathing room and visual hierarchy.
• Do use the three-tier shadow system (0 3px 8px for base, 0 10px 36px for hover) to create subtle depth without visual clutter.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) on small labels over photographic backgrounds to ensure legibility.
• Do use button rounded: full (9999px) to signal action and approachability—it's instantly recognizable as clickable.

**Don't**

• Don't use primary (#6bca44) for body text, backgrounds, or decorative elements—reserve it for CTAs and focus states only.
• Don't mix serif and sans-serif fonts within a single headline or label; maintain strict hierarchy (Playfair for display, Montserrat for labels, Open Sans for body).
• Don't reduce padding below sm (12px) on cards or input fields; the brand relies on generous white-space to feel approachable and secure.
• Don't apply shadows stronger than 0 10px 36px rgba(0, 0, 0, 0.16) on standard elements; excessive depth contradicts the minimalist aesthetic.
• Don't use rounded: full on cards or containers—reserve it for buttons only to maintain visual distinction between interactive and static elements.
• Don't override the 200ms ease-out transition timing on hover states; slower or faster transitions feel unresponsive or jarring.