El País Design System Deep Dive

1. Brand Overview

El País is Spain’s flagship newspaper, but the brand’s online design language is not about nostalgia—it’s about sharp, serious editorial authority. You immediately feel the tone: high-contrast typography, restrained color use, and a grid that respects hierarchy. This isn’t a playful news site. It’s built for credibility.

The vibe is decidedly print-inspired. You see it in the typography: custom MajritTx and MarcinAntB fonts that read like updated serif faces from traditional newspapers. Headlines are bold, compact, and tightly spaced—giving news urgency. Body text is lighter but still firm. They’ve kept Arial around for functional UI and captions, probably for clarity in small sizes.

Color is minimal: black, deep grays, and almost no bright tones. The only “pop” comes from functional blues in hover states and a gold (#f7cf3c) accent on certain buttons. This restraint reinforces seriousness. It also keeps the user’s eye on content, not decoration.

Spacing follows a tight 8px grid, but with frequent small offsets like 5px and 7px. That’s not accidental—this is a print-heritage quirk. In newspapers, spacing is dictated by column widths and font metrics, not purely modular scales. On the web, they’ve translated that into a hybrid system: mostly 8px multiples, but flexible when typography demands it.

The overall philosophy: content first, interactions second. Borders are thin and deliberate—solid black or subtle gray dividers mark sections. Shadows exist but are rare, used sparingly for overlays. Buttons are utilitarian, often pill-shaped for consent dialogs and rectangular for in-site actions.

If you’re a designer, the lesson here is: El País doesn’t chase trends. It builds trust with typographic authority, minimal color, and a grid that feels editorial rather than app-like. This works because the brand’s core product—news—demands clarity and seriousness. They nailed that balance.

2. Color System

2.1 Primary Colors

Primary is black (#000000). Not “almost black”—real black. This is the anchor for text, borders, and navigation. It’s paired with a dark gray (#666666) for secondary text and neutral states. Blue exists (#4d90fe and #005fcc) but only in interactive states—hover/focus. There’s a standout gold (#f7cf3c) for certain UI buttons (subscription, highlight actions).

Compared to competitors like The Guardian (which uses more blues and yellows in branding), El País is colder and more monochrome. It’s closer to The New York Times’ palette but with less warm gray. The psychology is simple: black = authority; minimal color = focus on words.

2.2 Complete Palette

2.3 Color Relationships

Black (#000000) on white background easily passes WCAG AAA for contrast. Dark gray (#666666) on white is fine for secondary text (contrast ratio ~5.3:1). Blue accents (#4d90fe/#005fcc) over white are accessible for interactive states, though the lighter blue is borderline for small text—use it for larger elements or underline links for clarity.

The gold (#f7cf3c) is tricky: on white, it’s fine; on black, contrast is ~5:1, which is okay. They don’t use it for text—only for filled buttons—so it’s safe.

No dark mode. All colors are tuned for light backgrounds.

2.4 Usage Guide

• Primary text: #000000, no opacity.
• Secondary text: #666666 for metadata, timestamps.
• Interactive accents: Use #005fcc for focus outlines, #4d90fe for hover states.
• Highlight buttons: Gold (#f7cf3c) only for subscription or key CTAs.
• Avoid combining gold with blue—it clashes with the brand’s restrained palette.
• Use transparent dark (#222222 at 20%) for subtle UI boundaries.

3. Typography

3.1 Font Families

• MajritTx — custom serif, used for most headings and links. No web-safe fallback listed; clearly a brand font.
• MajritTxRoman — lighter variant, used in body and captions.
• MarcinAntB — alternate serif, used in some headings, captions, and buttons.
• Arial — used for captions, buttons, and functional UI text. This is the fallback for small sizes.

No Google or Adobe fonts. These are custom/self-hosted.

3.2 Type Scale

(Dozens more sizes exist—see extracted data for full table.)

3.3 Hierarchy

Headings are heavy (700–900 weight), with tight letter-spacing. This creates density and urgency. Body text is lighter (400–500) but still high contrast. Captions drop to Arial for clarity in small sizes—smart choice, as custom serifs can struggle at 12px.

Line heights are tight compared to modern web defaults. This is intentional—it mimics print column density. You get more text per viewport, which suits a news site.

4. Spacing & Layout

4.1 Spacing Scale

Base unit is 8px, but they use half and odd values: 5px, 7px, 13px. Frequency table:

4.2 Layout

Breakpoints: 320px, 480px, 598px, 600px, 767px, 1022px, 1310px. The odd 598/600 split is likely legacy code + device tuning.

They don’t use a fixed max content width in the data, but 1310px is the largest breakpoint—desktop layout probably caps around that.

5. Visual Elements

Border Radius

• 2px — default for buttons, menus.
• 7px — rare, div-only.
• 13px — medium pill buttons.
• 30px — large pill consent buttons.
• 40px — span elements (unknown usage).
• 50% — circular avatars/icons.

Shadows

Mostly flat. Shadows exist for overlays:

• rgba(0,0,0,0.3) 0px 1px 4px, rgba(0,0,0,0.09) 0px 2px 24px — main overlay shadow.
• Rest are subtle, low count.

Borders

Thin, deliberate. 1px solid black or gray for dividers. Some 3px double borders for sections.

6. Components

6.1 Buttons

Consent Dialog (light pill)
Default: bg #f5f5f5, text #999999, padding 5.6px 11.2px, radius 30px.
Hover: opacity 0.7.

Consent Dialog (dark pill)
Default: bg #0f6da0, text white, padding 5.2px 10.4px, radius 30px.
Hover: opacity 0.7.

Utility Button (transparent)
Default: transparent, text #111111, padding 0, radius 2px.
Hover: opacity 0.7.

Gold Button
Default: bg #f7cf3c, text #111111, padding 5px 8px, radius 2px.
Hover: bg #e2f5f9, text #757575.
Active: bg rgba(255,255,255,0.32).
Focus: bg #f0f5ff, outline #2fabd5 solid 2px.

Blue Button
Default: bg #016ca2, text white, padding 5px 8px, radius 2px.
Hover/Focus same as gold button.

6.2 Links

• Black underline (#000000) — for body content links.
• Bold black (#111111) — nav links, no underline.
• White bold — nav links on dark background.
• Gray (#666666) — muted UI links.
• Heavy black (#222222) — headline links.

Hover styles mostly unchanged—no color shift.

6.3 Forms

No input styles in data—likely native + minimal borders.

6.4 Cards

No explicit card component in data. Cards likely use 20px padding, light gray borders, no shadows.

7. Design Tokens

:root {
  /* Colors */
  --color-dark-gray: #666666;
  --color-black: #000000;
  --color-charcoal: #4a4a4a;
  --color-transparent-dark: rgba(34,34,34,0.2);
  --color-light-gray: #ebebeb;
  --color-blue-bright: #4d90fe;
  --color-blue-deep: #005fcc;
  --color-gold-yellow: #f7cf3c;

  /* Typography */
  --font-majrittx: "MajritTx", serif;
  --font-majrittxroman: "MajritTxRoman", serif;
  --font-marcinantb: "MarcinAntB", serif;
  --font-arial: Arial, sans-serif;

  /* Spacing */
  --space-1: 1px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-12: 12px;
  --space-13: 13px;
  --space-15: 15px;
  --space-20: 20px;
  --space-40: 40px;
  --space-70: 70px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-md: 7px;
  --radius-lg: 13px;
  --radius-xl: 30px;
  --radius-xxl: 40px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-overlay: rgba(0,0,0,0.3) 0px 1px 4px, rgba(0,0,0,0.09) 0px 2px 24px;
}

8. AI Coding Assistant Prompt

# El País Design System Specification

You are an El País design expert. Build UIs matching their visual language exactly.

## Brand Context
El País values editorial authority, clarity, and typographic precision. The design is print-inspired: restrained color, strong serif headlines, minimal decoration. Interactions are subtle—content is the focus.

## Color Palette
- Dark Gray: #666666 — Secondary text, metadata
- Black: #000000 — Primary text, nav, dividers
- Charcoal: #4a4a4a — Tertiary text, timestamps
- Transparent Dark: rgba(34,34,34,0.2) — Subtle borders, overlays
- Light Gray: #ebebeb — Dividers, muted UI backgrounds
- Bright Blue: #4d90fe — Hover accents
- Deep Blue: #005fcc — Focus accents, buttons
- Gold Yellow: #f7cf3c — Accent CTAs

## Typography
- Headings: "MajritTx"
- Body: "MajritTxRoman"
- Alternate: "MarcinAntB"
- UI/Caption: Arial

| Level | Font | Size | Weight | Line Height | Use |
|-------|------|------|--------|-------------|-----|
| H1 | MajritTx | 32px | 700 | 1.15 | Page titles |
| H1 | MajritTx | 30px | 700 | 1.07 | Section headings |
| H1 | MajritTx | 26px | 900 | 1.00 | Highlight headings |
| Body | MajritTxRoman | 26px | 400 | 1.15 | Article text |
| Caption | Arial | 14px | 400 | 1.50 | Metadata |
| Button | MarcinAntB | 11px | 700 | 1.36 | Small UI buttons |

## Spacing & Grid
Base: 8px grid  
Scale: 1px, 4px, 5px, 6px, 7px, 8px, 12px, 13px, 15px, 20px, 40px, 70px  
Use multiples for padding/margin.

## Border Radius
- sm: 2px — default buttons
- md: 7px — rare div
- lg: 13px — medium pill
- xl: 30px — large pill consent
- full: 50% — avatars

## Shadows & Depth
- Overlay shadow: rgba(0,0,0,0.3) 0px 1px 4px, rgba(0,0,0,0.09) 0px 2px 24px  
Flat design elsewhere—use borders for separation.

## Components

### Primary Button (Blue)
Default: bg #016ca2, color #fff, padding 5px 8px, radius 2px, font-weight 700, font-size 11px  
Hover: opacity 0.7, bg #e2f5f9, color #757575  
Focus: bg #f0f5ff, outline #2fabd5 solid 2px  
Active: bg rgba(255,255,255,0.32)

### Secondary Button (Gold)
Same as primary, but bg #f7cf3c, text #111

### Navigation Link
Black, no underline, bold. Hover: no change.

## Layout & Responsive Rules
Breakpoints: 320, 480, 598, 600, 767, 1022, 1310px  
Page padding: multiples of 8px  
Grid gap: 12–20px depending on context

## Interaction Rules
Transition: 150ms ease for hover/focus state changes  
Focus indicators: visible outlines for keyboard nav  
Opacity changes for hover on buttons

## DO List
- Use only defined palette
- Keep spacing to 8px multiples unless 5px or 7px for typographic alignment
- Heavy serif for headings
- Use Arial for captions
- Respect focus outlines

## DON'T List
- Don’t invent new colors
- Don’t add shadows to cards
- Don’t mix corner styles within a single UI
- Don’t remove underlines from body links

## Code Examples

```css
.btn-primary {
  background: #016ca2;
  color: #fff;
  padding: 5px 8px;
  border-radius: 2px;
  font-weight: 700;
  font-size: 11px;
  border: none;
  transition: all 150ms ease;
}
.btn-primary:hover { opacity: 0.7; background: #e2f5f9; color: #757575; }
.btn-primary:focus { background: #f0f5ff; outline: 2px solid #2fabd5; }
.btn-primary:active { background: rgba(255,255,255,0.32); }

.card {
  background: #fff;
  border: 1px solid #ebebeb;
  padding: 20px;
  border-radius: 2px;
}

.input {
  border: 1px solid #ebebeb;
  border-radius: 2px;
  padding: 6px 8px;
  font-size: 14px;
  font-family: Arial, sans-serif;
}
.input:focus { border-color: #005fcc; outline: none; }
```

9. Summary

TL;DR — El País’s design system is print-inspired: tight serif typography, minimal color, strong black text, and subtle UI accents. Everything serves the content.

Brand Keywords:

• editorial-authority
• restrained-color
• typographic-density
• print-inspired
• content-first