Le Point

Overview

Le Point is a premium French news and opinion platform that combines editorial authority with digital accessibility. The design system embodies 'Editorial Classicism'—a refined aesthetic that honors journalistic tradition through serif typography and structured layouts while embracing modern interaction patterns. The UI evokes trust, clarity, and intellectual rigor: users encounter a clean white canvas punctuated by the brand's signature crimson accent (#C41E3A), creating visual hierarchy without visual noise. The brand voice is authoritative yet conversational, opinionated but fair-minded, and always grounded in fact. Vocabulary favors precision over flourish: 'analysis' over 'deep dive,' 'investigation' over 'exposé,' 'perspective' over 'take.' Example sentence in brand voice: 'Our investigation reveals how three government agencies failed to coordinate on pandemic preparedness—here's what went wrong.'

Colors

The color palette is rooted in print journalism tradition, adapted for digital clarity. Primary (#C41E3A) is Le Point's signature crimson, used exclusively for call-to-action buttons, active navigation states, and critical interactive elements—it commands attention without aggression. On-primary (#ffffff) ensures maximum contrast (WCAG AAA) for text and icons over the primary background. Primary-container (#f5e6e8) provides a soft tint for secondary actions and hover states, while on-primary-container (#8b1428) maintains legibility. Secondary (#6c757d) is a neutral gray used for metadata, timestamps, and supporting text; secondary-container (#e9ecef) serves as a subtle background for grouped content. Tertiary (#505050) is a darker neutral for body copy and structural elements. The surface

Typography

The type system pairs Georgia serif for headlines and display text with Times New Roman for body copy, creating a distinctly editorial voice that signals authority and tradition. Display (56px, 700 weight, -0.02em letter-spacing) anchors hero sections and feature articles; headline-lg (36px, 700 weight) marks article titles and major section breaks; headline-md (28px, 600 weight) introduces subsections and card titles; body-lg (18px, 400 weight, 28px line-height) ensures comfortable reading of long-form content; body-md (16px, 400 weight, 24px line-height) handles standard article text and descriptions. Label-md (14px, 600 weight, 0.02em letter-spacing) is applied to buttons, metadata, and UI labels in Arial sans-serif to provide visual contrast and functional clarity. All serif text uses

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, allowing articles to breathe while maintaining focus. The gutter spacing is 24px (md unit), creating consistent rhythm between columns and sections. White-space is treated as a design element, not wasted space: section separation uses lg spacing (40px) to create visual pauses between article clusters, while card-to-card spacing within a grid uses md spacing (24px). The body uses Times New Roman at 16px with 24px line-height, yielding a 1.5 line-height ratio that accommodates serif letterforms. Padding inside cards and containers is consistently md (24px) on desktop, scaling to sm (12px) on mobile. The container-max-width of 1280px prevents line lengths from exceeding 80 characters, maintaining optimal readabi

Elevation & Depth

Depth is conveyed through a three-level shadow system that mimics the physical layering of printed pages. Level 1 (Base/Surface): no shadow; elements sit flush on the white background. Level 2 (Cards & Inputs): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a subtle lift that signals interactivity without visual heaviness. Level 3 (Dropdowns, Modals, Popovers): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), providing clear separation and focus. The shadow blur radius (8px to 24px) and spread (0px) are calibrated to suggest a light source positioned above and slightly forward, consistent with

Shapes

The shape philosophy is 'Refined Minimalism'—subtle rounding that softens the grid without compromising structure. Buttons and inputs use rounded: DEFAULT (0.5rem / 8px) for a gentle, approachable feel that avoids the hard edges of print design while remaining distinctly digital. Cards and larger containers use rounded: md (0.75rem / 12px) to create visual distinction from buttons and suggest containment. Modals and dropdowns use rounded: lg (1rem / 16px) to emphasize their elevated status and create a sense of enclosure. The select dropdown panel uses border-radius: 4px (matching the observed

Components

Action Elements Buttons are the primary interaction mechanism. button-primary uses background-color: {colors.primary} (#C41E3A), text-color: white, padding: 12px 24px, height: 44px, and rounded: DEFAULT (8px). On hover, the background transitions to #a01729 (a 20% darker shade) over 200ms, providing clear feedback without animation jank. button-secondary uses a transparent background with a 1px border in primary color and the same text color; on hover, it fills with primary-container (#f5e6e8) and text shifts to on-primary-container (#8b1428), creating a 'reveal' effect. button-ghost has no border or background; it relies on typography (label-md, 600 weight) and text color (on-surface) for definition, and on hover fills with surface-container (#e9ecef). All buttons use cursor: pointer

Do's and Don'ts

**Do**

• Do use primary (#C41E3A) exclusively for CTAs, active states, and critical interactive elements—never for body text or backgrounds.
• Do maintain a minimum line-height of 1.5 for all serif body text (Times New Roman at 16px = 24px line-height minimum) to ensure readability.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to all interactive elements (cards, buttons, inputs) to signal clickability.
• Do use Georgia serif for headlines and display text to reinforce editorial authority; reserve Arial sans-serif for UI labels and metadata only.
• Do respect the 1280px container max-width and 12-column grid to maintain consistent rhythm and prevent line lengths from exceeding 80 characters.

**Don't**

• Don't use primary color for body text, backgrounds, or non-interactive elements—it dilutes the signal and exhausts the accent.
• Don't apply rounded corners larger than lg (16px) to buttons or inputs; the design is Editorial Classicism, not playful or casual.
• Don't use shadows darker than rgba(0, 0, 0, 0.15) or blur radii larger than 24px; the aesthetic is high-key and clean, not dramatic.
• Don't mix serif and sans-serif typefaces within a single headline or body paragraph; maintain clear functional separation (serif for content, sans-serif for UI).
• Don't animate transitions faster than 150ms or slower than 300ms; the brand voice is authoritative and decisive, not leisurely or frenetic.