Repubblica Design System Deep-Dive

1. Brand Overview

Repubblica’s design is what happens when a legacy news brand decides to keep its gravitas but still nod to contemporary web norms. This is a high-density news layout — lots of text, lots of vertical stacking — but wrapped in a sharp and consistent typographic identity. The typography is a clear anchor: “Eugenio Serif” and “Eugenio Sans Text” drive the entire interface, from headlines to navigation, keeping the editorial tone serious and refined.

Color-wise, they’re not afraid of neutral dominance. A lot of white (#ffffff), strong deep greys (#5a5a5a, #222222), with the occasional punch of saturated accent — the primary blue (#4B88CA) is unmistakably the CTA color. Orange accents (#f75b00, #f59015) are also in play, but used sparingly, mostly to highlight category tags or certain link states. This isn’t a playful palette; this is grounded, deliberate, and very much "newsprint translated to pixels."

The design feels built for readers who value structure and clarity. The 8px spacing grid confirms it — consistent vertical rhythm everywhere, no odd gaps. Border radii are mostly small (3px, 4px, 8px), except for the exaggerated pill shapes (100px radius) on primary buttons. That balance — utilitarian system-wide geometry with occasional extreme shapes — separates interactive elements from static content.

You won’t find skeuomorphic shadows here, just the occasional offset black shadow for emphasis (rgb(0,0,0) 4px 4px 0). Most depth cues come from borders, usually subtle 1px lines in neutral colors.

Repubblica clearly designs for a dense content environment with minimal distractions. The typographic system is rich, the color system is restrained, and the interaction elements are handled with care. This is for readers who want the editorial voice uninterrupted, but still appreciate modern affordances like responsive spacing and touch-friendly buttons.

2. Color System

2.1 Primary Colors

The primary blue #4B88CA is their semantic brand token (--cookiewall-primary-color). It’s used on the main CTA buttons, certain link states, and as the occasional highlight in components like cookie banners. Psychologically, this color reads as trustworthy and stable — not too saturated to be brash, but strong enough to stand out in a grid of black text and white backgrounds. Against competitors like Il Corriere della Sera (even more monochrome) or La Stampa (more liberal with reds), Repubblica’s blue differentiates as a calm, authoritative accent.

2.2 Complete Palette

Note: Multiple RGB definitions appear in components for borders — these are functional tokens not named in the semantic palette.

2.3 Color Relationships

The palette is functional more than expressive. White backgrounds with black or deep grey text score very high contrast (WCAG AAA easily). Primary blue on white also meets AAA for large text and at least AA for normal text sizes. Orange (#f75b00) is high contrast on white, but it’s more an accent than an interactive primary.

There’s no dark mode in use — everything is optimized for a bright, white background. Accent colors do not bleed into backgrounds except for occasional tints like #e7f1ff.

2.4 Usage Guide

Do use:

• #4B88CA only for primary actions and important CTAs.
• Neutrals (#5a5a5a, #222222) for typography and borders.
• Orange accents (#f75b00, #f59015) to differentiate editorial categories.

Avoid:

• Using both orange accents in the same element — they will compete.
• Blue for anything non-interactive — dilutes CTA impact.
• Overuse of saturated colors — this palette is designed to keep content dominant.

3. Typography

3.1 Font Families

Two primary font families dominate:

• Eugenio Serif (custom, fallback: "Eugenio Serif Fallback") — main editorial headlines and sometimes links.
• Eugenio Sans Text (custom, fallback: "Helvetica Neue, Helvetica") — UI text, secondary headings, metadata.

There’s also Helvetica Neue and Georgia for certain captions.

Sources: No Google Fonts or Adobe Fonts detected — these are likely self-hosted custom fonts.

3.2 Type Scale

(Only a subset shown here; full dataset has >80 styles in the source JSON.)

3.3 Hierarchy

They use tight steps between headline sizes — 38 → 32 → 26 → 22 — which helps in a content-dense environment. Serif headlines signal editorial weight, sans for interface clarity. Small caps and uppercase transformations are used in UI metadata to differentiate from body copy.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px. Confirmed by values like 4px, 8px, 12px, 16px, 24px, 32px. No oddball 7px margins.

4.2 Layout

Breakpoints: 767px and 768px — standard tablet split. Likely mobile-first with max 1-column text on mobile, multiple columns on desktop. No explicit container max widths in extracted data, but spacing confirms an 8px grid alignment across breakpoints.

5. Visual Elements

Border Radius

Extremes (100px, 50%) are saved for high-emphasis clickable elements.

Shadows

Only one style found: rgb(0, 0, 0) 4px 4px 0px 0px. No blur — just hard offset, almost like old-school drop shadows for emphasis.

Borders

1px solid, neutral tones everywhere. They use varied RGB grays for subtle differences between sections (#e9e9e9, #cecece, #5a5a5a, #e9e9ee). Function over decoration.

6. Components

6.1 Buttons

Primary CTA (cookie banner):

• Default: background #4B88CA, text white, padding 12px 32px, border-radius 100px, border 1px solid #4B88CA.
• Hover: background black.
• Font: 14px, weight 400.

That massive radius is a visual cue — “click me.” No active or focus in extracted data; could be handled by browser defaults.

6.2 Links

Several states:

• Deep grey (#5a5a5a) with underline for editorial links.
• Black (#000000) bold for navigation.
• Orange (#f75b00) or yellow (#FFD244) for categories.
• Always text-decoration: none except certain default states.

Hover states mostly not defined in CSS; likely handled globally by browser or JS.

6.3 Forms

Inputs use:

• Background white, border 1px solid either light grey (#e9e9ee) or black (#000).
• Border-radius 3px.
• Padding 6px 45px 6px 12px — space for icon inside.
• Text colors: #4d4d4d or #666363.

No custom focus styles found — odd omission for accessibility.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-primary: #4B88CA;
  --color-white: #ffffff;
  --color-dark-grey: #5a5a5a;
  --color-near-black: #222222;
  --color-orange-1: #f75b00;
  --color-orange-2: #f59015;
  --color-dark-neutral: #484646;
  --color-light-grey-1: #cecece;
  --color-light-grey-2: #e9e9e9;
  --color-light-blue-tint: #e7f1ff;
  --color-medium-grey: #333333;
  --color-yellow-accent: #FFD244;
  --color-light-grey-form: #e9e9ee;
  --color-black: #000000;

  /* Typography - font families */
  --font-serif: "Eugenio Serif", "Eugenio Serif Fallback";
  --font-sans: "Eugenio Sans Text", "Helvetica Neue", Helvetica;
  --font-georgia: Georgia, Times, "Times New Roman";

  /* Spacing */
  --space-3: 3px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;

  /* Border Radius */
  --radius-none: 0;
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-xxl: 55px;
  --radius-full-btn: 100px;
  --radius-circle: 50%;

  /* Shadow */
  --shadow-offset-black: 4px 4px 0px 0px rgb(0,0,0);
}

8. AI Coding Assistant Prompt

# Repubblica Design System Specification

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

## Brand Context
Repubblica’s UI is built for dense editorial content. A restrained color palette dominated by neutrals, coupled with sharp serif headlines and clean sans-serif UI text. Minimal shadows, functional borders, and an 8px spacing grid keep everything precise.

## Color Palette
- Primary Blue: #4B88CA — CTAs, primary buttons
- White: #ffffff — Page background
- Dark Grey: #5a5a5a — Header text, body text
- Near Black: #222222 — Strong headings
- Orange Accent 1: #f75b00 — Category tags, highlight links
- Orange Accent 2: #f59015 — Secondary highlight
- Dark Neutral: #484646 — Secondary text, icons
- Light Grey 1: #cecece — Dividers
- Light Grey 2: #e9e9e9 — UI backgrounds
- Light Blue Tint: #e7f1ff — Info boxes
- Medium Grey: #333333 — Cookie header
- Yellow Accent: #FFD244 — Special links
- Light Grey Form: #e9e9ee — Input borders
- Black: #000000 — Text, hover states

## Typography
Fonts:
- Headings: "Eugenio Serif", "Eugenio Serif Fallback"
- UI Text: "Eugenio Sans Text", "Helvetica Neue", Helvetica
- Captions: Georgia, Times, "Times New Roman"

### Type Scale
| Level | Font | Size | Weight | Line Height | Use |
| H1 large | Eugenio Serif | 38px | 500 | 1.11 | Main headlines |
| H1 medium | Eugenio Serif | 32px | 500 | 1.19 | Section titles |
| H2 | Eugenio Serif | 26px | 500 | 1.15 | Article titles |
| H3 | Eugenio Serif | 22px | 300 | 1.18 | Subheadings |
| Body | Eugenio Sans Text | 20px | 500 | 1.20 | Primary content |
| Button | Eugenio Sans Text | 14px | 400 | 1.20 | CTA labels |
| Caption | Georgia | 12px | 400 | 1.33 | Metadata |

## Spacing & Grid
Base: 8px grid
Scale: 3px, 4px, 6px, 8px, 12px, 16px, 24px, 32px, 40px
Map:
- Button padding: 12px vertical, 32px horizontal
- Card padding: 16px–24px
- Section gaps: 32px+

## Border Radius
- none: 0 — tables, hard-edged elements
- xs: 3px — inputs
- sm: 4px — small buttons
- md: 8px — cards, images
- lg: 16px — div containers
- xl: 24px — pill-like links
- round: 55px — special button shapes
- full: 100px — primary CTA buttons
- circle: 50% — avatars

## Shadows & Depth
- Offset shadow: rgb(0,0,0) 4px 4px 0px 0px — emphasis only
Flat otherwise; use borders for separation.

## Component Specifications

### Primary Button
```css
.btn-primary {
  background-color: #4B88CA;
  color: #ffffff;
  padding: 12px 32px;
  border-radius: 100px;
  border: 1px solid #4B88CA;
  font-size: 14px;
  font-weight: 400;
  box-shadow: none;
}
.btn-primary:hover {
  background-color: #000000;
}
```

### Link
```css
a {
  color: #5a5a5a;
  text-decoration: underline;
}
```

### Input Search
```css
input[type="search"] {
  background-color: #ffffff;
  color: #4d4d4d;
  border: 1px solid #e9e9ee;
  border-radius: 3px;
  padding: 6px 45px 6px 12px;
}
```

## Layout & Responsive Rules
Breakpoints:
- Mobile: < 767px
- Tablet: 768px+
Keep all spacing in multiples of 8px.

## Interaction Rules
- Transition timing: 150ms ease for hover state changes
- Focus indicators: maintain default OS focus ring unless overridden with visible outline.

## DO List
- Use only defined colors
- Keep 8px spacing grid
- Use Eugenio Serif for headings
- Apply full-radius (100px) only to primary buttons
- Keep shadows minimal

## DON'T List
- Avoid blending both orange accents on a single element
- Don’t use blue for non-interactive elements
- Don’t mix rounded and sharp corners arbitrarily
- Avoid custom fonts outside the system

## Code Examples

Primary Button:
```css
.btn-primary {
  background-color: #4B88CA;
  color: #fff;
  padding: 12px 32px;
  border-radius: 100px;
  border: 1px solid #4B88CA;
}
```

Card:
```css
.card {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #e9e9e9;
}
```

Form Input:
```css
.input {
  border: 1px solid #e9e9ee;
  border-radius: 3px;
  padding: 6px 45px 6px 12px;
}
```

9. Summary

TL;DR: Repubblica’s design system is content-first: neutral-heavy palette, serif headlines, sans UI text. Functional borders, minimal shadows, strict 8px spacing grid. Primary blue CTA buttons are the loudest UI element — everything else is in service of readability.

Brand Keywords:

• editorial-authority
• neutral-dominant
• typographic-consistency
• flat-functional
• blue-accent