ABC Brand Design System Deep-Dive

1. Brand Overview

ABC (https://www.abc.es/) is a Spanish news outlet with a heritage look, but their UI has a modern, digital-first feel. The typography choices immediately tell you this is a publication: serif display faces for headlines, sans for utility text. The brand is serious – this isn’t playful UI – but they’ve avoided the “dusty newspaper” visual trap by mixing crisp, modern UI elements with a restrained palette.

The vibe is conservative, authoritative, and reader-focused. Colors are subdued. There’s no “look-at-me neon” here. The primary #244765 — a deep blue with a hint of gray — signals trustworthiness and tradition. They push secondary neutrals to keep content front and center. Accent colors, like their gold (#E4B016), are used sparingly, often on promotional tags or CTAs.

The design system feels like a hybrid: print-inspired typesetting combined with web component frameworks (Vuetify). There’s an 8px spacing grid, clear breakpoints for mobile/tablet/desktop, and a mix of sharp and pill-shaped components. This makes the site adaptable across devices without losing brand character.

One thing I like: they handle their typography stack with intent. Headlines can jump from bold serif to lighter weights for hierarchy, and body copy stays legible without drifting into generic sans clones.

The audience is clearly readers who value serious journalism. The UI supports this by being unobtrusive. The hierarchy is tight, spacing is generous enough to breathe, but not so loose it feels luxury-magazine. ABC is, frankly, a case study in how to modernize a legacy brand without losing its DNA.

2. Color System

2.1 Primary Colors

The flagship color here is #244765 (rgb(36, 71, 101)). It’s deep, cool, and loaded with trust cues. Blue in media branding often signals credibility—it’s no accident Reuters and BBC online lean dark blues for their headers. ABC’s take is just muted enough not to overpower images or text.

Secondary tones lean heavily into neutrals: #202020 for body text, #ffffff for backgrounds, multiple grayscale tones for dividers and UI chrome.

That gold (#E4B016 via rgb(228, 176, 22) in borders and buttons) works as a premium accent—it’s rare and draws attention only to specific interactive points.

Compared to competitors, this is restrained. El País uses navy + bolder accents; La Vanguardia is even more minimal. ABC strikes a middle line: serious but with just enough accent color to break the monotony.

2.2 Complete Palette

2.3 Color Relationships

Contrast is generally excellent: deep blue on white, black on cream, charcoal on gold. The white background keeps their serif headlines crisp. Even the muted gray (#555555 at 50% opacity) stays legible against white, though borderline for WCAG AA for small text—light gray captions could be risky for accessibility on low-contrast screens.

On hover states, they often flip to #000000 with reduced opacity (0.7), which can be unusual—opacity changes affect text readability. Hover blues (#4d90fe) are vivid; they’re used sparingly.

Dark mode isn’t implemented; this palette would need inversion and saturation adjustments to translate.

2.4 Usage Guide

Works well:

• Deep Blue (#244765) for strong anchors, paired with white text.
• Accent Gold (#E4B016) for premium CTAs—contrast is solid with white text.

Avoid:

• Pairing Medium Gray (#555555, 50% opacity) with cream (#fbf3dc) — low contrast.
• Using Bright Blue (#4d90fe) for body text—it’s too strong; best for focus states.

3. Typography

3.1 Font Families

Two main families drive the UI:

• ABCDisplay — Custom serif display, multiple weights: Bold, Black, Extralight, Semibold, Light, Regular. Fall back: Georgia, Times New Roman.
• Basier Square — Geometric sans for UI utility text. Variants: Regular, Semibold. Fall back: Arial, Roboto, Helvetica.
• ABCText Light — Serif text for body copy, fallback to Georgia stack.
• Some Guardian TextSans entries appear—likely integrated for specific text blocks.

No Google or Adobe Fonts—custom/self-hosted.

3.2 Type Scale

Here’s the extracted size table (subset—there are 80+ style entries):

3.3 Hierarchy

They build hierarchy with both size and family. Display serif jumps to 32px for main headlines; body falls back to serif or geometric sans around 16px. Sans variants at smaller sizes help with UI clarity—buttons, captions, labels. Weight variation in the serif stack is aggressive: Extralight at 18px uppercase reads completely different than Black at the same size. That’s intentional—the lighter uppercase sets have a formal, quiet tone; the Black weights shout authority.

4. Spacing & Layout

4.1 Spacing Scale

8px base grid — confirmed. Values:

4.2 Layout

Breakpoints: 768px, 992px, 1023px. Tablet cuts in early; desktop triggers at 992px—slightly aggressive for multi-column layouts on medium screens. Vuetify’s grid handles responsiveness; they close gaps in mobile views to maximize content space.

5. Visual Elements

Border Radius

Values range from 0px (most buttons are square) to full 100% for pill shapes or avatars.

• 0px — square edges: agree/disagree buttons
• 14px, 20px — button corners, soft but still crisp
• 22px — primary rounded button variant
• 30px — wide pill buttons (promo tags)
• 50%, 100% — avatars, circular icons

I love the discipline: radius changes are tied to function, not aesthetics. Pills mean “special” CTAs, squares mean functional UI.

Shadows

Not flat—but restrained. Shadows:

• rgba(0,0,0,0.5) 0px 5px 15px — modal overlays
• rgba(0,0,0,0.09) 0px 4px 20px — cards
• rgba(0,0,0,0.04) 2px 3px 4px — subtle on hover

Most shadows are low-opacity, small blur; they lift content without breaking hierarchy.

Borders

Common divider: 1px solid #000 or #ddd. They use border-top thickness (6px) with teal/gold to indicate category tags—a print-inspired element.

6. Components

6.1 Buttons

Agree Button (.evolok-agree-button)

• Default: bg #202020, white text, padding 16px 40px, border-radius 0px
• Hover: bg #000000, opacity 0.7

Disagree Button

• Default: bg white, text #202020, padding same as agree
• Hover: bg #000000, opacity 0.7

Circular Icon Button (.v-x)

• Default: transparent bg, black text, 100% radius, white border
• Hover: bg black, opacity 0.7

Gold CTA (.v-btn-g)

• Default: bg #E4B016, white text, padding 1px 24px, radius 30px
• Hover: bg #E2F5F9, text #757575, opacity 0.7
• Focus: outline 2px solid #2FABD5, bg #F0F5FF

6.2 Links

Five styles, all hover to #233991 underline:

• Deep Blue bold — main nav
• Charcoal underline — body text links
• White thin — inverse links on dark backgrounds
• Mid-gray — subdued ctalinks

6.3 Forms

Nothing extracted for inputs—likely default Vuetify styling overridden lightly.

6.4 Cards

Shadows: rgba(0,0,0,0.09) with 4px blur; borders for divide. Padding from 16px upwards.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-primary: #244765;
  --color-text: #202020;
  --color-white: #ffffff;
  --color-gray-50: #555555;
  --color-cream: #fbf3dc;
  --color-light-gray: #dddddd;
  --color-dark-gray: #4a4848;
  --color-hover-gray: #f9f9f9;
  --color-hover-blue: #4d90fe;
  --color-black: #000000;
  --color-gold: #e4b016;
  --color-teal: #008ab7;

  /* Typography */
  --font-display: "ABCDisplay", Georgia, "Times New Roman";
  --font-sans: "Basier Square", Arial, Roboto, Helvetica;
  --font-text: "ABCText Light", Georgia, "Times New Roman";

  /* Spacing */
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-16: 16px;
  --space-20: 20px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-50: 50px;

  /* Radius */
  --radius-none: 0px;
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 22px;
  --radius-pill: 30px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-md: rgba(0,0,0,0.5) 0px 5px 15px;
  --shadow-light: rgba(0,0,0,0.09) 0px 4px 20px;
  --shadow-subtle: rgba(0,0,0,0.04) 2px 3px 4px;
}

8. AI Coding Assistant Prompt

# ABC Design System Specification

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

## Brand Context
ABC is a heritage Spanish news brand. The design uses a deep blue primary, restrained neutrals, and serif headlines with sans utility. Layout runs on an 8px grid, with Vuetify components adapted to a formal tone.

## Color Palette
- Primary Blue: #244765 — navigation links, bold anchors
- Charcoal: #202020 — body text, dark buttons
- White: #ffffff — page background, button text
- Medium Gray: #555555 — secondary text, placeholders
- Cream: #fbf3dc — alt backgrounds, feature boxes
- Light Gray: #dddddd — dividers, borders
- Dark Warm Gray: #4a4848 — secondary headings
- Very Light Gray: #f9f9f9 — hover/focus background
- Bright Blue: #4d90fe — focus outlines, hover highlights
- Black: #000000 — max contrast text
- Accent Gold: #e4b016 — premium CTAs
- Teal: #008ab7 — category tags, accent borders

## Typography
Headings: "ABCDisplay", Georgia, "Times New Roman"
Body/UI: "Basier Square", Arial, Roboto, Helvetica
Text serif: "ABCText Light", Georgia, Times New Roman

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 Bold | 32px | 400 | 1.09 | Main headlines |
| Sans H1 | 28px | 400 | 1.15 | Utility section titles |
| Serif Black | 26px | 700 | 0.85 | Strong headings |
| Sans sm | 22px | 700 | 1.14 | Sub-headings |
| Link Upper | 22px | 100 | 1.14 | Nav links (uppercase) |
| Button | 28px | 400 | 0.93 | Large CTA text |
| Body serif | 16px | 400 | 1.19 | Article text |
| Caption sm | 14px | 400 | 1.07 | Labels and footnotes |
| Caption xs | 12px | 700 | 1.00 | Small tags |

## Spacing & Grid
Base: 8px
Scale: 4px, 6px, 8px, 16px, 20px, 28px, 32px, 40px, 50px
Use: 4px/6px = icon or tight gaps, 16px = main padding, 28px+ = large CTAs

## Border Radius
- none: 0px — square buttons
- sm: 14px — small rounded buttons
- md: 20px — moderate rounded shapes
- lg: 22px — primary CTA buttons
- pill: 30px — promo tags
- full: 50% — avatars, circular icons

## Shadows & Depth
- Medium: rgba(0,0,0,0.5) 0px 5px 15px — modal
- Light: rgba(0,0,0,0.09) 0px 4px 20px — cards
- Subtle: rgba(0,0,0,0.04) 2px 3px 4px — hover lift

## Component Specifications

### Primary Button
```css
.btn-primary {
  background: #202020;
  color: #ffffff;
  padding: 16px 40px;
  border-radius: 0px;
  font-weight: 400;
  font-size: 16px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #000000; opacity: 0.7; }
```

### Secondary Button
```css
.btn-secondary {
  background: #ffffff;
  color: #202020;
  padding: 16px 40px;
  border: 1px solid #d7d7d7;
  border-radius: 0px;
}
.btn-secondary:hover { background: #000000; opacity: 0.7; color: #ffffff; }
```

### Gold CTA
```css
.btn-gold {
  background: #e4b016;
  color: #ffffff;
  padding: 1px 24px 0px;
  border-radius: 30px;
  font-size: 12px;
}
.btn-gold:hover { background: #e2f5f9; color: #757575; opacity: 0.7; }
.btn-gold:focus { outline: 2px solid #2fabd5; background: #f0f5ff; }
```

### Circular Icon Button
```css
.btn-icon {
  background: transparent;
  color: #000000;
  border: 1px solid #ffffff;
  border-radius: 50%;
  padding: 0;
}
.btn-icon:hover { background: #000000; opacity: 0.7; }
```

### Navigation Link
Default: color matches context (primary blue or gray); hover: #233991 underline

## Layout & Responsive Rules
Max content: grid-based via Vuetify
Breakpoints: 768px, 992px, 1023px

## Interaction Rules
Transitions: 150ms ease for state changes
Focus: visible outline (#4d90fe or accent color)
Hover: either opacity drop or underline for text

## DO
- Use only defined palette hex values
- Keep spacing multiples of 8px
- Use ABCDisplay for headings, Basier Square for UI text
- Apply shadows as defined — don't invent new depths
- Reserve gold (#e4b016) for CTAs only

## DON'T
- Mix serif and sans in a single headline
- Use hover opacity changes on text below 16px
- Stretch avatars — maintain aspect ratio
- Apply gold to non-interactive elements

## Code Examples

Primary Button (Tailwind style):
```css
.btn-primary { @apply bg-[#202020] text-white px-10 py-4 rounded-none font-normal text-base hover:bg-black hover:opacity-70 transition ease-in-out duration-150; }
```

Card:
```css
.card { background: white; border-radius: 14px; padding: 16px; box-shadow: rgba(0,0,0,0.09) 0px 4px 20px; }
```

Form Input:
```css
.input { border: 1px solid #dddddd; border-radius: 4px; padding: 8px; font-size: 14px; }
.input:focus { border-color: #4d90fe; outline: none; }
```

9. Summary

TL;DR — ABC’s design system is a disciplined blend of heritage typography and modern component frameworks. Deep blue anchors trust, neutrals keep content clear, gold accents handle premium CTAs. Tight 8px grid and specific radius/shadow rules keep UI consistent.

Brand Keywords: heritage-modern, serif-sans-hybrid, news-authoritative, premium-restrained