GitBook: [master] 685 pages and 12 assets modified

SUMMARY.md

@@ -274,6 +274,11 @@
 * [Brand and Visual Guidelines](guides/brand-and-visual-guidelines/README.md)
   * [Logo](guides/brand-and-visual-guidelines/logo.md)
   * [Typography](guides/brand-and-visual-guidelines/typography.md)
+  * [Color](guides/brand-and-visual-guidelines/color.md)
+  * [Patterns](guides/brand-and-visual-guidelines/patterns.md)
+  * [Iconography](guides/brand-and-visual-guidelines/iconography.md)
+  * [Photos](guides/brand-and-visual-guidelines/photos.md)
+  * [Modular Compositions](guides/brand-and-visual-guidelines/modular-compositions.md)
 
 ## API
 

guides/brand-and-visual-guidelines/color.md

+---
+description: Here you will find Guidelines about Rocket.Chat's colors
+---
+
+# Color
+
+Here are our spacing tokens. They make easy to add padding, margins, and position coordinates.
+
+![](../../.gitbook/assets/01_color.jpg)
+

guides/brand-and-visual-guidelines/iconography.md

+---
+description: Here you will find Guidelines about Rocket.Chat's Iconography
+---
+
+# Iconography
+
+An icon must be a simple and direct graphic representation of the product, service or functions, such as actions and signage. Besides being very functional, it is a powerful tool for building our brand.
+
+The Rocket.chat icons translate the path between digital and physical. Used to convey our personality at all of our touch points.
+
+
+
+### Producing an icon
+
+Use the grid below to build new icons within the language Rocket.chat visual. Our grid is simple and functional, always calculating 2 in 2. Below, examples of grid for icons of 24px by 24 px.
+
+![](../../.gitbook/assets/01_icones.jpg)
+
+
+
+### More icons
+
+![](../../.gitbook/assets/02_icones.jpg)
+

guides/brand-and-visual-guidelines/modular-compositions.md

+---
+description: Here you will find Guidelines about Rocket.Chat's Modular compositions
+---
+
+# Modular Compositions
+
+Our identity system is modular, inspired by the open source concept. Regardless of the format, the patterns or pixel icons fit together, resulting in a simple system to assemble and easy to reproduce. Below are some examples of the use of modules in the construction of layouts from on to offline layouts.
+
+![](../../.gitbook/assets/01_modular.jpg)
+
+
+
+### Dont's
+
+![](../../.gitbook/assets/02_modular.jpg)
+

guides/brand-and-visual-guidelines/patterns.md

+---
+description: Here you will find Guidelines about Rocket.Chat's patterns
+---
+
+# Patterns
+
+Our pattern style starts from pixel repetition within a modular grid. It is an important element for decorative use at all points of contact.
+
+### Producing a pattern
+
+Use the grid below to build new patterns within the language Rocket.chat visual. Our grid is simple and functional, always calculating 2 in 2. Below, examples of pattern grids of 8 modules, 6 modules and 4 modules.
+
+![](../../.gitbook/assets/01_padrao.jpg)
+
+
+
+### Rounded corners
+
+**Watch out!** There are some rounded corners in our patterns keeping the calculation in 2 according to the module size that it was built in.
+
+![](../../.gitbook/assets/02_padrao.jpg)
+
+
+
+### More patterns
+
+![](../../.gitbook/assets/03_padrao.jpg)
+

guides/brand-and-visual-guidelines/photos.md

+---
+description: Here you will find Guidelines about Rocket.Chat's hotography
+---
+
+# Photos
+
+We increasingly want to appropriate a unique, contemporary language that conveys our value proposition in the stories that we are telling. So, we have some guidelines to inspire the way the Rocket.Chat style must be.
+
+### Treatment
+
+Our photos are high temperatures and saturated, resulting in a simple, proprietary and confidence effect.
+
+![](../../.gitbook/assets/01_photo.jpg)
+
+
+
+### Image Bank
+
+First of all, when choosing a bank image photo, it is necessary to understand the content and context that it will bring to your art. Then you will do the right search and filter the best image. The more specific your search term is, the easier it will be to find the right image.
+
+![](../../.gitbook/assets/02_photo.jpg)
+
+![](../../.gitbook/assets/03_photo.jpg)
+
+![](../../.gitbook/assets/04_photo.jpg)
+