Layout System

Tiles

Tiles are a popular and useful framework for displaying, grouping, and showcasing content, such as images, text, or a combination of both. Learn more about the structure, construction, and layout of tiles in print and digital media.

Tiles
  • Essentials
  • Examples
  • Placement
  • Padding and spacing
  • Background and borders
  • Dos and Don’ts

Essentials

Tiles are effective because they have a clean and organized look and feel while easily adapting to a variety of canvas and device sizes. Tiles can be subdivided vertically and horizontally, much like the whole layout canvas. In digital media, you can also use Cards as interactive tiles.

Examples

Placement

Align tiles preferably with the text in the type area. In some layouts, it may make sense to align the tiles with the Postyellow gradient in the branding area. In this case, be sure to align the text inside the tiles with the type area.

Padding and spacing

In print media, we recommend the following:

  • Spacing between tiles: 0.5 base units

  • Padding inside tiles: 1 base unit

Background and borders

Feel free to design tiles with a background color, image, and borders as needed. Choose an image or color that fits the overall look and feel. Strive for a harmonious relationship between section colors and the background behind the group of tiles. We recommend gray tones for borders and extending images to the edge of the tile.

Dos and Don’ts