Autodesk DESIGN.md

Bold industrial-modern brand with black-and-white confidence and high-visibility yellow. Autodesk’s current identity uses Artifakt typography, open whitespace, sharp contrast, and selective color emphasis to make technical creativity feel sophisticated and immediate.

1. Visual Theme & Atmosphere

Overall Aesthetic

Autodesk expresses design and engineering confidence. The current parent-brand system is stark, intentional, and highly visual: black and white dominate, yellow acts as a dramatic reveal, and layouts feel open, editorial, and spatially precise. Product visuals do the storytelling while the UI framing stays minimal and self-assured.

Mood & Feeling

• Confident: the brand feels established, technically credible, and decisive
• Creative-industrial: engineering rigor and artistic ambition sit side by side
• Open: layouts should feel spacious and well-composed, never cramped
• Sophisticated: the typography and contrast feel premium, not flashy
• Accessible: even when bold, the system is careful about clarity and legibility

Design Density

Medium-low density. Autodesk pages allow imagery, product renders, and large headlines room to breathe. Information density increases in product-focused surfaces, but the brand framing remains restrained.

Visual Character

• Heavy reliance on black and white as the base
• Hello Yellow used as a special highlight rather than a broad fill color
• Large product images and technical renders dominate visual attention
• Typography carries much of the brand personality
• Minimal chrome and strong alignment create the premium feel

2. Color Palette & Roles

Primary Brand Colors

Supporting Colors

Accent Tertiaries

Color Usage Rules

• Start from black, white, and yellow for corporate-branded experiences.
• Use Hello Yellow as a pop, not a blanket.
• Use slate colors for hierarchy when size alone is insufficient.
• Reserve stronger product or secondary colors for product-specific narratives and data visuals.

3. Typography Rules

Font Stack

css/* Autodesk brand type */
--font-display: 'Artifakt Legend', Arial, sans-serif;
--font-sans: 'Artifakt Element', Arial, sans-serif;
--font-mono: 'SF Mono', 'Roboto Mono', Menlo, Consolas, monospace;

Type Scale

Typography Philosophy

Artifakt makes Autodesk feel technical, beautiful, and proprietary. Display moments are architectural and confident; body text is clean and calm so technical topics remain readable.

Practical Rules

• Use Artifakt Legend for big headline moments.
• Use Artifakt Element for body, navigation, and UI controls.
• Keep all-caps rare and purposeful.
• Let typography and whitespace do more work than decorative shapes.

4. Component Stylings

Buttons

Primary Button

css.button-primary {
  background: #000000;
  color: #FFFFFF;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid #000000;
  border-radius: 999px;
  font: 600 14px/1 'Artifakt Element', Arial, sans-serif;
}

.button-primary:hover {
  background: #1a1a1a;
}

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

Secondary Button

css.button-secondary {
  background: #FFFFFF;
  color: #000000;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid #000000;
  border-radius: 999px;
  font-weight: 600;
}

.button-secondary:hover {
  background: #f6f6f2;
}

Highlight Button

css.button-highlight {
  background: #FFFF00;
  color: #000000;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid #FFFF00;
  border-radius: 999px;
  font-weight: 700;
}

Inputs

Text Input

css.input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  background: #FFFFFF;
  color: #000000;
  border: 1px solid #666666;
  border-radius: 14px;
  font: 400 16px/1.2 'Artifakt Element', Arial, sans-serif;
}

.input:focus {
  outline: none;
  border-color: #000000;
  box-shadow: 0 0 0 3px rgba(255, 255, 0, 0.25);
}

Labels

css.input-label {
  display: block;
  margin-bottom: 8px;
  color: #000000;
  font: 600 14px/1.3 'Artifakt Element', Arial, sans-serif;
}

.input-help {
  margin-top: 8px;
  color: #666666;
  font: 400 12px/1.4 'Artifakt Element', Arial, sans-serif;
}

Cards and Showcase Frames

Content Card

css.card {
  background: #FFFFFF;
  border: 1px solid #D5D5CB;
  border-radius: 24px;
  padding: 24px;
}

Product Showcase

css.showcase {
  background: #000000;
  color: #FFFFFF;
  border-radius: 28px;
  padding: 32px;
}

5. Layout Principles

Layout System

Autodesk’s brand guidance emphasizes compositions that feel light and open.

Layout Rules

• Use large open margins and strong alignment.
• Let key visuals or renders own the section.
• Keep text blocks narrow enough to feel editorial, not brochure-dense.
• Use yellow to punctuate, not to frame every section.

6. Depth & Elevation

Surface Hierarchy

Shadow System

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

.shadow-showcase {
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16);
}

Depth Rules

• Use shadow sparingly; contrast and scale carry most of the hierarchy.
• Large black surfaces can feel elevated through contrast alone.
• Avoid busy layered cards inside already high-impact hero compositions.

7. Do's and Don'ts

Do

• Lead with black, white, and yellow.
• Use Artifakt to create unmistakable Autodesk personality.
• Let product imagery and technical visuals take center stage.
• Keep layouts light, open, and high-contrast.
• Use yellow as an intentional statement.

Don't

• Turn yellow into a default background everywhere.
• Fill every section with dense information.
• Add soft, cute, consumer-app styling.
• Let supporting colors overpower the parent-brand palette.
• Overcomplicate product showcase frames with excessive chrome.

8. Responsive Behavior

Responsive Rules

• Preserve large headline impact on mobile by wrapping, not shrinking too aggressively.
• Keep CTAs isolated and visually strong.
• Let showcase media stack below or above copy cleanly.
• Maintain comfortable content widths and generous section spacing on all devices.
• Keep contrast intact even when simplifying layout.

Mobile Character

Autodesk on mobile should still feel premium and spacious. The brand’s confidence comes from contrast, typography, and visual restraint, not from oversized interface chrome.

9. Agent Prompt Guide

Quick Reference

• Mood: industrial-modern, confident, open, premium
• Core colors: black #000000, white #FFFFFF, Hello Yellow #FFFF00
• Typography: Artifakt Legend + Artifakt Element
• Layout: open editorial spacing, bold product imagery
• Components: strong pill buttons, high-contrast cards, restrained forms

Prompt Snippet

textDesign this interface in the style of Autodesk's current parent-brand system. Use Artifakt typography, a high-contrast black-and-white foundation, Hello Yellow (#FFFF00) as a selective highlight, open editorial spacing, and bold product imagery. The result should feel sophisticated, technical, and highly intentional rather than busy or decorative.