# Layout Grids ## Web & Mobile Grids Our web & mobile app layout grids are defined within the Moon Design system which employs a 12-grid architecture.

{% hint style="info" %} On Desktop: Maximum container width: 1300px {% endhint %}

{% hint style="info" %} On Mobile: Minimum width: 360px {% endhint %} *** ## 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. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://brand.coingecko.com/visual-identity/style/layout-grids.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.