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