Manual de Identidade Visual

Rocinha
UP

Da formação ao produto. Do percurso ao valor.

Versão3.9
DataMaio de 2026
SegmentoProduto / E-commerce
EscritórioFazemos.co
Dir. de criaçãoPaula Maia
CriaçãoDavi Fontenele

Sumário

Identidade como narrativa

A identidade visual da Rocinha UP nasce da ideia de transformação como percurso. Ela parte da parceria com o universo do jiu-jitsu — não de forma literal ou esportiva, mas simbólica.

A faixa foi escolhida como elemento central por representar disciplina, evolução, conquista e mudança de vida. Ao mesmo tempo, sua lógica de dobra e recomposição dialoga diretamente com o upcycling: o projeto transforma materiais que seriam descartados — tatames e kimonos — em produtos de moda e decoração, e transforma conhecimento em geração de renda.

Assim, a marca não é apenas um logotipo, mas uma narrativa gráfica da própria missão do projeto: capacitar, transformar e elevar.

Faixa

Trajetória, disciplina, evolução e conquista de vida

Dobra

Transformação, recomposição, matéria recriada

Conclusão, domínio, autoria e valor percebido

UP

Elevação, ascensão, potencial realizado

↑ Voltar ao índice

Uma marca em dois estados

O sistema visual foi pensado como dois momentos de uma mesma jornada. A faixa existe em dois estados, cada um com significado próprio e contexto de uso distinto.

Logotipo Rocinha UP — símbolo aberto

Estado 01 — Símbolo Aberto

Rocinha UP

  • Plataforma de capacitação
  • Aprendizado e processo
  • Formação e percurso
  • Potencial em construção
  • Uso: plataforma digital, conteúdo, cursos
Logotipo Rocinha — símbolo atado

Estado 02 — Símbolo Atado

Rocinha (Grife)

  • Grife e linha de produtos
  • Conclusão e domínio
  • Valor e autoria
  • Assinatura e identidade do produto
  • Uso: produtos físicos, etiquetas, bordados
↑ Voltar ao índice

Versões e arquivos

Cada logotipo existe em versão padrão, mini, horizontal e negativa (branca). Todos em SVG e PNG com fundo transparente.

01

Rocinha UP — Plataforma

Versão padrão

Colorido

Colorido

01-COLOR.svg

Escala de cinza

Escala de cinza

01-GRAY.svg

Monocromático

Monocromático

01-MONO.svg

Versão mini

Colorido — mini

Colorido — mini

01-COLOR-MINI.svg

Para tamanhos reduzidos

Escala de cinza — mini

Escala de cinza — mini

01-GRAYSCALE-MINI.svg

Para tamanhos reduzidos

Monocromático — mini

Monocromático — mini

01-MONO-MINI.svg

Para tamanhos reduzidos

Versão horizontal

Horizontal — colorido

Horizontal — colorido

01-HORIZ-COLOR-MINI.svg

Somente em espaços estreitos

Horizontal — cinza

Horizontal — cinza

01-HORIZ-GRAY-MINI.svg

Somente em espaços estreitos

Horizontal — monocromático

Horizontal — monocromático

01-HORIZ-MONO-MINI.svg

Somente em espaços estreitos

Negativo (branco)

Negativo

Negativo

01-NEGATIVE.svg

Negativo — mini

Negativo — mini

01-NEGATIVE-MINI.svg

Para tamanhos reduzidos

Horizontal — negativo

Horizontal — negativo

01-HORIZ-NEGATIVE-MINI.svg

Somente em espaços estreitos

02

Rocinha UP — Grife

Versão padrão

Colorido

Colorido

02-COLOR.svg

Escala de cinza

Escala de cinza

02-GRAY.svg

Monocromático

Monocromático

02-MONO.svg

Versão mini

Colorido — mini

Colorido — mini

02-COLOR-MINI.svg

Para tamanhos reduzidos

Escala de cinza — mini

Escala de cinza — mini

02-GRAY-MINI.svg

Para tamanhos reduzidos

Monocromático — mini

Monocromático — mini

02-MONO-MINI.svg

Para tamanhos reduzidos

Versão horizontal

Horizontal — colorido

Horizontal — colorido

02-HORIZ-COLOR-MINI.svg

Somente em espaços estreitos

Horizontal — cinza

Horizontal — cinza

02-HORIZ-GRAY-MINI.svg

Somente em espaços estreitos

Horizontal — monocromático

Horizontal — monocromático

02-HORIZ-MONO-MINI.svg

Somente em espaços estreitos

Negativo (branco)

Negativo

Negativo

02-NEGATIVE.svg

Negativo — mini

Negativo — mini

02-NEGATIVE-MINI.svg

Para tamanhos reduzidos

Horizontal — negativo

Horizontal — negativo

02-HORIZ-NEGATIVE-MINI.svg

Somente em espaços estreitos

Sobre os formatos

SVG — vetorial escalável. PNG — 800 px (padrão/mini) / 1200 px (horizontal), fundo transparente. Mini — tipografia reforçada para tamanhos pequenos. Horizontal — espaços estreitos: rodapés, banners, barras. Negativo — branco, para fundos coloridos e fotografias.

↑ Voltar ao índice

Logotipo sobre imagens

Em fotografias e fundos coloridos, use sempre a versão negativa (branca). Posicione em qualquer um dos 4 cantos — nunca centralizado. A fotografia deve ter ao menos um canto escuro ou colorido que garanta contraste com o branco do logotipo.

✓ Correto

Qualquer canto. Sempre sobre área escura ou colorida. Versão negativa (branca).

✗ Incorreto

Nunca centralizado. Nunca sobre áreas de baixo contraste.

Exemplo 1 — Versão 01 sobre fundo simulado

½ símbolo Rocinha UP — negativo

Fundo roxo simulado — 01-NEGATIVE-MINI — canto inferior direito

Exemplo 2 — Versão 02 sobre fundo simulado

Rocinha — negativo

Fundo escuro simulado — 02-NEGATIVE-MINI — canto inferior direito

Exemplo 3 — Versão 01 sobre fotografia real

Treino de jiu-jitsu
½ símbolo Rocinha UP — negativo

Fotografia real — tatame roxo — 01-NEGATIVE-MINI — canto inferior direito

Versão horizontal em espaços estreitos

01 horizontal negativo
02 horizontal negativo

Indicada para rodapés, banners e barras de patrocínio.

↑ Voltar ao índice

Espaço de respiro

A área de proteção garante que o logotipo nunca seja comprometido por elementos adjacentes. A zona de exclusão mínima é definida por ½ da largura do símbolo UP em todas as direções — uma medida que escala proporcionalmente com o logotipo em qualquer tamanho de reprodução.

Nenhum texto, imagem, borda ou elemento gráfico deve entrar nessa área. Em composições com fundo complexo, utilizar a versão em monocromático.

½ largura do símbolo ½ largura do símbolo ½ símbolo ½ símbolo
↑ Voltar ao índice

Cor e materialidade

O roxo é a cor distintiva da Rocinha UP — uma escolha que evoca sofisticação, transformação e unicidade. Os neutros quentes complementam sem competir, criando uma paleta que funciona em têxtil, bordado, digital e impresso.

Roxo Principal

#7D489C

Cor primária da marca

Roxo Profundo

#2F0147

Textos, fundos escuros

Roxo Muted

#4E3152

Sombras, profundidade

Off-White

#FBF9F4

Fundo principal

Bege Quente

#C5A992

Neutro de apoio, texturas

Terracota

#8C341B

Acento, alertas, destaque

Creme

#EDE8DF

Superfícies secundárias

Roxo Principal

HEX#7D489C
RGB125, 72, 156
CMYK20 / 54 / 0 / 39
Pantone2602 C (aprox.)

Roxo Profundo

HEX#2F0147
RGB47, 1, 71
CMYK34 / 99 / 0 / 72
Pantone2685 C (aprox.)

Terracota

HEX#8C341B
RGB140, 52, 27
CMYK0 / 63 / 81 / 45
Pantone7526 C (aprox.)
↑ Voltar ao índice

O sistema tipográfico

A tipografia principal é a Outfit, fonte grotesca geométrica com personalidade sofisticada, que combina rigor construtivo com leveza contemporânea. Funciona com excelência em todos os contextos da marca — digital, impresso e bordado.

Para corpo de texto, use DM Sans — sua anatomia humanista complementa a geometria da Outfit, criando hierarquia clara e leiturabilidade em textos longos. Ambas disponíveis gratuitamente no Google Fonts.

↗ Outfit — Google Fonts ↗ DM Sans — Google Fonts

Display / H1

Outfit
Extra Bold 900
Tracking: −2px
Uso: Títulos heroes

Elevar

Heading / H2

Outfit
Bold 700
Tracking: −1px
Uso: Seções e cards

Transformação como percurso

Subheading / H3

Outfit
SemiBold 600
Tracking: 0
Uso: Subtítulos

Da formação ao produto

Body Large

DM Sans
Light 300
Leading: 1.7
Uso: Texto editorial

A faixa como metáfora de uma vida que se dobra, se reconstrói e emerge com mais força.

Body Regular

DM Sans
Regular 400
Leading: 1.7
Uso: Corpo geral

Cada produto carrega a história de quem o fez. O upcycling transforma tatames e kimonos em peças de moda com identidade e propósito.

Label / Caption

Outfit
Medium 500
Tracking: 3–5px
Uso: Labels, tags

Plataforma de capacitação · Rocinha UP · 2025
↑ Voltar ao índice

O que fazer e o que evitar

Correto
  • Usar o logotipo completo sobre fundos sólidos (creme, roxo profundo, branco)
  • Respeitar a área de proteção em todas as aplicações
  • Usar o símbolo isolado somente abaixo do tamanho mínimo do logotipo completo
  • Manter proporções originais do logotipo — nunca distorcer
  • Usar a versão negativa (branco) sobre fundos escuros e fundos roxo principal
  • Separar claramente os dois estados narrativos conforme seu contexto de uso
  • Bordado e etiqueta: usar somente o símbolo da grife (nó atado)
Incorreto
  • Nunca esticar, comprimir ou distorcer o logotipo em qualquer direção
  • Nunca aplicar efeitos de sombra, brilho, contorno ou transparência no logotipo
  • Nunca usar o logotipo sobre fotos sem área de proteção adequada ou com baixo contraste
  • Nunca rotacionar o logotipo em ângulos diferentes de 0°
  • Nunca recriar o logotipo em fontes diferentes das originais
  • Nunca alterar as cores do logotipo fora das versões aprovadas
  • Não misturar os dois estados narrativos na mesma peça sem intenção conceitual clara

Combinações de fundos aprovadas

Logo colorido — fundo claro

Off-White #FBF9F4 ✓

Logo branco — fundo roxo profundo

Roxo Profundo #2F0147 ✓

Logo branco — fundo roxo principal

Roxo Principal #7D489C ✓

Logo branco — fundo preto

Preto ✓

↑ Voltar ao índice

Como a marca fala

A Rocinha UP fala com quem está em construção — e também com quem já chegou. A voz da marca tem sofisticação sem arrogância, autenticidade sem informalidade excessiva, e propósito sem moralismo.

Sofisticada

Usa linguagem cuidada, com ritmo e intenção. Evita clichês esportivos e comunicação óbvia. Cada palavra carrega peso e significado.

Autêntica

Fala da Rocinha com orgulho, não com romantização. Reconhece o percurso sem dramatizá-lo. A verdade é suficiente — não precisa de ornamento.

Transformadora

Cada comunicação aponta para o futuro. A marca acredita no potencial de quem está em formação e celebra quem já chegou ao seu nó.

Voz certa

"Cada peça carrega o percurso de quem a fez. Isso não é moda — é trajetória materializada."

Voz errada

"Nossa loja incrível tem os melhores produtos artesanais feitos com muito amor pela comunidade!"

Voz certa

"Da formação ao produto. Do percurso ao valor. Rocinha UP."

Voz errada

"Apoie o projeto social e ajude jovens carentes a terem uma chance melhor!"

↑ Voltar ao índice

A marca no mundo real

A identidade visual foi projetada para funcionar em contextos muito distintos — do pixel ao fio. O símbolo da grife (nó atado) é especialmente otimizado para bordado e etiqueta, mantendo leitura clara mesmo em formatos mínimos.

Plataforma Digital

Interface web e mobile da plataforma de capacitação. Usa o logotipo completo (estado aberto) com tipografia Outfit/DM Sans e paleta principal.

E-commerce

Loja virtual dos produtos da grife. Logotipo estado atado. Fotografia de produto sobre fundo off-white com acentos de beige e terracota.

Bordado em Têxtil

Apenas o símbolo da grife. Executado em roxo sobre branco/creme, ou roxo sobre preto. Tamanho mínimo: 20mm de altura. Fio: cor sólida.

Etiqueta de Produto

Símbolo + "ROCINHA" em caixa alta com tracking generoso. Fundo off-white ou roxo profundo. Papel kraft aceito para produtos upcycled.

Redes Sociais

Avatar: símbolo isolado sobre fundo roxo principal. Posts: uso consistente da paleta, tipografia e linguagem editorial da marca.

Papelaria

Cartão de visita, packaging, adesivos. Versão monocromática aprovada para preto e para branco. Acabamento matte preferencial.

Referência de bordado

Sobre branco: Símbolo em roxo principal (#7D489C). Técnica: ponto cheio, contorno em roxo profundo (#4E3152). Não usar contorno preto.

Sobre tecido escuro: Símbolo em roxo principal ou off-white. Patch com fundo preto/roxo profundo aceito para aplicação externa.

↑ Voltar ao índice

Grafismos e padrões

Elementos gráficos derivados do conceito da faixa — para uso como ícones, bullets e backgrounds em apresentações, materiais de comunicação e redes sociais.

Faixas em perspectiva

Gerador interativo de faixas geométricas em perspectiva — crie composições únicas para backgrounds de apresentações, redes sociais e materiais impressos. Disponível como ferramenta externa.

Faixas de jiu-jitsu — background

Gerador interativo

Rocinha UP — Faixas

Controles de cor, velocidade, proporção e exportação de vídeo

Ferramenta disponível em link externo

Abre em nova aba — interface em modo claro com painel de controles completo

Abrir gerador →

Linhas geométricas angulares

Retângulos angulares em camadas — evocam as dobras do origami e as estruturas do símbolo. Uso: backgrounds de slides, capas de apresentação, overlays em fotografia.

Variação escura — fundo roxo profundo

Variação clara — fundo off-white

Download PNG — Linhas Escuras Download PNG — Linhas Claras

Imagens de background

Fotografias e composições visuais da marca, prontas para uso como backgrounds em apresentações, redes sociais e materiais impressos. Série 01: faixas e belts. Série 02: elementos geométricos origami.

Faixa roxa — dobra suave

01-bg-1.png

Faixa roxa — dobra suave

Download PNG
Faixa creme — dobra suave

01-bg-2.png

Faixa creme — dobra suave

Download PNG
Faixa creme — dobra torcida

01-bg-3.png

Faixa creme — dobra torcida

Download PNG
Faixa preta — estilo editorial

01-bg-4.png

Faixa preta — estilo editorial

Download PNG
Faixa roxa — nó geométrico

01-bg-5.png

Faixa roxa — nó geométrico

Download PNG
Origami roxo — zig-zag

02-bg-1.png

Origami roxo — zig-zag

Download PNG
Origami creme — faces planas

02-bg-2.png

Origami creme — faces planas

Download PNG
Origami creme — nó aberto

02-bg-3.png

Origami creme — nó aberto

Download PNG
Origami preto — ângulos

02-bg-4.png

Origami preto — ângulos

Download PNG
Origami roxo — corte de dobra

02-bg-5.png

Origami roxo — corte de dobra

Download PNG

Apresentações

Capas e slides de sessão. Faixas em perspectiva com opacidade baixa como textura de fundo.

Posts digitais

Linhas angulares como elemento de enquadramento em posts de redes sociais e stories.

Impressos

Combinação de ambos os elementos como grafismo de fundo em catálogos e materiais institucionais.

The Knot — animação narrativa

Animação que apresenta os dois estados narrativos do logotipo — do símbolo aberto (plataforma) ao símbolo atado (grife) — sintetizando em movimento a missão da marca: da formação ao produto, do percurso ao valor.

THE_KNOT-FINAL.mp4

Animação — os dois estados narrativos do logotipo

↓ Download MP4
↑ Voltar ao índice

Significado final

Da formação ao produto.
Do percurso ao valor.

Rocinha UP

Manual de Identidade Visual — Versão 3.9