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

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.

Color blocking defines sections and draws attention to key content. The use of Autodesk Black and Autodesk White Yellow 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

Columns only

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.

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

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 color blocks for primary emphasis, lighter tints or secondary colors for supporting sections, and high-quality 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.

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

Hello Yellow and tertiary colors should make up no more than 15% of the layout, ensuring Autodesk Black, Autodesk White, 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. Combine bold color blocks with impactful images, aligned to the grid, to 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 Autodesk Black and Autodesk White for primary emphasis, then Hello Yellow and lighter or darker tints and shades of secondary colors for supporting sections.

Image courtesy of Miha Maruško and Ian Holmes

DO use primary colors as the dominant colors, making up 85% of the palette.

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.

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

DO NOT overuse secondary or tertiary 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 use massive blocks of Hello Yellow or crop images awkwardly.

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.

Highlighting standalone elements

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

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.

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.

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.