← Trabalhos selecionadosTWO / Manual da marcaMarca · 2024

Visão geral / TWO

TWO: uma marca que descomplica o controle de ponto.

Manual da marca da TWO, um app brasileiro de ponto eletrônico para times de RH. Criei a identidade visual e montei o manual: o logotipo e como ele é construído, vinte cores, as regras para fundos, fotos e usos indevidos, e a marca em uso, do ícone do app até a rua.

Em resumo Bruno Delorence, como Creative Director, criou a marca da TWO (TWO RH), um app brasileiro de controle de ponto para RH, e o manual da marca, versão 1.0, de junho de 2024, em seis partes: um logotipo arredondado em que o W rosa se sobrepõe ao T e ao O, com sua construção e área de proteção; uma paleta de vinte cores (quatro primárias: White, Pink, Midnight e Purple; oito secundárias; oito cinzas); regras para fundos neutros e coloridos, fotos e a versão em uma cor; oito usos indevidos; a fotografia; e a marca em uso, do ícone do app no navegador, no Mac e no iPhone aos perfis nas redes sociais e a uma capa do LinkedIn, ao produto no celular e no notebook, aos cartões de visita, à papelaria e à sinalização. A promessa: “Descomplique seu controle de ponto”.

Explore os capítulos

1 logotipo

Três letras arredondadas; só o W em rosa

Construído sobre um grid

20 cores

4 primárias, 8 secundárias, 8 cinzas

Em Display P3

8 usos indevidos

O que nunca fazer com o logo

Com regras para fundos e fotos

Do manual da marca, versão 1.0, de junho de 2024.

Descomplique seu controle de ponto

00 / A promessa

Descomplique: simples assim.

Controle de ponto é uma chatice: bater o ponto, corrigir marcações esquecidas, fechar o mês. A TWO promete acabar com isso. O manual da marca, versão 1.0 de junho de 2024, tem seis partes, da apresentação da marca à marca em uso, e abre com essa promessa, em duas frases que todas as outras páginas seguem.

Junho 04, 2024

Version 1.0

Brand Guidelines.

Index Content.

0.0 - Brand Guidelines
- 0.1 - Cover
- 0.2 - Index Content
1.0 - Brand Introduction: ver no case
- 1.1 - Brand Introduction
- 1.2 - Brand Vision
2.0 - Brand Logo: ver no case
- 2.1 - Lockup Logo
- 2.2 - Construction Logo Mark
- 2.3 - Construction Horizontal Logo
- 2.4 - Construction Vertical Logo
- 2.5 - Clearspace Logo Mark
- 2.6 - Clearspace Horizontal Logo
- 2.7 - Clearspace Vertical Logo
3.0 - Brand Colors: ver no case
- 3.1 - Primary Colors
- 3.2 - Secondary Colors
- 3.3 - Grayscale Colors
- 3.4 - Lockup Neutral: Em qualquer fundo, no case
- 3.5 - Mono Color Logo: Em qualquer fundo, no case
- 3.6 - Logo on Image: Em qualquer fundo, no case
- 3.7 - Logo Misuse: Usos indevidos, no case
- 3.8 - Logo on Backgrounds: Em qualquer fundo, no case
4.0 - Primary Imagery: ver no case
- 4.1 - Primary Imagery
- 4.2 - Imagery in Use
5.0 - Applications Icon: ver no case
- 5.1 - Browser Icon
- 5.2 - MacOS Icon
- 5.3 - iOS Icon
- 5.4 - Twitter “X” Icon: Redes sociais, no case
- 5.5 - Instagram Icon: Redes sociais, no case
6.0 - Imagery Logo: ver no case
- 6.1 - Front Signage
- 6.2 - T-Shirt / Bag
- 6.3 - Business Cards | Paper
- 6.4 - Building | Signage

1.0

Brand Introduction.

Ver no case: A promessa

2.0

Brand Logo.

Ver no case: O logotipo

3.0

Brand Colors.

Ver no case: Cores

4.0

Primary Imagery

Ver no case: Fotografia

5.0

Applications Icon.

Ver no case: No produto

6.0

Imagery Application.

Ver no case: No mundo

Página 1 de 8: Capa.

Apresentação da marca

Descomplique seu controle de ponto e elimine o retrabalho do seu RH

Visão da marca

O app de ponto eletrônico que descomplica o seu RH

Como um app de ponto pode parecer simples antes mesmo de ser aberto?

A ideia

Um verbo, em todo lugar.

“Descomplique” abre o manual, encabeça o perfil no X e o canal no YouTube e estampa um outdoor: “Descomplique o seu ponto!”.

O tom

Palavras simples, ditas uma vez só.

As frases falam direto com o time de RH, com o problema nas palavras dele: “controle de ponto”, “retrabalho”. Sem jargão, nada para decifrar.

01 / O logotipo

Três letras, uma delas rosa.

O logo é uma palavra só: três letras encorpadas e arredondadas. O T e o O são sólidos; o W leva o rosa da marca, em gradiente, por cima do T e por baixo do O, e assim as três letras se encaixam.

Em resumo

Pontas arredondadas e o mesmo peso em todas as letras.
Só o W leva cor, num gradiente rosa.
Desenhado sobre um grid, com área de proteção ao redor.

A assinatura: três letras arredondadas, de um só peso, em branco sobre o rosa da marca.

02 / Cores

Primeiro o rosa, depois as vinte cores.

Quatro cores primárias lideram: White, Pink, Midnight e Purple. Oito cores secundárias, em tons cheios e claros, e oito cinzas completam a paleta. O arquivo trabalha em Display P3, então, nas telas que conseguem exibi-lo, o rosa fica mais vivo do que o código sugere.

Primárias 4

White
#F5F6FCRGB 245 · 246 · 252
Texto AAA
Pink
#DF4170RGB 223 · 65 · 112
Texto AA
Midnight
#14141ARGB 20 · 20 · 26
Texto AAA
Purple
#6232FFRGB 98 · 50 · 255
Texto AA

Secundárias 8

Cyan
#2ED0FFRGB 46 · 208 · 255
Texto AAA
Yellow
#F3CE3ARGB 243 · 206 · 58
Texto AAA
Orange
#FF7022RGB 255 · 112 · 34
Texto AA
Red
#E92E4ARGB 233 · 46 · 74
Texto AA
Light Cyan
#D1F5FFRGB 209 · 245 · 255
Texto AAA
Light Yellow
#FFF4CARGB 255 · 244 · 202
Texto AAA
Light Orange
#FFD3BCRGB 255 · 211 · 188
Texto AAA
Light Red
#FFBAC4RGB 255 · 186 · 196
Texto AAA

Cinzas 8

Cloud
#EDEFF7RGB 237 · 239 · 247
Texto AAA
Smoke
#D3D6E0RGB 211 · 214 · 224
Texto AAA
Steel
#BCBFCCRGB 188 · 191 · 204
Texto AAA
Space
#9DA2B3RGB 157 · 162 · 179
Texto AAA
Graphite
#6E7180RGB 110 · 113 · 128
Texto grande AA
Arsenic
#40424DRGB 64 · 66 · 77
Texto AAA
Phantom
#1E1E24RGB 30 · 30 · 36
Texto AAA
Black
#000000RGB 0 · 0 · 0
Texto AAA

Escolha uma cor para copiar o HEX. “Aa” é o contraste do texto que melhor se lê sobre ela, Midnight ou White.

Os protagonistas

O Pink e o Midnight carregam a marca.

O Pink preenche os painéis do logo, os banners das redes sociais e o outdoor; o Midnight fica com os textos e os fundos escuros; o White dá respiro aos dois.

As demais

Tons cheios e claros.

Cyan, Yellow, Orange e Red vêm cada uma num tom cheio e num tom claro, e os cinzas seguem em oito passos, do Cloud ao Black.

03 / Em qualquer fundo

Um logo, três versões.

Em fundos neutros, o logo mantém o W rosa: com letras pretas nos fundos claros e brancas nos escuros. Sobre as cores da própria marca, até sobre um cinza claro, e sobre fotos, ele fica todo branco, para que o W nunca brigue com o fundo.

Neutro claro: letras pretas, W rosa.

Sobre fotos

Branco, numa área calma da imagem.

O manual aplica o logo em sete fotos: num canto ou sobre um trecho liso de casaco, mesa ou rua, sempre longe dos rostos; algumas fotos são escurecidas por baixo dele.

Em qualquer tamanho

Do canto discreto ao destaque.

O mesmo logotipo branco vai de um logo pequeno numa cena de café ao maior de todos, no alto à direita, sobre um rosto sendo escaneado: o próprio produto, batendo o ponto por reconhecimento facial.

Lockup Image and LogoLogo sobre imagemSempre brancoNuma área calma da imagem, longe dos rostos.Tracejado: a área de proteção do logo, x/2 de cada lado.Escolha uma foto para ampliar.

04 / Usos indevidos

Oito formas de não usar o logo.

O manual fecha o capítulo do logo com o que nunca fazer com ele: nada de contorno, sombra ou efeito; nada de distorcer, girar ou esticar; nada de cores extras, letras fora de ordem, elementos a mais ou logos empilhados.

O logo como foi desenhado

05 / Fotografia

Pessoas trabalhando, à vontade.

A fotografia mostra pessoas trabalhando, em escritórios acolhedores e com luz natural: sorrindo, olhando para a câmera ou para a tela. É onde a marca mostra para quem ela existe.

06 / No produto

Da aba do navegador à tela inicial.

O ícone do app é o logo sobre branco, num quadrado de cantos arredondados. O manual mostra o ícone onde as pessoas encontram o produto: uma aba do navegador, o Finder, o Dock e as notificações do Mac, a App Store e a tela inicial do iPhone; e o próprio produto: o ponto por reconhecimento facial no celular e a gestão da jornada no notebook.

Toque em **Marcar o Ponto** no celular: a marcação aparece no dashboard.Pronto para bater o ponto.

08 / No mundo

Na porta, na mesa e na rua.

Fora da tela, a marca segue as mesmas regras: o logotipo branco sobre o rosa, o logo colorido sobre branco, cartões de visita escuros e brancos, o logotipo impresso em tamanho grande no papel e a promessa num outdoor.

Descomplique o seu ponto!

Vire o cartão com um clique, ou passe o mouse por cima para incliná-lo sob a luz.Frente: a frase, sobre o Midnight.

Arraste a borda para levantar a folha, ou passe o mouse sobre o papel para incliná-lo.Folha 1 de 3: o logotipo colorido, impresso.

A marca em uso

Descomplique o seu ponto.
Simples assim.

Da primeira frase do manual a um outdoor, a marca repete uma única promessa, em uma letra rosa.

Próximo projeto · Oitchau ↗︎

Comece uma conversa

Vamos falar sobre o seu produto, o seu time e onde o design pode gerar mais valor.

Duração: 20–30 minutos
Tema: Design engineering
Valor: Gratuito

Fale com o Bruno

TWO: uma marca que descomplica o controle de ponto.

Um verbo, em todo lugar.

Palavras simples, ditas uma vez só.

O Pink e o Midnight carregam a marca.

Tons cheios e claros.

Branco, numa área calma da imagem.

Do canto discreto ao destaque.

A marca na página de uma pessoa.

O ponto batido, na capa.

Descomplique o seu ponto.Simples assim.

Procura um design engineer?

Descomplique o seu ponto.
Simples assim.