Autodesk Brand Hub

Layout system

The brand layout system sets the stage for how we communicate visually—through a flexible grid system and intentional use of color blocking. These elements ensure every design feels cohesive and unmistakably Autodesk, no matter the medium.

Our grid system provides structure and scalability, adapting seamlessly to various formats, while the strategic use of Autodesk Black, Hello Yellow, and accent colors delivers a bold and recognizable identity. Together, these tools empower teams to create a system of grids and designs that are both consistent and dynamic, bringing clarity to complexity and fostering a unified brand experience.

By following this system, you’ll eliminate guesswork, streamline workflows, and enable creativity within the framework of our brand’s core values. This is where form meets function, ensuring our visual identity stays strong while evolving with our needs.

OverviewApplying the gridColor and imageryCorner styles

The grid and color blocking work together to create designs that are bold, balanced, and adaptable. The grid provides structure, while color blocking adds energy and focus, ensuring every layout aligns with our brand identity.

3D exploded view of a simple Autodesk-branded layout, showcasing how the grid works with color blocking, imagery, logos, and text
Annotated example of a 6-column grid overlayed over example content, creating a sense of rhythm and balance by guiding the placement of text and images

The grid ensures precise alignment and consistent spacing, guiding the placement of text, images, and color blocks for a balanced layout.

Example of a simple Autodesk-branded layout, showcasing the use of bold color blocking to define sections and draw attention to key content

Color blocking defines sections and draws attention to key content. The use of bold Autodesk Black and Hello Yellow, with accents, ensures clarity and focus.

The grid and color blocking adapt seamlessly to different formats, from web and social media to print and presentations.

The grid is the backbone of our visual system, providing structure and consistency across every design. Built on a modular 4px base, the grid ensures elements align precisely while remaining adaptable to different formats. By using columns, rows, gutters, and margins, the grid helps create layouts that are balanced, clean, and scalable.

Evenly spaced columns combine with evenly spaced rows to create a unified grid

Columns create vertical divisions across the layout, defining areas for content like text, images, and graphics. Rows provide horizontal alignment, ensuring consistent spacing between sections and elements. Together, columns and rows create a balanced and organized structure for web, print, and presentations

Aligning horizontal placement of typography and visual elements with the columns of Autodesk's grid creates vertical divisions across the layout

Columns only

Aligning horizontal placement of typography and visual elements with the rows of Autodesk's grid creates horizontal alignment across the layout. Here, it is shown applied to event wayfinding examples.

Rows only

Margins and gutters can be used to create space between elements and maintain visual balance within a layout. Gutters help separate content, while margins frame the edges of the design, providing breathing room and an intentional look. Depending on the design needs, adding margins and gutters can enhance clarity and make layouts feel more spacious, but they may not always be necessary for every composition.

When used, both elements should align with the 4px base grid to ensure consistency across formats.

Annotated 12-column grid showing margins on the side of the grid, and gutters in between grid columns

The 4px base unit is the smallest measure in our system, forming the basis for all spacing, alignment, and layout decisions. This modular approach allows elements to align precisely, ensuring designs are balanced and scalable across all formats, from digital to print.

A 12-column grid with responsive gutters and margins, to be used on the web

Web

Use a 12-column grid with responsive gutters and margins for flexibility.

An 8-column modular grid meant for print layouts that divides pages into structured sections

Print

Apply modular grids to divide pages into structured sections.

Two modular, flexible grid layouts that allow for balanced designs across a variety of aspect ratios, for social media and ads

Social and ads

Use modular layouts for balanced designs across various aspect ratios.

A landscape, wide-screen, modular grid with consistent margins, for use with slides or other presentation materials

Slides

Use a modular grid to align titles, images, and visuals in presentations.

Correct example showing consistent column divisions across a 2 and 4 column grid

DO use consistent column divisions (e.g., 2, 4, 8, 12) across your layout to maintain balance.

Correct example showing alignment of all visual elements with the grid, creating clean and intentional designs

DO align all elements—text, images, buttons—to the grid for clean and intentional designs.

Correct example showing usage of consistent gutters and margins to create breathing room between content and the edges of the layout

DO use gutters and margins to create breathing room between content and edges.

Annotated example showing correct usage of Autodesk's spacing scale, wherein even multiples of the base unit are used to define spacing between elements

Do use multiples of the base unit (1x, 2x, 3x, 4x, 6x, 8x, 10x, 12x) to define all spacing between elements.

Correct example showing alignment of color blocks to the grid to create clean and structured layouts

DO align all color blocks to the grid for clean, structured layouts.

Annotated example of appropriate usage of rows and vertical rhythm between elements in a layout, showing usage of even, consistent multiples of the grid's row spacing

DO apply rows and vertical rhythm to maintain even spacing between sections.

Example of incorrect usage of the grid, wherein elements are misaligned with the underlying grid

DO NOT place elements randomly or misalign them from the grid—it disrupts visual harmony.

Incorrect example showing a lack of correct gutters and margins between elements in a layout, creating a cramped feeling

DO NOT skip gutters or margins, as it makes content feel cramped.

Color and imagery work together to bring energy, hierarchy, and clarity to our designs. By combining bold Autodesk Black and Hello Yellow color blocks for primary emphasis, lighter tints or grays for supporting sections, and high-quality impactful images, aligned to the grid, we create layouts that are visually dynamic, balanced, and unmistakably ours. old blocks of black and yellow for primary emphasis and lighter tints or grays for supporting sections. These principles ensure every design remains flexible and cohesive, regardless of format.

Example of a slide in a presentation deck that combines relevant imagery with strong, bold color blocking to create a sense of energy, hierarchyy, and clarity

Color blocking defines the most important elements of a layout. Autodesk Black and Hello Yellow dominate, creating bold sections that emphasize headlines, CTAs, or visuals. Accent colors add contrast and guide attention, ensuring the viewer’s eye moves naturally through the design.

Example of color blocks in a layout used to define hierarchy and draw the eye towards important elements. Hello Yellow and Black are the primary color blocks, while other accent colors are used more sparingly

Accent colors should make up no more than 15% of the layout, ensuring black, yellow, and imagery remain the primary visual elements (see Color proportions and usage). Images and color blocks should work together to maintain hierarchy and avoid visual clutter, creating a balanced and cohesive design.

Color and imagery work together to bring energy, hierarchy, and clarity to our designs. By combining bold black and yellow color blocks with impactful images, aligned to the grid, we create layouts that are visually dynamic, balanced, and unmistakably ours. These principles ensure every design remains flexible and cohesive, regardless of format.

Annotated examples of various aspect ratios that can be used for imagery — 1:1, 16:9, 3:2, and 4:3

To ensure consistency and alignment, images must scale proportionally with the grid. Recommended ratios include:

  • 1:1 (Square): Perfect for thumbnails, social posts, or modular layouts;
  • 4:3 (Standard): Suitable for general-purpose content like presentations and print;
  • 16:9 (Wide): Best for hero sections, full-width banners, and videos;
  • 3:2 (Classic): Great for photography or visually rich content.

Dimensions

Ensure that image dimensions align to multiples of 4px (e.g., 400px x 300px for a 4:3 image). When cropping, always maintain the original ratio for proper alignment.

Alignment tip

Align one dimension to a multiple of 4 while ensuring the other aligns proportionally.

Clear space for text and elements

To maintain clarity and consistency across various design sizes, the clear space around type can scale proportionally based on the overall size of the design. This ensures that smaller designs remain legible and larger designs maintain visual balance, the minimum clear space around text and elements should relate to the size of the type and align with the grid system.

Example showing ample clear space on the edges of a layout to create balance with the large, bold typography

The minimum clear space around text and elements is equal to 1x the height of the largest capital letter in the text block (e.g., “C”), rounded up to the nearest multiple of the grid unit (e.g., 4px, 8px, etc.). For smaller text sizes (e.g., body copy), use 1.5x the line height to provide additional breathing room for readability.

Example of a print layout showing correct usage of bold blocks of black and yellow to indicate primary emphasis, with lighter tints and grays used for supporting sections

DO use bold blocks of black and yellow for primary emphasis and lighter tints or grays for supporting sections.

Two social media ad examples showing usage of imagery with structured layouts that provide a clear visual hierarchy
Image courtesy of Miha Maruško and Ian Holmes

DO use images with structured layouts that support clear visual hierarchy.

Example of a layout that selectively uses the The Window (the Autodesk logomark with a stroke) and The Thread (a visual element that weaves through the window) to emphasize key sections

DO use the window and the thread selectively to emphasize key sections or highlight important areas in the design. Avoid overusing it in a single layout.

Example print layout showing use of imagery within a structured layout with clear visual hierarchy

DO use images with structured layouts that support clear visual hierarchy.

Incorrect example of a layout that overuses secondary colors where primary colors should be used

DO NOT overuse secondary colors. Use them sparingly— for accents only.

Incorrect example of an image crop that removes a key focal point of the image, instead cropping in on a background detail

DO NOT crop images in a way that removes key focal points.

Incorrect example of a layout that overuses color blocks, which creates a crowded, confusing design
Image courtesy of Vishwesh Taskar

DO NOT overuse color blocks, which can lead to overly complex or crowded designs.

Incorrect example of an awkward image crop, wherein a man's head is partially cut off by the crop

DO NOT crop images awkwardly. Avoid cutting off key subjects or creating unintentional tension.

The purposeful use of rounded and sharp corners creates a balance between approachability and precision in our designs. When deciding which to use, consider its purpose and strive for balanced compositions. Rounded corners add softness and focus to interactive or decorative elements, while sharp corners convey structure and clarity.

Example layout that juxtaposes sharp corners with rounded ones. The background imagery and text uses sharp corners, while a testimonial quote has a rounded corner, drawing attention and creating a dynamic design

Rounded corners create a polished and cohesive look across all elements. The radius scale is designed to align with the 4px grid, ensuring consistency and scalability across designs. By applying the right radius size for the element, you can maintain visual harmony and reinforce the brand’s identity.

Autodesk's radius scale goes from 4 to 32 pixels in even increments — 4px, 8px, 16px, 24px, and 32px

Always match the radius size to the purpose and size of the element. Use larger radii, such as 24px, 32px, or 48px, sparingly to create emphasis while avoiding overuse. Ensure all rounded elements align precisely to the grid to maintain a cohesive and polished design.

  • 4px: For small elements like buttons, tags, and compact UI elements.
  • 8px: For slightly larger UI elements such as input fields or small cards.
  • 16px: For medium-sized elements like standard cards or containers.
  • 24px: For larger components like modals or section dividers.
  • 32px: For prominent visual elements, such as banners or hero sections.

Rounded corners are best for emphasizing specific elements, such as callouts or buttons, while sharp corners establish structure and balance. Sharp corners convey precision and order, making them ideal for grids, sections, tables, and professional layouts where clarity and consistency are key. Combining rounded and sharp corners within a layout can create visual contrast and guide focus, but it should always serve a clear purpose.

Example of rounded corners used on a color block to highlight a standalone card with text

Highlighting standalone elements

Use fully rounded corners for isolated elements like callouts, standalone cards, or featured content.

Three examples showing rounded corners to guide attention to key content such as a CTA area, an interactive button, and a quote block
Image courtesy of Haodong Liu

Creating Focus

Use rounded corners to guide attention to key content. For example, callouts, quote blocks, or interactive features like buttons can benefit from the visual emphasis created by rounded corners.

Example of a row of images with rounded corners, which soften the layout and make it feel more approachable

Softening layouts

In clean and minimalist designs, fully rounded corners add a modern, approachable touch while maintaining visual balance.

Example of sharp corners in a grid of images and color blocks, creating a feeling of precision and structure

Provide alignment and structural balance

Sharp corners are ideal for structural elements like grids, containers, and layout dividers. They emphasize precision, alignment, and organization, ensuring the overall design feels grounded and cohesive.

Combining rounded and sharp corners in the same layout can create contrast and guide focus, but it must be done with a clear purpose. Rounded corners are used to highlight specific elements, while sharp corners provide structure and balance.

Example of correct usage of rounded corners to emphasize a quote block on top of an image

DO apply rounded corners to emphasize specific elements like quote blocks or interactive features.

Example of correct usage of predominantly sharp corners within a structured grid layout

DO use sharp corners for grids, images, or layout containers to provide alignment and structural balance.

Example of selective use of rounded corners to distinguish a key area of the layout from the rest of the design

Do leverage rounded corners to distinguish interactive or decorative elements from structural ones.

Example of incorrect usage of rounded corners without a clear reason — the element with rounded corners does not contain key information and does not need to be visually distinct

DO NOT combine rounded and sharp corners without a clear reason, as it can confuse the viewer and reduce impact.

Example of excessive usage of rounded corners within a layout, creating a lack of clear visual contrast and structure

DO NOT use rounded corners excessively, as it might weaken the design’s structural integrity.