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.

Color

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.

Primary color

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

Autodesk Parent Black swatch
Parent Black

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

Autodesk Parent White swatch
Parent White

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

Detail grays

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.

Autodesk color detail of dark gray slate swatch
Dark Slate

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

Autodesk color detail light gray slate
Light Slate

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

Accent colors

Use accent colors sparingly to provide signals and highlights.

Autodesk color accent clay swatch

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

Autodesk color accent plant swatch
Plant

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

Autodesk color accent clay swatch
Clay

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

Autodesk color accent plant swatch
Plant

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

Autodesk color accent iris swatch
Iris

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

Autodesk color accent gold swatch
Gold

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

Autodesk color accent iris swatch
Iris

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

Autodesk color accent gold swatch
Gold

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

Color usage

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

Typography

Artifakt Legend and Element

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.

Font stacks

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;

Weights and styles

Autodesk typography legend extra bold
Autodesk typography bold
Autodesk typography weight regular

Text colors

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.

Autodesk typography against a dark background
Autodesk typography against a white background

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.

Autodesk typography
Autodesk typography

Type scale

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

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

Autodesk typography scale

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.

Spacing

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.

Root

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.

Autodesk spacing root

Scale

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

Autodesk scale table

Grid

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

Structure

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.

Autodesk grid structure

Breakpoints

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

Autodesk grid table

Metrics

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

Behaviour

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

Usage

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

Autodesk grid usage

Columns can be skipped or spanned.

Autodesk grid usage line length

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

Autodesk grid usage when nested example

Grids can be nested to realize more complex layouts.

Autodesk usage at max width example

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

Autodesk grid usage padding example

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