First Republic’s flexible grid system uses a 2x structure, making it an agile, intuitive and scalable basis for designs and layouts across all applications.
With its ability to expand or contract across sizes, orientations and media as needed, the grid comprises 2, 4, 8 or 16 columns and rows. This configuration promotes proper organization of graphics, images and typography while maintaining First Republic’s consistent and modern aesthetic.
The grid system has three variations that consider an application’s need for margins (the space around an artboard) and gutters (the vertical buffer separating content).
Columns and rows should be established by the same multiple of two. With permitted grid variations of 2, 4 or 8, or 16 in special cases, a document would have 2 columns and 2 rows, 4 columns and 4 rows, 8 columns and 8 rows, or 16 columns and 16 rows.
The above rules have some exceptions. When communicating a large volume of content, an unequal number of rows may be allowed so long as multiples of two are maintained (with a maximum of 16 rows).
Additionally, large-format applications with sparse content may allow for 16 columns and 8 rows (for landscape), or 8 columns and 16 rows (for portrait).
Margins, no gutters is suitable for digital advertising formats that are square, portrait or landscape.
No margins, no gutters is suitable for large-format applications with sparse content. This grid allows for 16 columns and 8 rows (for landscape), or 8 columns and 16 rows (for portrait).
Margins and gutters is suitable for content in presentations and appears as landscape, in most cases.
Margins, no gutters is suitable for content in social media placements that are square, portrait or landscape.
Margins and gutters is suitable for content in email and appears as portrait, in most cases.
Margins and gutters is suitable for content on the web.
Margins, no gutters is suitable for advertising in print formats that are either square, portrait or landscape.
Margins, no gutters is suitable for either landscape- or portrait-style brochures. This grid allows for 8 columns and 8 rows (for landscape), or 8 columns and 16 rows (for portrait).
Margins and gutters is suitable for either landscape- or portrait-style flyers. This grid allows for 8 columns and 8 rows (for landscape), or 8 columns and 16 rows (for portrait).
Margins and gutters is suitable for either landscape- or portrait-style mailers. We recommend an 8-column grid for flexibility.
No margins, no gutters is suitable for large-format applications with sparse content. This grid allows for 16 columns and 8 rows (for landscape), or 8 columns and 16 rows (for portrait).
Margins and gutters is suitable for portrait-style info sheets. We suggest you begin with a 4-column grid.
Margins and gutters is suitable for portrait-style product sheets. We recommend an 8-column grid for flexibility.
Margins and gutters is suitable for portrait-style white papers. We recommend an 8-column grid for flexibility.
The margins, no gutters structure is suitable when designing for these types of content:
This variation keeps elements within margins and simplifies complex design, particularly when multiple features, text and assets must be organized.
To use this grid structure, first secure uniform margins around the artboard. Margins should equal 8% of the artboard’s short side.
Next, define columns by evenly dividing the width of the area within the margins — the live area — by 2, 4 or 8, depending on how much information is being organized.
Then, define rows by evenly dividing the live area to match the number of columns. In special circumstances, the live area may use 16 columns and 16 rows, 16 columns and 8 rows (for landscape), or 8 columns and 16 rows (for portrait).
The margins and gutters structure is suitable when designing for these types of content:
This variation is beneficial for content-heavy communications that require more definition and hierarchy. It supports organizing different types of content, such as multicolumn copy and imagery.
To use this grid structure, first secure uniform margins around the artboard, which should equal 8% of the artboard’s short side.
Next, define columns by evenly dividing the width of the area within the margins — the live area — by 2, 4 or 8.
Then, apply gutters. Gutters should be half the margin width.
Finally, define rows by evenly dividing the live area to match the number of columns.
The structure of no margins, no gutters is suitable when designing for this type of content:
This variation is ideal for simple communications with sparse content, particularly large-format assets, such as billboards. It is conducive to high-impact designs that prioritize refined simplicity.
To use this grid structure, evenly divide the width and height of the artboard by 16 and 8, respectively, or vice versa, depending on the application’s orientation.
