W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Unreal Engine
Unreal Engine is Epic Games' real-time 3D creation platform — the engine behind Fortnite, the Unreal Tournament series, a large share of AAA console / PC games, and a growing footprint in film virtual-production (the volume / LED-wall pipeline behind The Mandalorian and its successors), architectural visualization, and automotive simulation. The brand voice under the recent Epic Design System ("EDS") rebrand is cinematic-engineering: hero artwork on deep ink grounds, the signature Unreal Blue (#26BBFF) carrying the primary action, and a calibrated nine-stop blue ramp covering everything from deep-navy surface tints (#0A2633) to bright link affordances (#A0E1FF). Visually, Unreal Engine is dark-first by construction — the deep ink canvas (#101014) is the dominant background, and the brand reads at its strongest in hero key-art presentations. Unreal Engine is a brand under the Epic Games umbrella (parent catalogued as epic-games@1) but stands on its own atom because the EDS blue identity is functionally distinct from the reductive monochrome Epic Games Store chrome.
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/unreal-engine/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/unreal-engine/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.
Unreal Engine
Unreal Engine is Epic Games' real-time 3D creation platform — the engine behind Fortnite, the Unreal Tournament series, a large share of AAA console / PC games, and a growing footprint in film virtual-production (the volume / LED-wall pipeline behind The Mandalorian and its successors), architectural visualization, and automotive simulation. The brand voice under the recent Epic Design System ("EDS") rebrand is cinematic-engineering: hero artwork on deep ink grounds, the signature Unreal Blue (#26BBFF) carrying the primary action, and a calibrated nine-stop blue ramp covering everything from deep-navy surface tints (#0A2633) to bright link affordances (#A0E1FF). Visually, Unreal Engine is dark-first by construction — the deep ink canvas (#101014) is the dominant background, and the brand reads at its strongest in hero key-art presentations. Unreal Engine is a brand under the Epic Games umbrella (parent catalogued as epic-games@1) but stands on its own atom because the EDS blue identity is functionally distinct from the reductive monochrome Epic Games Store chrome.
Tags: unreal-engine, epic-games, gaming, engine, real-time-3d, dark-first, blue
Atoms
Palette
Unreal Engine · [email protected] · Proprietary — All Rights Reserved
Unreal Engine's brand palette as captured from the live unrealengine.com Epic Design System ("EDS") tokens — including the --color-eds.palette.blue.* family (the signature Unreal blue ramp), the --color-eds.fill.primary.* family (default brand action), the --color-background-default ink canvas, and the --color-fill-critical.* and --color-fill-success.* status channels. The brand is dark-first by construction: a deep ink canvas (#101014) carries the chrome, with the signature Unreal Blue (#26BBFF) as the primary action color across the design system. The blue ramp is fully calibrated for both light and dark contexts — #0A2633 deep through #D6F2FF pale — and the brand reads as engineering-precise and cinematic.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter Tight ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
unreal-blue |
Unreal Blue | #26BBFF |
unreal-blue-hover |
Unreal Blue Hover | #72D3FF |
unreal-blue-400 |
Unreal Blue 400 | #33BFFF |
unreal-blue-500 |
Unreal Blue 500 | #69D0FF |
unreal-blue-600 |
Unreal Blue 600 | #A0E1FF |
unreal-blue-700 |
Unreal Blue 700 | #D6F2FF |
unreal-blue-300 |
Unreal Blue 300 | #258CBB |
unreal-blue-200 |
Unreal Blue 200 | #185977 |
unreal-blue-100 |
Unreal Blue 100 | #0A2633 |
ink |
Ink | #101014 |
ink-elevated |
Ink Elevated | #202024 |
ink-elevated-hover |
Ink Elevated Hover | #505054 |
ink-divider |
Ink Divider | #303034 |
ink-deep |
Ink Deep | #000000 |
snow |
Snow | #FFFFFF |
snow-soft |
Snow Soft | #808084 |
critical-default |
Critical Default | #FF3F56 |
critical-alternate |
Critical Alternate | #FF6173 |
critical-text |
Critical Text | #FF6173 |
success-default |
Success Default | #8AEA90 |
success-alternate |
Success Alternate | #71D687 |
warning-default |
Warning Default | #FFC229 |
warning-yellow-400 |
Warning Yellow 400 | #F7D82B |
gradient-green |
Gradient Green | #5FE367 |
gradient-orange |
Gradient Orange | #FE8539 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
snow |
#FFFFFF |
surface |
unreal-blue-700 |
#D6F2FF |
surface-elevated |
snow |
#FFFFFF |
text-primary |
ink |
#101014 |
text-secondary |
ink-elevated-hover |
#505054 |
text-tertiary |
snow-soft |
#808084 |
primary |
unreal-blue-200 |
#185977 |
primary-hover |
unreal-blue-300 |
#258CBB |
accent |
unreal-blue-300 |
#258CBB |
accent-hover |
unreal-blue-200 |
#185977 |
warning |
warning-default |
#FFC229 |
warning-hover |
gradient-orange |
#FE8539 |
error |
critical-default |
#FF3F56 |
success |
success-alternate |
#71D687 |
border |
ink-divider |
#303034 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
ink |
#101014 |
surface |
ink-elevated |
#202024 |
surface-elevated |
ink-elevated-hover |
#505054 |
text-primary |
snow |
#FFFFFF |
text-secondary |
snow-soft |
#808084 |
text-tertiary |
ink-elevated-hover |
#505054 |
primary |
unreal-blue |
#26BBFF |
primary-hover |
unreal-blue-hover |
#72D3FF |
accent |
unreal-blue-hover |
#72D3FF |
accent-hover |
unreal-blue-500 |
#69D0FF |
warning |
warning-default |
#FFC229 |
warning-hover |
gradient-orange |
#FE8539 |
error |
critical-default |
#FF3F56 |
success |
success-default |
#8AEA90 |
border |
ink-divider |
#303034 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
ink |
#101014 |
on-identity |
unreal-blue |
#26BBFF |
primary |
unreal-blue |
#26BBFF |
primary-hover |
unreal-blue-hover |
#72D3FF |
accent |
unreal-blue-hover |
#72D3FF |
accent-hover |
unreal-blue-500 |
#69D0FF |
mark |
snow |
#FFFFFF |
success |
success-default |
#8AEA90 |
warning |
warning-default |
#FFC229 |
error |
critical-default |
#FF3F56 |
text-primary-light |
ink |
#101014 |
text-primary-dark |
snow |
#FFFFFF |
background-light |
snow |
#FFFFFF |
background-dark |
ink |
#101014 |
surface-light |
unreal-blue-700 |
#D6F2FF |
surface-dark |
ink-elevated |
#202024 |
text-secondary-light |
ink-elevated-hover |
#505054 |
text-tertiary-light |
snow-soft |
#808084 |
border-light |
ink-divider |
#303034 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (5)
colorChoice → roles.colors.primary
- allowed: unreal-blue, unreal-blue-hover, unreal-blue-400, unreal-blue-500
- forbidden: critical-default, warning-default, success-default, gradient-orange, gradient-green
The Unreal Blue family (#26BBFF default / #72D3FF hover) carries the primary action across the Epic Design System — declared as --color-fill-primary-default and --color- fill-primary-hover. The status colors (red critical, amber warning, green success) are reserved for their semantic roles, and the gradient end-stops are content affordances inside EDS gradient surfaces, not primary actions. Substituting any of them for the brand primary inverts the documented EDS action grammar.
colorChoice → roles.colors.mark
- allowed: snow, ink, unreal-blue
- forbidden: critical-default, warning-default, success-default, gradient-orange, gradient-green
The Unreal Engine wordmark renders in pure white on dark surfaces, in pure black on light surfaces, and in the Unreal Blue (#26BBFF) for documented brand-color treatments on hero key-art. The status colors and gradient end-stops are not mark fills; substituting any of them for the wordmark fill misrepresents the brand.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, outlined, distorted
Unreal Engine's wordmark is a fixed-proportion identity governed by the Epic Games / Unreal Engine branding center. Recoloring (outside the documented Unreal Blue treatment), skewing, rotating, drop-shadowing, or placing the mark on a busy photo without documented clearspace conflicts with the Epic Games branding guidelines.
contrastRatio → text-primary
- against:
background - minRatio:
7 - standard:
WCAG-AAA
Snow (#FFFFFF) on Ink (#101014) measures ~19:1 — clears AAA decisively. Unreal Engine's marketing surfaces carry long-form technical documentation (engine release notes, Blueprint reference, C++ API docs) where the AAA contrast band matches the long-read posture.
contextRestriction → roles.colors.accent
- forbiddenContexts: error-state, destructive-action, warning
- allowedContexts: hero-headline, active-state, focus-ring, inline-link, selection
The Unreal Blue family carries identification, inline links, focus rings, and selection (--color-text-select- default, --color-fill-primary-press). It must not appear as the error / destructive / warning state — those contexts use --color-fill-critical-default (#FF3F56) and --color-icon-warning (#FFC229) respectively. Substituting blue for any of those semantic roles collapses the EDS status grammar.
⚠️ warning (2)
enumMembership → typography.heading.fontWeight
- allowed: 400, 500, 700, 900
Unreal Engine's EDS declares Regular (400), Medium (500), Bold (700), and Black (900) cuts of Inter / Inter Tight — captured as --fonts-eds.weight.regular, --fonts-eds.weight. medium, --fonts-eds.weight.bold, and --fonts-eds.weight. black. Lighter cuts (100–300) and SemiBold (600) are not in the deployed type system.
accessibilityRequirement → *
- standard:
WCAG-AAA - criterion:
1.4.6
WCAG 2.1 Success Criterion 1.4.6 (Contrast Enhanced) — Level AAA. Unreal Engine's documentation surfaces and the editor splash / loading screens specifically (which developers spend long sessions reading) benefit from the AAA contrast band rather than the AA floor.
💡 recommendation (2)
fontPairing → typography.display
- requires:
prose - minSizeRatio:
1.5
Unreal Engine pairs Inter Tight (display, --font-family- display) with Inter Regular (prose, --font-family-base). The compressed Inter Tight earns a 1.5× minimum size ratio over the wider Inter body to preserve the cinematic-engineering hierarchy the brand depends on.
compositionConstraint → roles.colors.primary
- pairsWith: ink, ink-elevated, snow, unreal-blue-100
- doesNotPairWith: critical-default, warning-default, gradient-orange
Unreal Blue reads cleanest against the deep ink canvas or the snow inverse. Placing it directly adjacent to the critical red, warning amber, or gradient orange produces chromatic conflict and collapses the semantic separation between brand action and status signaling — the live EDS surfaces keep these channels separated by neutral chrome.
Provenance
- Source: https://www.unrealengine.com/
- License:
Proprietary — All Rights Reserved - Attribution: Epic Games, Inc. — visual identity captured from the deployed Epic Design System ("EDS") tokens on unrealengine.com (--color-eds.palette.blue., --color-fill- primary., --color-background-default, --color-fill- critical., --color-fill-success., --font-family-base, --font-family-display, --font-family-code CSS custom-property families). Unreal, Unreal Engine, the Unreal Engine logo, and associated marks are trademarks of Epic Games, Inc.
- Imported:
2026-05-19 - Notes: Derived from live site CSS at https://www.unrealengine.com/ on 2026-05-19. The Epic Design System ("EDS") underpins the deployed brand assets; the captured tokens align with the branding center at https://www.unrealengine.com/en-US/ branding which is the canonical Unreal Engine identity reference. The primary typeface is Inter (--fonts- eds.family.base / --font-family-base = "Inter, sans-serif", open-source); the display typeface is Inter Tight (--fonts- eds.family.display / --font-family-display, open-source); the monospace family is Recursive Mono (--fonts-eds.family. code, open-source via Google Fonts). This atom references inter@1 / inter-tight@1 / jetbrainsmono-nerdfont@1; consumers who require Recursive Mono should override the mono reference in derived atoms. assets: [] per the encyclopedia's trademark-redistribution policy.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Unreal Engine
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.
Unreal Engine
A clear hierarchy in Unreal Engine'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
Unreal Engine
[email protected]font · heading
Inter Tight
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Inter
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
[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
→ unreal-blue-hover #72D3FF accent-hover
→ unreal-blue-500 #69D0FF background-dark
→ ink #101014 background-light
→ snow #FFFFFF border-light
→ ink-divider #303034 error
→ critical-default #FF3F56 identity
→ ink #101014 mark
→ snow #FFFFFF on-identity
→ unreal-blue #26BBFF primary
→ unreal-blue #26BBFF primary-hover
→ unreal-blue-hover #72D3FF success
→ success-default #8AEA90 surface-dark
→ ink-elevated #202024 surface-light
→ unreal-blue-700 #D6F2FF text-primary-dark
→ snow #FFFFFF text-primary-light
→ ink #101014 text-secondary-light
→ ink-elevated-hover #505054 text-tertiary-light
→ snow-soft #808084 warning
→ warning-default #FFC229 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter Tight prose
→ body Inter Palette mode mappings (from unreal-engine)
Light mode (15 roles)
accent
→ unreal-blue-300 accent-hover
→ unreal-blue-200 background
→ snow border
→ ink-divider error
→ critical-default primary
→ unreal-blue-200 primary-hover
→ unreal-blue-300 success
→ success-alternate surface
→ unreal-blue-700 surface-elevated
→ snow text-primary
→ ink text-secondary
→ ink-elevated-hover text-tertiary
→ snow-soft warning
→ warning-default warning-hover
→ gradient-orange Dark mode (15 roles)
accent
→ unreal-blue-hover accent-hover
→ unreal-blue-500 background
→ ink border
→ ink-divider error
→ critical-default primary
→ unreal-blue primary-hover
→ unreal-blue-hover success
→ success-default surface
→ ink-elevated surface-elevated
→ ink-elevated-hover text-primary
→ snow text-secondary
→ snow-soft text-tertiary
→ ink-elevated-hover warning
→ warning-default warning-hover
→ gradient-orange Rules (9 typed constraints)
error · 5 rules
colorChoice roles.colors.primary allowed unreal-blue, unreal-blue-hover, unreal-blue-400, unreal-blue-500 forbidden critical-default, warning-default, success-default, gradient-orange, gradient-green The Unreal Blue family (#26BBFF default / #72D3FF hover) carries the primary action across the Epic Design System — declared as --color-fill-primary-default and --color- fill-primary-hover. The status colors (red critical, amber warning, green success) are reserved for their semantic roles, and the gradient end-stops are content affordances inside EDS gradient surfaces, not primary actions. Substituting any of them for the brand primary inverts the documented EDS action grammar.
colorChoice roles.colors.mark allowed snow, ink, unreal-blue forbidden critical-default, warning-default, success-default, gradient-orange, gradient-green The Unreal Engine wordmark renders in pure white on dark surfaces, in pure black on light surfaces, and in the Unreal Blue (#26BBFF) for documented brand-color treatments on hero key-art. The status colors and gradient end-stops are not mark fills; substituting any of them for the wordmark fill misrepresents the brand.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, outlined, distorted Unreal Engine's wordmark is a fixed-proportion identity governed by the Epic Games / Unreal Engine branding center. Recoloring (outside the documented Unreal Blue treatment), skewing, rotating, drop-shadowing, or placing the mark on a busy photo without documented clearspace conflicts with the Epic Games branding guidelines.
contrastRatio text-primary against background minRatio 7 standard WCAG-AAA Snow (#FFFFFF) on Ink (#101014) measures ~19:1 — clears AAA decisively. Unreal Engine's marketing surfaces carry long-form technical documentation (engine release notes, Blueprint reference, C++ API docs) where the AAA contrast band matches the long-read posture.
contextRestriction roles.colors.accent forbiddenContexts error-state, destructive-action, warning allowedContexts hero-headline, active-state, focus-ring, inline-link, selection The Unreal Blue family carries identification, inline links, focus rings, and selection (--color-text-select- default, --color-fill-primary-press). It must not appear as the error / destructive / warning state — those contexts use --color-fill-critical-default (#FF3F56) and --color-icon-warning (#FFC229) respectively. Substituting blue for any of those semantic roles collapses the EDS status grammar.
warning · 2 rules
enumMembership typography.heading.fontWeight allowed 400, 500, 700, 900 Unreal Engine's EDS declares Regular (400), Medium (500), Bold (700), and Black (900) cuts of Inter / Inter Tight — captured as --fonts-eds.weight.regular, --fonts-eds.weight. medium, --fonts-eds.weight.bold, and --fonts-eds.weight. black. Lighter cuts (100–300) and SemiBold (600) are not in the deployed type system.
accessibilityRequirement * standard WCAG-AAA criterion 1.4.6 WCAG 2.1 Success Criterion 1.4.6 (Contrast Enhanced) — Level AAA. Unreal Engine's documentation surfaces and the editor splash / loading screens specifically (which developers spend long sessions reading) benefit from the AAA contrast band rather than the AA floor.
recommendation · 2 rules
fontPairing typography.display requires prose minSizeRatio 1.5 Unreal Engine pairs Inter Tight (display, --font-family- display) with Inter Regular (prose, --font-family-base). The compressed Inter Tight earns a 1.5× minimum size ratio over the wider Inter body to preserve the cinematic-engineering hierarchy the brand depends on.
compositionConstraint roles.colors.primary pairsWith ink, ink-elevated, snow, unreal-blue-100 doesNotPairWith critical-default, warning-default, gradient-orange Unreal Blue reads cleanest against the deep ink canvas or the snow inverse. Placing it directly adjacent to the critical red, warning amber, or gradient orange produces chromatic conflict and collapses the semantic separation between brand action and status signaling — the live EDS surfaces keep these channels separated by neutral chrome.
Provenance
- Source
- https://www.unrealengine.com/
- License
Proprietary — All Rights Reserved- Attribution
- Epic Games, Inc. — visual identity captured from the deployed Epic Design System ("EDS") tokens on unrealengine.com (--color-eds.palette.blue.*, --color-fill- primary.*, --color-background-default, --color-fill- critical.*, --color-fill-success.*, --font-family-base, --font-family-display, --font-family-code CSS custom-property families). Unreal, Unreal Engine, the Unreal Engine logo, and associated marks are trademarks of Epic Games, Inc.
- Imported
2026-05-19- Notes
- Derived from live site CSS at https://www.unrealengine.com/ on 2026-05-19. The Epic Design System ("EDS") underpins the deployed brand assets; the captured tokens align with the branding center at https://www.unrealengine.com/en-US/ branding which is the canonical Unreal Engine identity reference. The primary typeface is Inter (--fonts- eds.family.base / --font-family-base = "Inter, sans-serif", open-source); the display typeface is Inter Tight (--fonts- eds.family.display / --font-family-display, open-source); the monospace family is Recursive Mono (--fonts-eds.family. code, open-source via Google Fonts). This atom references inter@1 / inter-tight@1 / jetbrainsmono-nerdfont@1; consumers who require Recursive Mono should override the mono reference in derived atoms. assets: [] per the encyclopedia's trademark-redistribution policy.