With its rigorous hierarchies and geometry, the grid orients us. It tells us what’s important and what can wait. As people become comfortable with reductive, flat design, the grid can be more abstract, with fewer cues and signposts. The explicit grid starts to fade, leaving behind the elegant relationships between its elements. Our grid is relational; the smallest pixel size determines the stroke, the size of the icon, the typography size, leading, kerning, tile sizes. It’s also a freer, more open space, with room for organic shapes. Rather than being an overly rationalized or rigid setting, the grid becomes the stable ground under a newly intimate and fully humanistic visual syntax.
A 4-pixel base unit allows design elements to scale consistently across all display sizes. When designing, please keep this in mind and try to use multiples of 4 in sizing your elements.
Break points, page margins, and number of columns
The grids content column reaches a maximum width of 1600 pixels. Beyond this, the page may get bigger, but the content column will not. If there is a full-bleed field or image present, the page may decide to let the image scale with the page endlessly, or may "cap" it at a certain width to contain the problem space of designing for fluid layouts. If you choose to cap the width of full bleed areas, we recommend doing so at 1920 pixels, which is currently the largest width for our images.
|Break point||Range||Page margins|