Layout system

How it works

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.

---

Flexible by design

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

Applying the grid

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.

Columns and rows

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

Margins and gutters

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.

---

Scalability across formats

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.

---

Checklist for using grids in our brand layout

Color and imagery

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.

Using color to define hierarchy

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.

Proportions and balance

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.

---

Integrating images into the grid

---

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.

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.

---

Checklist for using color and imagery in the layout system

Rounded vs. sharp corners

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.

Radius scale

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.

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.

---

Usage

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.

---

Checklist for using round and sharp corners

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.