Walter Learning

Overview

Walter Learning is a professional online education platform designed for working adults seeking continuous skill development. The brand embodies "Warm Professionalism"—a design philosophy that balances authoritative expertise with approachable, human-centered visual language. The aesthetic combines clean, modern typography (Inter for body, bien-etre-social-regular for display) with a distinctive golden-yellow accent (#fcbd42) that signals opportunity and forward momentum. The UI evokes confidence without coldness: soft beige surfaces (#f3efed, #ece5e2) create a calm learning environment, while the warm primary color energizes key interactions. The emotional response is one of capability and encouragement—users feel supported in their professional growth, not intimidated by complexity.

The brand voice is direct, encouraging, and French-inflected in sensibility: precise without being pedantic, optimistic without being saccharine. Vocabulary patterns emphasize action ("Trouvez," "Développez," "Changera") and transformation ("trajectoire professionnelle," "compétences"). The tone treats learners as serious professionals deserving respect and clarity. Example sentence in brand voice: "Experts de la formation en ligne, nous vous accompagnons dans le développement de vos compétences professionnelles."

Colors

The color system is anchored by a warm, energetic primary (#fcbd42) used exclusively on call-to-action buttons, primary navigation elements, and interactive focus states. This golden-yellow is the brand's signature accent—it appears sparingly but decisively, creating visual hierarchy and drawing attention to key user actions like "Voir le catalogue" and "Trouver ma formation." Secondary accent (#efb33f) provides subtle variation for hover states and supporting UI elements. The surface stack uses warm, off-white tones (#ffffff base, #f3efed for subtle containers, #ece5e2 for elevated surfaces) that feel inviting rather than clinical. Text defaults to near-black (#0b0b0a) for maximum readability; secondary text uses mid-gray (#474747) for hierarchy. The tertiary color (#666666) anchors neutr

Typography

The type system employs a two-family strategy: bien-etre-social-regular (a distinctive, warm serif) for display-level headings (72px, 400 weight, -0.02em tracking) to establish brand personality and emotional warmth, and Inter (a neutral, highly legible sans-serif) for all body, label, and interface text. This pairing communicates "established expertise meets modern accessibility." Display headings (72px, 80px line-height) are reserved for hero sections and major page titles; headline-lg (40px, 600 weight) anchors section breaks; headline-md (28px, 600 weight) organizes content subsections. Body text uses 16px (body-md) as the baseline for form labels and UI copy, with 18px (body-lg) for prominent body paragraphs. Labels are set at 15px (label-md, 500 weight) for buttons and form controls,

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, providing flexibility for both desktop and responsive breakpoints. The page rhythm is organized around semantic spacing: lg (40px) separates major sections (hero to featured courses, courses to testimonials), md (24px) creates breathing room within sections and between card groups, and sm (12px) provides micro-spacing within components. The gutter (24px) is applied consistently to horizontal padding on all containers, ensuring content never touches viewport edges. White-space philosophy prioritizes clarity over density: course cards are separated by md spacing, form fields by sm spacing, and section headings by lg spacing above and md below. The container-max (1280px) is applied to all full-width sections to

Elevation & Depth

Depth is conveyed through subtle, warm shadows rather than layering or glassmorphism. The elevation system uses three levels: Level 1 (sm, 0 1px 2px rgba(0, 0, 0, 0.06)) for subtle hover states on interactive elements like list items; Level 2 (md, 0 4px 12px rgba(0, 0, 0, 0.08)) for standard cards and dropdown panels; Level 3 (lg, 0 3px 8px rgba(0, 0, 0, 0.15)) for modals, popovers, and prominent cards. The lg shadow (0 3px 8px rgba(0, 0, 0, 0.15)) is the most frequently used, applied to course cards, form containers, and cookie consent modals. Shadows are warm-tinted (using rgba(0, 0, 0, ...)

Shapes

The shape philosophy is "Warm Geometric"—combining soft, approachable curves with precise, professional edges. Buttons and primary interactive elements use full (9999px) border-radius for a friendly, pill-shaped appearance that signals "click me" without aggression. Form inputs and secondary containers use DEFAULT (0.5rem / 8px) for a subtle, modern look. Cards and elevated surfaces use lg (1rem / 16px) for a balanced, contemporary feel. Dropdowns and select panels use sm (4px) for a more utilitarian, form-like appearance. The rationale: full radius on buttons creates visual warmth and approac

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (button-primary) use backgroundColor: {colors.primary} (#fcbd42), textColor: {colors.on-primary} (#0b0b0a), rounded: {rounded.full} (9999px), padding: 12px 32px, height: 48px, and fontWeight: 500. On hover, transition to button-primary-hover with backgroundColor: {colors.primary-fixed-dim} (#fcbd42) and a 0.15s ease transition. Secondary buttons (button-secondary) use transparent background, 2px solid border in {colors.on-surface} (#0b0b0a), and the same rounded/padding/height. Dark buttons (button-dark) use backgroundColor: #000000, textColor: #ffffff, rounded: {rounded.DEFAULT} (8px), fontWeight: 700, and padding: 12px 8px; on hover, shift to #2e2e2e with a 0.15s ease transition. All buttons use {typography.

Do's and Don'ts

**Do**

• Do use primary (#fcbd42) exclusively on primary CTAs and focus states—it is the brand's signature and must remain distinctive and high-contrast.
• Do apply lg shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to cards, modals, and elevated surfaces to create clear visual hierarchy without harsh contrast.
• Do use bien-etre-social-regular at 72px for hero headings and major display text to establish warm, distinctive brand personality.
• Do maintain at least 24px (md spacing) between major sections and 12px (sm spacing) between components to preserve clarity and breathing room.
• Do use full (9999px) border-radius on all primary buttons to signal approachability and warmth.
• Do apply 0.15s ease transitions on all hover/focus state changes to create smooth, professional micro-interactions.
• Do ensure all text on primary (#fcbd42) backgrounds uses on-primary (#0b0b0a) for maximum contrast and readability.

**Don't**

• Don't use primary (#fcbd42) on surfaces darker than surface-container-high (#e4dfdd)—it will lose contrast and legibility.
• Don't apply sharp corners (0px border-radius) to interactive elements; minimum is sm (4px) to maintain warmth and approachability.
• Don't exceed lg shadow (0 3px 8px rgba(0, 0, 0, 0.15)) blur radius or use harsh, high-alpha shadows—they conflict with the warm, professional aesthetic.
• Don't mix typefaces within a single component; use Inter for all body/label text and bien-etre-social-regular only for display headings (72px+).
• Don't use secondary (#efb33f) or tertiary (#666666) as primary CTAs—primary (#fcbd42) must remain the exclusive accent for key actions.
• Don't apply transitions longer than 0.15s ease on interactive elements; faster motion feels more responsive and professional.
• Don't reduce padding below {spacing.sm} (12px) on buttons or form inputs—minimum height of 48px must be maintained for accessibility.