# Unity

> `unity@1.0.0`

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** · `unity@1.0.0` · 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** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | 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: `unity@1.0.0` from the encyclopedia.*