Assurance Annuaire

Overview

Assurance Annuaire is a professional French directory platform serving insurance companies, mutual funds, and banking institutions. The design embodies 'Institutional Clarity'—a systematic, accessible aesthetic that prioritizes information hierarchy and user navigation over decorative flourishes. The platform serves both businesses seeking directory listings and consumers researching insurance products, creating a trustworthy, bureaucratic-yet-approachable visual environment. The UI evokes competence and transparency through a restrained palette of professional blues (#337ab7), neutral grays (#666666, #777777), and clean white surfaces, ensuring that complex financial information remains scannable and digestible.

The brand voice is formal yet helpful, speaking in clear French with a focus on practical guidance. Sentences are direct and informative: 'Un annuaire tel que celui-ci vous permet de présenter en ligne votre entreprise' (This directory allows you to present your business online). The vocabulary avoids jargon when possible, preferring accessibility over technical precision. Typography is utilitarian—Oswald headlines provide visual weight and authority, while Arial body text ensures legibility at small sizes. The tone is neither cold nor overly friendly; it is the voice of a reliable administrative resource.

Colors

The color system is rooted in 'Professional Minimalism,' using a restricted palette to convey institutional trust and clarity. Primary (#337ab7) is a medium-saturation blue applied to CTAs, navigation links, and key interactive elements; it appears frequently enough to establish brand identity without overwhelming the interface. Secondary grays (#666666, #777777, #999999) provide tonal variation for body text, disabled states, and tertiary UI elements, creating a visual hierarchy that guides the eye from primary actions to supporting information. The surface stack is anchored in pure white (#ffffff) for the main canvas, with subtle off-whites (#f5f5f5, #eeeeee) for container backgrounds and hover states, ensuring sufficient contrast for accessibility without introducing visual noise.

Erro

Typography

The type system separates display and body layers to create clear information hierarchy. Oswald (a geometric sans-serif from Google Fonts) is reserved for headlines (h1–h3) at weights 400, delivering a modern yet authoritative presence; h1 renders at 43.5px with -0.015em letter-spacing to tighten the letterforms and enhance readability at large sizes. Body copy uses Arial at 14.5px–16px with 400 weight and 22–24px line-height, ensuring comfortable reading for dense regulatory and product information. Label elements (buttons, badges, form labels) use Arial at 12–14px with 600 weight and 0.01em letter-spacing, creating visual distinction from body text without introducing a third typeface. On small labels overlaid on busy backgrounds (e.g., category badges), apply text-shadow: 0 1px 2px rgba

Layout

The page layout follows a 12-column Bootstrap grid with a max-width of 1199px, creating a responsive container that adapts from desktop (full width) to tablet (991px breakpoint) to mobile (768px and below). The design uses a three-column layout on desktop: a 3-column left sidebar for category navigation, a 9-column main content area for hero and article sections, and a 3-column right sidebar for 'Top 10' links and featured categories. Vertical spacing is governed by the semantic spacing scale: section separations use lg spacing (40px), card-to-card gaps use md spacing (24px), and internal padding within components uses sm spacing (12px). The gutter between grid columns is 24px, providing breathing room without excessive whitespace. Container padding is 24px on desktop, reducing to 12px on

Elevation & Depth

Depth in this system is achieved through subtle shadows and border definition rather than layered glass or blur effects. The base elevation (Level 1) is the white surface (#ffffff) with no shadow, establishing the primary reading plane. Level 2 (cards, dropdowns, modals) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), a soft shadow with 8px blur and 3px vertical offset that lifts elements 4–8px above the base. Level 3 (elevated modals, hover states on cards) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a larger shadow with 24px blur and 8px offset, creating visual separation for critica

Shapes

The shape philosophy is 'Pragmatic Minimalism,' using small, consistent border-radius values to soften hard edges without introducing organic or playful curves. The primary radius is 4px (DEFAULT), applied to buttons, input fields, cards, and dropdown panels; this subtle rounding (approximately 0.25rem) is barely perceptible at a glance but softens the interface enough to feel contemporary rather than austere. Larger components like modals or featured cards use 6px (md radius) or 10px (lg radius) for slightly more visual softness. The full radius (9999px) is reserved for badges and pill-shaped

Components

Action Elements Buttons follow a two-state system: primary (solid blue background, white text, 44px height, 12px vertical / 24px horizontal padding) and secondary (transparent background, blue text, blue border). Primary buttons use {colors.primary} (#337ab7) with a 200ms ease-in-out transition to #2e6fa1 on hover, providing clear affordance. Secondary buttons maintain the same height and padding but use a 1px border at {colors.primary} and transparent fill, allowing them to integrate into dense layouts without visual competition. Both button types use {rounded.DEFAULT} (4px) and {typography.label-md} (14px, 600 weight, 0.01em letter-spacing). Focus states add a 3px outline at rgba(51, 122, 183, 0.1) (10% opacity primary), visible at 200ms transition speed for keyboard navigation acces