Brand kit

A marca do DataBolsa,
pronta para usar.

Logo em curvas, as duas paletas completas, as três famílias tipográficas e os tokens que o produto usa hoje. Tudo com download direto, sem cadastro. É ponto de partida, não camisa de força: o que precisa ficar firme é o logo, e essa parte está nas regras de uso.

Cores

Duas paletas, não uma invertida

Os valores abaixo seguem o tema atual da página. Troque no botão do topo para ver a outra paleta. Clique num campo para copiar. O verde rende mais como acento do que como superfície: quando ele marca uma coisa por tela, essa coisa ganha peso. Espalhado, ele perde o efeito.

Superfície e tinta

Acento e semântica de preço

Classes de ativo

Paleta categórica: a cor identifica a classe do ativo, não a posição num ranking. Foi validada nos dois temas para banda de luminosidade, chroma, contraste e leitura por quem tem daltonismo, então vale reaproveitar em vez de sortear cores novas.

Tipografia

Bricolage, Archivo e Space Mono

As três são SIL Open Font License 1.1, então podem ser instaladas e redistribuídas livremente. Bricolage e Archivo são variáveis: um arquivo só cobre toda a faixa de peso.

Data Bolsa 0123456789
Bricolage Grotesque · display · peso 200 a 800 TTF WOFF2 Licença
Data Bolsa 0123456789
Archivo · texto e interface · peso 100 a 900 TTF WOFF2 Licença
Data Bolsa 0123456789
Space Mono · número, rótulo e etiqueta · 400 e 700 TTF 400 TTF 700 WOFF2 Licença
Baixar as três famílias TTF para instalar, WOFF2 para web e a licença OFL de cada uma

Escala em uso

.stmt-xl
O DataBolsa leu toda a bolsa.
.stmt
E continua lendo.
.h-disp
Carteira consolidada
body
Texto corrido em Archivo, no corpo de 16px com entrelinha 1,6.
.tabnum
1.284,50 · 11,72% · 0,38
Superfícies

De onde vem o ar do produto

Três hábitos dão o tom: canto reto na maioria dos componentes, com o símbolo da marca como exceção; separação por linha fina em vez de sombra pesada; e número sempre em tabular, para as colunas alinharem. Peça de campanha tem liberdade maior que tela de produto, isso aqui é a referência, não o teto.

Malha .surface-mesh · grade de 28px
Cartão .card-tech · borda 1px, raio 0
Marcas de corte .card--crop · reservado ao destaque
Faixa invertida --inverse · escura nos dois temas
Padrão Acento Atenção Selecionado Vazio Etiqueta
Uso

O que pode e o que não pode

Esta é a parte firme do kit. No resto dá para experimentar, mas o logo em si não se mexe: ele é fornecido pronto em todas as variações, e se a peça pedir algo que não está aqui, peça o arquivo em vez de adaptar.

Respiro mínimo

Deixe ao redor do logo pelo menos a altura do símbolo, livre de texto e imagem.

Em fundo escuro use a versão paper. Em fundo claro, a versão ink.

O símbolo sozinho vale quando a marca já apareceu na mesma peça.

Não faça

Não estique nem comprima. Redimensione sempre na proporção.

Não gire nem incline.

Não recolora. O verde da marca é fixo nos dois temas.

Não aplique sombra, contorno, gradiente ou textura.

Não use sobre fundo de baixo contraste nem sobre foto movimentada.

DataBolsa

Não redesenhe o logo em outra fonte. Use o arquivo.

Como escrever

Uma palavra, com o B maiúsculo: DataBolsa. Nunca Databolsa, DATABOLSA ou Data Bolsa. O identificador técnico, como domínio e usuário, é sempre minúsculo: databolsa. Em português a marca é masculina: o DataBolsa, no DataBolsa, do DataBolsa. Não use "a DataBolsa".

Arquivos

Downloads

Para peça impressa, corte ou grande formato use sempre o SVG. Os PNG são exports prontos para avatar, ícone de aplicativo e favicon.

Os arquivos avulsos, incluindo os PNG e os TTF das fontes, estão no repositório.