W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
European Digital Identity
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.
1 palette 3 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/eudi/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/eudi/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
European Digital Identity
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 · [email protected] · 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 ([email protected]) |
OFL-1.1 | sans-serif |
body |
Manrope ([email protected]) |
OFL-1.1 | sans-serif |
mono |
Roboto Mono ([email protected]) |
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
identityandmarkroles 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: [email protected] from the encyclopedia.
Components — same template, themed by European Digital Identity
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
European Digital Identity
A clear hierarchy in European Digital Identity's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
European Digital Identity
[email protected]font · heading
Public Sans
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Manrope
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
Roboto Mono
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ secondary-100 #FFBE5C accent-hover
→ secondary-140 #FF9D0A background-dark
→ primary-180 #051036 background-light
→ background #FCFCFC border-light
→ neutral-100 #B9C5E9 error
→ error #DA1E28 identity
→ white #FFFFFF mark
→ branding #004494 on-identity
→ dark-100 #26324B primary
→ branding #004494 primary-hover
→ primary-140 #0F2FA2 success
→ success #24A148 surface-dark
→ primary-160 #0A1F6C surface-light
→ neutral-40 #F3F5FB text-primary-dark
→ neutral-60 #E0E5F5 text-primary-light
→ dark-100 #26324B text-secondary-light
→ dark-80 #546FA6 text-tertiary-light
→ dark-60 #99AACC warning
→ warning #F39811 Typography
code
→ mono Roboto Mono display
→ heading Public Sans prose
→ body Manrope Palette mode mappings (from eudi)
Light mode (15 roles)
accent
→ secondary-100 accent-hover
→ secondary-140 background
→ background border
→ neutral-100 error
→ error primary
→ branding primary-hover
→ primary-140 success
→ success surface
→ neutral-40 surface-elevated
→ white text-primary
→ dark-100 text-secondary
→ dark-80 text-tertiary
→ dark-60 warning
→ warning warning-hover
→ secondary-180 Dark mode (15 roles)
accent
→ secondary-100 accent-hover
→ secondary-80 background
→ primary-180 border
→ primary-140 error
→ error primary
→ primary-60 primary-hover
→ primary-40 success
→ success surface
→ primary-160 surface-elevated
→ primary-140 text-primary
→ neutral-60 text-secondary
→ neutral-100 text-tertiary
→ neutral-140 warning
→ warning warning-hover
→ secondary-120 Rules (9 typed constraints)
error · 7 rules
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 rule
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 rule
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.