VivaSon

Overview

VivaSon is a French audiology and hearing aid retailer that transforms clinical expertise into accessible, human-centered digital experiences. The brand operates at the intersection of healthcare and consumer wellness, serving adults seeking hearing solutions without medical intimidation. The aesthetic is "Vibrant Clinical Minimalism"—a design philosophy that pairs energetic, saturated accent colors (magenta #EC008C, cyan #29B6D1, gold #FBAC1B) with expansive white space, clean typography, and purposeful imagery to convey both professional credibility and approachable warmth. The UI evokes confidence and clarity: users feel guided, not overwhelmed.

VivaSon's voice is conversational yet authoritative, never condescending. The brand speaks in clear, direct French, using active verbs and concrete benefits ("En 5 minutes • depuis chez vous • résultat immédiat"). Tone examples: "Au fur et à mesure de notre vie, il est primordial de tester son audition régulièrement" (matter-of-fact, health-focused) and "Chez VivaSon, profitez d'un bilan auditif gratuit et sans engagement" (inviting, benefit-driven). The vocabulary emphasizes accessibility ("gratuit", "sans rendez-vous", "en ligne") and removes medical jargon where possible.

Colors

The VivaSon color system is built on three vibrant brand accents layered over a neutral, light foundation. Primary (#EC008C, a vivid magenta) is the signature CTA and brand accent—used on all primary action buttons, key headlines, and interactive focus states. It commands attention without aggression, evoking energy and approachability. Secondary (#29B6D1, a bright cyan) supports comparison contexts and secondary CTAs, representing clarity and digital trust. Tertiary (#FBAC1B, a warm gold) highlights tertiary actions and accent elements, adding warmth and accessibility.

The surface stack is anchored in white (#FFFFFF) for maximum clarity and medical credibility. Surface-container-highest (#FDE4F1, a pale magenta tint) and surface-container-high (#DEF4F9, a pale cyan tint) provide subtle b

Typography

The type system uses Gotham as the primary typeface, a humanist sans-serif that balances geometric precision with organic warmth—ideal for healthcare contexts requiring both authority and approachability. Display (60px, 700 weight, -0.04em letter-spacing) anchors hero sections with commanding presence. Headline-lg (48px, 700 weight) is reserved for page titles (H1), while headline-md (28px, 700 weight) structures section breaks. Title-lg (20px, 600 weight) marks subsection headers. Body-lg (19px, 300 weight, 1.55 line-height) is the default paragraph size—the 300 weight (light) conveys approachability and reduces visual heaviness on long-form content. Body-md (16px, 400 weight) is used for secondary text and smaller contexts. Label-md (14px, 600 weight, 0.05em letter-spacing) and label-sm

Layout

The layout follows a 12-column grid with a fixed container max-width of 1024px, centered on the viewport. This constraint ensures content remains scannable and prevents line-length from exceeding 75 characters on desktop, critical for accessibility and reading comfort. The page uses a fluid margin model: 2rem (32px) horizontal padding on the body, with sections separated by lg spacing (40px) vertically. The hero section spans full-width with a min-height of 48rem (768px), featuring a right-aligned background image with a white-to-transparent gradient overlay (linear-gradient(90deg, #fff 0%, #fff 30%, rgba(255,255,255,0.8) 44%, rgba(255,255,255,0) 58%)) to ensure text legibility without obscuring the image. Content blocks (cards, steps, requirements) use a 4-column grid on desktop, collapsi

Elevation & Depth

Depth in VivaSon is achieved through a restrained shadow system that prioritizes clarity over drama. The elevation model uses three levels: Level 1 (Base) has no shadow—flat surfaces like the page background and text. Level 2 (Standard Card) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), used on step cards, requirement cards, and comparison containers. This shadow is soft and spread, creating a subtle lift without visual weight. Level 3 (Elevated/Hover) applies box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) on card hover states and modals, signaling interactivity and focus. CTA buttons use a b

Shapes

The shape philosophy is "Soft-Technical Accessibility"—rounded corners are used strategically to soften clinical contexts while maintaining geometric clarity. Buttons and primary CTAs use rounded: lg (1rem / 16px border-radius), creating a friendly, approachable feel without appearing childish. Cards and containers use rounded: xl (1.5rem / 24px), a more generous radius that signals openness and reduces visual harshness. The badge icon circles use rounded: full (50% / 9999px), creating perfect circles for visual emphasis. Input fields and smaller interactive elements use rounded: DEFAULT (0.5r

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses background: {colors.primary} (#EC008C), color: #ffffff, padding: 16px 36px, height: 48px, border-radius: 1rem, box-shadow: 0 0.4rem 1.4rem rgba(236, 0, 140, 0.30), and transition: all ease 0.4s. On hover, background shifts to {colors.inverse-primary} (#CF007B), shadow intensifies to 0 0.6rem 2rem rgba(236, 0, 140, 0.4), and transform: translateY(-0.1rem) creates subtle upward motion. Button-secondary uses background: {colors.secondary} (#29B6D1), border-radius: 9999px (full pill shape), padding: 0px 15px 0px 10px (asymmetric, for icon alignment), and the same shadow/hover treatment with secondary color values. Button-tertiary mirrors the primary pattern but uses {colors.tertiary} (#FBAC1B) and its shadow r

Do's and Don'ts

**Do**

• Do use primary (#EC008C) exclusively for the most important CTA on each page—typically "Commencer le test auditif gratuit" or "Prendre rendez-vous." This ensures users always know the primary action.
• Do apply the full 48px button height (padding: 16px 36px, height: 48px) to all interactive buttons to meet WCAG touch-target minimums and reduce mobile friction.
• Do maintain the 1.55 line-height on all body text (19px default) to support French readability and reduce cognitive load on healthcare content.
• Do use the 4-column grid for step/requirement cards on desktop, collapsing to 2 columns on tablet and 1 on mobile, ensuring content remains scannable at all breakpoints.
• Do layer colored shadows (rgba(236, 0, 140, 0.30) for primary, rgba(41, 182, 209, 0.30) for secondary) on CTAs to reinforce brand identity and create visual cohesion.
• Do apply transition: all ease 0.4s to card and button hover states to signal interactivity without jarring motion.
• Do use the white-to-transparent gradient overlay (linear-gradient(90deg, #fff 0%, #fff 30%, rgba(255,255,255,0.8) 44%, rgba(255,255,255,0) 58%)) on hero background images to ensure text legibility while preserving image impact on the right

**Don't**

• Don't use secondary (#29B6D1) or tertiary (#FBAC1B) as primary CTAs—these are supporting accents only. Reserve primary (#EC008C) for the main conversion action.
• Don't apply border-radius below 0.5rem (8px) on interactive elements; the brand's soft-technical aesthetic requires minimum 8px radius on inputs and 16px on buttons to maintain approachability.
• Don't exceed 1024px container max-width; wider layouts dilute the intimate, focused experience that healthcare users expect and reduce line-length readability.
• Don't use shadows darker than rgba(0, 0, 0, 0.15) on standard cards; VivaSon's elevation model is restrained and clinical, not dramatic. Reserve darker shadows (0.12 opacity) for hover states only.
• Don't mix Gotham with system fonts or serif typefaces; the entire system relies on Gotham's humanist geometry. If Gotham is unavailable, fall back to Source Sans 3 (loaded via Google Fonts), never to generic sans-serif.
• Don't reduce button padding below 16px 36px or height below 48px; these dimensions are optimized for both desktop clarity and mobile touch accuracy.
• Don't apply text-shadow to body text or large headlines; reserve text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) for small labels (label-sm) overlaid on busy backgrounds only.
• Don't use outline or outline-variant colors (#B6BBC1, #D0D0D0) as primary text colors; these are reserved for borders, dividers, and disabled states. Always use on-surface (#1a1a1a) or on-surface-variant (#555555) for readable text.