Lemonde Design System: Heritage Meets Digital Precision

1. Brand Overview

Le Monde, and specifically the English edition site, is a masterclass in editorial interface design for a legacy news brand in the digital age. The vibe? Serious. Authoritative. Measured. This is not a startup trying to dazzle you with gradients and microinteractions—it's a platform designed to make you read, think, and trust.

The design philosophy is rooted in typographic authority. The mix of serif and sans-serif is deliberate: The Antiqua B carries the weight of heritage print journalism, while Marr Sans and its condensed variants keep the UI modern, compact, and efficient. Headlines feel like they belong in a broadsheet, but the navigation and widgets are clean and contemporary.

Color choices reinforce this. The dominant palette is dark, muted navy-greys (#383f4e, #000b15), anchored by functional neutrals (#e8eaee, #717b8e) and punctuated by a single confident accent: the subscription gold (#ffc700). This gold is used sparingly—only to highlight premium CTAs—so it retains its impact. Links shift to a magenta hover (#d6368f) that feels unexpected but humanises the austere feel.

The site is built to scale across devices, with a breakpoint system that covers everything from tiny phones (319px) up to large desktops (1440px). The 8px spacing scale keeps layouts consistent, while the typography scale is dense—many font sizes between 12px and 32px, each tuned for specific contexts (captions, condensed labels, bold headlines).

This is an interface for readers who value structure over flash. It avoids gratuitous shadows (only a couple subtle insets exist), uses thin borders to separate content blocks, and keeps border radii minimal (3px on buttons, occasionally 10px on cards). The result: a design language that feels both print-like and digital-native.

If you’re designing for news, this is a case study in restraint. Every color and type choice is doing work. There’s no fluff. And I love that.

2. Color System

2.1 Primary Colors

The brand’s hero color is gold (#ffc700)—used for premium subscription CTAs. This is the only warm tone in the palette, which otherwise leans cool and muted. Gold here signals value, exclusivity, and heritage. It’s a smart move: unlike the blues and reds common in news sites, this gold is unique in the competitive set (BBC uses red, NYTimes uses black, The Guardian uses blue).

The core text and interface color is storm navy (#383f4e)—a dark, desaturated blue-grey that feels formal and stable. Paired with white (#ffffff) for high contrast, it ensures readability while keeping the mood serious.

2.2 Complete Palette

2.3 Color Relationships

The palette is essentially triadic in feel:

• Primary UI: Navy greys (#383f4e, #000b15)
• Functional neutral: Greys (#e8eaee, #d5d8dc, #717b8e)
• Accents: Gold (#ffc700), blue (#026b9c), magenta hover (#d6368f)

Contrast is generally high—white on navy is AAA-compliant. Gold on navy just passes WCAG AA for large text, but wouldn’t work for small text without bold weight. Magenta hover on navy is fine for emphasis but borderline on accessibility for small sizes.

2.4 Usage Guide

• Primary actions: Use gold (#ffc700) with storm navy text.
• Secondary actions: Use ocean blue (#026b9c) with white text.
• Text: Storm navy (#383f4e) on white or light grey backgrounds.
• Links: Default storm navy; hover magenta (#d6368f).
• Backgrounds: White (#ffffff) or light grey (#e8eaee) for content, deep midnight (#000b15) for footers.
• Avoid using gold for decorative elements—it’s reserved for CTAs.
• Don’t pair magenta with gold; the clash is harsh and off-brand.

3. Typography

3.1 Font Families

Three main families:

• The Antiqua B: Serif, heritage-driven. Fallbacks: Georgia, Droid-serif. Used for headlines, some links.
• Marr Sans: Sans-serif, modern. Fallbacks: Marr Sans cmp, Helvetica, Arial, Roboto. Used for body, UI.
• Marr Sans Condensed: Narrow sans. Fallbacks: DINCondensed-Bold, Roboto Condensed, Arial Narrow. Used for tight labels, navigation.
• Marr Sans Medium and Helvetica Neue appear for specific UI contexts.
  No Google or Adobe font sources detected—these are custom/licensed fonts.

3.2 Type Scale

3.3 Hierarchy

Headlines swing between The Antiqua B for gravitas and Marr Sans Condensed for space efficiency. The condensed uppercase styles scream "section label" in a way that’s both bold and economical. Body and captions stick to Marr Sans variants for clarity on screens. The sheer number of font sizes means hierarchy is tightly tuned—there’s no lazy scaling; every level is intentional.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px scale. Multiples and sub-multiples used extensively.

4.2 Layout

Breakpoints cover: 319, 320, 340, 359, 360, 374, 375, 479, 480, 566, 567, 575, 576, 577, 767, 768, 769, 1023, 1024, 1025, 1199, 1200, 1352, 1440px.
This is granular: they’re clearly tuning layouts for specific device widths, not just "mobile/tablet/desktop". Content width likely maxes at ~1352–1440px.

5. Visual Elements

• Border Radius:

  • 3px: Buttons, badges.
  • 10px: Occasional cards/divs.
  • 50%: Circular avatars/icons.
    Minimal rounding keeps the aesthetic sharp.

• Shadows:
  Only seen as subtle insets: rgb(245,246,248) 1.5px 0px 0px 0px inset, ... — used to separate scrollable areas. No drop shadows—flat design preference.

• Borders:
  Heavy use of 1px solid dividers in greys (#e2e4e9, #d5d8dc, #a4a9b4). Borders often on top edges only (1px 0 0).

6. Components

6.1 Buttons

Premium (Gold) Button
Default: bg #ffc700, text #383f4e, padding 7px 15px, radius 3px, border 1px solid #ffc700, font-size 13px.
Hover: bg #f5f6f8, text #026b9c, border transparent, opacity 0.8.
Active: bg #ecf3fe, text #005b85.
Focus: outline 0.

Footer CTA
Default: transparent bg, text #e8eaee, padding 24px 0, no border, font-size 13px. Hover: text var(--lmd-color-storm-content-dark-hover).

GDPR Blue Button
Default: bg #026b9c, text white, padding 0 24px, radius 3px, border none, font-size 16px.
Hover: bg #f5f6f8, text #026b9c, opacity 0.8.
Active: bg #ecf3fe.

6.2 Links

Multiple variants: storm navy, deep ocean, light grey, white, off-white, ocean blue.
Hover across all: underline, color shifts to magenta (#d6368f).

6.3 Forms

No text inputs in extracted data—likely standard browser styles with brand borders.

6.4 Cards

Borders (1px solid rgba(0,0,0,0.09)), minimal radius (possibly 10px). No shadows.

7. Design Tokens

:root {
  /* Colors */
  --color-storm-navy: #383f4e;
  --color-deep-midnight: #000b15;
  --color-light-grey: #e8eaee;
  --color-white: #ffffff;
  --color-slate-grey: #717b8e;
  --color-soft-divider-grey: #d5d8dc;
  --color-black: #000000;
  --color-charcoal-grey: #454f5f;
  --color-mist: #f5f6f8;
  --color-premium-gold: #ffc700;
  --color-magenta-hover: #d6368f;
  --color-ocean-blue: #026b9c;
  --color-deep-ocean: #005b85;
  --color-light-sky: #ecf3fe;
  --color-divider-grey-light: #e2e4e9;
  --color-divider-grey-mid: #a4a9b4;
  --color-divider-grey-dark: #2a303b;
  --color-divider-grey-pale: #e9f3f7;
  --color-border-transparent-black: rgba(0,0,0,0.09);

  /* Typography */
  --font-antiqua-b: "The Antiqua B", Georgia, Droid-serif;
  --font-marr-sans: "Marr Sans", Helvetica, Arial, Roboto;
  --font-marr-sans-condensed: "Marr Sans Condensed", DINCondensed-Bold, Roboto Condensed, Arial Narrow;
  --font-marr-sans-medium: "Marr Sans Medium", Roboto;
  --font-helvetica-neue: "Helvetica Neue", Helvetica, Arial, Roboto;
  --font-arial: Arial;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-7: 7px;
  --space-8: 8px;
  --space-10: 10px;
  --space-11: 11px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-52: 52px;
  --space-76: 75.9844px;
  --space-120: 119.984px;
  --space-132: 132.422px;
  --space-173: 172.859px;
  --space-200: 199.531px;

  /* Border Radius */
  --radius-sm: 3px;
  --radius-md: 10px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-inset-light: rgb(245,246,248) 1.5px 0px 0px 0px inset, rgb(245,246,248) -1.5px 0px 0px 0px inset;
}

8. AI Coding Assistant Prompt

# Lemonde Design System Specification

You are a Lemonde design expert. Build UIs matching their visual language exactly.

## Brand Context
Le Monde's English site is a serious, authoritative news interface. It blends heritage serif typography with modern sans-serif UI, uses muted navy-greys for structure, and reserves gold for premium actions. Minimal shadows, thin dividers, and an 8px spacing grid keep layouts disciplined.

## Color Palette
- Storm Navy: #383f4e — Primary text, headers, nav links
- Deep Midnight: #000b15 — Footer backgrounds, dark UI sections
- Light Grey: #e8eaee — Section backgrounds, dividers
- White: #ffffff — Body background, text on dark
- Slate Grey: #717b8e — Secondary text
- Soft Divider Grey: #d5d8dc — Borders, separators
- Black: #000000 — Icons, strong text
- Charcoal Grey: #454f5f — UI labels
- Mist: #f5f6f8 — Light panels
- Premium Gold: #ffc700 — Subscription buttons
- Magenta Hover: #d6368f — Link hover
- Ocean Blue: #026b9c — Secondary CTAs, GDPR buttons
- Deep Ocean: #005b85 — Active state text
- Light Sky: #ecf3fe — Button active backgrounds
- Divider Grey Light: #e2e4e9 — Content separators
- Divider Grey Mid: #a4a9b4 — Section dividers
- Divider Grey Dark: #2a303b — Nav dividers
- Divider Grey Pale: #e9f3f7 — Section separators
- Transparent Black 9%: rgba(0,0,0,0.09) — Card borders

## Typography
Fonts:
- Headings serif: "The Antiqua B", Georgia, Droid-serif
- Body sans: "Marr Sans", Helvetica, Arial, Roboto
- Condensed labels: "Marr Sans Condensed", DINCondensed-Bold, Roboto Condensed, Arial Narrow
- Medium weight: "Marr Sans Medium", Roboto
- Alt UI: "Helvetica Neue", Helvetica, Arial, Roboto

Sizes/Weights:
| Context | Font | Size | Weight | Line Height |  
| heading-1 | Marr Sans | 32px | 600 | 1.13 |  
| heading-1 | The Antiqua B | 28px | 800 | 1.14 |  
| ... (include all extracted sizes here) ...

## Spacing & Grid
Base: 8px grid. Tokens: 1px, 2px, 3px, 4px, 7px, 8px, 10px, 11px, 12px, 16px, 20px, 24px, 32px, 40px, 52px, 75.9844px, 119.984px, 132.422px, 172.859px, 199.531px.

Use cases:
- 7px: premium button vertical padding
- 10px: button horizontal padding
- 24px: card padding
- 52px: modal inner spacing

## Border Radius
- sm: 3px — Buttons, badges
- md: 10px — Cards
- full: 50% — Avatars

## Shadows & Depth
Flat design. Use borders instead of drop shadows. Only use inset light shadow for scroll containers.

## Component Specifications

### Primary Button (Gold)
Default: bg #ffc700, color #383f4e, padding 7px 15px, radius 3px, border 1px solid #ffc700, font-size 13px, font-weight 400.  
Hover: bg #f5f6f8, color #026b9c, border transparent, opacity 0.8.  
Active: bg #ecf3fe, color #005b85.  
Focus: outline 0.

### GDPR Blue Button
Default: bg #026b9c, color #ffffff, padding 0 24px, radius 3px, border none, font-size 16px, font-weight 500.  
Hover: bg #f5f6f8, color #026b9c, opacity 0.8.  
Active: bg #ecf3fe.

### Links
Default: storm navy (#383f4e), no underline. Hover: underline, color magenta (#d6368f).

## Layout & Responsive Rules
Breakpoints: 319, 320, 340, 359, 360, 374, 375, 479, 480, 566, 567, 575, 576, 577, 767, 768, 769, 1023, 1024, 1025, 1199, 1200, 1352, 1440px.

## Interaction Rules
Transitions: 150ms ease for hover/active changes. No animated shadows. Focus indicators: color change or border.

## DO List
- Use only colors from the palette
- Maintain 8px grid
- Serif for headlines, sans for body
- Gold only for premium CTAs
- Magenta only for link hover

## DON'T List
- No drop shadows
- No mixed corner styles
- Avoid using gold for non-interactive elements
- Don’t invent new colors

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #ffc700;
  color: #383f4e;
  padding: 7px 15px;
  border-radius: 3px;
  border: 1px solid #ffc700;
  font-size: 13px;
  font-weight: 400;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: #f5f6f8;
  color: #026b9c;
  border: 1px solid transparent;
  opacity: 0.8;
}
.btn-primary:active {
  background: #ecf3fe;
  color: #005b85;
}
```

GDPR Button:
```css
.btn-gdpr {
  background: #026b9c;
  color: #ffffff;
  padding: 0 24px;
  border-radius: 3px;
  border: none;
  font-size: 16px;
  font-weight: 500;
}
.btn-gdpr:hover {
  background: #f5f6f8;
  color: #026b9c;
  opacity: 0.8;
}
```

Card:
```css
.card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.09);
  border-radius: 10px;
  padding: 24px;
}
```

9. Summary

TL;DR — Le Monde’s English site is a disciplined editorial UI: muted navy-greys, heritage serif headlines, minimal rounded corners, and gold only for premium CTAs. An 8px grid keeps spacing consistent, and interaction design is subtle, with hover states relying on color shifts and underlines.

Brand Keywords: heritage-modern, muted-authoritative, print-digital, grid-disciplined, CTA-gold