Digital experiences

The Digital HIG, or Digital Human Interface Guidelines, defines the building blocks of Autodesk web platforms. It includes standards, documentation, and toolkits that promote consistent, accessible, and brand-aligned experiences.

Autodesk is committed to digital equity. We are working to remove barriers between people and their goals and to follow the Web Content Accessibility Guidelines at the highest levels.

Note: Guidelines are in progress as we work to align with the new Autodesk brand. Please reach out to Digital.HIG.Core@autodesk.com for additional information.

The primary colors of Autodesk are black, and then white. This simple palette forms a framework to support the parent brand, and not compete with the colorful images, communities, and ideas that bring Autodesk online experiences to life.

In every instance, the goal should be to use only the primary colors, black and then white.

#000000
hsl(0, 0%, 0%)
rgb(0, 0, 0)

#ffffff
hsl(0, 100%, 100%)
rgb(255, 255, 255)

Detail grays can be used to indicate a minute level of hierarchy or division between elements and surfaces, such as a single pixel edge or dividing line. Dark Slate may be used against light backgrounds, and Light Slate may be used against dark.

#666666
hsl(0, 0%, 40%)
rgb(102, 102, 102)

#cccccc
hsl(0, 0%, 80%)
rgb(204, 204, 204)

Use accent colors sparingly to provide signals and highlights.

#d74e26
hsl(14, 70%, 50%)
rgb(215, 78, 38)

#2bc275
hsl(149, 64%, 46%)
rgb(43, 194, 117)

#d74e26
hsl(14, 70, 50)
rgb(215, 78, 38)
cmyk(0, 64, 82, 16)

#2bc275
hsl(149, 64, 46)
rgb(43, 194, 117)
cmyk(78, 0, 40, 24)

#5f60ff
hsl(240, 100, 69)
rgb(95, 96, 255)
cmyk(63, 62, 0, 0)

#ffc21a
hsl(44, 100, 55)
rgb(255, 194, 26)
cmyk(0, 24, 90, 0)

#5f60ff
hsl(253, 91%, 56%)
rgb(95, 96, 255)

#ffc21a
hsl(44, 100%, 55%)
rgb(255, 195, 26)

Detailed guidelines for the application of color in online experiences are currently in development.

Artifakt is a proprietary typeface, designed for exclusive use by Autodesk. It expresses our unique personality and addresses technical and aesthetic concerns of Autodesk branding, web, and UI design.

Note: Make sure you update to the latest version of Artifakt font package for designers, available on Autodesk DAM  (access required).

All designs for screen use Artifakt Element for everything except large headings, which are Artifakt Legend.

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

Default
font-family: “ArtifaktElement”, Arial, sans-serif;

Display
font-family: “ArtifaktLegend”, Arial, sans-serif;

Code
font-family: Courier, monospace;

For headings and short blocks of text such as calls to action and labels, we use 100% primary white on black or black on white.

All text must meet WCAG AA requirements for contrast.

Exception: for text that is inactive or disabled, use 40% white on black or 40% black on white.

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

To maintain a responsive yet consistent type hierarchy, we apply an exponential formula to calculate proportional distances.

The mathematical scale is only applied to fonts larger than 16px in order to ensure smaller type sizes—the building blocks for our components—remain stable across all viewport widths.

Applying a standard set of spacing establishes a rhythm, supports the visual hierarchy, and ensures there is 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 gutters and line-height. It’s an easy-to-remember way to create harmony across the customer journey.

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

A shared grid provides consistency across the customer journey and simplifies design, development, and maintenance of responsive layouts.

Our grid consists of 12 columns with gutters in between, an outer margin, and a maximum width. Content within the grid is organized in rows that span the whole width and contain one or more boxes. The boxes can wrap within a row. A box can span multiple columns and use its padding to increase the distance between content.

Digital HIG provides a set of breakpoints with a cadence of 160 px (= 10 rem), starting at 400 px (= 25 rem).

The default widths of the outer margins and the gutters change at two breakpoints. The maximum width of the whole grid is set as 1440 px (= 90 rem).

The number of columns stays at 12 for all viewport widths. The grid adapts its width fluently up to the pre-defined maximum width.

The grid provides the flexibility to create layouts to serve a wide range of needs.

Columns can be skipped or spanned.

Line length can be controlled by limiting the number of columns being spanned on large viewports.

Grids can be nested to realize more complex layouts.

The maximum width can be overridden for layout modules that benefit from taking advantage of all the available space on larger viewports.

Use padding within boxes to maintain distance between text columns and complex shapes.

Color

Primary color

Parent Black

Parent White

Detail grays

Dark Slate

Light Slate

Accent colors

Plant

Clay

Plant

Iris

Gold

Iris

Gold

Color usage

Typography

Artifakt Legend and Element

Font stacks

Weights and styles

Text colors

Type scale

Spacing

Root

Scale

Grid

Structure

Breakpoints

Metrics

Behaviour

Usage