Ir para o conteúdo
Marca Baixar o kit

Design system · versão 1.0.0

Design system Valor Digital

Tokens, cores, tipografia, medidas e componentes de valor.digital e geo.valor.digital. Tudo nesta página usa o CSS publicado em /assets/vd/: o que está documentado aqui existe no código. A marca, a voz e os arquivos de marca ficam no manual de marca.

Hanken Grotesk Tokens CSS e JSON Contraste conferido HTML para copiar

Capítulo 01 · Princípios

Seis regras que valem para tudo.

O design system da Valor Digital pertence à mesma família visual do ValorBrain: papel editorial, obsidiana e um verde usado com parcimônia. Estas regras decidem os casos que a documentação não cobre.

  • Papel antes de efeito

    Fundo papel (#F6F7F3), tinta escura e bordas finas. Sem degradês, néon, sombras pesadas ou emoji.

  • Verde com parcimônia

    O verde é da marca: o ponto do wordmark, o marcador dos rótulos e poucos destaques. Sucesso, aviso e erro têm cores próprias.

  • Texto que se sustenta

    Títulos em Hanken Grotesk 800 com espaçamento apertado, corpo em 400 com entrelinha de 1,65. Frases curtas e concretas.

  • Acessível por padrão

    Texto com contraste mínimo de 4,5:1, bordas de controle com 3:1, foco visível, menus e formulários que funcionam pelo teclado e movimento reduzido respeitado.

  • Uma fonte de verdade

    Os valores nascem em tokens.css. Componentes leem, sempre que possível, os aliases semânticos; o tema escuro troca só os tokens e os componentes continuam os mesmos.

  • Prova antes de promessa

    Nada de números, logos, depoimentos ou selos que não possam ser conferidos. Sem prova, a página diz menos.

Capítulo 02 · Marca

Wordmark, símbolo e o ponto.

As regras da marca ficam no manual de marca, na página inicial deste site: construção do wordmark e do símbolo, o ponto verde, área de proteção, tamanhos mínimos e usos incorretos.

No manual de marca

Capítulo 03 · Cores

Paleta e semântica.

Papel, obsidiana e tinta fazem quase todo o trabalho. O verde aparece pouco e nunca carrega sozinho uma informação.

Cores da marca

Sete primitivos. Prefira sempre os aliases semânticos, mais abaixo; os primitivos aparecem direto só em peças que não mudam com o tema, como o chip escuro e o botão de WhatsApp. O papel de cada cor na identidade e a proporção de uso estão no manual de marca.

  • Obsidiana#111317 · RGB 17, 19, 23--vd-obsidianBotão primário, blocos escuros e rodapé.
  • Grafite#26292E · RGB 38, 41, 46--vd-graphiteSuperfície elevada no escuro e hover do botão primário.
  • Ardósia#5F636B · RGB 95, 99, 107--vd-slateTexto secundário e legendas.
  • Tinta#192321 · RGB 25, 35, 33--vd-inkTexto principal.
  • Papel#F6F7F3 · RGB 246, 247, 243--vd-paperFundo das páginas.
  • Branco#FFFFFF · RGB 255, 255, 255--vd-whiteCartões, campos e texto sobre obsidiana.
  • Verde de síntese#3F9E5E · RGB 63, 158, 94--vd-greenPonto da marca e marcadores. Não serve para texto.

Rampas

Neutros, do papel à obsidiana, e a rampa do verde. Tokens --vd-neutral-50 a --vd-neutral-950 e --vd-green-50 a --vd-green-900.

Neutros

  1. 50#F8F9F7
  2. 100#F0F2EE
  3. 150#ECEEE8
  4. 200#E2E5E0
  5. 250#E5E8E3
  6. 300#D8DCD7
  7. 400#8A908B
  8. 500#5F636B
  9. 600#4A4E55
  10. 700#383C42
  11. 800#26292E
  12. 900#191B1F
  13. 950#111317

Verde

  1. 50#F0F8F3
  2. 100#DCF0E3
  3. 200#BCE3C9
  4. 300#8FD0A5
  5. 400#5EBA7F
  6. 500#3F9E5E
  7. 600#31824C
  8. 700#26663C
  9. 800#1F4F30
  10. 900#143520

Cores de estado

Sucesso, aviso, erro e informação têm cores próprias e nunca usam o verde da marca. Aparecem em badges, alertas, status de formulário e medidores.

Tokens das cores de estado
EstadoTexto e íconeSuperfícieBorda
Sucesso--vd-success
#15803D		--vd-success-surface
#F0FDF4		--vd-success-border
#BBF7D0
Aviso--vd-warning
#B45309		--vd-warning-surface
#FFFBEB		--vd-warning-border
#FDE68A
Erro--vd-error
#B91C1C		--vd-error-surface
#FEF2F2		--vd-error-border
#FECACA
Informação--vd-info
#1D4ED8		--vd-info-surface
#EFF6FF		--vd-info-border
#BFDBFE

Aliases semânticos

É o que os componentes leem. O tema obsidiana (.vd-theme-dark numa seção, ou data-theme="dark" na página) troca estes valores e mais nada.

Aliases semânticos nos temas papel e obsidiana
TokenPapel (padrão)Obsidiana
Superfícies
--vd-surface-canvas--vd-paper #F6F7F3--vd-obsidian #111317
--vd-surface-card--vd-white #FFFFFF--vd-neutral-900 #191B1F
--vd-surface-muted--vd-neutral-100 #F0F2EE--vd-graphite #26292E
--vd-surface-sunken--vd-neutral-150 #ECEEE8#0D0E11
--vd-surface-callout#E7ECE6#13221A
--vd-surface-inverse--vd-obsidian #111317igual ao papel
--vd-surface-headerrgba(246, 247, 243, 0.94)rgba(17, 19, 23, 0.94)
Texto
--vd-text-primary--vd-ink #192321#F3F4F6
--vd-text-secondary--vd-slate #5F636B#A3A9A5
--vd-text-caption#666B70#9CA3AF
--vd-text-link--vd-green-700 #26663C--vd-green-300 #8FD0A5
--vd-text-link-hover--vd-green-800 #1F4F30--vd-green-200 #BCE3C9
--vd-text-inverse#F3F4F6igual ao papel
--vd-text-accent--vd-green-700 #26663C--vd-green-300 #8FD0A5
Bordas
--vd-border-default--vd-neutral-300 #D8DCD7--vd-neutral-700 #383C42
--vd-border-subtle--vd-neutral-250 #E5E8E3--vd-neutral-800 #26292E
--vd-border-control--vd-neutral-400 #8A908B#8A908B
--vd-border-strong--vd-slate #5F636B#A3A9A5
Ações
--vd-action-primary-bg--vd-obsidian #111317--vd-white #FFFFFF
--vd-action-primary-fg--vd-white #FFFFFF--vd-obsidian #111317
--vd-action-primary-hover--vd-graphite #26292E--vd-neutral-150 #ECEEE8
--vd-action-accent-bg--vd-green-600 #31824C--vd-green-400 #5EBA7F
--vd-action-accent-fg--vd-white #FFFFFF--vd-obsidian #111317
--vd-action-accent-hover--vd-green-700 #26663C--vd-green-300 #8FD0A5
Foco, seleção e código
--vd-focus--vd-green-700 #26663C--vd-green-300 #8FD0A5
--vd-selection-bg--vd-green-100 #DCF0E3--vd-green-800 #1F4F30
--vd-selection-fg--vd-ink #192321--vd-white #FFFFFF
--vd-dot--vd-green #3F9E5Eigual ao papel
--vd-code-bg--vd-obsidian #111317#0B0C0F
--vd-code-text#E5E7EBigual ao papel
--vd-shadow-focus0 0 0 3px rgba(38, 102, 60, 0.35)0 0 0 3px rgba(143, 208, 165, 0.4)

Contraste (WCAG 2.2)

Razões calculadas pela fórmula de luminância relativa da WCAG a partir dos valores de tokens.css. Texto comum precisa de 4,5:1; bordas de controle e anel de foco, de 3:1. O verde da marca só aparece como ponto decorativo. A legenda sobre o fundo de destaque fica abaixo do mínimo: nesse fundo, use o texto secundário.

Contraste dos pares de cores do design system
Texto ou elementoFundoRazãoMínimoResultado
Tema papel (padrão)
Texto principal
--vd-text-primary		Fundo da página
--vd-surface-canvas		14,97:14,5:1 (texto)Passa
Texto principal
--vd-text-primary		Cartão
--vd-surface-card		16,11:14,5:1 (texto)Passa
Texto principal
--vd-text-primary		Superfície suave
--vd-surface-muted		14,30:14,5:1 (texto)Passa
Texto principal
--vd-text-primary		Destaque (callout)
--vd-surface-callout		13,45:14,5:1 (texto)Passa
Texto secundário
--vd-text-secondary		Fundo da página
--vd-surface-canvas		5,60:14,5:1 (texto)Passa
Texto secundário
--vd-text-secondary		Cartão
--vd-surface-card		6,03:14,5:1 (texto)Passa
Texto secundário
--vd-text-secondary		Superfície suave
--vd-surface-muted		5,35:14,5:1 (texto)Passa
Legenda
--vd-text-caption		Fundo da página
--vd-surface-canvas		5,00:14,5:1 (texto)Passa
Legenda
--vd-text-caption		Cartão
--vd-surface-card		5,38:14,5:1 (texto)Passa
Legenda
--vd-text-caption		Superfície suave
--vd-surface-muted		4,78:14,5:1 (texto)Passa
Texto secundário
--vd-text-secondary		Destaque (callout)
--vd-surface-callout		5,03:14,5:1 (texto)Passa
Legenda
--vd-text-caption		Destaque (callout)
--vd-surface-callout		4,49:14,5:1 (texto)Não use
Link
--vd-text-link		Fundo da página
--vd-surface-canvas		6,40:14,5:1 (texto)Passa
Link
--vd-text-link		Cartão
--vd-surface-card		6,89:14,5:1 (texto)Passa
Link
--vd-text-link		Superfície suave
--vd-surface-muted		6,12:14,5:1 (texto)Passa
Link
--vd-text-link		Destaque (callout)
--vd-surface-callout		5,75:14,5:1 (texto)Passa
Texto do botão primário
--vd-action-primary-fg		Botão primário
--vd-action-primary-bg		18,59:14,5:1 (texto)Passa
Texto do botão de destaque
--vd-action-accent-fg		Botão de destaque
--vd-action-accent-bg		4,74:14,5:1 (texto)Passa
Texto do botão de destaque
--vd-action-accent-fg		Botão de destaque (hover)
--vd-action-accent-hover		6,89:14,5:1 (texto)Passa
Sucesso
--vd-success		Superfície de sucesso
--vd-success-surface		4,79:14,5:1 (texto)Passa
Aviso
--vd-warning		Superfície de aviso
--vd-warning-surface		4,84:14,5:1 (texto)Passa
Erro
--vd-error		Superfície de erro
--vd-error-surface		5,91:14,5:1 (texto)Passa
Informação
--vd-info		Superfície de informação
--vd-info-surface		6,16:14,5:1 (texto)Passa
Sucesso
--vd-success		Cartão
--vd-surface-card		5,02:14,5:1 (texto)Passa
Erro
--vd-error		Cartão
--vd-surface-card		6,47:14,5:1 (texto)Passa
Chip verde
--vd-green-700		Verde 50
--vd-green-50		6,37:14,5:1 (texto)Passa
Código
--vd-code-text		Bloco de código
--vd-code-bg		15,02:14,5:1 (texto)Passa
Borda de campo
--vd-border-control		Cartão
--vd-surface-card		3,26:13:1 (não texto)Passa
Borda de campo
--vd-border-control		Fundo da página
--vd-surface-canvas		3,03:13:1 (não texto)Passa
Anel de foco
--vd-focus		Fundo da página
--vd-surface-canvas		6,40:13:1 (não texto)Passa
Anel de foco
--vd-focus		Cartão
--vd-surface-card		6,89:13:1 (não texto)Passa
Ponto verde da marca
--vd-green		Fundo da página
--vd-surface-canvas		3,12:1Não se aplicaSó decorativo
Tema obsidiana
Texto principal
--vd-text-primary		Fundo da página
--vd-surface-canvas		16,90:14,5:1 (texto)Passa
Texto principal
--vd-text-primary		Cartão
--vd-surface-card		15,67:14,5:1 (texto)Passa
Texto secundário
--vd-text-secondary		Fundo da página
--vd-surface-canvas		7,77:14,5:1 (texto)Passa
Texto secundário
--vd-text-secondary		Cartão
--vd-surface-card		7,21:14,5:1 (texto)Passa
Legenda
--vd-text-caption		Fundo da página
--vd-surface-canvas		7,32:14,5:1 (texto)Passa
Legenda
--vd-text-caption		Cartão
--vd-surface-card		6,79:14,5:1 (texto)Passa
Link
--vd-text-link		Fundo da página
--vd-surface-canvas		10,39:14,5:1 (texto)Passa
Link
--vd-text-link		Cartão
--vd-surface-card		9,63:14,5:1 (texto)Passa
Texto do botão primário
--vd-action-primary-fg		Botão primário
--vd-action-primary-bg		18,59:14,5:1 (texto)Passa
Texto do botão de destaque
--vd-action-accent-fg		Botão de destaque
--vd-action-accent-bg		7,80:14,5:1 (texto)Passa
Código
--vd-code-text		Bloco de código
--vd-code-bg		15,80:14,5:1 (texto)Passa
Borda de campo
--vd-border-control		Fundo da página
--vd-surface-canvas		5,70:13:1 (não texto)Passa
Borda de campo
--vd-border-control		Cartão
--vd-surface-card		5,29:13:1 (não texto)Passa
Anel de foco
--vd-focus		Fundo da página
--vd-surface-canvas		10,39:13:1 (não texto)Passa
Ponto verde da marca
--vd-green		Fundo da página
--vd-surface-canvas		5,55:1Não se aplicaSó decorativo

Capítulo 04 · Tipografia

Hanken Grotesk e JetBrains Mono.

Títulos grandes com espaçamento apertado, corpo confortável para leitura longa e rótulos em mono, sempre com o ponto verde à esquerda.

Famílias

Texto e títulos

Hanken Grotesk

Fonte variável de 300 a 900, servida pelo próprio site (hanken-grotesk-latin.woff2 e -latin-ext). Pesos em uso: 800 em títulos de destaque, 700 em h2, 600 em rótulos, botões e títulos de cartão, 500 nos links do menu e 400 no corpo.

--vd-font-sans

Rótulos e código

JetBrains Mono

De 400 a 700, também servida pelo site. Aparece em rótulos em caixa alta, cabeçalhos de tabela, trilhas de navegação, valores técnicos e blocos de código.

--vd-font-mono

Escala

Tamanhos com clamp() crescem com a largura da tela entre os dois valores indicados.

  1. Display 1--vd-text-display-140 → 68 px · 800 · 1,06 · −0,04em.vd-display

    Software sob medida

  2. Display 2--vd-text-display-232 → 48 px · 800 · 1,1 · −0,035em.vd-title

    Como o trabalho acontece

  3. Título 1--vd-text-h128 → 36 px · 800 · 1,15 · −0,025em.vd-heading, h1

    Conte o contexto do projeto

  4. Título 2--vd-text-h222 → 28 px · 700 · 1,2 · −0,025emh2

    Automação de processos

  5. Título 3--vd-text-h321 px · 600 · 1,2 · −0,015emh3

    Entender o processo

  6. Título 4--vd-text-h418 px · 600 · 1,2 · −0,01emh4

    Definir a primeira entrega

  7. Lead--vd-text-lead18 → 22 px · 400 · 1,5 · −0,01em.vd-lead

    Conte como o processo funciona hoje e onde ele trava.

  8. Corpo grande--vd-text-body-lg18 px · 400 · 1,65sem classe

    Uma base organizada e consultável, com a fonte indicada nas respostas.

  9. Corpo--vd-text-body16 px · 400 · 1,65 · −0,005embody

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

  10. Corpo pequeno--vd-text-body-sm14 px · 400 · 1,5.vd-text-caption, .vd-help

    Qual processo, quais sistemas e qual resultado você busca?

  11. Legenda--vd-text-caption-size12 px · 400sem classe

    Última atualização: 8 de outubro de 2026

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

    01 · Serviços

  13. Mono--vd-text-mono13 px · mono 400.vd-mono

    valorbrain.valor.digital

Pesos, entrelinhas e espaçamento entre letras

Tokens de peso, entrelinha e espaçamento
TokenValor
--vd-weight-regular400
--vd-weight-medium500
--vd-weight-semibold600
--vd-weight-bold700
--vd-weight-extrabold800
--vd-leading-tight1.06
--vd-leading-snug1.2
--vd-leading-normal1.5
--vd-leading-relaxed1.65
--vd-tracking-display-0.04em
--vd-tracking-heading-0.025em
--vd-tracking-body-0.005em
--vd-tracking-caps0.12em

Capítulo 05 · Espaço, forma e movimento

Medidas.

Espaçamento em base 4, poucos raios, sombras discretas e movimento curto. Tudo em tokens --vd-*.

Espaçamento

Base de 4 px. Use os tokens em margens, espaços entre itens e preenchimentos; evite valores soltos.

  1. --vd-space-0-52px
  2. --vd-space-14px
  3. --vd-space-28px
  4. --vd-space-312px
  5. --vd-space-416px
  6. --vd-space-520px
  7. --vd-space-624px
  8. --vd-space-832px
  9. --vd-space-1040px
  10. --vd-space-1248px
  11. --vd-space-1664px
  12. --vd-space-2080px
  13. --vd-space-2496px

Raios

Cartões usam --vd-radius-lg; botões e campos, --vd-radius-md; chips e badges, --vd-radius-pill. O squircle é exclusivo do símbolo.

  • --vd-radius-sm4px
  • --vd-radius-md8px
  • --vd-radius-lg12px
  • --vd-radius-xl18px
  • --vd-radius-squircle22.5%
  • --vd-radius-pill9999px

Sombras

Sombras são raras: menu aberto, hover de cartão com link, campo com botão, botão flutuante de WhatsApp e o anel de foco. Cartões em repouso têm só a borda fina.

  • --vd-shadow-sm0 1px 2px rgba(17, 19, 23, 0.05)
  • --vd-shadow-md0 4px 12px rgba(17, 19, 23, 0.08)
  • --vd-shadow-lg0 12px 32px rgba(17, 19, 23, 0.12)
  • --vd-shadow-focus0 0 0 3px rgba(38, 102, 60, 0.35)

Layout e movimento

Tokens de layout e movimento
TokenValorUso
--vd-container76remLargura máxima do conteúdo, 1216 px (.vd-container).
--vd-container-mid60rem960 px (.vd-container--mid).
--vd-container-narrow46rem736 px, leitura longa (.vd-container--narrow, .vd-prose).
--vd-gutterclamp(1rem, 0.6rem + 2vw, 2.5rem)Margem lateral do contêiner, de 16 a 40 px.
--vd-header-h68pxAltura do cabeçalho; também desloca a rolagem para âncoras.
--vd-section-padclamp(56px, 4rem + 2.5vw, 104px)Respiro vertical de .vd-section, de 56 a 104 px.
--vd-rule1pxEspessura dos fios e bordas.
--vd-easecubic-bezier(0.16, 1, 0.3, 1)Curva de todas as transições.
--vd-duration-fast150msHover, foco e cor.
--vd-duration-normal250msTransições maiores. Com movimento reduzido, tudo cai para 0,01 ms.

Capítulo 06 · Componentes

Componentes com exemplo e código.

Cada exemplo abaixo é o componente real, renderizado com o CSS publicado. O botão Copiar leva o HTML. Textos e números dos exemplos são ilustrativos.

Botões e link com seta

.vd-btn com uma variante: --primary (obsidiana) para a ação principal da área, --accent (verde) só para a ação de uma ferramenta, --outline para a secundária e --ghost para ações discretas. Tamanhos --sm (36 px), padrão (44 px) e --lg (52 px); --block ocupa a largura toda. .vd-link-arrow é o link de continuação.

Conversar sobre um projeto Auditar um site Ver serviços
Como trabalhamos
HTML · Botões
<div class="vd-cluster">
  <a class="vd-btn vd-btn--primary" href="https://valor.digital/contato/">Conversar sobre um projeto</a>
  <a class="vd-btn vd-btn--accent" href="https://geo.valor.digital/">Auditar um site</a>
  <a class="vd-btn vd-btn--outline" href="https://valor.digital/#servicos">Ver serviços</a>
  <button class="vd-btn vd-btn--ghost" type="button">Cancelar</button>
</div>
<div class="vd-cluster">
  <button class="vd-btn vd-btn--primary vd-btn--sm" type="button">Pequeno</button>
  <button class="vd-btn vd-btn--primary vd-btn--lg" type="button">Grande</button>
  <button class="vd-btn vd-btn--primary" type="button" disabled>Indisponível</button>
  <a class="vd-link-arrow" href="https://valor.digital/metodologia/">Como trabalhamos</a>
</div>

Chips e badges

Chip (.vd-chip) é etiqueta: categoria, tecnologia, lugar. Badge (.vd-badge) é estado e usa só as cores de estado; sem modificador ele é neutro.

Tokens CSS Hanken Grotesk Gratuito Itapema, SC Automação
Rascunho Aprovado Em revisão Falhou Em andamento
HTML · Chips e badges
<div class="vd-cluster">
  <span class="vd-chip">Tokens CSS</span>
  <span class="vd-chip vd-chip--dark">Hanken Grotesk</span>
  <span class="vd-chip vd-chip--green">Gratuito</span>
  <span class="vd-chip vd-chip--soft">Itapema, SC</span>
  <span class="vd-chip vd-chip--plain">Automação</span>
</div>
<div class="vd-cluster">
  <span class="vd-badge">Rascunho</span>
  <span class="vd-badge vd-badge--success">Aprovado</span>
  <span class="vd-badge vd-badge--warning">Em revisão</span>
  <span class="vd-badge vd-badge--error">Falhou</span>
  <span class="vd-badge vd-badge--info">Em andamento</span>
</div>

Cartões

.vd-card é branco com borda fina. Partes: __eyebrow, __title, __text, __meta e __footer (vai para o pé do cartão). Para o cartão inteiro clicável sem pôr blocos dentro de um link, use .vd-card__cover no link do título; .vd-card--link acrescenta a seta e o hover. Variantes: --muted, --flat e --inverse (use junto com .vd-theme-dark).

Serviço

Automação de Processos

Fluxos que executam o trabalho repetitivo e deixam registro de cada execução.

Primeira entrega pequena

Ver o serviço

Blog

O link do título cobre o cartão inteiro.

Guias práticos Cartão inteiro como link, para conteúdo curto.

Cartão suave

Fundo neutro, sem borda.

Cartão plano

Só a borda, sem fundo.

Cartão obsidiana

Para destaque raro sobre fundo claro.

HTML · Cartões
<div class="vd-grid vd-grid--3">
  <article class="vd-card">
    <p class="vd-eyebrow vd-card__eyebrow">Serviço</p>
    <h4 class="vd-card__title">Automação de Processos</h4>
    <p class="vd-card__text">Fluxos que executam o trabalho repetitivo e deixam registro de cada execução.</p>
    <p class="vd-card__meta">Primeira entrega pequena</p>
    <div class="vd-card__footer"><a class="vd-link-arrow" href="https://valor.digital/servico/automacao/">Ver o serviço</a></div>
  </article>
  <article class="vd-card vd-card--link">
    <h4 class="vd-card__title"><a class="vd-card__cover" href="https://valor.digital/blog/">Blog</a></h4>
    <p class="vd-card__text">O link do título cobre o cartão inteiro.</p>
  </article>
  <a class="vd-card vd-card--link" href="https://valor.digital/guias-praticos/">
    <span class="vd-card__title">Guias práticos</span>
    <span class="vd-card__text">Cartão inteiro como link, para conteúdo curto.</span>
  </a>
</div>
<div class="vd-grid vd-grid--3">
  <div class="vd-card vd-card--muted">
    <h4 class="vd-card__title">Cartão suave</h4>
    <p class="vd-card__text">Fundo neutro, sem borda.</p>
  </div>
  <div class="vd-card vd-card--flat">
    <h4 class="vd-card__title">Cartão plano</h4>
    <p class="vd-card__text">Só a borda, sem fundo.</p>
  </div>
  <div class="vd-card vd-card--inverse vd-theme-dark">
    <h4 class="vd-card__title">Cartão obsidiana</h4>
    <p class="vd-card__text">Para destaque raro sobre fundo claro.</p>
  </div>
</div>

Definições e etapas

.vd-deflist mostra pares rótulo e texto, como problema e entrega; --row põe os pares lado a lado a partir de 768 px. .vd-steps numera etapas sozinho; --row vira quatro colunas a partir de 960 px.

O problema
O time gasta horas copiando dados entre sistemas.
A entrega
Um fluxo automatizado com registro de cada execução.

  1. Entender o processo

    Conversa com quem executa.

  2. Definir a primeira entrega

    Critério de sucesso por escrito.

  3. Desenvolver e validar

    Teste em uso real.

  4. Acompanhar e evoluir

    O uso define a próxima entrega.

HTML · Definições e etapas
<dl class="vd-deflist vd-deflist--row">
  <div><dt>O problema</dt><dd>O time gasta horas copiando dados entre sistemas.</dd></div>
  <div><dt>A entrega</dt><dd>Um fluxo automatizado com registro de cada execução.</dd></div>
</dl>
<ol class="vd-steps vd-steps--row">
  <li><div><h4 class="vd-steps__title">Entender o processo</h4><p>Conversa com quem executa.</p></div></li>
  <li><div><h4 class="vd-steps__title">Definir a primeira entrega</h4><p>Critério de sucesso por escrito.</p></div></li>
  <li><div><h4 class="vd-steps__title">Desenvolver e validar</h4><p>Teste em uso real.</p></div></li>
  <li><div><h4 class="vd-steps__title">Acompanhar e evoluir</h4><p>O uso define a próxima entrega.</p></div></li>
</ol>

Destaque e alertas

.vd-callout destaca uma informação editorial com o fio verde. .vd-alert comunica estado: sem modificador é informativo; --success, --warning e --error mudam a cor. Mensagens que aparecem depois de uma ação vão num contêiner com role="status" (ou role="alert" para erro).

Escopo fechado antes de começar

Prazo, escopo e critério de sucesso entram na proposta.

Informação. A auditoria leva de 10 a 40 segundos.
Pronto. Relatório enviado para o e-mail informado.
Atenção. O site demorou a responder e a nota de desempenho pode variar.
Erro. Não foi possível acessar o endereço informado.
HTML · Destaque e alertas
<div class="vd-callout">
  <p class="vd-callout__title">Escopo fechado antes de começar</p>
  <p>Prazo, escopo e critério de sucesso entram na proposta.</p>
</div>
<div class="vd-alert"><strong>Informação.</strong> A auditoria leva de 10 a 40 segundos.</div>
<div class="vd-alert vd-alert--success"><strong>Pronto.</strong> Relatório enviado para o e-mail informado.</div>
<div class="vd-alert vd-alert--warning"><strong>Atenção.</strong> O site demorou a responder e a nota de desempenho pode variar.</div>
<div class="vd-alert vd-alert--error"><strong>Erro.</strong> Não foi possível acessar o endereço informado.</div>

Código

Bloco .vd-code com cabeçalho opcional (.vd-code__head). Um botão com data-copy-target="id" copia o texto do elemento indicado (comportamento do vd.js). O <pre> leva tabindex="0" para rolar pelo teclado. Código curto dentro do texto usa <code> sem classe.

robots.txt
User-agent: OAI-SearchBot
Allow: /
HTML · Código
<div class="vd-code">
  <div class="vd-code__head"><span id="exemplo-robots-nome">robots.txt</span><button type="button" data-copy-target="exemplo-robots" aria-describedby="exemplo-robots-nome">Copiar</button></div>
  <pre id="exemplo-robots" tabindex="0">User-agent: OAI-SearchBot
Allow: /</pre>
</div>

Tabela

.vd-table dentro de .vd-table-wrap, que dá a borda e a rolagem horizontal em telas estreitas. Números alinham à direita com .vd-num. Como a tabela pode rolar na horizontal, o contêiner leva role="region", um aria-label e tabindex="0", para ser alcançado pelo teclado.

Pesos de três categorias do Audit GEO
CategoriaPeso
Acesso para robôs de IA25
Indexação e rastreio20
Conteúdo legível sem JavaScript20
HTML · Tabela
<div class="vd-table-wrap" role="region" tabindex="0" aria-label="Pesos de três categorias do Audit GEO">
  <table class="vd-table">
    <caption class="vd-visually-hidden">Pesos de três categorias do Audit GEO</caption>
    <thead><tr><th scope="col">Categoria</th><th scope="col" class="vd-num">Peso</th></tr></thead>
    <tbody>
      <tr><td>Acesso para robôs de IA</td><td class="vd-num">25</td></tr>
      <tr><td>Indexação e rastreio</td><td class="vd-num">20</td></tr>
      <tr><td>Conteúdo legível sem JavaScript</td><td class="vd-num">20</td></tr>
    </tbody>
  </table>
</div>

Perguntas frequentes

.vd-faq com <details class="vd-faq__item">: abre e fecha sem JavaScript e funciona com teclado.

Preciso chegar com uma solução pronta?

Não. Conte como o processo funciona hoje e onde ele trava.

O Audit GEO pede e-mail?

Não para auditar. O e-mail só é pedido se você quiser o relatório em PDF.

HTML · Perguntas frequentes
<div class="vd-faq">
  <details class="vd-faq__item">
    <summary>Preciso chegar com uma solução pronta?</summary>
    <div class="vd-faq__answer"><p>Não. Conte como o processo funciona hoje e onde ele trava.</p></div>
  </details>
  <details class="vd-faq__item">
    <summary>O Audit GEO pede e-mail?</summary>
    <div class="vd-faq__answer"><p>Não para auditar. O e-mail só é pedido se você quiser o relatório em PDF.</p></div>
  </details>
</div>

Trilha de navegação

.vd-breadcrumb é um <nav> com lista ordenada; o item atual leva aria-current="page".

HTML · Trilha de navegação
<nav class="vd-breadcrumb" aria-label="Trilha de navegação (exemplo)">
  <ol>
    <li><a href="https://valor.digital/">Início</a></li>
    <li><a href="https://valor.digital/segmentos/">Segmentos</a></li>
    <li><span aria-current="page">Advocacia</span></li>
  </ol>
</nav>

Formulário

Cada controle fica num .vd-field com <label class="vd-label"> ligado pelo for. Texto auxiliar em .vd-help e erro em .vd-error-text, os dois ligados ao campo por aria-describedby; o campo com erro leva aria-invalid="true". Em uso real, .vd-form vai no próprio <form>.

Informe um e-mail completo, como ana@empresa.com.br.

Qual processo, quais sistemas e qual resultado você busca?

Mensagem recebida.

HTML · Formulário
<div class="vd-form">
  <div class="vd-field">
    <label class="vd-label" for="demo-nome">Nome <span class="vd-label__opt">(obrigatório)</span></label>
    <input class="vd-input" id="demo-nome" name="nome" autocomplete="name" required>
  </div>
  <div class="vd-field">
    <label class="vd-label" for="demo-email">E-mail</label>
    <input class="vd-input" id="demo-email" name="email" type="email" value="ana@" aria-invalid="true" aria-describedby="demo-email-erro">
    <p class="vd-error-text" id="demo-email-erro">Informe um e-mail completo, como ana@empresa.com.br.</p>
  </div>
  <div class="vd-field">
    <label class="vd-label" for="demo-servico">Serviço <span class="vd-label__opt">(opcional)</span></label>
    <select class="vd-select" id="demo-servico" name="servico">
      <option value="">Ainda quero entender</option>
      <option>Automação de processos</option>
      <option>Consultoria em IA</option>
    </select>
  </div>
  <div class="vd-field">
    <label class="vd-label" for="demo-mensagem">Mensagem</label>
    <textarea class="vd-textarea" id="demo-mensagem" name="mensagem" aria-describedby="demo-mensagem-ajuda"></textarea>
    <p class="vd-help" id="demo-mensagem-ajuda">Qual processo, quais sistemas e qual resultado você busca?</p>
  </div>
  <label class="vd-check"><input type="checkbox" name="consentimento"> <span>Quero receber o relatório por e-mail.</span></label>
  <div><button class="vd-btn vd-btn--primary" type="button">Enviar mensagem</button></div>
  <p class="vd-form-status" data-state="success" role="status" aria-live="polite">Mensagem recebida.</p>
</div>

Campo com botão acoplado (.vd-inputgroup), usado no Audit GEO, e os três estados de .vd-form-status (data-state igual a pending, success ou error):

Enviando sua mensagem. Aguarde a confirmação.

Mensagem recebida.

Não foi possível confirmar o envio.

HTML · Campo com botão e status
<div class="vd-inputgroup">
  <label class="vd-visually-hidden" for="demo-url">Endereço do site</label>
  <input class="vd-input" id="demo-url" name="url" type="text" inputmode="url" autocomplete="url" placeholder="exemplo.com.br">
  <button class="vd-btn vd-btn--accent" type="button">Auditar</button>
</div>
<p class="vd-form-status" data-state="pending">Enviando sua mensagem. Aguarde a confirmação.</p>
<p class="vd-form-status" data-state="success">Mensagem recebida.</p>
<p class="vd-form-status" data-state="error">Não foi possível confirmar o envio.</p>

Números e medidor

.vd-stat mostra um número com rótulo. .vd-meter é uma barra de 0 a 100 definida pela variável --vd-meter-value; --success, --warning e --error mudam a cor. Os números deste exemplo são ilustrativos.

72Nota de exemplo
7Categorias
100Pontos possíveis
HTML · Números e medidor
<div class="vd-grid vd-grid--3">
  <div class="vd-stat"><span class="vd-stat__value">72</span><span class="vd-stat__label">Nota de exemplo</span></div>
  <div class="vd-stat"><span class="vd-stat__value">7</span><span class="vd-stat__label">Categorias</span></div>
  <div class="vd-stat"><span class="vd-stat__value">100</span><span class="vd-stat__label">Pontos possíveis</span></div>
</div>
<div class="vd-stack">
  <div class="vd-meter vd-meter--success" style="--vd-meter-value: 88" role="meter" aria-valuemin="0" aria-valuemax="100" aria-valuenow="88" aria-label="Exemplo de medidor em 88"></div>
  <div class="vd-meter vd-meter--warning" style="--vd-meter-value: 56" role="meter" aria-valuemin="0" aria-valuemax="100" aria-valuenow="56" aria-label="Exemplo de medidor em 56"></div>
  <div class="vd-meter vd-meter--error" style="--vd-meter-value: 32" role="meter" aria-valuemin="0" aria-valuemax="100" aria-valuenow="32" aria-label="Exemplo de medidor em 32"></div>
</div>

Listas

.vd-list usa o ponto verde como marcador; .vd-list--check troca o ponto por um sinal de conferido.

  • Sistemas que você já usa, conectados com o que existe.
  • Conhecimento interno organizado e fácil de consultar.
  • Escopo fechado antes de começar.
  • Critério de sucesso combinado por escrito.
HTML · Listas
<ul class="vd-list">
  <li>Sistemas que você já usa, conectados com o que existe.</li>
  <li>Conhecimento interno organizado e fácil de consultar.</li>
</ul>
<ul class="vd-list vd-list--check">
  <li>Escopo fechado antes de começar.</li>
  <li>Critério de sucesso combinado por escrito.</li>
</ul>

Texto longo

.vd-prose cuida do ritmo de artigos, glossário e páginas legais: largura de leitura, espaços entre blocos, listas, citações, tabelas e código.

Por que começar pequeno

Uma primeira entrega pequena mostra cedo se o caminho funciona. O critério de sucesso fica combinado por escrito, e o método explica cada etapa.

  • Menos risco no começo.
  • Ajustes com base no uso real.

O que o uso revelar vira a próxima evolução.

HTML · Texto longo
<div class="vd-prose">
  <h4>Por que começar pequeno</h4>
  <p>Uma primeira entrega pequena mostra cedo se o caminho funciona. O critério de sucesso fica <strong>combinado por escrito</strong>, e o <a href="https://valor.digital/metodologia/">método</a> explica cada etapa.</p>
  <ul>
    <li>Menos risco no começo.</li>
    <li>Ajustes com base no uso real.</li>
  </ul>
  <blockquote><p>O que o uso revelar vira a próxima evolução.</p></blockquote>
</div>

Layout

Classes de estrutura. Não têm aparência própria além de largura, colunas e espaço.

Classes de layout
ClasseO que faz
.vd-containerCentraliza o conteúdo com largura máxima de 1216 px e margem lateral (--mid: 960 px; --narrow: 736 px).
.vd-sectionFaixa de página com respiro vertical. Seções claras seguidas ganham um fio no topo. Variantes: --tight, --muted e --card. Para uma faixa obsidiana, use --dark junto com .vd-theme-dark.
.vd-section__headRótulo, título e lead de uma seção, com até 768 px de largura; --center centraliza.
.vd-gridGrade que se ajusta à largura. --2, --3 e --4 fixam as colunas a partir de 1024 px.
.vd-splitDuas colunas a partir de 960 px (1,15 para 0,85). --even divide igual; --aside deixa a coluna da esquerda menor.
.vd-stackPilha vertical com espaço regular (--sm, padrão, --lg).
.vd-clusterItens em linha que quebram para a próxima linha, como grupos de botões e chips.
HTML · Estrutura de seção
<section class="vd-section" aria-labelledby="servicos-titulo">
  <div class="vd-container">
    <div class="vd-section__head">
      <p class="vd-eyebrow">01 · Serviços</p>
      <h2 class="vd-title" id="servicos-titulo">Serviços organizados pelo problema que resolvem</h2>
      <p class="vd-lead">Cada serviço resolve um problema específico do trabalho diário.</p>
    </div>
    <div class="vd-grid vd-grid--2">
      <article class="vd-card">…</article>
      <article class="vd-card">…</article>
    </div>
  </div>
</section>

Abertura de página e faixa de chamada

.vd-hero abre a página inicial e páginas de campanha (__inner, __actions, __meta). .vd-page-head abre páginas internas, com trilha, rótulo, título e lead. .vd-cta-band fecha a página: título e texto à esquerda, ações à direita; com --box e .vd-theme-dark vira um bloco obsidiana sobre fundo claro. Nos exemplos, os títulos estão em parágrafos para não mexer nos níveis de título desta página; numa página real, use h2.

Próximo passo

Conversar sobre um projeto

Conte o processo que mais consome o tempo do seu time.

Falar com a Valor Digital WhatsApp
HTML · Faixa de chamada
<div class="vd-cta-band vd-cta-band--box vd-theme-dark">
  <div class="vd-stack">
    <p class="vd-eyebrow">Próximo passo</p>
    <p class="vd-title">Conversar sobre um projeto</p>
    <p class="vd-lead">Conte o processo que mais consome o tempo do seu time.</p>
  </div>
  <div class="vd-cluster">
    <a class="vd-btn vd-btn--primary" href="https://valor.digital/contato/">Falar com a Valor Digital</a>
    <a class="vd-btn vd-btn--outline" href="https://wa.me/5547991582170">WhatsApp</a>
  </div>
</div>
HTML · Cabeçalho de página interna
<section class="vd-page-head" aria-labelledby="titulo-pagina">
  <div class="vd-container">
    <div class="vd-page-head__inner">
      <nav class="vd-breadcrumb" aria-label="Trilha de navegação">
        <ol><li><a href="https://valor.digital/">Início</a></li><li><span aria-current="page">Contato</span></li></ol>
      </nav>
      <p class="vd-eyebrow">Contato</p>
      <h1 class="vd-title" id="titulo-pagina">Que trabalho sua empresa precisa melhorar?</h1>
      <p class="vd-lead">Conte como o processo funciona hoje.</p>
    </div>
  </div>
</section>

Tema obsidiana

.vd-theme-dark numa seção ou bloco troca os tokens semânticos; data-theme="dark" no <html> faz o mesmo na página inteira. Os componentes continuam os mesmos.

Produto próprio

Bloco obsidiana

Texto secundário, link e botões no tema escuro.

Conhecer o ValorBrain Contato
HTML · Tema obsidiana
<div class="vd-section vd-section--dark vd-theme-dark">
  <div class="vd-container vd-stack">
    <p class="vd-eyebrow">Produto próprio</p>
    <p class="vd-heading">Bloco obsidiana</p>
    <p class="vd-text-secondary">Texto secundário, <a href="https://valorbrain.valor.digital/">link</a> e botões no tema escuro.</p>
    <div class="vd-cluster">
      <a class="vd-btn vd-btn--primary" href="https://valorbrain.valor.digital/">Conhecer o ValorBrain</a>
      <a class="vd-btn vd-btn--outline" href="https://valor.digital/contato/">Contato</a>
    </div>
  </div>
</div>

Utilitários

Classes utilitárias
ClasseO que faz
.vd-eyebrow--plainRótulo sem o ponto verde.
.vd-dotPonto verde no fim de um título de campanha. No máximo um por página.
.vd-leadParágrafo de abertura, em cinza, com até 44rem.
.vd-text-secondaryTexto na cor secundária.
.vd-text-captionTexto pequeno na cor de legenda.
.vd-monoTexto em JetBrains Mono.
.vd-measureLimita a largura de leitura a 42rem.
.vd-centerCentraliza o texto.
.vd-dividerFio horizontal de 1 px.
.vd-mt-0Zera a margem superior.
.vd-visually-hiddenEsconde da tela e mantém para leitores de tela.
.vd-skip-linkLink “Ir para o conteúdo”, visível ao receber foco.
.vd-numCélula de tabela numérica, alinhada à direita.

Capítulo 07 · Cabeçalho e rodapé

As partes fixas de toda página.

No valor.digital, cabeçalho, rodapé e botão de WhatsApp são parciais compartilhados: cada página inclui o mesmo HTML. O Audit GEO e este site usam os mesmos componentes, com o rótulo do produto.

Comportamento

O cabeçalho e o rodapé desta página são os componentes reais do design system, na versão com rótulo de produto. O vd.js cuida do comportamento:

  • Menu no celular. Abaixo de 1024 px, o botão .vd-header__toggle abre e fecha a navegação, atualiza aria-expanded e troca o texto entre Menu e Fechar. Esc fecha e devolve o foco ao botão.
  • Submenus. Cada submenu é um <details class="vd-menu">: abre com clique, Enter ou Espaço, mesmo sem JavaScript. No desktop, abrir um fecha os outros; clique fora, Esc ou sair com Tab fecham o menu, e Esc devolve o foco ao item.
  • Página atual. O link da página atual recebe aria-current="page"; no primeiro nível do menu, ele fica na cor de destaque.
  • Produto. Ferramentas com marca própria, como o Audit GEO e este site, acrescentam <span class="vd-brand__product"> depois do wordmark.
  • WhatsApp. O botão flutuante .vd-wa é um canal real de contato. Abaixo de 480 px mostra só o ícone, e o rodapé ganha espaço para ele não cobrir links. Ele aparece só no valor.digital.

Cabeçalho

Estrutura resumida, com um submenu e um link. O cabeçalho fica fixo no topo com fundo papel translúcido.

HTML · Cabeçalho
<a class="vd-skip-link" href="#conteudo">Ir para o conteúdo</a>
<header class="vd-header">
  <div class="vd-container vd-header__inner">
    <a class="vd-brand" href="https://valor.digital/" aria-label="Valor Digital, página inicial">
      <img src="/assets/vd/brand/valor-digital-wordmark.svg" alt="" width="133" height="26">
    </a>
    <button class="vd-header__toggle" type="button" aria-expanded="false" aria-controls="vd-nav">
      <span class="vd-header__toggle-bars" aria-hidden="true"></span>
      <span class="vd-header__toggle-label">Menu</span>
    </button>
    <nav class="vd-nav" id="vd-nav" aria-label="Principal">
      <ul class="vd-nav__list">
        <li>
          <details class="vd-menu">
            <summary class="vd-nav__link">Serviços</summary>
            <div class="vd-menu__panel">
              <a class="vd-menu__link" href="https://valor.digital/servico/automacao/"><span class="vd-menu__title">Automação de Processos</span><span class="vd-menu__desc">Tarefas repetitivas entre sistemas, executadas com registro.</span></a>
              <div class="vd-menu__foot"><a class="vd-link-arrow" href="https://valor.digital/metodologia/">Como trabalhamos</a></div>
            </div>
          </details>
        </li>
        <li><a class="vd-nav__link" href="https://valor.digital/precos/">Preços</a></li>
      </ul>
      <div class="vd-nav__mobile-cta">
        <a class="vd-btn vd-btn--primary vd-btn--block" href="https://valor.digital/contato/">Conversar sobre um projeto</a>
      </div>
    </nav>
    <a class="vd-btn vd-btn--primary vd-btn--sm vd-header__cta" href="https://valor.digital/contato/">Conversar sobre um projeto</a>
  </div>
</header>

Rodapé e WhatsApp

O rodapé é sempre obsidiana (.vd-footer.vd-theme-dark), com colunas de navegação e a linha de rodapé com Privacidade e Design system.

HTML · Rodapé

Capítulo 08 · Voz e tom

Direto, concreto, calmo.

A voz da marca e as regras de escrita ficam no manual de marca. Valem para todo texto do site, do Audit GEO e dos e-mails, inclusive os textos dos componentes.

No manual de marca

Capítulo 09 · Downloads

Arquivos e uso.

Tokens em JSON e CSS, o CSS e o JavaScript publicados. Os arquivos da marca e o kit em ZIP ficam no manual de marca.

Marca

Wordmark e símbolo em SVG e PNG, favicons, ícones de app e o kit de marca em ZIP estão no capítulo de ativos do manual. Os arquivos da marca não devem ser redesenhados nem convertidos para outras cores.

Código

O CSS e o JavaScript levam o hash do conteúdo no nome, por isso podem ficar em cache por um ano. Os links abaixo apontam sempre para a versão publicada agora.

Arquivos de código do design system
ArquivoFormatoConteúdoLink
TokensJSONTodos os tokens --vd-* dos temas papel e obsidiana, extraídos de tokens.css.Baixar Tokens (JSON)
Tokens em CSSCSSO tokens.css do design system, com os temas papel e obsidiana.Baixar Tokens em CSS
CSS do design systemCSSFontes, tokens, base e componentes num arquivo só.Baixar CSS do design system (CSS)
JavaScript do design systemJSMenu do celular, submenus e botões de copiar. Sem dependências.Baixar JavaScript do design system (JS)
Manifesto dos arquivosJSONDiz o nome atual, com hash, de cada arquivo do design system.Baixar Manifesto dos arquivos (JSON)

Como usar numa página

A classe js no <html> liga o que depende de JavaScript, como o menu recolhido no celular. Sem ela, a navegação aparece aberta e continua funcionando.

HTML · Inclusão do design system
<head>
  <script>document.documentElement.classList.add('js')</script>
  <link rel="preload" href="/assets/vd/fonts/hanken-grotesk-latin.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="stylesheet" href="/assets/vd/vd.fed909eff9.css">
  <link rel="icon" href="/assets/vd/brand/valor-digital-symbol.svg" type="image/svg+xml">
</head>
<body>
  …
  <script src="/assets/vd/vd.6c9bff8144.js" defer></script>
</body>