Le Parisien Design System: Metro-Tight UI Patterns

Alright — let's break down Le Parisien's design system, pixel by pixel, and turn it into something a designer or developer can work with without guessing.

1. Brand Overview

Le Parisien is a French news brand with a distinct metropolitan voice. It’s deeply tied to its identity as a daily paper, but their digital presence shows they’ve learned how to work in the modern UI landscape without losing that authority.

The vibe: trustworthy, clear, and functional, but not cold. Their brand palette immediately reads as a mix of “serious news” and “French civic” blue. There’s no over-polished gradient fluff — they go for flat colors, subtle radii, and typography that still nods to print.

The design philosophy revolves around legibility, hierarchy, and modularity. The choice of GraphikCondensed and GraphikCompact for UI and headlines keeps things tight and efficient — good for fitting dense content without killing readability. Georgia and Times show up for body text and certain content modules, bringing in that traditional newspaper texture.

Audience? People who want news fast but still appreciate structure. There’s no fake minimalism here — they use lines, dividers, and pill-shaped buttons unapologetically. Components feel intentionally separated; spacing is on a strict 8px grid, which helps the site avoid that messy blog look. The 8px discipline is strong across all UI elements.

From a dev point of view, if you follow their rules — stick to the scale, keep colors within their palette, maintain the typography hierarchy — you’ll get a UI that feels like Le Parisien instantly.

2. Color System

2.1 Primary Colors

The main brand color is #1ea0e6 (rgb(30, 160, 230)). It’s their CTA blue — used for buttons, link hovers, and selected states. This is a crisp, energetic blue — bright enough for engagement, but not neon. Psychologically, it says “trustworthy, modern, active.” Compare it to a competitor like Le Monde, which uses darker blues — Le Parisien’s choice feels more digital-native and mobile-first.

Primary text color is #192024 (rgb(25, 32, 36) — deep blue-grey), giving more warmth than pure black. Subtle difference but important: it makes white backgrounds less stark.

2.2 Complete Palette

2.3 Color Relationships

They maintain high contrast for accessibility — #1ea0e6 on white is ~4.15:1 (barely passes normal AA, not AAA). Body text (#192024 on white) is high (~14:1). Background neutrals help maintain separation without excess boldness.

Dark mode? No explicit data here — the palette is light-oriented.

2.4 Usage Guide

• Primary Blue (#1ea0e6) only for interactive elements — buttons, links, selected tabs.
• Text should default to #192024 for readability.
• Avoid mixing category colors in single modules unless they’re tags — clutter risk.
• White (#ffffff) works as inverse text only on deep colors.
• Border Gray (#78909c) keeps structures light — avoid overuse for heavy containers.

3. Typography

3.1 Font Families

• GraphikCondensed — heading and links, fallback Arial.
• GraphikCompact — UI labels, captions, buttons, fallback Arial / “Graphik Compact Web.”
• Georgia — body text for articles, fallback serif.
• Times — occasionally for body text and certain link contexts.

No Google/Adobe fonts detected — likely self-hosted.

3.2 Type Scale

3.3 Hierarchy

Headlines are large and condensed — they fit long French titles. Article body sits at 18–19px Georgia, which breathes well against tight UI labels. Buttons default to GraphikCompact at 14px or 16px — keeps them crisp.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid. Common increments:

4.2 Layout

Breakpoints across mobile, tablet, desktop:

• Mobile: 480px, 640px
• Tablet: 740px–1020px
• Desktop: 1136px, 1280px, 1440px, 1920px

5. Visual Elements

Border Radius

Pills and circles are common (99px full pill, 50% perfect circle). Cards and content blocks often use 8px rounded corners — slight but noticeable.

Shadows: almost none. They opt for borders for separation. Only faint shadows: rgba(120, 144, 156, 0.25) hairline outlines.

6. Components

6.1 Buttons

Primary (lp-cmp-button)

• Default: bg #1ea0e6, text #ffffff, 8px 16px padding, border-radius 99px, no border.
• Hover: bg #1880b8, border 1px solid #1ea0e6, opacity 0.7.
• Active: text #fff, bg stays brand.
• Focus: outline 0.0625rem solid inverse, opacity 0.8, background transparent.

Secondary (a11y-bar__btn)

• Default: bg #f5f7f8, text #192024, radius 0.
• Hover matches primary style — a bit inconsistent.

Subscription (lp-button--subscription)

• Default: bg #ffcc33, text #192024, padding 0 24px, radius 20px.

Circular Control (lp-control)

• Default: transparent bg, circle, border 1px solid #78909c, size 40px.

Carousel Dot

• Default: bg #192024, circle, border 2px solid #192024.

6.2 Links

Variants:

• Blue (#1ea0e6) with underline.
• Black (#192024) boldened — underline disappears on hover replaced with blue.
• Steel (#527784) muted — underline.
• White (#ffffff) inverse — hover becomes brand blue underline.

6.3 Inputs

Default:

• BG #fff, text #192024, border 1px solid #78909c, radius 28px, padding 24px top/bottom.
• Focus: outline #4d90fe, box-shadow 0 0 1px #2196f3.

7. Design Tokens

:root {
  /* Colors */
  --color-primary-text: #192024;
  --color-primary-blue: #1ea0e6;
  --color-white: #ffffff;
  --color-steel-blue: #527784;
  --color-border-gray: #78909c;
  --color-black: #000000;
  --color-pale-blue-gray: #9fbcc6;
  --color-hover-blue: #4d90fe;
  --color-focus-blue: #005a9c;
  --color-subscription: #fc3;
  /* Typography */
  --font-graphik-condensed: "GraphikCondensed", Arial;
  --font-graphik-compact: "GraphikCompact", Arial;
  --font-georgia: Georgia, serif;
  --font-times: Times, serif;
  /* Spacing */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 18px;
  --radius-xl: 20px;
  --radius-full: 99px;
}

8. AI Coding Assistant Prompt

# Le Parisien Design System Specification

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

## Brand Context
Le Parisien blends traditional newspaper typography with digital clarity. The palette is bright, functional, and tied to journalism. Use strict 8px grid spacing and consistent corner radii.

## Color Palette
- Primary Blue: #1ea0e6 — CTA buttons, active links
- Primary Text: #192024 — Body text, headings
- White: #ffffff — Backgrounds, inverse text
- Border Gray: #78909c — Dividers, outlines
- Steel Blue: #527784 — Secondary text
- Black: #000000 — Logo, icons
- Subscription Yellow: #fc3 — Subscription CTA
- Hover Blue: #4d90fe — Hover accents
- Focus Blue: #005a9c — Focus ring color
... [include all tokens above]

## Typography
Headings: GraphikCondensed, Arial fallback  
UI, buttons: GraphikCompact, Arial fallback  
Body: Georgia / Times

| Level | Size | Weight | Line Height | Use |
| H1 | 64px | 700 | 1.00 | Hero headlines |
| H2 | 36px | 700 | 1.11 | Section headings |
| Label | 14px | 600 | 1.43 | Button labels |
| Body | 18px | 400 | 1.56 | Article text |

## Spacing & Grid
Base unit: 8px.  
Available: 2, 4, 6, 8, 12, 16, 24, 32, 48, 63px.  
Button padding: 8px 16px.  
Card padding: 24px.

## Border Radius
- None: 0px
- sm: 4px — badges
- md: 8px — cards
- lg: 18px — buttons
- pill: 99px — pill buttons
- full: 50% — circles, avatars

## Shadows & Depth
Flat design. Minimal shadows: rgba(120, 144, 156, 0.25) outlines.

## Components

### Primary Button
```css
.btn-primary {
  background-color: #1ea0e6;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 99px;
  border: none;
  font-weight: 600;
  font-size: 14px;
}
.btn-primary:hover {
  background-color: #1880b8;
  border: 1px solid #1ea0e6;
  opacity: 0.7;
}
.btn-primary:focus {
  outline: 1px solid #ffffff;
  opacity: 0.8;
  background-color: transparent;
}
```

### Input
```css
.input {
  background: #ffffff;
  color: #192024;
  border: 1px solid #78909c;
  border-radius: 28px;
  padding: 24px 24px 8px;
}
.input:focus {
  outline: 1px auto #4d90fe;
  box-shadow: 0 0 1px #2196f3;
}
```

## Layout & Responsive
Mobile <= 640px, Tablet 740px–1020px, Desktop >= 1136px.

## Interaction Rules
- Transition timing: 150ms ease
- Focus indicators: visible outlines with brand colors

## DO
- Use brand colors only
- Keep spacing multiples of 8px
- Maintain consistent corner radii
- Use GraphikCondensed for headings
- Use Georgia for body

## DON'T
- Add drop shadows
- Mix unrelated category colors
- Use arbitrary font weights

9. Summary

TL;DR: Le Parisien’s system is strict but flexible — blue CTAs, condensed headings, Georgia body, 8px grid, flat edges with subtle radii. Follow it and you’ll get a UI that screams “French metropolitan newsroom.”

Brand Keywords:

• civic-modern
• news-authority
• metro-tight
• strict-grid