Layout Grids
Web & Mobile Grids
Our web & mobile app layout grids are defined within the Moon Design system which employs a 12-grid architecture.
On Desktop: Maximum container width: 1300px
On Mobile: Minimum width: 360px
Baseline Grids
A baseline denotes the horizontal line upon which text is positioned, while leading refers to the vertical spacing between these baselines.
A baseline grid can be implemented within any of the previously mentioned grids. Its utilization promotes a smooth rhythm within the text and ensures that headings and subheadings maintain proportional spacing in comparison to the body text, enhancing the reader's experience.
For instance, the image above employs a 24px baseline grid in conjunction with typography set at varying sizes (16px, 18px, 24px, 64px), resulting in a harmonious typographic arrangement tailored for optimal readability.
Compositional Grids
When designing a visual composition for a variety of media, consider the use of a Rule of Thirds grid to ensure the focus items are lined up in a manner thats optimal to a human’s natural scanning pattern.
Rule of Thirds Grid
This grid is a composition tool that divides any given space into nine equal sections. Whether it's aligned vertically or horizontally, all nine sections maintain uniformity in size. Elements within the design are arranged in two manners.
Primary focal points are strategically positioned at the intersections of the lines, starting from the top left, top right, bottom left, and then bottom right. Meanwhile, other essential elements, typically the body text, occupy the spaces formed by these intersecting lines.
The Rule of Thirds is widely regarded for its ability to create visually pleasing compositions. Adhering to this grid ensures that your design maintains balance and proportionality, enhancing its overall aesthetic appeal.
Sample application
Review the samples below to see an example of how the Rule of Thirds grid can be used to help re-positions elements and improve the composition and visual balance of a layout.
Notice the following:
Text and visual elements lineup on the grid intersection lines
Spacing around the logo & textual elements instantly becomes more balanced and breathable
Proper type sizing, letter spacing, and line height values have been applied in the New design.
Last updated
