← Palettes · [email protected]

Unity

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.

26 swatches 15 light roles 15 dark roles unitygamingenginereal-time-3dlight-firstblue

Swatches

mango-blue

#3358D4

Primary brand action — --color-mango-blue-500. The Unity Download / Get Started CTA fill on the live marketing site.

mango-blue-hover

#2B4FCA

Hover variant — --color-mango-blue-600.

mango-blue-deep

#2746A7

Deep / pressed variant — --color-mango-blue-700.

mango-blue-light

#5779E8

Light variant — --color-mango-blue-400.

mango-blue-focus

#238CEC

Focus-ring blue — --color-mango-blue-focus.

blue-dark

#0A5CF5

Documented marketing-link blue — --color-blue-dark and --color-sky-700.

blue-base

#3A5BC7

Documented brand blue — --color-blue. Used as the primary- btn-hover gradient stop.

blue-light

#9EB1FF

Pale brand blue — --color-blue-light.

mango-black

#000000

Pure black — --color-mango-black. The Unity page header / navigation chrome.

mango-gray-950

#1D1D1D

Deepest neutral — --color-mango-gray-950.

mango-gray-900

#242424

High-emphasis text on light — --color-mango-gray-900 and --color-gray-800.

mango-gray-800

#262626

Secondary deep neutral — --color-mango-gray-800.

mango-gray-700

#424242

Body text on light surface — --color-mango-gray-700.

mango-gray-600

#585858

Secondary text — --color-mango-gray-600.

mango-gray-500

#727272

Tertiary text — --color-mango-gray-500.

mango-gray-400

#A6A6A6

Pale neutral text — --color-mango-gray-400.

mango-gray-300

#CCCCCC

Border / divider — --color-mango-gray-300 and --color- gray-300.

mango-gray-200

#E6E6E6

Quiet divider — --color-mango-gray-200.

mango-gray-100

#F0F0F0

Pale surface — --color-mango-gray-100.

mango-gray-50

#F5F5F5

Lightest neutral surface — --color-mango-gray-50.

mango-white

#FFFFFF

Primary canvas — --color-mango-white.

mango-success

#16A34A

Success green — --color-mango-success and --color-green- dark.

mango-warning

#D97706

Warning amber — --color-mango-warning.

mango-error

#DC2626

Error red — --color-mango-error.

mango-info

#3358D4

Informational blue — --color-mango-info (alias of mango- blue-500).

brand-red

#FF5449

Bright marketing red — --color-red. Used for promotional accents and end-of-line announcements.

Mode role mappings

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

Provenance

Source: https://unity.com/
Attribution: Unity Technologies — palette values captured from the deployed "Mango" design-system tokens on unity.com (--color- mango-*, --color-gray-*, --color-blue, --background-image- primary-btn-hover, --font-platform, --font-inter, --font- nohemi CSS custom-property families). Unity, the Unity logo, the Unity cube mark, 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 — so this atom captures only the live homepage CSS, not the brand-portal hex specifications. The primary typeface is Inter (--font-inter, open-source); the display typeface is Platform (--font-platform, proprietary) with Nohemi (--font-nohemi, proprietary) as a secondary display face. This atom references inter@1 for both display and prose; consumers who license Platform / Nohemi can override the references in derived atoms.