Skip to main content

Layouts

Layouts work with our grid system to bring it all together. While the examples below are focused on snapping to and working with the grid, layouts can also be more organic and free-floating when appropriate.

Utilizing the grid

We make use of our grid when determining our layouts. Our grid works like a base structure, simply add shapes on top to create various compositions.

A circular grid structure drawn in black lines on a light gray background. Text underneath reads "Base Grid - Six modules organised as a grid."

A circular grid structure with several abstract shapes drawn on top of it in dark gray. Text underneath reads "Modular System - Add shapes to the modules to create a composition."

Shape scalability

Our grid system is scalable and can host a number of shapes depending on the number of modules. The compositions can also be modified accordingly, making them more simple or complex depending on the end goal.

Examples of four different grid layouts with abstract circular shapes drawn on top of them. Text underneath reads "Examples ranging from 1 to 64 modules, the layout scales in complexity as we increase in modules."

Text hierarchy

We use black text for headings—or to highlight a valuable point—and continue with gray for the rest of the sentence or subheadings. We shift tones slightly on white and dark backgrounds to ensure all text is accessible.

Access libraries for Primer colors at primer.style.

The words "heading" above the word "subheading" in white and blaack respectively, on black background. "Heading" is labeled dark/text-primary while "Subheading" is labeled dark/text-secondary

Examples of text/headline/secondary and text/headline/primary using placeholder lorem ipsum copy in dark gray on a light gray background

Layout setup

Using grids and guides to organize content can help convey a technical and functional feeling. The examples below show balanced combinations of text and artwork at different aspect ratios.

Text reading "Two-column example" sits above a black rectangle containing large headline placeholder lorem ipsum text set on the left side of the composition. Two lines of smaller placeholder text are underneath, followed by an invertocat logo. The composition is outlined by light gray grid lines.

Text reading "Two-column example with modules" sits above black rectangle featuring both large and small placeholder lorem ipsum text on the left, with circular grid lines on the right.

Conversely, if more space for content is needed, ratio could be changed to 2/3 content, 1/3 for artwork. Even 1/2 and 1/2. Use your best judgement.

Grid scalability

For compositions with copy and artwork, we use the grid in a modular fashion as a guide. As modules increase in number to host shapes, the layout gets more complex.

It is also possible to scale the grid up and down in a layout to remove or add shapes in any composition. The grid and guidelines are intentionally left visible in these compositions to show how we are applying it’s logic, but ultimately should either be turned off completely in designs, or left at a lower opacity value.

See examples of Universe work below, where we put this to practice.


Horizontal

Two black landscape rectangular compositions side by side. Text above them reads "1 module" and "2 modules" respectively. Compositions feature placeholder lorem ipsum text on the left in white and light gray, with abstract illustrations on the right.

Two black landscape rectangular compositions side by side. Text above them reads "4 modules" and "9 modules" respectively. Compositions feature placeholder lorem ipsum text on the left in white and light gray, with abstract illustrations on the right.


Square

Three black square compositions side by side. Text above them reads "3 modules," "4 modules," and "9 modules" respectively. Compositions feature placeholder lorem ipsum text on the bottom in white and light gray, with abstract illustrations on the top.


Vertical

Two black portrait rectangular compositions side by side. Text above them reads "1 module" and "3 modules" respectively. Compositions feature placeholder lorem ipsum text on the bottom in white and light gray, with abstract illustrations on the top.

Two black portrait rectangular compositions side by side. Text above them reads "4 modules" and "9 modules" respectively. Compositions feature placeholder lorem ipsum text on the bottom in white and light gray, with abstract illustrations on the top.

Artwork container

The layout system isn’t just for arranging shapes over our grid. It can also be used for containing key artwork, as shown in the example below.

A series of 6 compositions ranging from portrait to landscape to square. Each composition features lorem ipsum placeholder text paired with an abstract illustration in its own rectangular container.