Marca Design System Deep Dive

1. Brand Overview

Marca is one of Spain’s most recognized sports news brands. If you’ve ever seen their print edition, the massive red masthead is burned into your memory. The digital product carries that same energy — bold, condensed typography, high-contrast color, and layouts that prioritize immediacy over subtlety. This is a site for sports fans who want information fast, but also expect a sense of drama and authority.

The vibe? Aggressive, direct, unapologetically busy. They use a lot of tight line heights, heavy font weights, and uppercase captions. It’s not minimalism; it’s controlled chaos. Every design choice screams: “This is breaking, look now.”

Design philosophy here leans on:

• Impact over elegance — Headlines are huge, weighty, and condensed.
• Color as hierarchy — The signature deep red (#c00c00) calls out brand identity, while blues (#0465c8, #0000ee) handle interactive elements.
• Condensed space management — They pack a ton into each viewport, using an 8px spacing base but often compressing vertical rhythm to 1.0 line-height.

Audience? Hardcore sports readers — people who scroll quickly, click aggressively, and want clear cues for what’s clickable. The design system responds with strong visual anchors, minimal decorative fluff, and typeface choices that evoke sports headlines from print.

I love that they’ve kept the condensed headline style from print. It’s rare to see a condensed sans like Barlow Semi Condensed used this extensively online. It works here because sports journalism thrives on urgency and space economy. Oddly, they mix in Roboto and even Times in certain link contexts — a throwback feel that adds a bit of typographic texture.

They’re not afraid of mixing families, which in most brands would be a mess. But here it fits: sports sites are visually noisy by nature, and the type variety helps segment content types.

2. Color System

2.1 Primary Colors

The main brand color is #c00c00 (rgb(192, 12, 0)) — a deep, slightly desaturated red. This is the Marca identity color. It’s heavy, it’s serious, and it’s instantly recognizable to their readership. Psychologically, red here signals urgency, passion, and competitive energy. It’s not a bright candy red; it’s grounded, almost institutional, which works for a brand that’s been around for decades.

Competitor comparison: ESPN leans on a brighter red (#cc0000), more digital-friendly. Marca’s red is darker, more print-oriented. It reads as more authoritative but slightly less luminous on screens.

Their interactive color is #0465c8 — a strong medium blue used for buttons and some links. They also have #0000ee, the classic browser blue, which is unusual; most brands override default link blue, but Marca keeps it in play.

2.2 Complete Palette

CSS variables add functional colors:

• --ue-c-notification-list-item-color: #fcd37c — Notification highlight
• --ue-c-notification-tooltip-panel-color: #000 — Tooltip background
• --ue-c-notification-title-color: #597897 — Notification titles
• --ue-c-notification-secondary-btn-color-hover: #fff — Secondary button hover text
• --side-panel-mask-color: hsla(0,0%,4%,.7) — Overlay mask
• --swiper-theme-color: #007aff — Swiper theme accent
• --side-panel-shadow-color: rgba(0,0,0,.18) — Shadows
• --cover-content-border-divider-color: #dde0e5 — Divider lines

2.3 Color Relationships

Contrast is generally strong — white (#ffffff) against black-ish (#121212) is AAA contrast. The red (#c00c00) on white is highly visible, although red text on dark gray might dip below AAA thresholds. The blues (#0465c8 and #0000ee) against white are safe for accessibility. The mid gray (#9ea2a4) is borderline for body text but fine for metadata.

No explicit dark mode tokens here — the palette is tuned for light backgrounds.

2.4 Usage Guide

• Primary red: Only use for brand identity elements and key labels. Avoid using it for body text — it’s too heavy.
• Blues: Reserve #0465c8 for primary CTAs and UI controls; #0000ee is for inline content links.
• Grays: Use #9ea2a4 for secondary info; #757575 and #222222 for less prominent text.
• Never blend the brand red with the primary blue — they fight each other visually.
• White backgrounds keep the content airy; use black-ish #121212 for main text to avoid pure black harshness.

3. Typography

3.1 Font Families

They run a mixed stack:

• Barlow Semi Condensed — Heavy weights for headings and links.
• Barlow — Regular widths for captions, buttons.
• Roboto — Body text, some headings, captions.
• Times — Occasional links and buttons; possibly for legacy or specific content areas. Fallbacks are standard: Arial, Helvetica for sans; none specified for Times.

No Google Fonts or Adobe Fonts declared in extracted sources — they may self-host.

3.2 Type Scale

Here’s the full extracted type scale:

3.3 Hierarchy

They use size jumps aggressively — from 40px headlines down to 11px captions. The condensed faces make even large sizes fit within tight spaces. Line heights are often set to 1.00 for dense stacking, except in body text where Roboto with 2+ line-height gives breathing room.

4. Spacing & Layout

4.1 Spacing Scale

Base scale is 8px — common in modern UI. They use a mix of integer and fractional values:

Heavy use of 8px, 10px, and 5px increments — tight UI spacing.

4.2 Layout

Breakpoints:

• 450px, 480px, 481px — fine-grained small device tweaks
• 541px, 600px, 601px — mid device
• 768px — tablet
• 800px, 960px, 1000px — small desktop
• 1024px — full desktop

This is a responsive design with lots of device-specific adjustments — likely to optimize dense layouts for sports content on mobile.

5. Visual Elements

Border Radius

They don’t have a single consistent radius — ranges from 3px up to 100px and 50% (full round):

Shadows

Sparse use:

• rgba(18, 18, 18, 0.15) 0px 2px 6px 0px
• rgba(0, 0, 0, 0.3) 0px 3px 12px 0px
• rgba(0, 0, 0, 0.5) 0px 2px 5px 0px
• rgba(0, 0, 0, 0.5) -1px -2px 24px -5px

Mostly subtle depth cues — not heavy drop shadows.

Borders

They use 1px solid in neutral grays for dividers, plus occasional colored borders (orange #ffa500, #dde0e5 for section dividers).

6. Components

6.1 Buttons

Only one fully extracted:

• Swiper button prev:
  • Default: bg #0465c8, text #000000, padding 0, radius 50%, no border, no shadow.
  • Font: 16px, weight 400.
  • No hover/active/focus extracted — likely handled by JS.

The circular shape fits navigation arrows — functional, not decorative.

6.2 Links

Multiple link styles:

• #757575, no underline — secondary links.
• #0000ee, no underline — standard content links.
• #000000 — body links.
• #121212, underline, weight 800 — strong emphasis links.
• #0465c8 — interactive UI links.
• #ffffff — links on dark backgrounds.
• #222222 — standard nav links.
• #707070-range grays — muted links.

No hover states extracted — likely change color or underline dynamically.

6.3 Forms

No text inputs extracted — possibly custom components loaded dynamically.

6.4 Cards

No explicit card component extracted — likely built from divs with border/shadow tokens.

7. Design Tokens

:root {
  /* Colors */
  --color-black-ish: #121212;
  --color-primary-blue: #0465c8;
  --color-legacy-link-blue: #0000ee;
  --color-white: #ffffff;
  --color-mid-gray: #9ea2a4;
  --color-brand-red: #c00c00;
  --color-dark-gray: #222222;
  --color-medium-gray: #757575;
  --color-notification-list-item: #fcd37c;
  --color-notification-tooltip-panel: #000000;
  --color-notification-title: #597897;
  --color-notification-secondary-btn-hover: #ffffff;
  --color-side-panel-mask: hsla(0,0%,4%,.7);
  --color-swiper-theme: #007aff;
  --color-side-panel-shadow: rgba(0,0,0,.18);
  --color-cover-content-divider: #dde0e5;

  /* Spacing */
  --space-2: 2px;
  --space-3: 3px;
  --space-3-2: 3.2px;
  --space-4: 4px;
  --space-4-8: 4.8px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-11: 11px;
  --space-11-2: 11.2px;
  --space-12: 12px;
  --space-13: 13px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-34: 34px;
  --space-132-453: 132.453px;

  /* Border Radius */
  --radius-3: 3px;
  --radius-5: 5px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-top-16: 16px 16px 0px 0px;
  --radius-20: 20px;
  --radius-50: 50px;
  --radius-100: 100px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-1: rgba(18, 18, 18, 0.15) 0px 2px 6px 0px;
  --shadow-2: rgba(0, 0, 0, 0.3) 0px 3px 12px 0px;
  --shadow-3: rgba(0, 0, 0, 0.5) 0px 2px 5px 0px;
  --shadow-4: rgba(0, 0, 0, 0.5) -1px -2px 24px -5px;
}

8. AI Coding Assistant Prompt

# Marca Design System Specification

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

## Brand Context
Marca is Spain’s leading sports news brand. The design is bold, condensed, and high-contrast, with a focus on urgent headlines and clear interactive cues. Typography is heavy and condensed, colors are strong and purposeful.

## Color Palette
- Black-ish: #121212 — Main text color, dark backgrounds
- Primary Blue: #0465c8 — Buttons, swiper controls
- Legacy Link Blue: #0000ee — Inline content links
- White: #ffffff — Page backgrounds, text on dark
- Mid Gray: #9ea2a4 — Metadata, timestamps
- Brand Red: #c00c00 — Logo, section titles
- Dark Gray: #222222 — Navigation, headings
- Medium Gray: #757575 — Secondary links
- Notification Highlight: #fcd37c — Notification list item
- Tooltip Background: #000000 — Tooltip panels
- Notification Title: #597897 — Notification headings
- Secondary Button Hover Text: #ffffff — Text hover state
- Overlay Mask: hsla(0,0%,4%,.7) — Side panel mask
- Swiper Theme Accent: #007aff — Slider accents
- Divider: #dde0e5 — Content divider lines

## Typography
Fonts:
- Headings: "Barlow Semi Condensed", Arial, Helvetica
- Body: "Roboto", Arial, Helvetica
- Captions/Buttons: "Barlow", Arial, Helvetica
- Occasional: "Times"

Type Sizes (px / weight / line-height):
| Level | Font | Size | Weight | Line Height | Use |
| H1 | Barlow Semi Condensed | 40 | 800 | 1.00 | Main headlines |
| H2 | Barlow Semi Condensed | 33 | 800 | 1.00 | Section titles |
| H3 | Barlow Semi Condensed | 27 | 600 | 1.00 | Subheads |
| Body Large | Roboto | 21 | 400 | normal | Article body |
| Body Bold | Roboto | 21 | 700 | 2.10 | Emphasized body |
| Caption | Barlow Semi Condensed | 14 | 600 | normal | Uppercase captions |

## Spacing & Grid
Base: 8px grid
Scale: 2, 3, 3.2, 4, 4.8, 5, 6, 8, 10, 11, 11.2, 12, 13, 15, 16, 20, 24, 32, 34, 132.453px
Use multiples of 8px for layout gaps, 5px for tight component padding, 10px for standard padding.

## Border Radius
- sm: 3px — Tiny badges
- md: 6px — Small containers
- lg: 10px — Images
- xl-top: 16px 16px 0 0 — Top corners only
- pill: 50px — Buttons
- full-pill: 100px — Large pill buttons
- round: 50% — Circle buttons, avatars

## Shadows & Depth
- Soft: rgba(18,18,18,0.15) 0 2px 6px
- Medium: rgba(0,0,0,0.3) 0 3px 12px
- Dark: rgba(0,0,0,0.5) 0 2px 5px
- Inset/offset: rgba(0,0,0,0.5) -1px -2px 24px -5px

## Component Specifications

### Primary Button
Default:
```css
.btn-primary {
  background-color: #0465c8;
  color: #000000;
  padding: 0;
  border-radius: 50%;
  border: none;
  font-weight: 400;
  font-size: 16px;
}
```
Hover: match theme hover handling
Focus: outline: 2px solid #0465c8
Disabled: opacity: 0.5

### Navigation Links
Default: color from palette, no underline
Hover: underline or color shift per style

### Input Fields
Border: 1px solid #dde0e5
Border-radius: 6px
Padding: 8px
Font: Roboto 16px

### Cards
Background: #ffffff
Border-radius: 10px
Padding: 16px
Divider: #dde0e5 or shadow token

## Layout & Responsive Rules
Breakpoints: 450px, 480px, 481px, 541px, 600px, 601px, 768px, 800px, 960px, 1000px, 1024px
Content width fluid, adjust at breakpoints
Page padding: 10px mobile, 20px desktop
Grid gap: 8px

## Interaction Rules
Transitions: 150ms ease
Focus indicators: 2px solid primary blue
Loading states: reduce opacity

## DO List
- Use only colors from palette
- Maintain 8px grid
- Use Barlow Semi Condensed for headings
- Keep line-height tight for headlines
- Use uppercase captions for emphasis
- Reserve brand red for identity

## DON'T List
- Don’t invent new colors
- Don’t mix rounded and sharp corners in same component
- Don’t apply heavy shadows — stick to tokens
- Don’t change link colors outside palette

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #0465c8;
  color: #000000;
  border-radius: 50%;
  font: 400 16px Roboto, Arial, Helvetica;
}
```

Card:
```css
.card {
  background: #ffffff;
  border-radius: 10px;
  padding: 16px;
  box-shadow: var(--shadow-1);
}
```

Input:
```css
.input-text {
  border: 1px solid #dde0e5;
  border-radius: 6px;
  padding: 8px;
  font: 400 16px Roboto, Arial, Helvetica;
}
```

9. Summary

TL;DR — Marca’s design is bold, condensed, and tuned for high-energy sports coverage. Red anchors the brand, blue drives interaction, tight spacing keeps content dense. Typography mixes condensed sans for headlines, neutral sans for body.

Brand Keywords:

• bold-condensed
• sports-urgent
• print-inspired
• high-contrast
• dense-layout