Keyboard ALT + g to toggle grid overlay
Visual design
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.
Logo
Our logo expresses our vision to help customers imagine, design, and create a better world. To maintain consistent presentation, follow these basic rules:
Placement
The Autodesk logo always appears on the top left within the global navigation. It is used only once per page and links to the autodesk.com homepage.
Format
For web, use the full-color version of our logo on light or white backgrounds. We recommend using SVG file format to maintain the best possible visual quality.
Size
Our logo should appear at 124w x 21h (CSS pixels). It remains at this size for all screen resolutions.
Clear space
To ensure visibility, the amount of clear space around our logo should be equal to or greater than the height of the “K” in Autodesk.
For additional guidelines on the Autodesk logo, visit the Autodesk logo page under brand elements.
Buttons
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.
Style
Solid
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.
Outlined
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.
Flat
Single call to action buttons that have no background on initial state.
Anatomy
Content
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.
Color
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 brand@autodesk.com.
Radius
A 2px radius is applied to the corners of our buttons.
Sizes
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.
States
Spacing
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.
Arrangement
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.
Spacing
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.
Root
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
Scale
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 brand@autodesk.com.
Social icons
Social icons are styled and placed consistently in the footer of our website.