Elmundo Brand Design System Deep-Dive

1. Brand Overview

Elmundo.es is one of Spain’s largest and most influential news publications. The brand’s digital design language is rooted in the DNA of traditional editorial layouts but adapted for the fast, click-driven environment of modern online news. You feel the heritage immediately — the typography choices scream “newspaper” while the color palette stays restrained and functional. This isn’t a playful magazine site; it’s a serious news portal that wants to project authority.

The vibe is stark and confident. Black as the primary anchor, serif headline typefaces that echo the printed page, and minimal decoration. Elmundo clearly values clarity over ornamentation. The design system is built to handle dense, information-heavy pages without collapsing into chaos. It’s modular, with a grid and spacing scale that can stretch from mobile to full desktop without losing hierarchy.

This is a brand for readers who want authority and trust. The muted blues and greys used for links and accents are sober — they don’t shout. They guide the eye but never compete with the headlines. Even the buttons are minimal, often flat, with clear text and generous padding only when necessary. It’s a design system that keeps the focus on the content, not the UI.

One thing I noticed: Elmundo’s typography stack is almost schizophrenic in its variety — custom “Mundo” serif, Times, Roboto, Arial, and even Roboto Condensed. This is unusual for a news site; most pick two families max. Here, each type family serves a distinct function — Mundo for headlines, Roboto for UI and captions, Times for heritage cues. This works because the hierarchy is rigid; you never see them randomly swapped.

Overall, Elmundo’s design philosophy: Editorial precision, restrained color, typographic authority, functional UI. It’s a system that supports constant content churn without losing structure.

2. Color System

2.1 Primary Colors

Primary brand color: Black (#000000 / rgb(0,0,0)).

Black is the backbone of printed journalism. Elmundo uses it as the semantic primary — text, logo, borders. This projects authority and makes all other colors secondary. Compared to competitors like El País (which leans on dark grey), Elmundo’s pitch-black is more assertive. It says: "We’re definitive."

Psychology here: black = seriousness, authority, permanence. It’s a safe anchor for a brand that spans digital and print. It also gives maximum flexibility for contrast with white backgrounds and accent colors.

2.2 Complete Palette

From CSS variables:

2.3 Color Relationships

Contrast is generally high. Black text on white background meets WCAG AAA. Accent blues against white are safe, though #2e6d9d is borderline for small text — still passes AA for normal text.

Semi-transparent greys like rgba(112,112,112,0.45) are subtle — fine for meta info but fail WCAG for body text. Elmundo uses them correctly for non-critical content.

No evidence of dark mode support. This palette is tuned for a light background. Semi-transparent whites and greys would invert poorly without adjustment.

2.4 Usage Guide

• Black + White — Default. Always readable. Use for body text and core UI.
• Accent Blue (#2e6d9d) — Use for links in navigation or partner lists. Avoid using it for primary CTAs; it’s too muted.
• Bright Blue (#005fcc) — Reserve for hover/focus states. It pops against white without clashing with the muted palette.
• Semi-transparent Grey (#707070) — Use for metadata, timestamps, non-critical labels. Avoid for headlines.
• Gold (#fcd37c) — Use sparingly. Currently limited to notification highlights.
• Avoid mixing multiple blues in the same component — choose one per context to prevent visual noise.

3. Typography

3.1 Font Families

Elmundo uses a mix:

• Mundo — Custom serif (fallbacks: Times New Roman, Times). Used for headlines, links, captions. This is the brand voice.
• Times — Classic serif. Used for smaller headings and certain captions. Reinforces print heritage.
• Roboto — Sans-serif UI workhorse (fallbacks: Arial, Helvetica). Used for buttons, labels, some links.
• Roboto Condensed — Narrow sans (fallbacks: Tahoma, Geneva). Used where space is tight — captions, small headings.
• Arial — Legacy sans fallback.

No Google Fonts or Adobe Fonts loading — likely custom hosting for Mundo.

3.2 Type Scale

3.3 Hierarchy

The hierarchy is strict: Mundo serif dominates headlines; sans-serifs handle UI. Sizes range from 26px down to 10px for captions. Weight is used aggressively — 800 for big headlines, 700 for buttons, lighter weights for body. Uppercase transforms mark section labels and metadata.

This variety lets them pack dense info without losing hierarchy. The risk is inconsistency, but Elmundo’s rigid mapping of font family to role keeps it stable.

4. Spacing & Layout

4.1 Spacing Scale

Elmundo uses an 8px scale with some fractional values (3.2px, 6.4px). This is a bit odd — fractional pixel spacing is rare, but it’s here, likely for precise alignment.

4.2 Layout

Breakpoints:

• 450px, 480px, 481px, 541px, 600px, 601px, 768px, 960px, 1024px.

They clearly fine-tune for specific device widths, even 1px differences (480 vs 481) — probably to catch quirks in mobile browsers.

5. Visual Elements

Border Radius

Values:

• 1px — Buttons (sharp corners)
• 2px — Links
• 7px — Links
• 50px — Buttons (pill shape)
• 50% — Buttons, images, list items (circular)

Odd mix: most UI is sharp, but certain buttons and avatars go full round.

Shadows

Mostly subtle:

• rgba(0,0,0,0.3) 0px 4px 7px — common drop shadow
• Smaller variants: 0px 1px 3px, 1px 8px 8px
• Rare deeper: 0px 16px 18px at 0.18 opacity
• One inset shadow: -1px -2px 24px -5px at 0.5 opacity

Not shadow-heavy — used sparingly for overlays.

Borders

They use black (#000000) for strong dividers, #cecece and #666 for light dividers. Often asymmetric (top-only, bottom-only).

6. Components

6.1 Buttons

Variant 1 — ue-notice-buttons

• Default: white bg, black text, padding 10px 32px 20px, radius 0px, no border.
• Weight: 400, size: 15px.
• No hover/active defined.

Variant 2 — ue-notice-buttons__btn

• Default: black bg, white text, padding 16px, radius 50px (pill), no border.
• Hover: opacity 0.7.
• Weight: 700, size: 18px.

Variant 3 — js-botonera-toggle

• Transparent bg, black text, padding 0, radius 0, no border.
• Weight: 400, size: 16px.

6.2 Links

Multiple color styles:

• #2e6d9d — bold (700), no underline.
• #707070 — regular (400).
• #0000ee — regular (400).
• White — regular (400).
• Black — semi-bold (600).
• #333333 — semi-bold (600).
• #216087 — regular (400).

No hover states defined in data — likely handled globally.

6.3 Forms

No text inputs, checkboxes, radios, selects in extracted data — likely custom or loaded dynamically.

6.4 Cards

No explicit card component in data, but shadows and spacing suggest overlays and panels use the 0px 4px 7px shadow and 16px/32px padding.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #000000;
  --color-link-blue: #0000ee;
  --color-accent-blue: #2e6d9d;
  --color-dark-grey: #333333;
  --color-light-grey: #707070;
  --color-deep-blue: #216087;
  --color-bright-blue: #005fcc;
  --color-white: #ffffff;

  /* CSS Variable Colors */
  --ue-c-notification-secondary-btn-color: #797979;
  --footer-border-color: #666666;
  --ue-c-notification-list-item-color: #fcd37c;
  --ue-c-notification-tooltip-panel-color: #000000;
  --ue-c-notification-title-color: #597897;
  --seo-links-title-color: hsla(0,0%,44%,.45);
  --footer-about-color: #4a4a4a;
  --footer-divider-color: #a8a8a8;

  /* Typography */
  --font-mundo: "Mundo", "Times New Roman", Times;
  --font-times: Times;
  --font-roboto: Roboto, Arial, Helvetica;
  --font-roboto-condensed: "Roboto_condensed", Tahoma, Geneva;
  --font-arial: Arial;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-3-2: 3.2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-6-4: 6.4px;
  --space-8: 8px;
  --space-10: 10px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-30: 30px;
  --space-32: 32px;
  --space-44: 44px;
  --space-107: 107px;
  --space-140: 140px;

  /* Border Radius */
  --radius-1: 1px;
  --radius-2: 2px;
  --radius-7: 7px;
  --radius-50px: 50px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-md: rgba(0,0,0,0.3) 0px 4px 7px 0px;
  --shadow-sm: rgba(0,0,0,0.3) 0px 1px 3px 0px;
  --shadow-lg: rgba(0,0,0,0.3) 1px 8px 8px 0px;
  --shadow-xl: rgba(0,0,0,0.18) 0px 16px 18px 0px;
  --shadow-inset: rgba(0,0,0,0.5) -1px -2px 24px -5px;
}

8. AI Coding Assistant Prompt

# Elmundo Design System Specification

You are an Elmundo design expert. Build UIs matching their visual language exactly.

## Brand Context
Elmundo is a Spanish news brand with a serious, authoritative tone. The design is editorial, restrained, and rooted in print heritage. Colors are minimal, typography is varied but strictly hierarchical.

## Color Palette
- Primary Black: #000000 — Text, logo, main borders
- Link Blue: #0000ee — Inline hyperlinks
- Accent Blue: #2e6d9d — Navigation links, secondary CTAs
- Dark Grey: #333333 — Secondary text
- Light Grey: #707070 — Metadata, subdued labels
- Deep Blue: #216087 — Section headers, category labels
- Bright Blue: #005fcc — Hover/focus states
- White: #ffffff — Backgrounds, text on dark
- Secondary Btn Grey: #797979 — Secondary button text
- Footer Border Grey: #666666 — Footer dividers
- Notification Gold: #fcd37c — Highlights
- Tooltip Black: #000000 — Tooltip panels
- Notification Title Blue: #597897 — Notification headers
- SEO Title Grey: hsla(0,0%,44%,.45) — SEO link titles
- Footer Text Grey: #4a4a4a — Footer about section
- Footer Divider Grey: #a8a8a8 — Footer separators

## Typography
- Headings: Mundo, Times New Roman, Times
- Body/UI: Roboto, Arial, Helvetica
- Narrow UI: Roboto Condensed, Tahoma, Geneva
- Legacy: Times, Arial

| Level | Font | Size | Weight | Line Height | Use For |
|-------|------|------|--------|-------------|---------|
| H1 | Mundo | 26px | 800 | 1.00 | Main headlines |
| H2 | Mundo | 22px | 800 | 1.10 | Section headlines |
| Body Bold | Mundo | 20px | 600 | 1.20 | Intro text |
| UI Label | Roboto | 15px | 700 | 1.33 | Buttons, controls |
| Caption | Mundo | 12px | 600 | 1.17 | Uppercase meta info |
| Small Caption | Roboto | 10px | 600 | 1.20 | Uppercase micro labels |

## Spacing & Grid
Base: 8px grid with fractional adjustments.
Scale: 1px, 2px, 3px, 3.2px, 4px, 5px, 6px, 6.4px, 8px, 10px, 15px, 16px, 20px, 30px, 32px, 44px, 107px, 140px.
Use: Button padding (10px/16px), card spacing (16px/32px), section gaps (30px/44px), hero spacing (107px/140px).

## Border Radius
- sharp: 0px — Most components
- xs: 1px — Buttons
- sm: 2px — Links
- md: 7px — Links
- pill: 50px — Pill buttons
- full: 50% — Circular buttons, avatars

## Shadows & Depth
- md: rgba(0,0,0,0.3) 0px 4px 7px
- sm: rgba(0,0,0,0.3) 0px 1px 3px
- lg: rgba(0,0,0,0.3) 1px 8px 8px
- xl: rgba(0,0,0,0.18) 0px 16px 18px
- inset: rgba(0,0,0,0.5) -1px -2px 24px -5px

## Component Specifications

### Primary Button (.ue-notice-buttons__btn)
Default: bg #000000, color #ffffff, padding 16px, radius 50px, border none, font-weight 700, font-size 18px.
Hover: opacity 0.7.
Focus: outline none.
Disabled: opacity 0.5.

### Secondary Button (.ue-notice-buttons)
Default: bg #ffffff, color #000000, padding 10px 32px 20px, radius 0px, font-weight 400, font-size 15px.

### Navigation Link
Color: #2e6d9d, font-weight 700, no underline.
Hover: maintain color, no underline.

### Input Fields
Border: 1px solid #cecece or #666666 depending on context.
Padding: multiples of 8px.
Focus: border-color #005fcc.

### Cards
Background: #ffffff.
Padding: 16px or 32px.
Shadow: md.
Radius: 0px or sm.

## Layout & Responsive Rules
Breakpoints: 450px, 480px, 481px, 541px, 600px, 601px, 768px, 960px, 1024px.
Page padding: 16px mobile, 32px desktop.
Grid gap: multiples of 8px.

## Interaction Rules
Transitions: 150ms ease for hover/focus opacity changes.
Focus indicators: color #005fcc.

## DO
- Use only palette colors.
- Maintain 8px grid (fractional allowed).
- Use Mundo for headlines.
- Reserve Bright Blue for interactive states.
- Keep borders 0px or subtle grey.
- Use uppercase for metadata.

## DON'T
- Invent new colors.
- Mix serif and sans-serif in same text block.
- Overuse shadows.
- Round corners randomly — stick to defined radius values.

## Code Examples

```css
.btn-primary {
  background: #000;
  color: #fff;
  padding: 16px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 18px;
  border: none;
  transition: opacity 150ms ease;
}
.btn-primary:hover { opacity: 0.7; }

.btn-secondary {
  background: #fff;
  color: #000;
  padding: 10px 32px 20px;
  border-radius: 0;
  font-weight: 400;
  font-size: 15px;
  border: none;
}

.card {
  background: #fff;
  padding: 16px;
  box-shadow: rgba(0,0,0,0.3) 0px 4px 7px;
  border-radius: 0;
}

---

## 9. Summary

**TL;DR** — Elmundo’s design system is a disciplined editorial grid: black-and-white core, muted blues for accents, strict type hierarchy mixing serif and sans. Spacing sticks to 8px increments with occasional fractional tweaks. UI is flat, sharp-cornered, with rare pill buttons.

**Brand Keywords** — editorial-authority, restrained-color, typographic-discipline, functional-minimalism, print-heritage