Layouts
Grid system
The guidelines are based on a 14 column horisontal grid system with the two outer columns acting as outer margins. This provides us with a 12 column grid system where images, graphics and text should be placed within.
![Lilbit Brand Elements34](http://anti-brands.fra1.digitaloceanspaces.com/brands/lilbit/media/_1100x9999_fit_center-center_82_none/Lilbit_Brand_Elements34.png)
Logo placement in a 14 column grid system. The two outer columns act as an outer margin. The logos fill 12, 6 or 4 columns, placed towards the bottom right corner.
![Lilbit Brand Elements35](http://anti-brands.fra1.digitaloceanspaces.com/brands/lilbit/media/_1100x9999_fit_center-center_82_none/Lilbit_Brand_Elements35.png)
Graphic shape and logo placement in a 14 column grid system. The two outer columns act as an outer margin. The shape fill 12, 6 or 4 columns. The shape can be placed anywhere on the grid system, but should be positioned towards a corner of the format.
Within the grid system we can place elements such as images and text. Images can be placed inside the graphic shaped frames, or fill the whole format with logos and text placed on top of it. Images can sit with a clear outer margin or bleed out of the format.
![Lilbit Brand Elements36](http://anti-brands.fra1.digitaloceanspaces.com/brands/lilbit/media/_1100x9999_fit_center-center_82_none/Lilbit_Brand_Elements36.png)
Images in graphic frames sit within the outer margin.
![Lilbit Brand Elements37](http://anti-brands.fra1.digitaloceanspaces.com/brands/lilbit/media/_1100x9999_fit_center-center_82_none/Lilbit_Brand_Elements37.png)
Images bleed out of the format, still keeping the corner shapes from the image framing. Images can be used full bleed with text boxes in graphic shapes on top of it.
![Lilbit Brand Elements38](http://anti-brands.fra1.digitaloceanspaces.com/brands/lilbit/media/_1100x9999_fit_center-center_82_none/Lilbit_Brand_Elements38.png)
Text should be placed on a clear background, not overlapping the imagery.
Formats
The grid system can be applied to any format. When the format is narrow and long we can use a grid of 20 columns to avoid large outer margins.
![Lilbit Brand Elements39](http://anti-brands.fra1.digitaloceanspaces.com/brands/lilbit/media/_1100x9999_fit_center-center_82_none/Lilbit_Brand_Elements39.png)
![Lilbit Brand Elements40](http://anti-brands.fra1.digitaloceanspaces.com/brands/lilbit/media/_1100x9999_fit_center-center_82_none/Lilbit_Brand_Elements40.png)
Examples
Examples of layouts that use the grid system explained above.
![Lilbit Brand Elements 2224](http://anti-brands.fra1.digitaloceanspaces.com/brands/lilbit/media/_1100x9999_fit_center-center_82_none/Lilbit_Brand_Elements_2224.png)
![Lilbit Brand Elements 22210](http://anti-brands.fra1.digitaloceanspaces.com/brands/lilbit/media/_1100x9999_fit_center-center_82_none/Lilbit_Brand_Elements_22210.png)
![Lilbit Brand Elements 222](http://anti-brands.fra1.digitaloceanspaces.com/brands/lilbit/media/_1100x9999_fit_center-center_82_none/Lilbit_Brand_Elements_222.png)
![Lilbit Brand Elements 2226](http://anti-brands.fra1.digitaloceanspaces.com/brands/lilbit/media/_1100x9999_fit_center-center_82_none/Lilbit_Brand_Elements_2226.png)
![Lilbit Brand Elements 22215](http://anti-brands.fra1.digitaloceanspaces.com/brands/lilbit/media/_1100x9999_fit_center-center_82_none/Lilbit_Brand_Elements_22215.png)
![Lilbit Brand Elements 2228](http://anti-brands.fra1.digitaloceanspaces.com/brands/lilbit/media/_1100x9999_fit_center-center_82_none/Lilbit_Brand_Elements_2228.png)