Keyboard ALT + g to toggle grid overlay

NOTE: Our web visual design standards are under review as we work to improve continuity and accessibility across the online experience. As a result of this current effort, certain guidelines may become deprecated while we vet and document new standards. Please be aware of the following planned changes and incorporate into your designs as appropriate:

Accessibility

The Digital Platform Unified Design System promotes the creation of experiences that are approachable, intuitive and inclusive of all our customers. We aim for WCAG AA compliance.

For additional information contact brand@autodesk.com.

Colors

Our colors unite and enrich the Autodesk experience and solidify our brand. Our palette is designed to create harmony, limit complexity, and balance contrast for optimal legibility.

Primary colors

autodeskBlue-500 is our brand identifying color and is used as the primary highlight color.

charcoal-700 is used for UI elements, surfaces and backgrounds. This neutral base allows our brand and product imagery to shine.

Secondary colors

Our products are each assigned a color to clearly identify them in the marketplace. To maintain the integrity of our brand, it is important that these colors be used with corresponding products. For color assignments download the product specifications sheets (access required).

red-600

yellowOrange-500

green-500

darkBlue-600

turquoise-500

Secondary colors may also be used when the primary color palette does not give us everything we need. For example, charts and graphs, illustration, and animations often benefit from multiple colors.

Tint stacks

Our palette includes the primary and secondary brand hues plus light and dark tints. By selecting fewer tones with sufficient differentiation, we ensure greater contrast and improve accessibility. Ensure a minimum contrast ratio of 4.5:1 for small text or 3:1 for large text.

Typography

Our typeface, Artifakt, is reflective of our character. Sophisticated, technical and beautiful without decoration.

Artifakt is a proprietary typeface, designed for exclusive use by Autodesk. It expresses our unique company personality, and addresses technical and aesthetic concerns of Autodesk branding, web, and UI design. Visit the typography page under brand elements for more details on Artifakt.

All designs for Autodesk web properties should use Artifakt Element. Make sure you have the Artifakt font package for designers, available on the dam.autodesk.com (login required).

Editorial guidelines

To ensure we speak with one voice across the company we follow the Autodesk Web Editorial Style Guide.

Internationalization

Our customers live in many different countries. Speaking to a culturally diverse audience ensures that we won’t exclude non-US customers. For best practices refer to the Autodesk Global Writing Guidelines.

Font stacks

We ensure a consistent experience for our customers by providing fallbacks for browsers that do not support our primary font.

san-serif

font-family: “Artifakt Element”, Arial, sans-serif;

mono

font-family: Courier, monospace;

Weight & style

We use Artifakt Element in a combination of light, regular and medium weights. Deciding which weight to use is entirely dependent on what best supports the content hierarchy. Bold and italic are used sparingly for specific emphasis as defined in the Editorial Style Guide.

Text colors (this section will be expanded upon as interaction guidelines are defined)

Avoid using pure black text on white as it can cause difficulty for customers with certain disabilities such as light sensitivity and autism. All text must meet WCAG AA requirements for contrast as indicated on the color specification chart.

primary: charcoal-900 / #3c3c3c

secondary: charcoal-700 / #666

disabled/hint: @40% opacity of base (CANDIDATE)

See also: alert colors

Scale

root { font-size: 100%; // 16px }

Our typographic scale falls on a 4px baseline grid. Deciding which size to use is entirely dependent on what best supports the content hierarchy.

Font-size is documented in pixels (px) for designers and root em (rem) for developers.
Line-height is documented in pixels (px) for designers and unitless value for developers.

Alignment

In brand and on dotcom, we use left alignment as a standard, to create content relationships through the vertical 'lines' that the eye creates when pieces and components on a page line up. By aligning objects, text and graphics to common reference points (e.g. the beginning of a heading to a body of copy, then continuing down the page with another content block aligned to a common point), we can tie the page together in a cohesive manner, guide the user's eye from one piece of content to the other (allowing them to scan effectively), and minimize any eye tracking and fatigue.

To align with dotcom, left alignment should be used across designs.

Buttons and CTAs

UNDER REVIEW: Our guidelines for Buttons and CTAs are currently in revision to meet WCAG AA compliance for contrast as indicated in the Tint Stacks. If you’re working on a new project and have questions about Buttons and CTAs, please contact brand@autodesk.com.

We invite our customers to interact with our website with clickable buttons and calls to action. Clear, succinct text and consistent visual treatment enable our customers to identify what actions are available to them, and to accomplish their purpose of visit.

Buttons

There are three types of buttons used on Autodesk web properties: call to action, dropdown, and download. The button text is consistently 16pt, all capital letters. Corners are right angles (not rounded), and there is a 1 pixel border on bottom and right sides (#CCCCCC).

Buttons can scale to accommodate more text. When button text is one line, buttons are consistently 32 pixels tall. For two lines of text, buttons can scale to 47 pixels tall.

Form buttons

Form buttons follow the same size specifications. An active form button is Autodesk blue (#0696D7), and the disabled state is indicated by a light gray (#DADADA).

Button colors

Color choice for buttons follow the same guidelines we have for accent colors. Autodesk blue is used for buttons on corporate pages, while the corresponding product colors are used for buttons on product centers. We apply a rollover effect to our buttons as well, and each color also has a specific rollover color.

CTAs

We invite our customers to interact with our website with clickable buttons and calls to action. Clear, succinct text and consistent visual treatment enable our customers to identify what actions are available to them, and to accomplish their purpose of visit.

  Call to action

  Call to action

  Call to action

  Call to action

  Call to action

  Call to action

  Call to action

  Call to action

  Call to action

Social icons

Social icons are styled and placed consistently in the footer of our website.

   

Page grid

UNDER REVIEW: We design for a responsive experience across a range of devices, using a responsive grid system allowing page layouts for small, medium, and large screens.

If you’re working a new project and have questions about a grid, please contact brand@autodesk.com.