Avnear

Overview

Avnear is a French wealth management advisory platform that transforms complex financial planning into a serene, trustworthy digital experience. The brand serves high-net-worth individuals, professionals, and business owners seeking to secure their life insurance contracts and retirement portfolios with institutional rigor and personal attention. The aesthetic is 'Institutional Minimalism'—a refined blend of classic serif typography (Arizona Flare for headlines) paired with clean sans-serif body text (Saans), anchored by a signature royal blue (#4a58b4) that conveys stability and expertise. The UI evokes confidence without coldness: warm beige accents (#e9e1d7, #f6f1eb) soften the palette, while generous whitespace and restrained shadows create breathing room for complex financial data.

The brand voice is precise, reassuring, and human-centered. Avnear speaks to clients as partners, not subjects: 'Le risque ne se prédit pas. Il se gère.' (Risk cannot be predicted. It is managed.) The vocabulary emphasizes control, clarity, and serenity—words like 'Gradual Security®', 'augmentée' (augmented), and 'sérénité' (serenity) recur throughout. Tone is never breathless or salesy; instead, it is methodical and grounded. Example sentence in brand voice: 'Grâce à la Gradual Security®, nous ajustons finement le risque en fonction des valorisations, une approche unique pensée pour les particuliers, les professionnels et la gestion privée.'

Colors

The color system is built on a foundation of institutional trust anchored by Primary Blue (#4a58b4), used exclusively for interactive elements, CTAs, and active states. This blue is never used for body text or backgrounds—it remains reserved for moments of user action and brand emphasis. The surface stack is anchored in warm, off-white tones: Surface (#ffffff) serves as the default canvas, while Surface-Container variants (ranging from #f6f1eb to #d6dae8) create subtle depth for cards, inputs, and layered UI without introducing darkness. The neutral palette (#141831 for on-surface, #5a617d for on-surface-variant, #868ba1 for outline) provides legible text and subtle dividers. Secondary Brown (#826e66) appears in supporting contexts—table headers, badges, and secondary labels—evoking the wa

Typography

The type system pairs Arizona Flare (a refined serif with 300 weight for headlines) with Saans (a clean, geometric sans-serif for body and UI text). This pairing communicates 'established yet approachable'—the serif conveys heritage and expertise, while the sans-serif ensures modern legibility. Display (80px, 300 weight, -0.02em tracking) is reserved for hero headlines and major section breaks, commanding attention without aggression. Headline-lg (48px, 300 weight) and Headline-md (36px, 300 weight) scale down for subsections and card titles. Title-lg (20px, 600 weight, 0.01em tracking) anchors component headings and form labels with subtle emphasis. Body-lg (18px, 400 weight, 28px line-height) and Body-md (16px, 400 weight, 24px line-height) provide comfortable reading for long-form conte

Layout

The layout follows a 12-column grid with a max-width of 1280px, centered with margin-right: auto and margin-left: auto. The design uses a fluid, responsive approach: on desktop (992px+), full-width sections alternate with constrained containers (940–992px max-width observed). Spacing is semantic and hierarchical: lg spacing (40px) separates major sections; md spacing (24px) defines card padding and section gutters; sm spacing (12px) is used for component internal spacing and form field margins. The gutter is consistently 24px on desktop, reducing to 16px on tablet (768px) and 12px on mobile. Hero sections use generous vertical padding (64px+ on desktop) to create breathing room; body sections use 40–64px vertical padding. Cards and containers use 24px internal padding with 8px border-radiu

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle background layering, avoiding the darkness-based hierarchy common in modern design. Level 1 (Base): white or off-white surfaces (#ffffff, #f6f1eb) with no shadow, used for primary content areas and the page background. Level 2 (Standard Card): 0 3px 8px rgba(0,0,0,0.15) shadow with 1px border in #d6dae8, used for cards, modals, and input fields. This shadow is tight and close, suggesting proximity to the base layer. Level 3 (Elevated/Hover): 0 8px 24px rgba(0,0,0,0.12) shadow with the same border, used when cards are hovered or wh

Shapes

The shape philosophy is 'Refined Geometry'—sharp enough to feel professional and controlled, rounded enough to feel approachable and modern. Buttons use 0.25rem (2px) border-radius, creating a subtle, almost-square appearance that conveys precision and institutional trust. Cards and containers use 1rem (8px) border-radius, balancing softness with definition. Input fields use 0.5rem (4px) border-radius, sitting between buttons and cards to suggest they are part of the interactive layer. Badges and pills use full (9999px) border-radius for maximum softness, reserved for status indicators and sec

Components

Action Elements Buttons are the primary interactive component. Button-primary uses background #4a58b4, text white, 16px padding (horizontal 24px), 48px height, and 2px border-radius. On hover, the background shifts to #3a4a94 (a darker blue, -0.15 lightness) with a 0.2s ease transition. On focus, apply outline: 3px solid #4a58b4 with outline-offset: 2px. Button-secondary uses a white background with a 1px border in #d6dae8, text in primary blue, and the same padding and height. On hover, the background becomes #e9e9f5 (surface-container-low) with the same transition timing. Both button variants use typography label-md (14px, 500 weight) and are never all-caps; instead, they use sentence case (e.g., 'Simuler mon projet', 'Prendre RDV').

Containers & Surfaces Cards are the primary c

Do's and Don'ts

**Do**

• Do use Primary Blue (#4a58b4) exclusively for interactive elements, CTAs, and active states—never for body text or large background areas.
• Do apply the md shadow (0 3px 8px rgba(0,0,0,0.15)) to all cards and modals; increase to lg shadow (0 8px 24px rgba(0,0,0,0.12)) on hover or elevation.
• Do use Arizona Flare serif (300 weight) for all headlines and Saans sans-serif for body and UI text; never mix serif and sans-serif within a single component.
• Do maintain 24px padding inside cards and 40px vertical spacing between major sections; use the spacing scale (xs, sm, md, lg, xl) consistently.
• Do apply 2px border-radius to buttons, 8px to cards, and 4px to inputs; use full (9999px) only for badges and status indicators.
• Do include a 1px border in #d6dae8 (outline-variant) on all cards, inputs, and elevated surfaces to define edges without harsh contrast.
• Do use focus states with outline: 3px solid #4a58b4 and outline-offset: 2px for keyboard navigation accessibility.
• Do apply text-shadow: 0 2px 4px rgba(0,0,0,0.25) to small labels and text overlaid on images or busy backgrounds.

**Don't**

• Don't use Primary Blue for body text, backgrounds, or non-interactive elements; reserve it for buttons, links, and active states only.
• Don't apply dark overlays or backdrop-filter blur effects; instead, use background-color shifts from the surface stack and the md/lg shadow system.
• Don't use system fonts or generic sans-serif; always specify Saans for body/UI and Arizona Flare for headlines via @font-face or Google Fonts.
• Don't apply border-radius greater than 1rem (8px) to cards or inputs; use full (9999px) only for badges and status indicators.
• Don't use all-caps text for buttons or labels; use sentence case (e.g., 'Simuler mon projet') to maintain the brand's approachable, human tone.
• Don't apply shadows without a corresponding border; all elevated surfaces must have both a 1px border in #d6dae8 and a shadow to create visual coherence.
• Don't use color alone to convey status; always pair color with an icon, badge, or text label for accessibility.
• Don't apply transitions longer than 0.3s ease; keep interactions snappy and responsive to user input.