Grid
The framework of our visual identity
Our grid system acts as the backbone of design, providing structure and harmony that allows our graphic elements to shine.
Our grid system
Our grid is crafted to assist designers in positioning and sizing brand elements with precision. It serves as a vital tool for aligning typography and organizing layouts or interfaces, ensuring a cohesive and visually appealing presentation.
Primary
DEFINE THE GRID
The grid is created for and helps with:
- Positioning and sizing of brand elements
- Aligning typography
- Organizing layouts or interfaces.
To get the right grid size: divide the shorter side by 12 or 17 to get the right square size. You may also use the half-grid size (grid square divided by two) to place branding and visual elements on a page.
Do not place branding and visual elements under or oversized on a layout. Use the grid for reference.
start grid here
Letter size divided 17 divisions (short side)
%20(1).jpg)
start grid here
For digital, use a 10 x 10 square pixel grid to organize, position, and scale visual elements.
.jpg)
LOGO PLACEMENT & GRID
The exact location of the logo is a matter of choice as long as it’s placed on the grid. However, we advise placing thelogo on the grid.
Positioning the W&D logo on the grid
The W&D logo must be attached to the grid on at least 3 sides:
- left, top, right
- left, bottom, right
How it works
start grid here
design system
The Header Title Goes Here
Text placement and the grid.
Header text is always aligned
to the grid.
Text placement and the grid. The body text is aligned to the grid.
Graphics and the grid. Graphics / Photography is always aligned to the grid.
Cover Example
Spread example
