Europa Design System Deep Dive

1. Brand Overview

The European Union’s official Europa site is a masterclass in institutional clarity. It’s not here to be trendy; it’s here to project authority, neutrality, and accessibility to 27 member states and hundreds of millions of citizens. The vibe is formal without being cold. This is a site that needs to work in Brussels, Bucharest, and Barcelona — same visual language, same trust signals.

The design philosophy leans on stability. The core blue (#0e47cb) is instantly recognizable from the EU flag. It’s a shade that says “official” without screaming. Whites and deep neutrals back it up, so nothing distracts from the content. Typography is utilitarian — Arial and Inter — no flourishes, no idiosyncrasies. That’s deliberate: every screen needs to render identically across devices and languages.

The layout is grid-based on an 8px scale. Spacing is predictable, which makes for easy modular builds. Components are boxed and lightly rounded — 4px and 8px radii dominate — enough to soften, not enough to feel “playful.”

Buttons follow the rules: primary is blue with white text, secondary is neutral with subtle borders. Links are color-coded by purpose — white in headers, blue in content, dark grey for neutral nav. Shadows are subtle and tinted blue, giving depth without breaking the brand’s flat-plane discipline.

This design system is for public service. It prioritizes contrast and legibility over visual experimentation. It uses semantic color variables to keep every element consistent. It’s a system you can hand to any developer in any member state and expect pixel-perfect reproduction.

2. Color System

2.1 Primary Colors

The main brand color is #0e47cb (RGB: 14, 71, 203). This is the EU’s flag blue — slightly lighter than NATO blue, less saturated than corporate tech blues. It communicates formality and trust. It’s used for primary buttons, links, and key interface accents.

Secondary colors are functional rather than decorative. Neutrals like #171a22 and #000000 anchor text and borders. White (#ffffff) is the default background for most components. There’s also a deep accent blue #004494 used for hover states and link emphasis — it’s richer, closer to the flag’s original tone.

They also have functional colors:

• Warning: #ff8133 and #cca300
• Error: #d7003d and #ef0044
• Success: #00a174
  These are baked into CSS variables for alerts and validation.

You’ll notice the palette is not “fun” — everything serves a purpose. There’s no pastel pink or gradient candy here. Even the light blue (#cfdaf5) is a utility color for hover/focus backgrounds.

2.2 Complete Palette

(Roles pulled from semantic usage in CSS variables and source components.)

2.3 Color Relationships

Primary blue with white text passes WCAG AA easily — high contrast. Dark neutrals on white also pass. Yellow on white would fail — they avoid that pairing. Accent blues (#004494) are used on white backgrounds to boost contrast for links. The visited purple (#510dcd) is vivid and still meets accessibility.

Dark mode isn’t implemented. The palette is optimized for light backgrounds, with dark neutrals and high-saturation accents.

2.4 Usage Guide

• Works:

  • #0e47cb on #ffffff — primary CTAs.
  • #262b38 on #ffffff — tertiary buttons.
  • #004494 for links on white.
  • Warning #ff8133 on pale background #fff7f2.

• Avoid:

  • Yellow #ffd617 on white — low contrast.
  • Light blue #cfdaf5 text on white — unreadable.
  • Mixing #0e47cb and #3e6cd5 in the same component — too close in tone, can feel inconsistent.

3. Typography

3.1 Font Families

Two families:

• Arial — default for headings, links, buttons in legacy contexts.
• Inter — modern sans for captions, some buttons, headings in newer modules.
  Fallbacks are Arial for Inter.

No Google Fonts or Adobe Fonts — system-safe stack. No variable fonts.

3.2 Type Scale

3.3 Hierarchy

The hierarchy is flat compared to flashy brands. H1s at 42px and 36px are for hero and section titles. 24px and 20px are for subheads. Body sits at 16px. Captions at 14px and 12px. The mix of Arial and Inter is transitional — some modules have upgraded to Inter for better screen rendering.

Readability is strong — generous line heights in body text (1.75, 1.88) and tighter in headings for compactness.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px grid. Common values:

4.2 Layout

Breakpoints:

• 480px (mobile)
• 767px / 768px (small tablet)
• 920px (medium tablet)
• 996px (small desktop)
• 1139px / 1140px (large desktop)

Responsive approach: content reflows at logical device widths. No max content width in data, but breakpoints suggest ~1140px container.

5. Visual Elements

Border Radius System

4px is the workhorse — small buttons, inputs. 8px for cards. 50% for circular badges/icons.

Shadow System

Shadows are tinted blue — unique. Primary shadow:
rgba(9, 49, 142, 0.08) 0px 2px 4px 0px, rgba(9, 49, 142, 0.04) 0px 0px 10px 0px, ...
Used for cards and elevated elements. This ties depth to brand color — subtle, consistent.

Borders & Dividers

Borders mostly 1px solid neutrals or brand blue on left edges of links (4px left border in primary color). Used as section accents.

6. Components

6.1 Buttons

Primary Button (wt-ecl-button--primary)

• Default:
  • Background: #0e47cb
  • Text: #ffffff
  • Padding: 8px 16px
  • Radius: 4px
  • Border: 0px solid #0e47cb
  • Font: Arial 16px, weight 400
• Hover: Color changes to var(--c-d-140) (not defined in data, likely darker neutral)
• Active/Focus: Not specified.

Global Nav Button (wt-globan--button)

• Background: transparent
• Text: #444444
• Padding: 0px 7px
• Border: 3px solid #eeeeee
• Font: Arial 14px, weight 400

Tertiary Neutral Button (ecl-button--tertiary)

• Background: transparent
• Text: #262b38
• Padding: 3px 13px
• Border: 1px solid transparent
• Font: Arial 16px, weight 400

6.2 Links

Multiple styles:

• White text, no underline (header nav)
• Dark blue #004494 with underline (content links)
• Brand blue #0e47cb, no underline (UI links)
• Dark neutral #262b38 (secondary links)
• Rich blue #0b39a2 (special cases)

6.3 Forms

Search input:

• Background: white
• Text: #171a22
• Radius: 4px 0px 0px 4px
• Padding: 8px 16px 8px 12px
• Shadow: inset blue tint for depth.

No focus styles in data — likely handled via JS/CSS variables.

6.4 Cards

Cards use 8px radius and blue-tinted shadows. Padding is 24px. Background is white.

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --primary: #0e47cb;
  --black: #000000;
  --neutral-dark: #171a22;
  --white: #ffffff;
  --neutral-darker: #262b38;
  --neutral-mid: #515560;
  --neutral-grey: #444444;
  --light-blue: #cfdaf5;
  --muted-blue: #546fa6;
  --accent-blue: #3e6cd5;
  --rich-blue: #004494;
  --yellow: #ffd617;
  --pale-blue: #e7edfa;
  --warning-orange: #ff8133;
  --error-red: #d7003d;
  --secondary-gold: #cca300;
  --visited-purple: #510dcd;
  --info-blue: #f3f6fc;
  --success-green: #00a174;

  /* Typography */
  --font-arial: Arial, sans-serif;
  --font-inter: Inter, Arial, sans-serif;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-24: 24px;
  --space-29: 29.88px;
  --space-32: 32px;
  --space-40: 40px;
  --space-64: 64px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-primary: rgba(9, 49, 142, 0.08) 0px 2px 4px 0px, rgba(9, 49, 142, 0.04) 0px 0px 10px 0px, rgba(9, 49, 142, 0.04) 0px 4px 5px 0px, rgba(9, 49, 142, 0.04) 0px -4px 4px 0px;
}

8. AI Coding Assistant Prompt

# Europa (EU) Design System Specification

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

## Brand Context
Europa's design is institutional, neutral, and accessible. It uses the EU flag blue for primary actions, with a disciplined neutral palette for text and surfaces. Typography is utilitarian (Arial, Inter) for maximum cross-platform consistency.

## Color Palette
- Primary Blue: #0e47cb — CTAs, primary buttons, main links
- Black: #000000 — Headers, high-contrast text
- Deep Neutral: #171a22 — Body text
- White: #ffffff — Backgrounds, text on dark surfaces
- Dark Neutral: #262b38 — Buttons, UI elements
- Mid Neutral: #515560 — Borders, secondary UI text
- Grey: #444444 — Secondary nav text
- Light Blue: #cfdaf5 — Hover/focus background
- Muted Blue: #546fa6 — Unselected states
- Accent Blue: #3e6cd5 — Hover/focus accents
- Rich Blue: #004494 — Link emphasis
- Yellow: #ffd617 — Hover/focus accents
- Pale Blue: #e7edfa — Background highlight
- Warning Orange: #ff8133 — Warning alerts
- Error Red: #d7003d — Error alerts
- Secondary Gold: #cca300 — Functional secondary
- Visited Purple: #510dcd — Visited link state
- Info Blue: #f3f6fc — Info backgrounds
- Success Green: #00a174 — Success states

## Typography
- Arial, sans-serif — Headings, legacy UI
- Inter, Arial, sans-serif — Captions, newer UI
| Level | Size | Weight | Line Height | Use |
| H1 | 42px | 400 | 1.24 | Hero titles |
| H1 | 36px | 400 | 1.22 | Section titles |
| Subhead | 24px | 400 | 1.17 | Subtitles |
| Link Large | 24px | 400 | 0.92 | Prominent links |
| Subhead | 20px | 400 | 1.40 | Secondary headings |
| Body | 16px | 400 | 1.75 | Paragraphs |
| Button | 16px | 400 | 1.75 | Primary button text |
| Caption | 14px | 400 | 1.29–1.57 | Labels, metadata |
| Small Caption | 12px | 400 | 1.50 | Footnotes |

## Spacing & Grid
Base: 8px grid
Scale: 1px, 2px, 3px, 4px, 5px, 8px, 10px, 12px, 14px, 16px, 24px, 29.88px, 32px, 40px, 64px
Map: Button padding (8px 16px), Card padding (24px), Section gaps (40px)

## Border Radius
- none: 0px — table cells
- sm: 4px — buttons, inputs
- md: 8px — cards
- full: 50% — avatars, circular badges

## Shadows & Depth
- Primary shadow: rgba(9, 49, 142, 0.08) 0px 2px 4px, rgba(9, 49, 142, 0.04) 0px 0px 10px, rgba(9, 49, 142, 0.04) 0px 4px 5px, rgba(9, 49, 142, 0.04) 0px -4px 4px

## Component Specifications

### Primary Button
Default:
```css
background: #0e47cb;
color: #ffffff;
padding: 8px 16px;
border-radius: 4px;
border: 0 solid #0e47cb;
font: 400 16px Arial;
```
Hover: `color: var(--c-d-140)`
Focus: outline in brand blue
Disabled: 50% opacity

### Secondary Button
```css
background: transparent;
color: #444444;
padding: 0 7px;
border: 3px solid #eeeeee;
font: 400 14px Arial;
```

### Tertiary Button
```css
background: transparent;
color: #262b38;
padding: 3px 13px;
border-radius: 4px;
border: 1px solid transparent;
font: 400 16px Arial;
```

### Navigation Links
White on dark header, no underline. Content links: #004494 with underline.

### Input Fields
```css
background: #ffffff;
color: #171a22;
border-radius: 4px 0 0 4px;
padding: 8px 16px 8px 12px;
box-shadow: inset rgba(9, 49, 142, 0.08) 0px 2px 4px, inset rgba(9, 49, 142, 0.04) 0px 0px 10px;
```

### Cards
```css
background: #ffffff;
border-radius: 8px;
padding: 24px;
box-shadow: var(--shadow-primary);
```

## Layout & Responsive Rules
Breakpoints: 480px, 767px, 768px, 920px, 996px, 1139px, 1140px
Content reflows at these widths.

## Interaction Rules
- Transition: 150ms ease for hover/focus
- Focus: visible outline in brand blue
- No motion-heavy animations

## DO List
- Use exact hex values from palette
- Keep spacing multiples of 8px
- Use Arial for headings unless specified Inter
- Maintain 4px radius for small components, 8px for cards
- Tint shadows with brand blue

## DON'T List
- Invent new colors
- Mix rounded and sharp corners
- Use heavy drop shadows
- Reduce text contrast below WCAG AA
- Apply gradients to brand blue

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #0e47cb;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 4px;
  font: 400 16px Arial;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover {
  color: var(--c-d-140);
}
```

Card:
```css
.card {
  background: #ffffff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: rgba(9, 49, 142, 0.08) 0px 2px 4px, rgba(9, 49, 142, 0.04) 0px 0px 10px;
}
```

Input:
```css
.input-search {
  background: #ffffff;
  color: #171a22;
  border-radius: 4px 0 0 4px;
  padding: 8px 16px 8px 12px;
  box-shadow: inset rgba(9, 49, 142, 0.08) 0px 2px 4px;
}
```

9. Summary

TL;DR — Europa’s design system is built on trust: EU flag blue, deep neutrals, utilitarian typography, and an 8px grid. Everything is there for clarity and accessibility, nothing for decoration’s sake.

Brand Keywords:

• institutional-neutral
• trust-centric
• accessibility-first
• grid-disciplined
• blue-tinted-depth