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.

Typography

  • All designs for screen should use Artifakt Element. Make sure you have the Artifakt font for designers, available on the dam.autodesk.com (login required).
  • The base color for text is charcoal-900 / #3c3c3c.

For additional information contact tanya.laramie@autodesk.com.

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 tanya.laramie@autodesk.com.

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.

Type hierarchy

A clear and consistent type hierarchy is essential to good experience design, where customers can quickly comprehend a page.

Autodesk web properties use our proprietary typeface, Artifakt Element, in a combination of light, medium and regular weights.

For online experiences where it is not practical to use Artifakt, the default system typeface is Arial.

Also see the typography page under brand elements for more details on Artifakt.

Headers

H1: Artifakt Element Light, 30px/35px line-height

Color: #222222-Default

Paragraph spacing general: 25px-after (optically 38px below baseline to cap-height)

Paragraph spacing above subhead: 20px-after (optically 32px from baseline to cap-height of subhead)

Paragraph spacing above body text: 14px-after (optically 24px from baseline to cap-height of body text)

H2: Artifakt Element Light, 24px/28px line-height

Color: #0696d7-Default / Color theme

Paragraph spacing general: 18px-after (optically 28px below baseline to cap-height)

Paragraph spacing above subhead: 20px-after (optically 30px from baseline to cap-height of subhead)

Paragraph spacing above body text: 12px-after (optically 20px from baseline to cap-height of body text)

H3: Artifakt Element Medium, 19px/24px line-height

Color: #222222-Default

Paragraph spacing general: 20px-after (optically 30px below baseline to cap-height)

Paragraph spacing above subhead: 25px-after (optically 35px from baseline to cap-height of subhead)

Paragraph spacing above body text: 8px-after (optically 18px from baseline to cap-height of body text)

H4: Artifakt Element Medium, 16px/21px line-height

Color: #222222-Default

Paragraph spacing general: 18px-after (optically 28px below baseline to cap-height)

Paragraph spacing above subhead: 20px-after (optically 28px from baseline to cap-height of subhead)

Paragraph spacing above body text: 8px-after (optically 18px from baseline to cap-height of body text)

H5: Artifakt Element Medium, 12px/17px line-height, all-caps

Color: #222222-Default

Paragraph spacing general: 16px-after (optically 24px below baseline to cap-height)

Paragraph spacing above body text: 6px-after (optically 16px from baseline to cap-height of body text)

LEGAL HEADER: Artifakt Element Medium Italic 14/19px #666 - rare, used only if header is needed.

Color: #666666-Default / #FFFFFF for darker backgrounds

Paragraph spacing general: 12px-after (optically 24px below baseline to cap-height)

Paragraph spacing above body text: 7px-after (optically 14px from baseline to cap-height of body text)

ACCORDION HEADER: Artifakt Element Medium, 21px/25px line-height

Color: #222222-Default / Theme color (as needed, but use sparingly as this will affect hierarchy)

Notes: Cart experience employs an active state, and font size change at mobile breakpoint

Body

BODY-H2: Artifakt Element Light, 16px/21px line-height

Color: #666666-Default

Paragraph spacing general: 10px-after (optically 20px below baseline to cap-height)

Notes: Primarily used in conjunction with H2 headers

BODY: Artifakt Element Regular, 14px/19px line-height

Color: #666666-Default

Paragraph spacing general: 16px-after (optically 24px below baseline to cap-height)

LEGAL BODY: Artifakt Element Light Italic, 12px/16px line-height

Color: #666666-Default / #FFFFFF for darker backgrounds

Paragraph spacing general: 16px-after (optically 24px below baseline to cap-height)

Image credits

IMAGE CREDITS: Artifakt Element Light, 16px/21px line-height

Color: #999999-Default

Links / button copy

LINK: Artifakt Element Medium, 14px/19px line-height

Default state: Text color=#444 / css dashed underline (3px dash, 2px gap)=#999, position=3px below baseline

Hover state: Text color=#444 / css solid underline=#999, position=3px below baseline

Visited state: Text color=#777 / css dashed underline (3px dash, 2px gap)=#999, position=3px below baseline

Paragraph spacing - list: 9px-after (optically 18px below baseline to cap-height - not including dashed underline)

BUTTON: Artifakt Element Medium, 14px/19px line-height, ALL CAPS

Color: #ffffff-Default / #666666 for lighter background

 LINK-WITH-ICON: Artifakt Element Medium, 14px/19px line-height

Default state: Text color=#444444, icon color=#666666-Default or color theme

Hover state: Text color=#444444, icon color=#666666-Default or color theme

Visited state: Text color=#777777, icon color=#777777

Paragraph spacing - list: 9px-after (Assuming the icon is 18px high: optically 24pxbelow baseline to cap-height, and/or 14px vertical space between each icon)

Bullets

BULLET: Inherits body formatting

Color: Text color=#666666 / 4x4px icon=#666666

Paragraph spacing - list: 9px-after (optically 18px below baseline to cap-height)

Error messaging

INLINE FORM ERROR: Artifakt Element Medium, 12px/16px line-height

Color: #dd2222-only / bullet / border of fields turn to #dd2222

Primary font colors

#0696D7

#FFFFFF

#222222

#444444

#666666

#777777

#888888

#999999

#CCCCCC

#DADADA

#EEEEEE

Color theme

Color

Our color palette for websites reflects our brand while allowing for optimal legibility and wayfinding. We use color judiciously to establish hierarchy, to draw special attention, and to identify specific product families.

Primary colors

Autodesk blue

#0696D7

White

#FFFFFF

Shades of grey

#444444

#666666

#888888

#DDDDDD

#F6F5F2

Autodesk blue is our corporate accent color and is used for headlines and in navigation. Our homepage and other corporate pages utilize this specific blue. Product pages use the accent color that corresponds to the product color. Product color specifications can be accessed here (access required).

Autodesk blue in the global navigation, local navigation, and as accent color.

Autodesk blue in global navigation, and product color as accent color.

Text content employs a range of shades of gray on light backgrounds, and white when the background is dark. Text links are the same color as the surrounding copy, and accented with a dashed underline.

Inventor product center

Infraworks product center

AutoCAD LT product center

Background colors and gradients

Varying the background color by section or panel helps to organize content in groups, making interaction smoother for our customers.

Solid colors

#FFFFFF

#F7F9F8

#EEEEEE

#CCCCCC

#B3B7A5

#A1A49B

#666666

#444444

#E8F8FD

#0696D7

#32BCAD

#87BC40

#1858A8

#F5F5F5

#DDDDDD

Gradients

#FFF to #F5F5F5

#F5F5F5 to #EEE

#FFF to #EEE

#FFF to #DDD

Buttons and 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.

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.