European Commission Design System

# European Commission Design System — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by European Commission. "European Commission Design System" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** European Commission Design System
**Owner:** European Commission
**Official documentation:** https://ec.europa.eu/component-library/ec/
**Visual character:** 27-nation neutrality: institutional blue and flag yellow, Arial for every locale, and componentry built to outlive administrations.

---

## Summary

Design system for European Commission digital services.

_Confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| EC Blue | `#004494` | `--ecl-color-primary` | European Commission brand and primary actions |
| EU Yellow | `#ffd617` | `--ecl-color-secondary` | Accent (flag yellow) |
| Text Grey | `#404040` | `--ecl-color-grey` | Primary text |
| White | `#ffffff` | `--ecl-color-white` | Surfaces |
| Grey 5 | `#f2f2f2` | `--ecl-color-grey-5` | Subtle background |
| Border Grey | `#cccccc` | `--ecl-color-grey-25` | Borders |
| Error | `#da2131` | `--ecl-color-error` | Errors |
| Success | `#467a39` | `--ecl-color-success` | Success |

## Typography

- **Body:** Arial — weights 400, 700 — `Arial, 'Helvetica Neue', Helvetica, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| heading-1 | `32px` | `40px` |
| heading-2 | `28px` | `36px` |
| heading-3 | `24px` | `32px` |
| body-m | `16px` | `24px` |

## Spacing

Base unit: `4px`

Scale: `4px` · `8px` · `12px` · `16px` · `24px` · `32px` · `48px`

## Corner radius

| Name | Value |
| --- | --- |
| default | `0` |

## Quick start (CSS)

```css
/* European Commission Design System — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://ec.europa.eu/component-library/ec/ */

:root {
  /* Color */
  --ecl-color-primary: #004494; /* European Commission brand and primary actions */
  --ecl-color-secondary: #ffd617; /* Accent (flag yellow) */
  --ecl-color-grey: #404040; /* Primary text */
  --ecl-color-white: #ffffff; /* Surfaces */
  --ecl-color-grey-5: #f2f2f2; /* Subtle background */
  --ecl-color-grey-25: #cccccc; /* Borders */
  --ecl-color-error: #da2131; /* Errors */
  --ecl-color-success: #467a39; /* Success */

  /* Typography */
  --font-body: Arial, 'Helvetica Neue', Helvetica, sans-serif;

  /* Type scale */
  --text-heading-1: 32px /* line-height 40px */;
  --text-heading-2: 28px /* line-height 36px */;
  --text-heading-3: 24px /* line-height 32px */;
  --text-body-m: 16px /* line-height 24px */;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Radius */
  --radius-default: 0;
}
```

## Engineering profile

- **Ships for:** CSS-only
- **Token pipeline:** Custom
- **Source model:** Open source

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of European Commission Design System by European Commission — Design system for European Commission digital services. Character: 27-nation neutrality: institutional blue and flag yellow, Arial for every locale, and componentry built to outlive administrations. Use a primary colour near #004494, the typeface "Arial" (or a close equivalent), corner radius around 0, a spacing rhythm on a 4px base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [European Commission Design System documentation](https://ec.europa.eu/component-library/ec/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/eu-design) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._