Unverified Commit a41f09e4 authored by Fernanda Helenco's avatar Fernanda Helenco Committed by gitbook-bot

GitBook: [master] 685 pages and 12 assets modified

parent 65cde7df
......@@ -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
......
---
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)
---
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)
---
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)
---
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)
---
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)
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment