W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Unity
Unity is the San Francisco-headquartered real-time 3D engine and developer-platform company behind the Unity Editor, the runtime for thousands of shipped games (including a large share of the mobile and indie PC market), Unity Cloud, Unity AI, Unity DOTS, and the Unity Ads / IronSource monetization stack. The brand voice under the recent "Mango" design system is product-tooling professional: developer-first marketing, deep feature documentation, and a calibrated mix of light marketing chrome with a stark black header treatment. Visually, Unity is light- first with a black navigation surface: a paper canvas (#FFFFFF) carries the marketing surfaces and the Unity cube mark, a pure- black header chrome (#000000) inverts to white type, and the Mango Blue (#3358D4) family carries the primary action across the design system. Typography is Inter (open-source) for both sans body and headings, with the proprietary Platform and Nohemi families declared on the live site for hero display use.
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/unity/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/unity/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.
Unity
Unity is the San Francisco-headquartered real-time 3D engine and developer-platform company behind the Unity Editor, the runtime for thousands of shipped games (including a large share of the mobile and indie PC market), Unity Cloud, Unity AI, Unity DOTS, and the Unity Ads / IronSource monetization stack. The brand voice under the recent "Mango" design system is product-tooling professional: developer-first marketing, deep feature documentation, and a calibrated mix of light marketing chrome with a stark black header treatment. Visually, Unity is light- first with a black navigation surface: a paper canvas (#FFFFFF) carries the marketing surfaces and the Unity cube mark, a pure- black header chrome (#000000) inverts to white type, and the Mango Blue (#3358D4) family carries the primary action across the design system. Typography is Inter (open-source) for both sans body and headings, with the proprietary Platform and Nohemi families declared on the live site for hero display use.
Tags: unity, gaming, engine, real-time-3d, developer-tooling, blue
Atoms
Palette
Unity · [email protected] · Proprietary — All Rights Reserved
Unity's brand palette as captured from the live unity.com "Mango" design-system tokens (--color-mango-, --color-gray-, --color-blue, --color-blue-dark, --color-blue-light token families). The brand is light-first with a black header treatment: a paper canvas (#FFFFFF) carries the primary marketing surface, the page header inverts to a pure-black (#000000) navigation bar, and a calibrated "Mango Blue" (#3358D4) is the primary CTA fill across the deployed CSS. A neutral grayscale ramp from pure white through Mango Gray 950 (#1D1D1D) supports text, borders, and surface chrome. Typography is Inter for sans body, with the proprietary Platform / Nohemi families declared for display use.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([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 |
|---|---|---|
mango-blue |
Mango Blue | #3358D4 |
mango-blue-hover |
Mango Blue Hover | #2B4FCA |
mango-blue-deep |
Mango Blue Deep | #2746A7 |
mango-blue-light |
Mango Blue Light | #5779E8 |
mango-blue-focus |
Mango Blue Focus | #238CEC |
blue-dark |
Blue Dark | #0A5CF5 |
blue-base |
Blue Base | #3A5BC7 |
blue-light |
Blue Light | #9EB1FF |
mango-black |
Mango Black | #000000 |
mango-gray-950 |
Mango Gray 950 | #1D1D1D |
mango-gray-900 |
Mango Gray 900 | #242424 |
mango-gray-800 |
Mango Gray 800 | #262626 |
mango-gray-700 |
Mango Gray 700 | #424242 |
mango-gray-600 |
Mango Gray 600 | #585858 |
mango-gray-500 |
Mango Gray 500 | #727272 |
mango-gray-400 |
Mango Gray 400 | #A6A6A6 |
mango-gray-300 |
Mango Gray 300 | #CCCCCC |
mango-gray-200 |
Mango Gray 200 | #E6E6E6 |
mango-gray-100 |
Mango Gray 100 | #F0F0F0 |
mango-gray-50 |
Mango Gray 50 | #F5F5F5 |
mango-white |
Mango White | #FFFFFF |
mango-success |
Mango Success | #16A34A |
mango-warning |
Mango Warning | #D97706 |
mango-error |
Mango Error | #DC2626 |
mango-info |
Mango Info | #3358D4 |
brand-red |
Brand Red | #FF5449 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
mango-white |
#FFFFFF |
surface |
mango-gray-50 |
#F5F5F5 |
surface-elevated |
mango-white |
#FFFFFF |
text-primary |
mango-gray-900 |
#242424 |
text-secondary |
mango-gray-700 |
#424242 |
text-tertiary |
mango-gray-500 |
#727272 |
primary |
mango-blue |
#3358D4 |
primary-hover |
mango-blue-hover |
#2B4FCA |
accent |
blue-base |
#3A5BC7 |
accent-hover |
blue-dark |
#0A5CF5 |
warning |
mango-warning |
#D97706 |
warning-hover |
mango-error |
#DC2626 |
error |
mango-error |
#DC2626 |
success |
mango-success |
#16A34A |
border |
mango-gray-300 |
#CCCCCC |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
mango-black |
#000000 |
surface |
mango-gray-950 |
#1D1D1D |
surface-elevated |
mango-gray-900 |
#242424 |
text-primary |
mango-white |
#FFFFFF |
text-secondary |
mango-gray-300 |
#CCCCCC |
text-tertiary |
mango-gray-400 |
#A6A6A6 |
primary |
mango-blue |
#3358D4 |
primary-hover |
mango-blue-light |
#5779E8 |
accent |
blue-light |
#9EB1FF |
accent-hover |
mango-blue-focus |
#238CEC |
warning |
mango-warning |
#D97706 |
warning-hover |
mango-error |
#DC2626 |
error |
mango-error |
#DC2626 |
success |
mango-success |
#16A34A |
border |
mango-gray-700 |
#424242 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
mango-white |
#FFFFFF |
on-identity |
mango-black |
#000000 |
primary |
mango-blue |
#3358D4 |
primary-hover |
mango-blue-hover |
#2B4FCA |
accent |
blue-base |
#3A5BC7 |
accent-hover |
blue-dark |
#0A5CF5 |
mark |
mango-black |
#000000 |
success |
mango-success |
#16A34A |
warning |
mango-warning |
#D97706 |
error |
mango-error |
#DC2626 |
text-primary-light |
mango-gray-900 |
#242424 |
text-primary-dark |
mango-white |
#FFFFFF |
background-light |
mango-white |
#FFFFFF |
background-dark |
mango-black |
#000000 |
surface-light |
mango-gray-50 |
#F5F5F5 |
surface-dark |
mango-gray-950 |
#1D1D1D |
text-secondary-light |
mango-gray-700 |
#424242 |
text-tertiary-light |
mango-gray-500 |
#727272 |
border-light |
mango-gray-300 |
#CCCCCC |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (4)
colorChoice → roles.colors.mark
- allowed: mango-black, mango-white
- forbidden: mango-blue, blue-base, mango-success, mango-warning, mango-error, brand-red
The Unity cube mark and wordmark render in monochrome across the live marketing site — pure black (#000000) on light surfaces and pure white on dark surfaces. The Mango Blue is the action color, not the mark fill; substituting any of the status colors (success, warning, error) or the bright brand-red for the mark fill misrepresents the brand's documented monochrome posture.
colorChoice → roles.colors.primary
- allowed: mango-blue, mango-blue-hover, mango-blue-deep, blue-base
- forbidden: mango-success, mango-warning, mango-error, brand-red
Unity's primary action color across the Mango design system is the blue family — observed on the live "Get Started", "Download Unity", and "Plans and pricing" CTAs as the --color-mango-blue-500 fill. The status colors (green, amber, red) are reserved for confirmation, alert, and error states respectively; substituting any of them for the primary inverts the documented action grammar.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, outlined, distorted
Unity's wordmark and cube mark are fixed-proportion identities. The brand's published assets render only in solid monochrome with documented clearspace; gradient- filling, drop-shadowing, skewing, rotating, or placing the mark on a busy photo conflicts with the brand's developer-tooling restraint.
contrastRatio → text-primary
- against:
background - minRatio:
7 - standard:
WCAG-AAA
Mango Gray 900 (#242424) on Mango White (#FFFFFF) measures ~16:1 — clears WCAG AAA decisively. Unity's marketing surfaces carry long-form technical documentation, code snippets, and dense feature comparison tables; the AAA contrast floor matches the long-read posture.
⚠️ warning (3)
contextRestriction → roles.colors.primary
- forbiddenContexts: background, large-surface, hero-headline
- allowedContexts: primary-cta, inline-link, focus-ring, active-state
Mango Blue is a focal action accent — observed only on CTA fills, focus rings, and inline links on the live marketing site. Unity's hero headlines, large surfaces, and page backgrounds are monochrome (paper canvas with black navigation); a blue hero background or blue headline treatment would read as a sub-product page (e.g., Unity Cloud), not as the parent Unity identity.
enumMembership → typography.heading.fontWeight
- allowed: 400, 500, 600, 700
Unity's live marketing CSS declares Inter at Light (300), Regular (400), Medium (500), SemiBold (600), and Bold (700) via --font-weight-light, --font-weight-normal, --font-weight-medium, --font-weight-semibold, and --font- weight-bold. Heading roles use 400–700; Light (300) is reserved for body / legal text. The Thin (100) --font-weight-thin token exists but is not exercised by the live chrome.
accessibilityRequirement → *
- standard:
WCAG-AAA - criterion:
1.4.6
WCAG 2.1 Success Criterion 1.4.6 (Contrast Enhanced) — Level AAA. Unity's marketing surfaces carry long-form technical documentation and the Unity Editor's product surfaces specifically (which run for hours of focused work) benefit from the AAA contrast band rather than the AA floor.
💡 recommendation (2)
compositionConstraint → roles.colors.primary
- pairsWith: mango-white, mango-gray-50, mango-black, mango-gray-950
- doesNotPairWith: brand-red, mango-warning, mango-success
Mango Blue reads cleanest against the white / lightest- gray canvases or the inverted black chrome. Placing it directly adjacent to the status colors (success green, warning amber, brand red) introduces chromatic conflict — the live site keeps these channels structurally separated with neutral surfaces.
fontPairing → typography.display
- requires:
prose - minSizeRatio:
1.5
Unity's live marketing chrome pairs the proprietary Platform display face (--font-platform) with Inter for body. When Platform is unavailable, Inter Bold (700) carries the display role at a 1.5× minimum size ratio over Inter Regular (400) prose to preserve hierarchy from a single family.
Provenance
- Source: https://unity.com/
- License:
Proprietary — All Rights Reserved - Attribution: Unity Technologies — visual identity captured from the deployed "Mango" design-system tokens on unity.com (--color- mango-, --color-gray-, --color-blue-*, --font-platform, --font-inter, --font-nohemi CSS custom-property families). Unity, the Unity logo, the Unity cube mark, Unity DOTS, Unity Cloud, and associated marks are trademarks of Unity Technologies.
- Imported:
2026-05-19 - Notes: Derived from live site CSS at https://unity.com/ on 2026-05-19. The Unity brand page (https://unity.com/brand) returned a 403 to programmatic clients on this fetch; this atom captures the live marketing-site CSS only. The primary typeface is Inter (--font-inter, open-source) for body and most marketing copy; the proprietary Platform face (--font-platform, declared via @font-face but not publicly distributed) and Nohemi (--font-nohemi, also proprietary) are reserved for hero display use. This atom references inter@1 for all roles. 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 Unity
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.
Unity
A clear hierarchy in Unity'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
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
→ blue-base #3A5BC7 accent-hover
→ blue-dark #0A5CF5 background-dark
→ mango-black #000000 background-light
→ mango-white #FFFFFF border-light
→ mango-gray-300 #CCCCCC error
→ mango-error #DC2626 identity
→ mango-white #FFFFFF mark
→ mango-black #000000 on-identity
→ mango-black #000000 primary
→ mango-blue #3358D4 primary-hover
→ mango-blue-hover #2B4FCA success
→ mango-success #16A34A surface-dark
→ mango-gray-950 #1D1D1D surface-light
→ mango-gray-50 #F5F5F5 text-primary-dark
→ mango-white #FFFFFF text-primary-light
→ mango-gray-900 #242424 text-secondary-light
→ mango-gray-700 #424242 text-tertiary-light
→ mango-gray-500 #727272 warning
→ mango-warning #D97706 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from unity)
Light mode (15 roles)
accent
→ blue-base accent-hover
→ blue-dark background
→ mango-white border
→ mango-gray-300 error
→ mango-error primary
→ mango-blue primary-hover
→ mango-blue-hover success
→ mango-success surface
→ mango-gray-50 surface-elevated
→ mango-white text-primary
→ mango-gray-900 text-secondary
→ mango-gray-700 text-tertiary
→ mango-gray-500 warning
→ mango-warning warning-hover
→ mango-error Dark mode (15 roles)
accent
→ blue-light accent-hover
→ mango-blue-focus background
→ mango-black border
→ mango-gray-700 error
→ mango-error primary
→ mango-blue primary-hover
→ mango-blue-light success
→ mango-success surface
→ mango-gray-950 surface-elevated
→ mango-gray-900 text-primary
→ mango-white text-secondary
→ mango-gray-300 text-tertiary
→ mango-gray-400 warning
→ mango-warning warning-hover
→ mango-error Rules (9 typed constraints)
error · 4 rules
colorChoice roles.colors.mark allowed mango-black, mango-white forbidden mango-blue, blue-base, mango-success, mango-warning, mango-error, brand-red The Unity cube mark and wordmark render in monochrome across the live marketing site — pure black (#000000) on light surfaces and pure white on dark surfaces. The Mango Blue is the *action* color, not the mark fill; substituting any of the status colors (success, warning, error) or the bright brand-red for the mark fill misrepresents the brand's documented monochrome posture.
colorChoice roles.colors.primary allowed mango-blue, mango-blue-hover, mango-blue-deep, blue-base forbidden mango-success, mango-warning, mango-error, brand-red Unity's primary action color across the Mango design system is the blue family — observed on the live "Get Started", "Download Unity", and "Plans and pricing" CTAs as the --color-mango-blue-500 fill. The status colors (green, amber, red) are reserved for confirmation, alert, and error states respectively; substituting any of them for the primary inverts the documented action grammar.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, outlined, distorted Unity's wordmark and cube mark are fixed-proportion identities. The brand's published assets render only in solid monochrome with documented clearspace; gradient- filling, drop-shadowing, skewing, rotating, or placing the mark on a busy photo conflicts with the brand's developer-tooling restraint.
contrastRatio text-primary against background minRatio 7 standard WCAG-AAA Mango Gray 900 (#242424) on Mango White (#FFFFFF) measures ~16:1 — clears WCAG AAA decisively. Unity's marketing surfaces carry long-form technical documentation, code snippets, and dense feature comparison tables; the AAA contrast floor matches the long-read posture.
warning · 3 rules
contextRestriction roles.colors.primary forbiddenContexts background, large-surface, hero-headline allowedContexts primary-cta, inline-link, focus-ring, active-state Mango Blue is a focal action accent — observed only on CTA fills, focus rings, and inline links on the live marketing site. Unity's hero headlines, large surfaces, and page backgrounds are monochrome (paper canvas with black navigation); a blue hero background or blue headline treatment would read as a sub-product page (e.g., Unity Cloud), not as the parent Unity identity.
enumMembership typography.heading.fontWeight allowed 400, 500, 600, 700 Unity's live marketing CSS declares Inter at Light (300), Regular (400), Medium (500), SemiBold (600), and Bold (700) via --font-weight-light, --font-weight-normal, --font-weight-medium, --font-weight-semibold, and --font- weight-bold. Heading roles use 400–700; Light (300) is reserved for body / legal text. The Thin (100) --font-weight-thin token exists but is not exercised by the live chrome.
accessibilityRequirement * standard WCAG-AAA criterion 1.4.6 WCAG 2.1 Success Criterion 1.4.6 (Contrast Enhanced) — Level AAA. Unity's marketing surfaces carry long-form technical documentation and the Unity Editor's product surfaces specifically (which run for hours of focused work) benefit from the AAA contrast band rather than the AA floor.
recommendation · 2 rules
compositionConstraint roles.colors.primary pairsWith mango-white, mango-gray-50, mango-black, mango-gray-950 doesNotPairWith brand-red, mango-warning, mango-success Mango Blue reads cleanest against the white / lightest- gray canvases or the inverted black chrome. Placing it directly adjacent to the status colors (success green, warning amber, brand red) introduces chromatic conflict — the live site keeps these channels structurally separated with neutral surfaces.
fontPairing typography.display requires prose minSizeRatio 1.5 Unity's live marketing chrome pairs the proprietary Platform display face (--font-platform) with Inter for body. When Platform is unavailable, Inter Bold (700) carries the display role at a 1.5× minimum size ratio over Inter Regular (400) prose to preserve hierarchy from a single family.
Provenance
- Source
- https://unity.com/
- License
Proprietary — All Rights Reserved- Attribution
- Unity Technologies — visual identity captured from the deployed "Mango" design-system tokens on unity.com (--color- mango-*, --color-gray-*, --color-blue-*, --font-platform, --font-inter, --font-nohemi CSS custom-property families). Unity, the Unity logo, the Unity cube mark, Unity DOTS, Unity Cloud, and associated marks are trademarks of Unity Technologies.
- Imported
2026-05-19- Notes
- Derived from live site CSS at https://unity.com/ on 2026-05-19. The Unity brand page (https://unity.com/brand) returned a 403 to programmatic clients on this fetch; this atom captures the live marketing-site CSS only. The primary typeface is Inter (--font-inter, open-source) for body and most marketing copy; the proprietary Platform face (--font-platform, declared via @font-face but not publicly distributed) and Nohemi (--font-nohemi, also proprietary) are reserved for hero display use. This atom references inter@1 for all roles. assets: [] per the encyclopedia's trademark-redistribution policy.