Unverified Commit 4007c56d authored by Fernanda Helenco's avatar Fernanda Helenco Committed by gitbook-bot
Browse files

GitBook: [master] 10 pages modified

parent a41f09e4
......@@ -271,14 +271,7 @@
* [Confluence Server](guides/rocket-chat-apps/atlassian/confluence-server-integration.md)
* [Jira Server](guides/rocket-chat-apps/atlassian/jira-server-integration.md)
* [Zoom](guides/rocket-chat-apps/zoom.md)
* [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)
* [Brand and Visual Guidelines](guides/brand-and-visual-guidelines.md)
## API
......
---
description: Here you will find Guidelines about Rocket.Chat's Brand
---
# Brand and Visual Guidelines
## Brand Positioning
### Golden Circle
![](../../.gitbook/assets/group-85.png)
### Our Values
![](../../.gitbook/assets/group-98.png)
### Brand Product Personas
![](../../.gitbook/assets/group-99.png)
### Brand Idea
![](../../.gitbook/assets/rocketscience-creates-magic.png)
### Emotional Qualities
![](../../.gitbook/assets/group-71.png)
### Functional Qualities
![](../../.gitbook/assets/group-87.png)
### Features and Attributes
![](../../.gitbook/assets/group-73.png)
---
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 Logo
---
# Logo
The logo is one of the main resources to identify Rocket.Chat. So, use it consistently and coherent is fundamental to strengthen the brand image.
![](../../.gitbook/assets/01_logo.jpg)
![](../../.gitbook/assets/02_logo.jpg)
![](../../.gitbook/assets/03_logo.jpg)
![](../../.gitbook/assets/04_logo.jpg)
### Protection area
The proximity to other elements can reduce the visual impact of the logo. When applying any of the versions, an area of non-interference around the logo must be protected, equivalent to at least 3 balls from our symbol.
![](../../.gitbook/assets/05_logo.jpg)
### Position in icons
Whenever placing the Rocket.Chat symbol in circular or square formats, use the circle in the center of our symbol as a reference for centering.
![](../../.gitbook/assets/06_logo.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)
---
description: Here you will find Guidelines about Rocket.Chat's typography
---
# Typography
The Rocket.Chat typeface family brings flexibility and recognition. Its primary function is to have a fluid performance in the digital medium. Its unique design also helps to highlight aspects such as modernity, technology and simplicity.
![](../../.gitbook/assets/01_typo.jpg)
![](../../.gitbook/assets/02_typo.jpg)
![](../../.gitbook/assets/03_typo.jpg)
### Type Scale
We follow a 6px baseline grid for achieving a vertical rhythm on all block-level elements in the app.
![](../../.gitbook/assets/04_typo.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