# European Digital Identity

> `eudi@1.0.0`

The European Digital Identity (EUDI) Wallet is a flagship European Commission programme that gives EU citizens, residents, and businesses a single digital wallet for authenticating identity, storing credentials (diplomas, driving licences, prescriptions, tickets), and creating qualified electronic signatures across borders. The visual identity inherits the institutional Europa Component Library (ECL) — Branding blue (#004494) as the European Commission identity colour, a deep Primary blue scale for interaction, a warm Secondary gold scale for accents (the chromatic echo of the EU emblem stars), and the ECL status set for feedback. Typography on EC digital surfaces is Arial; this atom substitutes Public Sans (heading) and Manrope (body) as the open-source rendering proxies and documents the substitution.


**Tags:** `eudi`, `european-commission`, `ecl`, `europa`, `government`, `civic`, `digital-identity`, `light-first`

## Atoms

### Palette

**European Digital Identity** · `eudi@1.0.0` · Proprietary — © European Union

> The European Digital Identity (EUDI) Wallet is a European Commission programme rendered through the institutional Europa Component Library (ECL) visual identity. The palette is anchored by the European Commission's Branding blue (#004494) and an EC Primary blue scale that runs from #051036 (Primary-180) up through #D8E0FB (Primary-20), paired with a warm Secondary gold scale (Secondary-180 #8F5600 through Secondary-20 #FFF2DE) used for ceremonial and editorial accents. Status colours follow the ECL feedback set (Info #3860ED, Success #24A148, Warning #F39811, Error #DA1E28). Neutrals are the ECL "Dark" trio plus a blue-tinted Neutral scale. 

### Fonts

| Role | Font | License | Classification |
|------|------|---------|----------------|
| `heading` | **Public Sans** `(public-sans@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Manrope** `(manrope@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **Roboto Mono** `(roboto-mono@1.0.0)` | Apache-2.0 | monospace |

## Swatches

| ID | Name | Value |
|----|------|-------|
| `branding` | Branding | `#004494` |
| `primary-180` | Primary 180 | `#051036` |
| `primary-160` | Primary 160 | `#0A1F6C` |
| `primary-140` | Primary 140 | `#0F2FA2` |
| `primary-120` | Primary 120 | `#143FD9` |
| `primary-100` | Primary 100 | `#3860ED` |
| `primary-80` | Primary 80 | `#5577F0` |
| `primary-60` | Primary 60 | `#89A1F4` |
| `primary-40` | Primary 40 | `#B1C0F8` |
| `primary-20` | Primary 20 | `#D8E0FB` |
| `secondary-180` | Secondary 180 | `#8F5600` |
| `secondary-160` | Secondary 160 | `#E08700` |
| `secondary-140` | Secondary 140 | `#FF9D0A` |
| `secondary-120` | Secondary 120 | `#FFAD33` |
| `secondary-100` | Secondary 100 | `#FFBE5C` |
| `secondary-80` | Secondary 80 | `#FFCB7C` |
| `secondary-60` | Secondary 60 | `#FFD89D` |
| `secondary-40` | Secondary 40 | `#FFE5BE` |
| `secondary-20` | Secondary 20 | `#FFF2DE` |
| `dark-100` | Dark 100 | `#26324B` |
| `dark-80` | Dark 80 | `#546FA6` |
| `dark-60` | Dark 60 | `#99AACC` |
| `neutral-180` | Neutral 180 | `#6C85D1` |
| `neutral-160` | Neutral 160 | `#7F95D7` |
| `neutral-140` | Neutral 140 | `#92A5DD` |
| `neutral-120` | Neutral 120 | `#A6B5E3` |
| `neutral-100` | Neutral 100 | `#B9C5E9` |
| `neutral-80` | Neutral 80 | `#CDD5EF` |
| `neutral-60` | Neutral 60 | `#E0E5F5` |
| `neutral-40` | Neutral 40 | `#F3F5FB` |
| `neutral-20` | Neutral 20 | `#F8F9FD` |
| `info` | Info | `#3860ED` |
| `success` | Success | `#24A148` |
| `warning` | Warning | `#F39811` |
| `error` | Error | `#DA1E28` |
| `background` | Background | `#FCFCFC` |
| `white` | White | `#FFFFFF` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `background` | `#FCFCFC` |
| `surface` | `neutral-40` | `#F3F5FB` |
| `surface-elevated` | `white` | `#FFFFFF` |
| `text-primary` | `dark-100` | `#26324B` |
| `text-secondary` | `dark-80` | `#546FA6` |
| `text-tertiary` | `dark-60` | `#99AACC` |
| `primary` | `branding` | `#004494` |
| `primary-hover` | `primary-140` | `#0F2FA2` |
| `accent` | `secondary-100` | `#FFBE5C` |
| `accent-hover` | `secondary-140` | `#FF9D0A` |
| `warning` | `warning` | `#F39811` |
| `warning-hover` | `secondary-180` | `#8F5600` |
| `error` | `error` | `#DA1E28` |
| `success` | `success` | `#24A148` |
| `border` | `neutral-100` | `#B9C5E9` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `primary-180` | `#051036` |
| `surface` | `primary-160` | `#0A1F6C` |
| `surface-elevated` | `primary-140` | `#0F2FA2` |
| `text-primary` | `neutral-60` | `#E0E5F5` |
| `text-secondary` | `neutral-100` | `#B9C5E9` |
| `text-tertiary` | `neutral-140` | `#92A5DD` |
| `primary` | `primary-60` | `#89A1F4` |
| `primary-hover` | `primary-40` | `#B1C0F8` |
| `accent` | `secondary-100` | `#FFBE5C` |
| `accent-hover` | `secondary-80` | `#FFCB7C` |
| `warning` | `warning` | `#F39811` |
| `warning-hover` | `secondary-120` | `#FFAD33` |
| `error` | `error` | `#DA1E28` |
| `success` | `success` | `#24A148` |
| `border` | `primary-140` | `#0F2FA2` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `identity` | `white` | `#FFFFFF` |
| `on-identity` | `dark-100` | `#26324B` |
| `primary` | `branding` | `#004494` |
| `primary-hover` | `primary-140` | `#0F2FA2` |
| `accent` | `secondary-100` | `#FFBE5C` |
| `accent-hover` | `secondary-140` | `#FF9D0A` |
| `mark` | `branding` | `#004494` |
| `success` | `success` | `#24A148` |
| `warning` | `warning` | `#F39811` |
| `error` | `error` | `#DA1E28` |
| `text-primary-light` | `dark-100` | `#26324B` |
| `text-primary-dark` | `neutral-60` | `#E0E5F5` |
| `background-light` | `background` | `#FCFCFC` |
| `background-dark` | `primary-180` | `#051036` |
| `surface-light` | `neutral-40` | `#F3F5FB` |
| `surface-dark` | `primary-160` | `#0A1F6C` |
| `text-secondary-light` | `dark-80` | `#546FA6` |
| `text-tertiary-light` | `dark-60` | `#99AACC` |
| `border-light` | `neutral-100` | `#B9C5E9` |

### Typography

| Role | Font role key |
|------|---------------|
| `display` | `heading` |
| `prose` | `body` |
| `code` | `mono` |

## Rules

### 🛑 error (7)

#### `colorChoice` → `roles.colors.primary`

- **allowed:** branding, primary-100, primary-140
- **forbidden:** secondary-100, error, success, warning

> The European Commission's institutional identity blue is Branding (#004494), with ECL Primary 100 (#3860ED) carrying the default interactive role inside the component library. The warm Secondary scale, the success/warning/error status hues, and the Neutral scale all have their own roles — substituting any of them for the primary action colour breaks the institutional identity that EU citizens recognise as "European Commission." 

#### `colorChoice` → `roles.colors.mark`

- **allowed:** branding
- **forbidden:** primary-100, primary-140, secondary-100, dark-100

> The EC identity mark renders in Branding blue (#004494) specifically — not the ECL Primary 100 used for interactive controls and not Dark 100 used for ink. The mark colour and the interaction colour are intentionally distinct so that brand presence is visually separable from clickable affordance. 

#### `contrastRatio` → `text-primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> ECL components are documented to target WCAG 2.1 Level AA across European Commission digital surfaces, in line with Directive (EU) 2016/2102 on the accessibility of public- sector websites and mobile applications. Dark 100 (#26324B) on the near-white background (#FCFCFC) clears AA at ~12:1. 

#### `accessibilityRequirement` → `*`

- **standard:** `WCAG-AA`
- **criterion:** `1.4.3`

> WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The EUDI Wallet, as a Commission service programme rolling out to every Member State by end-2026, is in scope of the EU Public Sector Accessibility Directive; AA conformance is the regulatory floor for every consuming Member State implementation. 

#### `forbiddenTreatment` → `logo`

- **treatments:** stretched, rotated, recolored, drop-shadow, gradient-fill, outlined, on-busy-photo, tilted

> The European emblem (twelve gold stars on Reflex Blue) is governed by EU interinstitutional rules and the European Commission emblem-use guidelines. The emblem MUST render in its supplied proportions, in its supplied colours, on a clear field. Recolouring, distortion, rotation, or placement on a busy photographic background is prohibited. 

#### `fontPairing` → `typography.display`

- **requires:** `prose`
- **minSizeRatio:** `1.5`

> ECL's documented type scale steps from a 16px body anchor through 20px lede, 24px small heading, and up to 52px Heading 1 desktop. Every step preserves at least a 1.5× ratio against the body anchor; collapsing display to body size destroys the scannability ECL components rely on for multilingual readability across 24 official EU languages. 

#### `contextRestriction` → `roles.colors.error`

- **forbiddenContexts:** confirmation, completion, data-viz-positive
- **allowedContexts:** error-state, destructive-action, validation-failure

> ECL Error (#DA1E28) is the documented destructive / validation-failure colour. Reusing it for confirmation inverts the semantic contract built into ECL's Banner, Notification, and Form-validation components — components that EUDI Wallet implementations across 27+ Member States compose with directly. 

### ⚠️ warning (1)

#### `enumMembership` → `typography.heading.fontWeight`

- **allowed:** 400, 700

> ECL's published typography reference specifies Arial at weight 400 (Regular) for all heading levels except Heading 6, which uses 700 (Bold). Constraining the substitute (Public Sans) to Regular and Bold preserves the typographic flatness of the EC institutional surface — extra display weights would introduce hierarchy ECL doesn't itself use. 

### 💡 recommendation (1)

#### `compositionConstraint` → `roles.colors.mark`

- **pairsWith:** white, background, neutral-40, primary-180
- **doesNotPairWith:** secondary-100, error, warning, web-magenta

> Branding blue reads as institutional EC identity against the white canvas, the near-white background, or the deep Primary 180 navy. Placing it adjacent to the Secondary gold, Warning orange, or Error red at equal weight produces chromatic competition that fights the measured civic voice EUDI inherits from the Commission's institutional identity. 

## Provenance

- **Source:** <https://commission.europa.eu/strategy-and-policy/priorities-2019-2024/europe-fit-digital-age/european-digital-identity_en>
- **License:** `Proprietary — © European Union`
- **Attribution:** European Digital Identity (EUDI) programme, European Commission. The EUDI Wallet is published by the Commission's Directorate-General for Communications Networks, Content and Technology (DG CONNECT) and is rendered through the Europa Component Library (ECL) institutional identity. "European Union," the EU emblem, and the European Commission marks are reserved. 
- **Imported:** `2026-05-19`
- **Notes:** Typography substitution: ECL specifies Arial exclusively for EC digital surfaces (font-family: Arial, sans-serif). Arial is proprietary to Monotype and is not present in this catalogue's fonts/ directory. This brand references public-sans@1 as the open-source heading face (the closest grotesque-sans match commissioned for U.S. government digital use) and manrope@1 as the body face, with roboto-mono@1 for code. Consumers targeting an actual EC-licensed surface should use Arial via their platform's stock distribution. The EUDI programme inherits ECL identity rather than publishing a separate brand; this atom maps ECL Branding blue to the `identity` and `mark` roles and ECL Primary 100 to the default interactive primary, with the warm Secondary scale carrying the accent role. 

---

*Generated by the brand-atoms converter. Source: `eudi@1.0.0` from the encyclopedia.*