Manual de marca da Valor Digital

O que a Valor Digital faz

Quatro serviços, cada um ligado a um problema do trabalho diário. As descrições abaixo são as do site.

Como o trabalho acontece

O escopo é fechado com o cliente antes de começar, e o critério de sucesso fica combinado por escrito. Nenhuma etapa pula a anterior.

1. Entender o processo

   Conversa com quem executa o trabalho, para mapear como ele funciona hoje.

2. Definir a primeira entrega

   O menor pedaço que já gera resultado, com critério de sucesso por escrito.

3. Desenvolver e validar

   Construir, testar em uso real e ajustar até cumprir o critério.

4. Acompanhar e evoluir

   A entrega entra em produção acompanhada. O uso define a próxima evolução.

O que isso pede da marca

Um trabalho que começa pequeno e se prova em uso pede uma marca sóbria. As páginas parecem documentos de trabalho: fundo papel, texto escuro, bordas finas e um único ponto de cor. Os seis princípios do design system valem para toda a identidade, do site ao PDF.

A regra que mais pesa na escrita é a última delas, prova antes de promessa: a marca não mostra número, logo de cliente, depoimento ou selo que não possa ser conferido. Sem prova, a página diz menos.

Família Direção V.

O ValorBrain nasceu dentro da Valor Digital: é uma memória compartilhada para manter o contexto do trabalho entre pessoas, sessões e agentes de IA, com fontes e permissões. Ele tem marca e manual próprios. As duas marcas são da mesma família visual, a Direção V.: papel editorial, obsidiana, Hanken Grotesk e o mesmo ponto verde.

Quando as duas marcas aparecem na mesma página, como na apresentação do ValorBrain no site da Valor Digital, cada uma usa o próprio nome e o próprio símbolo. Não junte as letras das duas num símbolo só.

O que o ponto é e o que não é

Onde o verde entra

Pouco e sempre para marcar alguma coisa. Os exemplos abaixo são os componentes reais do design system.

01 · Serviços

• Escopo fechado antes de começar
• Entrega validada em uso

Auditar um site

Onde o verde não entra

• Conheça nossos serviços

  Não Fundo verde em áreas grandes.

• Ver o relatório completo

  Não Verde da marca em texto ou link.

• Online

  Não Ponto verde como status.

• Entregas pequenas. Escopo fechado.

  Não Ponto verde no fim de toda frase.

Wordmark

É a assinatura principal: cabeçalho, rodapé e documentos. Obsidiana sobre papel ou branco; branco sobre obsidiana. E-mails sem imagens assinam com o nome Valor Digital em texto.

Construção do wordmark

As letras são a Hanken Grotesk 800 convertida em contornos, com espaçamento de −0,035 em, o mesmo dos títulos de seção. Na fonte, o ponto final é quadrado; no wordmark ele vira um círculo do mesmo tamanho, centrado no espaço do ponto da fonte. As medidas abaixo estão em unidades da fonte (1000 por em), as mesmas do arquivo SVG.

Símbolo

O símbolo vd. fica num squircle obsidiana com raio de 22,5%, irmão do V. do ValorBrain. Use quando o wordmark não cabe: ícone do site, avatar e favicon. Sobre fundo escuro, use a versão em papel.

Construção do símbolo

Um quadrado de 1000 unidades com cantos de raio 225. Os cantos são arcos de círculo, o mesmo valor do token --vd-radius-squircle. As letras vd são as do wordmark a 68% do tamanho, com espaçamento de −0,02 em. O ponto do símbolo é proporcionalmente maior que o do wordmark: 0,37 x contra 0,30 x.

Área de proteção

A medida de referência é x, a altura do “v”. Deixe x livre em volta do arquivo, dos quatro lados: nenhum texto, fio ou imagem entra nessa margem. No cabeçalho do site, com o wordmark de 133 × 26 px, x tem 13 px.

Tamanho mínimo

Abaixo destes tamanhos, use a outra peça ou os favicons prontos. Com 96 px de largura, a altura x do wordmark tem 9 px e o ponto, menos de 3 px.

Wordmark ou símbolo

O wordmark assina. O símbolo entra quando o espaço é quadrado ou pequeno demais para o nome inteiro.

Cabeçalho de site

Wordmark com 26 px de altura (133 × 26), como no valor.digital.

GEO

Produto com nome próprio

O wordmark ganha um rótulo em mono depois de um fio, como no Audit GEO e neste manual.

Rodapé, documentos e e-mails

Wordmark branco no rodapé obsidiana e wordmark obsidiana na capa do relatório em PDF. Nos e-mails, que não carregam imagens, o nome Valor Digital em texto.

Valor Digital

Aba do navegador

Símbolo como favicon: favicon.ico com 16 e 32 px. O arquivo de 16 px tem desenho ajustado ao pixel.

Ícone de app e atalho

Símbolo inteiro, com o squircle: apple-touch-icon.png (180 px), icon-192.png e icon-512.png.

Avatar

Perfis e serviços externos usam o símbolo: icon-512.png ou o SVG.

Favicons e ícones de app

Os arquivos publicados no valor.digital, no Audit GEO e neste site. O favicon de 16 px aparece também ampliado, para mostrar o ajuste ao pixel.

Usos corretos e incorretos

Use os arquivos como estão. Os exemplos riscados mostram o que não fazer.

• 

  Sim Wordmark obsidiana sobre papel ou branco.

• 

  Sim Wordmark branco sobre obsidiana.

• 

  Sim Símbolo inteiro, com o squircle, como ícone.

• 

  Não Esticar, comprimir ou inclinar.

• 

  Não Girar.

• 

  Não Trocar a cor do ponto ou das letras.

• valor.digital

  Não Escrever o nome com outra fonte.

• 

  Não Aplicar sombra, brilho ou degradê.

• 

  Não Aplicar contorno.

• 

  Não Wordmark obsidiana sobre fundo escuro.

• vd.

  Não Tirar o vd. do squircle.

Cores principais

Os valores vêm de tokens.css. O botão Copiar leva o HEX.

• Papel

  #F6F7F3Copiar

  RGB 246, 247, 243

  --vd-paper

  Fundo das páginas e dos documentos.

  Cerca de 65% da tela

• Obsidiana

  #111317Copiar

  RGB 17, 19, 23

  --vd-obsidian

  Blocos de fechamento, rodapé, botão principal e fundo do símbolo.

  Cerca de 15%

• Tinta

  #192321Copiar

  RGB 25, 35, 33

  --vd-ink

  Texto principal e títulos.

  Cor de texto

• Ardósia

  #5F636BCopiar

  RGB 95, 99, 107

  --vd-slate

  Texto secundário e legendas.

  Cor de texto

• Verde de síntese

  #3F9E5ECopiar

  RGB 63, 158, 94

  --vd-green

  Ponto da marca e marcadores. Não serve para texto.

  Até 2%

Cores de apoio

Branco e grafite completam as superfícies. O verde 700 é a versão do verde que passa no contraste de texto: é a cor dos links.

• Branco

  #FFFFFFCopiar

  RGB 255, 255, 255

  --vd-white

  Cartões, campos e texto sobre obsidiana.

• Grafite

  #26292ECopiar

  RGB 38, 41, 46

  --vd-graphite

  Superfície elevada no escuro e hover do botão principal.

• Verde 700

  #26663CCopiar

  RGB 38, 102, 60

  --vd-green-700

  Links, texto de destaque e anel de foco.

Proporção de uso

Proporção sugerida para uma página do site, medida em área. Tinta e ardósia são cores de texto e não entram na conta.

• Papel 65%
• Branco 18%
• Obsidiana 15%
• Verde até 2%

Cores de interface

Sucesso, aviso, erro e informação são cores de interface, não de identidade. Aparecem em badges, alertas, status de formulário e medidores, sempre acompanhadas de texto. O sucesso tem o próprio verde e nunca usa o verde da marca.

• Sucesso#15803D
• Aviso#B45309
• Erro#B91C1C
• Informação#1D4ED8

No design system: superfícies e bordas de estado, rampas de neutros e de verde, aliases dos temas papel e obsidiana e a tabela de contraste calculada para cada par de texto e fundo.

Famílias

Hierarquia

Amostras com as classes reais. Os tamanhos com seta crescem com a largura da tela. A escala completa e os tokens de peso e entrelinha estão no design system.

1. Display.vd-display40 → 68 px · 800 · −0,04 em

   Software sob medida

2. Título de seção.vd-title32 → 48 px · 800 · −0,035 em

   Como o trabalho acontece

3. Título.vd-heading28 → 36 px · 800 · −0,025 em

   Conte o contexto do projeto

4. Lead.vd-lead18 → 22 px · 400

   Conte como o processo funciona hoje e onde ele trava.

5. Corpobody16 px · 400 · entrelinha 1,65

   Construímos, testamos em uso real e ajustamos até o critério combinado ser cumprido.

6. Rótulo.vd-eyebrow11,5 px · mono 600 · caixa alta · 0,12 em

   01 · Serviços

7. Mono.vd-mono13 px · mono 400

   valorbrain.valor.digital

Regras

• Títulos em Hanken Grotesk 800 com espaçamento apertado: −0,04 em no display, −0,035 em nos títulos de seção e −0,025 em nos títulos menores.
• Rótulo em JetBrains Mono 600, caixa alta, espaçamento de 0,12 em e o ponto verde à esquerda. Sem o ponto, use .vd-eyebrow--plain.
• Corpo em 400, com 16 px e entrelinha de 1,65. Texto longo fica na largura de leitura de .vd-prose, até 736 px.
• Só estas duas famílias. A fonte do sistema aparece apenas por um instante, enquanto os arquivos carregam.

Licença e arquivos

As duas famílias usam a SIL Open Font License 1.1, que permite usar, incorporar e redistribuir as fontes. No site, os arquivos woff2 ficam em /assets/vd/fonts/; para instalar no computador, baixe pelo Google Fonts nos links acima.

Três qualidades

Regras de escrita

• Português do Brasil com acentos e cedilha corretos, inclusive em botões, títulos e mensagens de erro. Escreva “e-mail”, com hífen.
• Trate quem lê por “você”, como o site faz.
• Sem travessão (—). Use vírgula, dois-pontos ou ponto.
• Sem a construção “não é X, é Y”. Diga o que a coisa é.
• Sem ponto de exclamação na interface e sem emoji.
• Nunca invente fatos: nada de logos de clientes, depoimentos, contagem de projetos, anos de experiência, notas ou certificações. Número só entra com fonte que alguém possa conferir. O que pode ser dito: a Valor Digital é uma casa de software em Itapema (SC); a Climoo, agente de sustentabilidade, foi cliente; o ValorBrain é produto próprio.
• Mensagens de erro dizem o que aconteceu e o que fazer em seguida, sem culpar quem usa.

Palavras fora

Prometem muito e não dizem nada. Vale também para as variações, como “potencialize” e “alavanque”.

• revolucionário
• inovador
• de ponta
• robusto
• sinergia
• alavancar
• potencializar
• jornada
• transformação digital
• soluções completas

Em vez de, escrevemos

Pares reais: à esquerda, o texto que estava no ar em valor.digital antes do redesenho de 8 de outubro de 2026; à direita, o texto publicado hoje.

Evite e prefira

Exemplos curtos, escritos para calibrar o tom.

Antes de publicar

• Acentos e cedilha conferidos, inclusive em botões e mensagens de erro.
• Nenhum travessão e nenhum ponto de exclamação na interface.
• Nenhuma palavra da lista acima.
• Todo número tem fonte. Sem fonte, o número sai.
• O texto nomeia o processo, o sistema ou a entrega.
• Mensagens de erro dizem o que fazer em seguida.
• Quem lê é tratado por “você”.
• No máximo um ponto verde de título na página.

Amostra

Referência completa

Site valor.digital

Fundo papel, título em 800 com o ponto verde no fim, rótulo em mono e cartão branco de borda fina. O botão principal é obsidiana.

valor.digital

Audit GEO

A ferramenta gratuita que verifica se um site pode ser encontrado, lido e citado por buscadores com IA. O cabeçalho usa o wordmark com o rótulo GEO, e o botão principal é obsidiana, como no site.

geo.valor.digital

geo.valor.digital/r/_URjqZeY2iOoBNQn

Relatório em PDF e e-mail

O relatório do Audit GEO em PDF usa a mesma tipografia do site, com o wordmark obsidiana no topo da capa. O e-mail que leva o PDF não carrega imagens nem fontes de fora: assina com o nome em texto e pede a Hanken Grotesk, com Arial no lugar quando ela não está instalada. O rótulo em mono, o ponto e o botão obsidiana continuam lá.

E-mail · Relatório GEO de valor.digital

Imagens de compartilhamento

A imagem padrão do site é obsidiana. As páginas internas têm imagem própria, em papel, com o rótulo e o título da página.

Arquivos avulsos

Prefira o SVG. Os PNG têm fundo transparente; o número no nome é a largura em pixels.

Fontes

As fontes não vão no kit. Baixe pelo Google Fonts: Hanken Grotesk e JetBrains Mono, as duas com a SIL Open Font License 1.1.

Dúvidas de marca

Para um uso que este manual não cobre, escreva para contato@valor.digital antes de publicar.