Corriere Design System Deep Dive

1. Brand Overview

Corriere’s visual system is something you feel before you measure. It’s news-first, tradition-aware, but not stuck in print-era stiffness. The brand’s design language embodies the weight of legacy Italian journalism with a modern digital twist. Think of it as "newspaper gravitas meets online immediacy."

The vibe is tight, almost typographic-first. Their type choices—custom SolferinoDisplay and SolferinoText families—command attention. Headlines hit hard. Links and metadata sit in condensed Brera fonts, which give that compressed, editorial look. It’s not “friendly,” it’s authoritative. Content leads, UI recedes.

Look at their palette—primary is #49b8f1 (bright, clean sky blue). Not the deep corporate blue you see at financial institutions, nor the muted navy of conservative outlets. This blue has energy. It’s for highlights, links, author tags. The rest of the palette is neutrals: grays from #999999 down to #0a0a0a black. Whites (#ffffff) dominate backgrounds and text in inverse situations. Minimal accent colors mean your eyes stay with the text.

Spacing is structured but not entirely strict. You’ll see multiples of 8px—the classic web grid anchor—but also 5px, 13px, 15px creeping in because editorial layouts don’t always play by pure design-system rules. These “off-grid” spacings make it feel less like a SaaS app and more like a print layout translated to screen.

Buttons carry modest styling—rounded at 4px, 6px, 20px radius depending on function. Hover states often introduce light shadows and subtle borders. Shadows are used sparingly—default to flat, introduce depth only when interaction is key (like hover).

Overall: Corriere’s system isn’t playful. It’s precise. Hierarchy comes from typography weight and size, not from wild color shifts. If you’re designing for them, you use type to guide the reader; color is a secondary signal, spacing holds it together.

2. Color System

2.1 Primary Colors

Primary: #49b8f1 (rgb(73, 184, 241))
This is bright enough to pop on white, maintains decent contrast against light grays, and is instantly recognizable. This works because it’s vivid but not saturated to cartoonish levels—feels journalistic but alive. Compared to other European news outlets, it’s more energetic than Le Monde’s navy, cleaner than La Repubblica’s darker blue.

Secondary: #ffffff
The white secondary keeps the interface clean. It’s omnipresent—used for backgrounds, text inside dark UI elements, and as default button fills.

Neutral stack: multiple grays from #dedede (light) to #0a0a0a (black). These let type and dividers recede while keeping the interface readable.

2.2 Complete Palette

2.3 Color Relationships

Primary blue + white yields excellent contrast (ratio ~3.7:1—just meets WCAG AA for large text, borderline for small). For copy, they wisely keep blue mostly for underlines or small UI elements. On dark text, #49b8f1 easily stands out.

Black on white obviously passes AAA contrast. Grays are used with care—#999999 against white for UI hints is fine; they do not rely solely on it for body text.

Dark mode? Not natively here—the system feels built for light background reading.

2.4 Usage Guide

• Use Primary Blue strictly for interactive or highlighted elements. No using it as a background fill for large sections—too intense.
• Combine black or dark gray for body copy.
• White is the default surface. Don’t put primary blue behind long-form text—readability tanks.
• Avoid pairing #999999 with #dedede—contrast too low for accessibility.
• Use #0a0a0a and #666666 in hierarchies—darker for headings, lighter for secondary info.

3. Typography

3.1 Font Families

• SolferinoDisplay (Bold, Regular, Light, LightItalic) — custom editorial face for headlines/links.
• SolferinoText-Regular — body serif/text face for reading comfort.
• BreraCondensed (semibold, bold, italic, black) — narrow sans/condensed for metadata, buttons, captions.
• Roboto — used occasionally for buttons and labels; fallback is Arial.

No Google Fonts, not Adobe-served—custom hosted.

3.2 Type Scale

Here’s the extracted sizes and contexts:

There’s a LOT more in the dataset—they have micro sizes down to 7px for ultra-small UI text. For editorial, range is huge: 36px down to sub-10px details.

3.3 Hierarchy

Hierarchy here is heavy on weight and face, not just size. Large headlines at 36px are in SolferinoDisplay-Bold—these create a dominant masthead feel. Supporting headings drop to 28px or 24px, often italicized for emphasis. Body text lives in the SolferinoText family, mid-20s px for comfortable reading. Metadata and captions use condensed fonts at 14px or smaller—clear separation from content.

This works because readers can identify “reading content” vs “metadata” instantly. The type scale is varied but coherent—consistent faces per function.

4. Spacing & Layout

4.1 Spacing Scale

Their base scale is officially 8px—but the dataset reveals they mix in 4px and some irregulars. Actual extracted values:

4.2 Layout

Breakpoints are plenty: mobile starts around 300px—lots of granular device-specific widths. Desktop jumps at 1200px. They’re not content with 3-tier responsive; they’ve got stepwise adjustments: 375, 400, 480, 650, 768/769, 992, 1024, 1200px.

5. Visual Elements

Border Radius

They mix small radii for utility components and full circles for avatars/buttons. Extracted:

• 2px — minimal rounding (header boxes)
• 3px — input fields
• 4px — buttons (rectangular buttons)
• 5px — list items
• 6px — buttons (medium rounding)
• 8px — buttons (soft rounded rectangle)
• 10px — feature divs
• 20px — pill buttons
• 50% — perfect circles (icons, avatars)
• 100% — full pill/ellipse backgrounds

Opinion: consistent at the “purpose” level—utility vs branding vs avatar.

Shadow system

Mostly one main shadow: rgba(0, 0, 0, 0.24) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 0px 2px 0px. Used for hover depth.

Other shadows:

• rgba(0, 0, 0, 0.35) — subtle bigger drop
• rgba(10, 82, 120, 0.16) — brand-color tinted depth (buttons in hover)

They avoid heavy shadows on static UI—keeps it light.

Borders

Frequent 1px dividers (bottom borders on headings/sections). Colors: #333333 and #dedede for subtlety. Many “none none solid” patterns—solid bottom only. This mimics print rules—underline or divider under headlines.

6. Components

6.1 Buttons

Three main variants:

Circular Icon Button

• Default: bg rgb(9, 80, 117), white text, padding 0px, radius 50%, no border, opacity 0.25.
• Hover: bg rgba(115, 133, 159, 0.5), text rgba(43, 51, 63, 0.75), shadow rgba(10,82,120,0.16) 0px 4px 8px, border 0.5px solid rgb(10,82,120), opacity 1.

Radius-20 Secondary Button

• Default: bg white, text #999999, padding 0px 15px, radius 20px, border 1px solid #dddddd.
• Hover: same hover pattern as above with brand blue border/shadow.

Primary Solid Button

• Default: bg #0a5278 (rgb(10,82,120)), text white, padding 0px 24px, radius 4px, border same as bg, shadow rgba(10,82,120,0.16).
• Hover: translucent bg, muted text, brand blue border/shadow.

They nailed consistency in hover/focus—shadows only on interaction.

6.2 Links

Seven distinct link color configs:

• White text links in dark headers
• Brand blue (#49b8f1) with underline by default
• Neutral grays (#333, #666) for editorial body
• Accent brown-red (#8a2f2a)—probably for specific section branding
• Deep brand blue (#0a5278) bold links

Hover is consistent: underline + brand dark rgb(9,80,117).

6.3 Forms

Minimal extraction—inputs have 3px radius, 1px borders in light gray. Focus likely introduces color border—similar to hover buttons.

6.4 Cards

Not directly extracted, but deduced: use 8px or 10px radius, light gray borders or subtle shadows on hover.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #49b8f1;
  --color-secondary: #ffffff;
  --color-gray-medium: #999999;
  --color-gray-dark: #666666;
  --color-gray-mid: #7a7a7a;
  --color-gray-light: #dedede;
  --color-black-near: #0a0a0a;

  /* Typography */
  --font-solferino-display-bold: "SolferinoDisplay-Bold";
  --font-solferino-text-regular: "SolferinoText-Regular";
  --font-brera-condensed-semibold: "BreraCondensed-semibold";
  --font-roboto-regular: "Roboto", Arial;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13: 13px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-22: 22px;
  --space-25: 25px;
  --space-30: 30px;
  --space-40: 40px;

  /* Radius */
  --radius-2: 2px;
  --radius-3: 3px;
  --radius-4: 4px;
  --radius-5: 5px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-20: 20px;
  --radius-circle: 50%;
  --radius-full: 100%;

  /* Shadows */
  --shadow-default: rgba(0, 0, 0, 0.24) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 0px 2px 0px;
  --shadow-strong: rgba(0, 0, 0, 0.35) 0px 2px 4px 0px;
  --shadow-brand: rgba(10, 82, 120, 0.16) 0px 4px 8px 0px;
}

8. AI Coding Assistant Prompt

# Corriere Design System Specification

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

## Brand Context
Corriere’s design system is tradition-driven, editorial-first, precise in typography, restrained in color. It favors clarity for news consumption over decorative UI flourishes.

## Color Palette
- Primary Blue: #49b8f1 — links, icons, author highlights
- Secondary White: #ffffff — backgrounds, text on dark UI
- Gray Medium: #999999 — muted button text, secondary info
- Gray Dark: #666666 — body links, metadata
- Gray Mid: #7a7a7a — secondary labels
- Gray Light: #dedede — dividers, tab backgrounds
- Black Near: #0a0a0a — headings, strong text

## Typography
- SolferinoDisplay-Bold — headings, major links
- SolferinoText-Regular — body text
- BreraCondensed — metadata, captions
- Roboto — buttons, fallback; Arial fallback for system

Sizes:
| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1    | 36px | 400    | 1.06        | Page titles |
| H2    | 28px | 400    | 1.06        | Section headings |
| H3    | 24px | 400    | 1.10/1.00   | Subheaders |
| Body  | 22px | 400/700| 1.50        | Articles |
| Meta  | 14px | 400    | 1.50        | Captions, labels |
| Small | 10px | 400    | 1.15        | Fine print |

## Spacing & Grid
Base: 8px  
Scale: 1px, 2px, 4px, 5px, 6px, 7px, 8px, 10px, 12px, 13px, 15px, 16px, 20px, 22px, 25px, 30px, 40px  
Use multiples for padding, margins, and element gaps.

## Border Radius
- sm: 3px — inputs
- md: 4px, 6px, 8px — buttons
- lg: 10px, 20px — cards, pills
- full-circle: 50% — avatars/icons
- full: 100% — pill shapes

## Shadows & Depth
Primary: rgba(0,0,0,0.24) 0px 2px 2px, rgba(0,0,0,0.12) 0px 0px 2px  
Interaction: rgba(10, 82, 120, 0.16) 0px 4px 8px

## Components

### Primary Button
Default: bg #0a5278, text #ffffff, padding 0 24px, radius 4px, border 1px solid #0a5278, shadow brand  
Hover: bg rgba(115,133,159,0.5), text rgba(43,51,63,0.75), border 0.5px solid #0a5278, shadow brand  
Focus: bg rgba(...), opacity 1  
Disabled: keep bg, reduce opacity to 0.25

### Secondary Button
Default: bg #ffffff, text #999999, padding 0 15px, radius 20px, border 1px solid #dddddd  
Hover: same pattern as primary with brand border/shadow

### Icon Button
Circle radius (50%), bg #0a5278, text white, opacity 0.25 default; hover brand shadow, opacity 1

### Navigation Links
Default: color varies (#ffffff, #49b8f1, #333333) no underline  
Hover: underline, color #095075

### Inputs
Border: 1px solid #dedede, radius 3px  
Focus: border-color brand blue

### Card
Bg white, radius 8px or 10px, subtle border #dedede, hover optional shadow

## Layout & Responsive Rules
Breakpoints: 300, 375, 400, 480, 650, 768, 992, 1024, 1200px  
Content padding: multiples of 8px

## Interaction Rules
Transition: 150ms ease for hover/focus states  
Use underline for link hover  
Maintain opacity changes for disabled buttons

## DO
- Use only palette colors
- Maintain 8px-based grid (allow 5px for editorial layouts)
- Assign correct font family per content
- Keep hover/focus patterns consistent
- Use shadows only for interaction

## DON'T
- Invent new colors
- Use brand blue for large backgrounds
- Mix Solferino and Brera faces in same content block
- Remove underline from hovered links

## Code Examples

```css
.btn-primary {
  background: #0a5278;
  color: #fff;
  padding: 0 24px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 15px;
  border: 1px solid #0a5278;
  box-shadow: rgba(10,82,120,0.16) 0 4px 8px;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: rgba(115,133,159,0.5);
  color: rgba(43,51,63,0.75);
  border: 0.5px solid #0a5278;
  box-shadow: rgba(10,82,120,0.16) 0 4px 8px;
}
.link {
  color: #49b8f1;
  text-decoration: underline;
}
.link:hover {
  color: #095075;
}
.card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #dedede;
}
```

9. Summary

TL;DR — Corriere’s system is type-first, color-second. Blue is the accent, white the canvas, grays the glue. Typefaces define hierarchy. Spacing sticks loosely to an 8px rhythm but bends when editorial layout demands it. Shadows are a bonus, not a base.

Brand Keywords:

• editorial-authoritative
• typography-driven
• restrained-palette
• news-focused