Jef Friboulet

Overview

Jef Friboulet is a memorial design system celebrating the life and artistic legacy of a mid-20th-century Normandy expressionist painter and sculptor (1919–2003). The aesthetic embodies 'Archival Minimalism'—a refined, contemplative approach that prioritizes historical authenticity, warm neutrals, and restrained typography. The interface acts as a respectful curatorial frame around black-and-white photography, handwritten signatures, and biographical narrative, evoking the quiet dignity of a family archive. The emotional response is one of reverence and accessibility: users feel they are entering a living memorial, not a corporate gallery.

The brand voice is scholarly yet intimate, speaking with the authority of family stewardship and the warmth of personal memory. Vocabulary favors French cultural terms ('expressionniste', 'autodidacte', 'œuvre') and avoids marketing hyperbole. The tone is precise, unhurried, and grounded in craft—whether describing a bronze sculpture or a lithographic technique. Example sentence in brand voice: 'Fils de marin, homme de la terre, Jef Friboulet a toujours obéi à l'appel de ses sens jusqu'aux bouts de ses pinceaux.'

Colors

The color palette is rooted in the tactile warmth of archival paper and the tonal range of black-and-white photography. Primary (#1a5c68, a muted teal-green) serves as the sole accent, reserved for interactive elements (buttons, active navigation, focus states) and subtle brand presence. It echoes the natural pigments of Normandy's coastal landscape and provides visual hierarchy without disrupting the contemplative mood. Secondary (#b03a62, a dusty rose) appears sparingly in thematic contexts (artist biography, emotional highlights) and is never used for primary CTAs. The surface stack is anchored in warm off-whites: surface (#ffffff) for card backgrounds, surface-dim (#f6f5f1) for the page background, and surface-container variants (#e9ecef to #e5e7eb) for subtle layering. On-surface text

Typography

The type system pairs Bodoni Moda (Google Fonts, serif, for display and headlines) with Source Sans 3 (Google Fonts, sans-serif, for body and UI labels), creating a classical-contemporary contrast that honors both the artist's era and modern web accessibility. Bodoni Moda at 72px, 700 weight, with -0.02em letter-spacing anchors the hero and major section headings, commanding attention while maintaining elegance. Body text uses Source Sans 3 at 17px, 400 weight, 26px line-height, ensuring comfortable reading of biographical and curatorial prose. Labels and interactive text (buttons, navigation) use 15px, 600 weight, 0.01em tracking for clarity and distinction. All headings (h1, h2, h3) apply text-wrap: balance to prevent orphaned words and improve visual rhythm. Small labels over busy backg

Layout

The layout employs a fluid 12-column grid with a max-width of 1280px, centered via mx-auto. The page background is surface-dim (#f6f5f1), a warm off-white that evokes aged paper. Content sections use consistent gutter spacing (24px on desktop, responsive on mobile) and are separated by lg spacing (24px vertical margin) to create breathing room. The hero section pairs a left-aligned portrait photograph (aspect-ratio: 4/3, max-width: 512px) with right-aligned headline and biography text, creating asymmetrical balance. Cards and content blocks use md padding (16px) internally and are stacked with gap-6 (24px) between them. The container-max-width of 1280px ensures text remains within comfortable reading width (65ch for prose). Navigation is sticky at the top with bg-paper/90 (rgba(246, 245, 2

Elevation & Depth

Depth is achieved through subtle shadows and layering rather than dramatic drop-shadows or glassmorphism. Level 1 (Base): the page background (surface-dim, #f6f5f1) provides a neutral foundation. Level 2 (Cards and content blocks): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) creates a barely perceptible lift, suggesting the card exists slightly above the background. Level 3 (Hover states and modals): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) deepens the shadow, signaling interactivity and focus. Images and photographs are never shadowed; they sit flush with their containers, emphasizing their ar

Shapes

The shape philosophy is 'Refined Restraint'—minimal border-radius that respects the archival, print-like nature of the design while remaining contemporary. Buttons and inputs use rounded: 0.25rem (4px), a subtle softening that avoids the appearance of over-design. Cards use rounded-md (0.5rem, 8px) for slightly more visual softness while maintaining geometric clarity. The full radius (9999px) is reserved for badges and small accent elements, creating visual distinction without overuse. Photographs and hero images have no border-radius (0px), emphasizing their documentary authenticity. Navigati

Components

Action Elements Buttons use a two-tier system: button-primary (background: #1a5c68, color: #f6f5f1, padding: 12px 20px, height: 44px, rounded: 4px, font-weight: 600) for primary CTAs like 'Découvrir les œuvres' and 'Contact'; button-secondary (background: transparent, border: 1px solid #1a5c68, color: #1a5c68, same padding and height) for secondary actions like 'Lire la biographie'. Both use transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) on hover, shifting to a darker teal (#0d3a42) or a light surface container (#e9ecef) respectively. Focus states apply a 3px inset box-shadow: inset 0 0 0 3px rgba(26, 92, 104, 0.1) for keyboard accessibility.

Containers & Surfaces Cards (card component) use background: #ffffff, rounded: 8px, padding: 24px, and box-shadow: 0 1px 2p

Do's and Don'ts

**Do**

• Do use Bodoni Moda for all display and headline text (h1, h2, h3) to maintain the classical, memorial aesthetic and honor the artist's era.
• Do apply primary color (#1a5c68) exclusively to interactive elements (buttons, active navigation, focus states) to create clear visual hierarchy and guide user attention.
• Do maintain consistent gutter spacing (24px) and section separation (lg: 24px vertical margin) to create breathing room and respect the archival, contemplative mood.
• Do use subtle shadows (0 1px 2px rgba(0, 0, 0, 0.06) for base, 0 3px 8px rgba(0, 0, 0, 0.15) for hover) to convey depth without visual heaviness.
• Do preserve black-and-white photography without filters, shadows, or rounding to emphasize documentary authenticity and historical integrity.

**Don't**

• Don't use secondary color (#b03a62) for primary CTAs or interactive elements; reserve it for thematic accents and emotional highlights only.
• Don't apply border-radius to photographs, hero images, or archival content; keep them rectilinear to maintain their documentary authority.
• Don't use drop-shadows larger than 0 8px 24px rgba(0, 0, 0, 0.12); excessive shadow depth contradicts the refined, print-like aesthetic.
• Don't mix Bodoni Moda and Source Sans 3 within a single heading or body paragraph; maintain clear typographic hierarchy by keeping serif for display and sans-serif for body.
• Don't override the warm off-white background (#f6f5f1) with bright white (#ffffff) or cool grays; the warmth is essential to the archival, aged-paper aesthetic.