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. These examples are based on a snapped to grid rationale, we can further create layouts that are more organic and free-floating as well.
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.
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.
Layout setup
To keep things orderly and precise, grid and guides organise content and guide layout creation. You will find examples below of how to combine text and artwork in an orderly and balanced fashion for different aspect ratios.
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
Square
Vertical
Artwork container
Alternatively, the modular grid system can also be used for containing key artwork, as opposed to being a guide to arrange shapes against. Examples using key artwork below.