--- version: alpha name: Unity description: A dark-first, dual-mode system built around the Nohemi display face and Inter for UI — the "Mango" design language uses a near-black canvas, pill-shaped blue CTAs, and a restrained gray palette to position the world's most-used game engine as a professional developer tool rather than a gaming brand. colors: # Surface / canvas — dark mode is default; bg-white dark:bg-black pattern throughout background: "#000000" # dominant dark canvas (bg-black) surface: "#141414" # deep dark panels (mango-gray-900) surface-raised: "#1d1d1d" # slightly lifted dark surface (mango-gray-950) surface-card: "#262626" # card / module backgrounds (mango-gray-800) surface-light: "#ffffff" # light-mode sections (bg-white) surface-light-subtle: "#f5f5f5" # muted light surface (mango-gray-50) # Ink / text ink: "#ffffff" # primary text on dark canvas (mango-white) ink-secondary: "#a6a6a6" # secondary / muted text (mango-gray-400) ink-tertiary: "#727272" # caption / disabled text (mango-gray-500) on-light: "#000000" # text on white/light sections (mango-black) on-light-secondary: "#585858" # muted text on light sections (mango-gray-600) # Brand accent — Unity Mango blue primary: "#3358d4" # mango-blue-500; default CTA fill, badge, link primary-hover: "#2b4fca" # mango-blue-600; button hover state primary-light: "#5779e8" # mango-blue-400; lighter context on dark bg on-primary: "#ffffff" # text on primary fill # Interaction states focus-ring: "#238cec" # mango-blue-focus; keyboard focus ring border: "#424242" # dark-mode border (mango-gray-700) border-light: "#cccccc" # light-mode border (mango-gray-300) # Semantic success: "#16a34a" # mango-success error: "#dc2626" # mango-error warning: "#d97706" # mango-warning info: "#3358d4" # mango-info (same as primary) # Shadow tints shadow-soft: "#1f1f1f" # was #00000029 (alpha) — flattened rgba(0,0,0,0.16) over surface-card #262626 shadow-deep: "#0b0b0b" # was #000000b3 (alpha) — flattened rgba(0,0,0,0.70) over surface-card #262626 typography: display-hero: fontFamily: "nohemi, Nohemi, Inter, ui-sans-serif, sans-serif" fontSize: 120px fontWeight: 500 lineHeight: 0.96 letterSpacing: 0px display: fontFamily: "nohemi, Nohemi, Inter, ui-sans-serif, sans-serif" fontSize: 72px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0px heading-section: fontFamily: "nohemi, Nohemi, Inter, ui-sans-serif, sans-serif" fontSize: 48px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0px heading-lg: fontFamily: "nohemi, Nohemi, Inter, ui-sans-serif, sans-serif" fontSize: 36px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0px heading-md: fontFamily: "nohemi, Nohemi, Inter, ui-sans-serif, sans-serif" fontSize: 24px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.02em heading-sub: fontFamily: "nohemi, Nohemi, Inter, ui-sans-serif, sans-serif" fontSize: 18px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.02em body-large: fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif" fontSize: 20px fontWeight: 400 lineHeight: 1.4 letterSpacing: -0.02em body: fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.4 letterSpacing: -0.01em body-sm: fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0px button-ui: fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif" fontSize: 12px fontWeight: 600 lineHeight: 1.0 letterSpacing: -0.01rem caption: fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif" fontSize: 12px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0.06em spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 32px 2xl: 48px 3xl: 64px 4xl: 96px rounded: none: 0px sm: 8px md: 12px lg: 16px xl: 20px 2xl: 24px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 8px 20px button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" button-primary-focus: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" outline: "2px solid {colors.focus-ring}" button-secondary: backgroundColor: "{colors.surface-light-subtle}" textColor: "{colors.on-light}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 8px 16px button-secondary-dark: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 8px 16px button-secondary-hover: backgroundColor: "{colors.surface-light}" textColor: "{colors.on-light}" button-secondary-dark-hover: backgroundColor: "{colors.surface-raised}" textColor: "{colors.ink}" button-ghost: backgroundColor: "transparent" textColor: "{colors.on-light}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 8px 16px border: "1px solid {colors.border-light}" button-ghost-dark: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 8px 16px border: "1px solid {colors.border}" button-ghost-hover: border: "1px solid {colors.ink-tertiary}" button-ghost-dark-hover: border: "1px solid {colors.ink-secondary}" card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 24px card-light: backgroundColor: "{colors.surface-light}" textColor: "{colors.on-light}" rounded: "{rounded.lg}" padding: 24px nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.button-ui}" padding: 8px 24px input: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.md}" padding: 10px 16px border: "1px solid {colors.border}" input-focus: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" outline: "2px solid {colors.focus-ring}" badge: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 10px badge-muted: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink-secondary}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 10px --- # Unity Design System ## Overview Unity's website runs on "Mango" — an in-house design language built around two primary typefaces and a dark-first canvas philosophy. The dominant ground is pure black (`{colors.background}`), onto which the brand stacks sections using a graduated gray palette that moves from near-black panels (`{colors.surface}`, `{colors.surface-raised}`) up through warm card fills (`{colors.surface-card}`). Light-mode sections exist but feel like deliberate punctuation: white bands where feature breakdowns breathe against a dark context. The system is less a gaming brand and more a developer platform aesthetic — methodical, restrained, credible in the way that Linear or Vercel is credible. The typographic signature is Nohemi, a geometric display face at medium weight (500) used exclusively for headings from `{typography.heading-sub}` up through `{typography.display-hero}`. It sits at precisely zero letter-spacing in its largest sizes — assertive without being aggressive. Inter handles everything below: body copy, UI labels, buttons. The pairing creates a clean two-tier voice: Nohemi for declarations, Inter for instruction. The system's single brand color, Unity blue (`{colors.primary}`), appears on pill-shaped CTAs, focus rings, and interactive badges. It is restrained to genuine actions; the palette otherwise lives entirely in near-blacks, grays, and white. The interaction language is built around the pill. Every button — primary, secondary, ghost — is `{rounded.pill}`. Focus rings use a distinctive lighter blue (`{colors.focus-ring}`) that stands apart from the button fill, a thoughtful accessibility choice. Cards use modest rounding (`{rounded.lg}`) to stay softer than a developer-tool grid but shorter than the playful radius of a consumer gaming site. Dark-mode shadows use black opacity (`{colors.shadow-soft}`) rather than colored tints — functional depth cues, not personality. **Key Characteristics:** - Dark-first canvas (`{colors.background}`) as the page default; light sections (`{colors.surface-light}`) are deliberate, periodic punctuations - Graduated near-black surface stack: `{colors.surface}` → `{colors.surface-raised}` → `{colors.surface-card}` — no two adjacent dark surfaces are the same shade - Nohemi at weight 500 for all headings (`{typography.heading-sub}` through `{typography.display-hero}`); Inter for all body and UI (`{typography.body}`, `{typography.button-ui}`) - Unity blue (`{colors.primary}`) concentrated on pill-shaped CTAs and interactive states — the only saturated hue in the palette - Pill geometry (`{rounded.pill}`) on every button variant; no square edges in the interactive language - `{colors.focus-ring}` — a lighter, distinct blue (`#238cec`) for keyboard focus rings, separate from CTA fill - 8px base spacing unit scaling through a 4-stop rhythm: 8 → 16 → 24 → 32 → 48 → 64 → 96 - Responsive containers: 480 → 744 → 1024 → 1440px breakpoints - Inset shadow on primary buttons (`inset 0 1px #ffffff30`) — a subtle highlight that gives pills tactile lift - Semantic colors (`{colors.success}`, `{colors.error}`, `{colors.warning}`) follow standard green/red/amber conventions, reserved for system feedback ## Colors ### Surface & Canvas - **Black** (`{colors.background}`): The dominant canvas — entire hero sections, nav bar, and dark-mode body. - **Near-Black** (`{colors.surface}`): Deep dark panels and section backgrounds. - **Slightly Lifted** (`{colors.surface-raised}`): `mango-gray-950` — the subtlest elevation step in dark mode. - **Card Surface** (`{colors.surface-card}`): `mango-gray-800` — the standard dark card and module fill. - **White** (`{colors.surface-light}`): Light-mode sections; used as purposeful contrast against the dark context. - **Light Subtle** (`{colors.surface-light-subtle}`): `mango-gray-50` — secondary buttons and muted light panels. ### Ink / Text - **White** (`{colors.ink}`): Primary text on all dark surfaces. - **Gray 400** (`{colors.ink-secondary}`): Secondary body copy, metadata, timestamps on dark. - **Gray 500** (`{colors.ink-tertiary}`): Captions, disabled states, hint text. - **Black** (`{colors.on-light}`): Headings and body text on white sections. - **Gray 600** (`{colors.on-light-secondary}`): Muted text on light-mode sections. ### Brand Accent - **Unity Blue** (`{colors.primary}`): The sole saturated hue — CTA buttons, badges, active links. `mango-blue-500`. - **Blue Hover** (`{colors.primary-hover}`): Deepens on button hover. `mango-blue-600`. - **Blue Light** (`{colors.primary-light}`): Lighter variant on dark surfaces. `mango-blue-400`. - **On Primary** (`{colors.on-primary}`): White text on all blue fills. ### Interaction & States - **Focus Ring** (`{colors.focus-ring}`): A perceptually lighter blue than the CTA fill — keyboard navigation is clearly distinct from hover. - **Dark Border** (`{colors.border}`): Card edges and input outlines on dark canvas. - **Light Border** (`{colors.border-light}`): Ghost button and input outlines on white sections. ### Semantic - Success (`{colors.success}`), Error (`{colors.error}`), Warning (`{colors.warning}`) follow conventional green/red/amber. Info (`{colors.info}`) reuses the primary blue. ## Typography ### Font Family - **Display / Headings**: `nohemi` — a custom geometric sans at weight 500 used exclusively for headings. Not on Google Fonts; falls back to Inter. Zero tracking at large sizes; slight positive tracking (`0.02em`) at smaller heading levels (`{typography.heading-md}`, `{typography.heading-sub}`). - **Body / UI**: `Inter` — the workhorse face for paragraphs, captions, button labels, and nav items. Slight negative tracking on body sizes (`-0.01em` to `-0.02em`). ### Hierarchy The complete type scale lives in the `typography:` token block. | Token | Use | |---|---| | `display-hero` | 120px / 500 / 96% leading — full-bleed hero declarations | | `display` | 72px / 500 / 100% — large section headlines | | `heading-section` | 48px / 500 / 100% — major feature sections | | `heading-lg` | 36px / 500 / 120% — card and module titles | | `heading-md` | 24px / 500 / 120% — sub-section labels | | `heading-sub` | 18px / 500 / 120% — small Nohemi labels, navigation | | `body-large` | 20px / 400 / 140% — lead paragraphs, hero descriptions | | `body` | 18px / 400 / 140% — standard prose | | `body-sm` | 14px / 400 / 140% — dense UI copy, card metadata | | `button-ui` | 12px / 600 / 100% — all button labels (Inter semi-bold) | | `caption` | 12px / 600 / 100% — UPPERCASE badge and category labels | ### Principles - **Two faces, one role each**: Nohemi for identity, Inter for communication. They never switch roles. - **Weight 500 is the display weight**: no bold (700) in Nohemi — the face has inherent geometric gravity. - **Negative tracking in body**: `-0.01em` to `-0.02em` at 18–20px tightens Inter to feel editorial rather than airy. - **ALL CAPS with `0.06em` tracking** on `{typography.caption}` — badge and category labels use letter-spacing to compensate for condensing at small sizes. ## Layout ### Spacing System The full scale is in `spacing:` above. Base unit is 8px (`--spacing: 0.25rem` in Tailwind). The rhythm flows from 8px internals to 16px gutters to 24/32px section padding to 96px section gaps. Sections use `py-10 lg:py-24` — 40px mobile, 96px desktop. ### Grid & Container - Max container: 1440px — a wide, modern viewport optimized for large monitors - Internal breakpoints: 480px (mobile S), 744px (tablet), 1024px (desktop), 1440px (large) - 12-column grid with 24px gutters (`gap-6`) - Full-bleed heroes; constrained content sections within `mango-container` ### Whitespace Philosophy - **Dark sections breathe wide**: section vertical padding jumps from 40px mobile to 96px desktop — generous at scale. - **Cards are tight**: inner padding 24px; card-to-card gap 16–24px. Density communicates professionalism. - **Light sections feel more open**: white backgrounds read spacious even at the same pixel values. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow | Default dark canvas sections | | Surface (Level 1) | Color step — `{colors.surface-card}` on `{colors.background}` | Cards, modules, nav dropdown | | Card (Level 2) | `0px 4px 16px rgba(0,0,0,0.16)` | Hover-lifted cards, featured modules | | Overlay (Level 3) | `0px 0px 80px rgba(0,0,0,0.7)` | Dropdowns, deep modal backgrounds | | Button inset | `inset 0 1px #ffffff30, inset 0 1px #ffffff12` | Primary button highlight — tactile pill lift | | Focus Ring | `2px solid {colors.focus-ring}` offset by `0.25rem` | Keyboard navigation | **Shadow Philosophy**: Unity doesn't use colored or decorative shadows. Depth is communicated almost entirely through the graduated dark surface stack — each step in `{colors.surface}` → `{colors.surface-raised}` → `{colors.surface-card}` is a distinct shade, creating layering without shadows. Real drop shadows appear only for overlay elements (dropdowns, modals) and use pure black opacity. The inset button shadow is a functional gloss highlight, not a depth cue. ## Shapes The complete radius scale is in `rounded:` above. | Token | Value | Use | |---|---|---| | `none` | 0px | Not used in the standard UI — avoided | | `sm` | 8px | Small icons, tight inner elements | | `md` | 12px | Inputs, small cards, dropdowns | | `lg` | 16px | Standard cards and feature modules | | `xl` | 20px | Larger panels, nav mega-menu | | `2xl` | 24px | Prominent container rounding | | `pill` | 9999px | All buttons without exception | The most visible shape decision is the `{rounded.pill}` button. Every button in the system — primary, secondary, ghost, dark mode, light mode — uses the full pill. It reads as approachable and modern against the otherwise precise, geometric Nohemi headings. Cards and containers use a soft rounding scale (`{rounded.md}` → `{rounded.2xl}`) — there are no sharp corners anywhere in the standard layout. ## Components The complete component spec lives in the `components:` token block. ### Button variants - **`button-primary`** — Unity blue (`{colors.primary}`) fill, white text, pill, `{typography.button-ui}`. Has an inset top-highlight (`inset 0 1px #ffffff30`) for tactile lift. Hover deepens to `{colors.primary-hover}`. - **`button-secondary`** — Light gray fill (`{colors.surface-light-subtle}`) on white sections; dark fill (`{colors.surface-card}`) on dark sections. Both use pill and same button-ui type. - **`button-ghost`** — Transparent fill with a 1px border. Border lightens on hover. Two variants: `button-ghost` (light sections, `{colors.border-light}`) and `button-ghost-dark` (dark sections, `{colors.border}`). ### Cards - **`card`** / **`card-light`** — Dark and light variants. Both use `{rounded.lg}` and 24px padding. The visual distinction is entirely in the background (`{colors.surface-card}` vs `{colors.surface-light}`). ### Inputs - **`input`** — Dark card fill, 1px border, `{rounded.md}`. Focus state adds a 2px blue ring (`{colors.focus-ring}`) — same color as keyboard focus on buttons. ### Badges - **`badge`** — Primary blue fill, white text, pill, uppercase caption. **`badge-muted`** — card-surface fill, secondary ink — for neutral taxonomy tags. ### Navigation - **`nav-bar`** — Pure black background, white text, `{typography.button-ui}` for nav links. Nav items use `rounded-xl` hover backgrounds (`{colors.surface-raised}`). Sticky, 48–64px tall. ## Do's and Don'ts ### Do - Use the black canvas (`{colors.background}`) for primary hero and dark sections — it's the design's dominant ground - Use the graduated surface stack (`{colors.surface}` → `{colors.surface-raised}` → `{colors.surface-card}`) for elevation rather than shadows - Apply `{rounded.pill}` to every button — breaking this breaks the interaction language - Reserve `{colors.primary}` for genuine interactive actions (CTAs, active states, badges) — don't decorate with it - Set all headings in Nohemi at weight 500 — avoid bold (700) in display contexts - Use Inter for all body and UI copy (`{typography.body}` through `{typography.button-ui}`) - Add the inset highlight on primary buttons (`inset 0 1px #ffffff30`) — it gives the pill tactile depth - Apply `{colors.focus-ring}` (the lighter `#238cec`) for keyboard focus — keeping it distinct from `{colors.primary}` is intentional ### Don't - Don't introduce square corners on buttons — `{rounded.none}` belongs in the spacing grid, not interactive elements - Don't apply `{colors.primary}` to decorative headings or dividers — it must stay a trust-signal for actions - Don't mix Nohemi and Inter at the same hierarchy level — Nohemi is the title voice, Inter is the prose voice - Don't use colored shadows — the system uses black-opacity tints only (`{colors.shadow-soft}`, `{colors.shadow-deep}`) - Don't create light backgrounds with full-saturation Unity blue text — `{colors.primary}` fails contrast on `{colors.surface-light-subtle}` - Don't omit the graduated surface stack on dark sections — a flat-black layout loses all depth cues - Don't shrink `{typography.button-ui}` below 12px — buttons already run small and legibility suffers - Don't use positive letter-spacing on `{typography.display-hero}` or `{typography.display}` — Nohemi reads correctly at zero tracking in large sizes --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile S | <480px | Single column; hero type scales down; nav collapses to hamburger | | Mobile | 480–743px | Single column layout; section padding 40px; buttons full-width | | Tablet | 744–1023px | 2-column card grids; hero size intermediate; nav partial | | Desktop | 1024–1439px | Full 12-column grid; hero at large size; sticky nav at 48px | | Large | ≥1440px | Max-width container; heroes stay full-bleed; content centered | ### Touch Targets - All buttons run minimum 32px height (`h-[2rem]`) with pill rounding — comfortable tap area - Nav items use 12px × 8px padding for finger-friendly touch zones - Cards and interactive modules have generous padding to avoid mis-taps ### Collapsing Strategy - **Navigation**: collapses to a hamburger at <1024px; mega-menu drops to a full-screen overlay - **Type scale**: `{typography.display-hero}` scales from 120px (desktop) toward 48–64px (mobile) via responsive utilities - **Section padding**: `py-10 lg:py-24` — 40px mobile, 96px desktop; maintains proportion without cramping small screens - **Grid**: 12-column collapses to 2-column (tablet) then 1-column (mobile) for feature cards ### Image Behavior - Hero visuals are full-bleed and dark-treatment heavy — they tolerate portrait cropping on mobile - Product screenshots use `aspect-ratio: auto` with `object-fit: contain` to prevent distortion inside card grids - Game/demo reels use loop video (`