Unity DESIGN.md

Creator-platform design with dark technical confidence and game-industry energy. Unity’s current web presence leans on black-and-white contrast, cool slate surfaces, bold product screenshots, and clean creator-focused hierarchy.

1. Visual Theme & Atmosphere

Overall Aesthetic

Unity feels like serious tools for real-time creation. The brand frames a huge ecosystem of game development, monetization, cloud, and AI features inside a dark, product-led visual language. The experience is clean and modern, with enough edge to feel developer-oriented without becoming intimidating.

Mood & Feeling

• Creator-first: the platform should feel empowering and practical
• Technical: product credibility matters more than lifestyle gloss
• Current: AI, multiplayer, and growth tooling feel integrated into one system
• Community-aware: documentation, learning, and showcase content feel approachable
• Confident: strong monochrome contrast anchors the entire experience

Design Density

Medium density. Unity surfaces often mix feature summaries, product entry points, and documentation pathways, but visual clarity remains strong because the design stays modular and contrast-driven.

Visual Character

• Black, white, and cool gray dominate the core UI
• Product screenshots and real game imagery add most of the color
• Rounded panels and cards create a softer technical feel
• Navigation and CTAs are clean and understated
• Layouts are modular, simple, and product-forward

2. Color Palette & Roles

Core Brand Palette

Supporting Accents

Semantic Colors

Color Usage Rules

• Let black and white define the structure.
• Use accent colors sparingly to point at features or categories.
• Allow product screenshots and game stills to provide most of the visual color.
• Avoid rainbow UI; Unity feels strongest when the interface itself stays restrained.

3. Typography Rules

Font Stack

css/* Unity-style digital product sans */
--font-sans: Inter, 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'SF Mono', 'Roboto Mono', Menlo, Consolas, monospace;

Type Scale

Typography Philosophy

Unity typography is modern, clean, and platform-oriented. The goal is to support long technical reading, product discovery, and creator education without visual noise.

Practical Rules

• Use bold headlines, but keep body copy pragmatic.
• Favor clean, compact labels for product actions.
• Let screenshots and diagrams carry the expressive tone.
• Keep mono styles reserved for docs and API-adjacent surfaces.

4. Component Stylings

Buttons

Primary Button

css.button-primary {
  background: #FFFFFF;
  color: #111111;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #FFFFFF;
  border-radius: 999px;
  font: 600 14px/1 Inter, sans-serif;
}

.button-primary:hover {
  background: #E8EDF3;
}

.button-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(123, 200, 255, 0.25);
}

Secondary Button

css.button-secondary {
  background: transparent;
  color: #FFFFFF;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #A5ACB8;
  border-radius: 999px;
  font-weight: 600;
}

.button-secondary:hover {
  border-color: #FFFFFF;
}

Inputs

Text Input

css.input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  background: #1A1F28;
  color: #FFFFFF;
  border: 1px solid #2A313D;
  border-radius: 14px;
  font: 400 16px/1.2 Inter, sans-serif;
}

.input:focus {
  outline: none;
  border-color: #7BC8FF;
  box-shadow: 0 0 0 3px rgba(123, 200, 255, 0.14);
}

.input::placeholder {
  color: #A5ACB8;
}

Cards and Product Frames

Feature Card

css.card {
  background: #1A1F28;
  color: #FFFFFF;
  border: 1px solid #2A313D;
  border-radius: 24px;
  padding: 24px;
}

Documentation Panel

css.docs-panel {
  background: #FFFFFF;
  color: #111111;
  border: 1px solid #D4DAE3;
  border-radius: 20px;
  padding: 24px;
}

5. Layout Principles

Spacing Scale

Layout Rules

• Build clear lanes for develop, deploy, and grow narratives.
• Alternate dark feature sections with lighter docs or learning surfaces.
• Use screenshots generously, but keep frames clean.
• Keep creator pathways obvious: engine, ads, learn, docs, community.

6. Depth & Elevation

Surface Hierarchy

Shadow System

css.shadow-dark {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
}

.shadow-light {
  box-shadow: 0 8px 18px rgba(17, 17, 17, 0.08);
}

Depth Rules

• Dark cards can rely on border and contrast before heavy shadow.
• Light documentation surfaces should feel calm, not glossy.
• Let screenshots create spatial richness instead of stacking too many card treatments.

7. Do's and Don'ts

Do

• Keep the UI itself restrained and creator-focused.
• Use dark surfaces confidently.
• Let screenshots and game visuals inject color and excitement.
• Maintain simple, strong CTA patterns.
• Separate learning, docs, and product areas clearly.

Don't

• Overdecorate navigation or basic surfaces.
• Use too many bright accents at once.
• Make technical content feel corporate or lifeless.
• Turn every card into a separate visual experiment.
• Lose readability in the pursuit of cinematic styling.

8. Responsive Behavior

Responsive Rules

• Stack dark feature cards cleanly on tablet and mobile.
• Keep hero copy brief enough to wrap elegantly.
• Maintain strong button contrast on dark backgrounds.
• Let screenshots resize within generous rounded frames.
• Keep docs and learn surfaces usable without forcing dense mobile tables.

Mobile Character

Unity on mobile should still feel like a professional creator platform. The dark palette, bold screenshots, and simple pathways should remain intact even when everything stacks vertically.

9. Agent Prompt Guide

Quick Reference

• Mood: creator-first, technical, modern, dark
• Core palette: black, white, cool slate
• Accent use: minimal blue, mint, or violet highlights
• Typography: clean modern sans
• Layout: modular product and docs bands
• Components: pill buttons, dark cards, screenshot-led sections

Prompt Snippet

textDesign this interface in the style of Unity's current web presence. Use a black-and-white creator-platform foundation, cool slate cards, restrained accent colors, bold product screenshots, and clean Inter-style typography. The result should feel technical, modern, and practical for game developers rather than generic SaaS or flashy consumer branding.