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:


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


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).






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.


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 (login required).

Editorial guidelines

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


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.


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


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


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.


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.


Succinct text and consistent visual treatment enable our customers to identify what actions are available to them, and to accomplish their purpose of visit.

These guidelines cover the three different styles of buttons available, as well as variations.



Primary buttons provide a strong visual indicator to help the customer to complete their journey. Typically, we use only one solid button per page or clearly defined area of the UI. By default, solid buttons should be associated with the enter/return key on a keyboard, whether they are the only button or exist next to secondary buttons.


Secondary buttons do not call as much attention as primary buttons. They are used when there are multiple calls to action and/or accompany a solid button to provide alternative actions. Follow the guidelines below for side by side and stacked arrangements.


Single call to action buttons that have no background on initial state.



Labels should be succinct. Limit the text to 1-3 words. Generally, we use sentence case (proper nouns should be capitalized as usual). For more information see the Autodesk Editorial Style Guide.

In addition to the label, an icon can be included to help make less familiar actions more clear or recognizable. Icons can be added to any standard button (limit one icon per container). They can also stand alone as the only content within a button container.


Buttons are provided in each of our primary brand colors and optimized for use on light and dark backgrounds. Corresponding product colors are used for buttons on product centers. For guidance please contact


A 2px radius is applied to the corners of our buttons.


Buttons are provided in small, medium and large sizes to accommodate a wide variety of content types and scenarios. Widths are flexible and may be adjusted to meet the needs of the layout and content.



The space between buttons, whether arranged horizontally or vertically, should remain consistent regardless of their width. We recommend a minimum of 16px. It is important to respect this spacing rule to ensure that there’s enough room for the halos that appear on hover, focus, and pressed states, without crashing into adjacent buttons or components.

Touch target

To meet best practices for accessibility on touch enabled devices, we recommend a minimum touch target of 44 x 44 CSS pixels. Small touch targets can use padding to expand their interactive area without increasing the visible size.


Side by side

When placed side by side, buttons can have varying widths, or can be equally sized for a cleaner layout. Secondary buttons should always appear to the left of the primary button.

Vertical stack

When stacked vertically, buttons should maintain the same width and be center aligned. The width should be determined by the button with the longest label. Secondary buttons should always appear below the primary button.

Social icons

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



Space is one of the core elements of any design system. Using a standard set of spacing guidelines helps maintain consistency in our designs, supports the visual hierarchy, and ensures there's enough room to interact with elements within interfaces.


Our spatial system has a root of 16 with increments divisible by 4. This system applies to everything, from margins and padding to type size and line-height. It’s an easy-to-remember way to create harmony and rhythm throughout the customer journey.

Spacial system based on
4px increments


Space is documented in pixels (px) for designers and root em (rem) for developers.

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