Manual da marca · Versão 1 · 11 nov 2026

Manual da marca dtxtech.

dtxtech é um estúdio independente de design de produto e desenvolvimento full stack. Douglas Dias pesquisa e desenha; Thiago Felipe programa o app, a web e a API. A marca é preta, clara e cinza, com letra pesada em caixa alta, rótulos em mono e três formas simples. Vale para o site, as redes, as propostas e tudo que leva o nome do estúdio.

01 / 12

O essencial

Comece pelo preto: fundo é tinta e o texto é texto (papel). O claro é a exceção, para seções invertidas e impressos.
Não use cor. A marca vive de quatro tons: tinta, papel, grafite e prata. Cor só aparece dentro das telas dos cases.
Títulos em Archivo Black, caixa alta, apertados (titulo-capa, titulo-secao, titulo-cartao). Rótulos em JetBrains Mono, caixa alta, espaçados (rotulo-secao, rotulo, meta).
Nada arredonda (raio-0). Separe com borda de 2 px (borda-2) na cor borda. Sem sombra.
As três formas são a marca: ● pesquisa, ■ design, ▲ código. Use as formas desenhadas aqui; não troque por ícones nem emoji.
Use os arquivos da seção Arquivos. Não redesenhe, não recolora e não escreva o nome com outra fonte.

02 / 12

O nome

Em texto, escreva dtxtech: uma palavra, minúsculas, sem espaço nem hífen. Exemplo do site: "O que cada um fez antes do dtxtech."
Em caixa alta (logo, títulos, rótulos), DTXTECH.
Não escreva DTX Tech, DTX-Tech, Dtxtech nem só DTX. O nome não se traduz: em inglês continua dtxtech.
Contrato, nota fiscal e outros documentos legais usam a razão social registrada; dtxtech entra como marca.

03 / 12

Logo

A assinatura junta as três formas do trabalho (pesquisa, design e código) e o nome em Archivo Black, o mesmo peso dos títulos do site.

Versões

Versão	Quando usar	Arquivos
Horizontal	Sempre que couber: site, documentos, slides, rodapés.	`dtxtech-horizontal-fundo-escuro`, `dtxtech-horizontal-fundo-claro` (SVG e PNG)
Símbolo	Espaço quadrado: aba do navegador, ícone de app, foto de perfil, carimbo.	`dtxtech-simbolo-fundo-escuro.svg`, `dtxtech-simbolo-fundo-claro.svg`
Formas	Assinatura curta ao lado de texto que já diz dtxtech: crédito em rodapé, marca-d'água.	`dtxtech-formas-fundo-escuro.svg`, `dtxtech-formas-fundo-claro.svg`
Nome	Quando as formas já aparecem perto, em tamanho grande, na mesma peça.	`dtxtech-nome-fundo-escuro.svg`, `dtxtech-nome-fundo-claro.svg`
Uma cor	Carimbo, bordado, gravação, impressão a uma cor.	`dtxtech-horizontal-uma-cor-claro.svg`, `dtxtech-horizontal-uma-cor-escuro.svg`

Símbolo no preto	Símbolo no claro	Formas	Uma cor

Construção

Tudo se mede em H, a altura das maiúsculas do nome.

O nome é DTXTECH em Archivo Black (peso 900, largura normal), espaçamento -0,025em, convertido em desenho. Não digite o nome no lugar do arquivo.
As formas ficam na linha de base do nome.
Quadrado: 0,86H. Círculo: 0,95H de diâmetro. Triângulo equilátero: altura H, com a ponta na altura das maiúsculas.
O círculo e o triângulo são maiores que o quadrado porque formas redondas e pontudas parecem menores do que são. Com essas medidas, as três pesam igual.
Espaço entre círculo e quadrado: 0,16H. Entre quadrado e triângulo: 0,1H na base, que abre para cima com a inclinação. Entre as formas e o nome: 0,5H.
Largura total: 10.96H. As formas ocupam 3.22H e o nome 7.24H.

Símbolo

Círculo e quadrado na mesma linha de base, com o mesmo vão de 0,16H. O triângulo fica embaixo, com a ponta apontando para o vão.
O triângulo está deslocado um pouco para a esquerda: assim os vãos até o círculo e até o quadrado ficam iguais.
No ícone com fundo, o símbolo ocupa 62 % do quadrado (80 % no ícone da aba, que é pequeno). Na foto de perfil, sobra margem para o recorte redondo.

Cores do logo

Fundo	● Círculo	■ Quadrado	▲ Triângulo	Nome
Preto `tinta`	`papel` #F2F2F2	`grafite` #989898	`prata` #C4C4C4	`papel`
Claro `papel`	`tinta` #060606	`grafite-escuro` #484848	`chumbo` #242424	`tinta`
Uma cor, no preto	`papel`	`papel`	`papel`	`papel`
Uma cor, no claro	`tinta`	`tinta`	`tinta`	`tinta`

Os cinzas do claro espelham os do preto: cada forma fica à mesma distância do fundo nos dois casos.
Sobre foto, use só a versão em uma cor, numa área calma e com contraste. Se a foto for clara, use a versão uma-cor-escuro.

Área de proteção

Em volta da horizontal, deixe livre pelo menos H, a altura das maiúsculas. Nada de texto, borda ou corte de imagem nesse espaço.
Em volta do símbolo, deixe metade da altura dele.

Tamanho mínimo

Versão	Tela	Papel
Horizontal	100 px de largura (H de 9 px)	25 mm de largura
Símbolo	16 px (ícone da aba, com fundo)	6 mm
Formas	24 px de largura	8 mm
Nome	64 px de largura	18 mm

Abaixo desses tamanhos o espaço entre as formas fecha e o quadrado some no meio dos outros dois.

Usos errados



Não pinte as formas com cor.	Não troque a ordem das formas.	Não estique nem achate.

No logo, o nome é sempre em caixa alta.	Não mude o tamanho das formas em relação ao nome.	Não use a versão do preto em fundo médio ou claro.

Também não: contorno, sombra, brilho, rotação, outra fonte no nome, as formas em outro arranjo que não a linha ou o símbolo.

04 / 12

Cor

fundo e texto fazem quase tudo. No preto, tinta com papel; no claro, o contrário.
texto-apoio vai em intro, legenda e metadado. Nunca em texto sobre superficie.
destaque-titulo pinta só a segunda parte de um título de seção, quando ela existe.
borda e foco têm a cor do texto. O foco é contorno sólido de 2 px, afastado 3 px.
forma-circulo, forma-quadrado e forma-triangulo são só para as formas (logo e marcadores de serviço). A ordem de contraste é fixa: círculo mais forte, triângulo no meio, quadrado mais suave.
O site é escuro. O tema claro espelha cada tom pela luminosidade OKLCH: o tom fica à mesma distância do fundo. É daí que vêm chumbo, grafite-escuro, cinza-escuro e nevoa.
Não use grafite nem prata para texto no claro: ficam abaixo de 3:1 sobre papel.

Tokens de cor

Token	No preto	No claro	Uso
`fundo`	`#060606`	`#F2F2F2`	Fundo da página, do cabeçalho e dos cartões. O padrão da marca é o preto; o claro vale para seções invertidas e impressos.
`texto`	`#F2F2F2`	`#060606`	Títulos, corpo, rótulos e o nome do logo sobre `fundo` (18,1:1 nos dois temas).
`texto-apoio`	`#8F8F8F`	`#505050`	Intros, legendas e metadados sobre `fundo`: 6,3:1 no preto e 7,2:1 no claro.
`destaque-titulo`	`#989898`	`#646464`	Segunda parte de um título de seção, em outro tom (o `titleAccent` do site). 7,0:1 no preto e 5,3:1 no claro (o claro é o preto a 60 % sobre `papel`, como no site).
`superficie`	`#161616`	`#D7D7D7`	Bloco discreto atrás de conteúdo (o `muted` do site). Não leva texto em `texto-apoio`; use `texto`.
`borda`	`#F2F2F2`	`#060606`	Toda borda e divisória, sempre com `borda-2`: cabeçalho, cartões, botões, campos.
`foco`	`#F2F2F2`	`#060606`	Contorno de foco do teclado: 2 px sólido, afastado 3 px, na cor do texto do elemento (18,1:1).
`forma-circulo`	`#F2F2F2`	`#060606`	O círculo (pesquisa) do logo e dos marcadores de serviço.
`forma-quadrado`	`#989898`	`#484848`	O quadrado (design) do logo e dos marcadores. É a forma de menor contraste: 7,0:1 no preto e 8,8:1 no claro.
`forma-triangulo`	`#C4C4C4`	`#242424`	O triângulo (código) do logo e dos marcadores. Contraste intermediário: 11,9:1 no preto e 15,0:1 no claro.

Paleta

tinta#060606Preto da marca, oklch(0.12 0 0). fundo no preto; texto e formas no claro.
papel#F2F2F2Claro da marca, oklch(0.96 0 0). Texto e bordas no preto; fundo no claro.
grafite#989898oklch(0.68 0 0), o secondary do site. Quadrado do logo e destaque de título no preto. Não use em texto sobre papel (2,6:1).
prata#C4C4C4oklch(0.82 0 0), o accent do site. Triângulo do logo no preto. Não use sobre papel (1,6:1).
carvao#161616oklch(0.20 0 0), o muted do site. superficie no preto.
cinza#8F8F8Foklch(0.65 0 0), o muted-foreground do site. texto-apoio no preto.
chumbo#242424oklch(0.26 0 0). Triângulo do logo no claro: espelho de prata, à mesma distância do fundo.
grafite-escuro#484848oklch(0.40 0 0). Quadrado do logo no claro: espelho de grafite.
cinza-escuro#505050oklch(0.43 0 0). texto-apoio no claro: espelho de cinza.
nevoa#D7D7D7oklch(0.88 0 0). superficie no claro: espelho de carvao.

05 / 12

Tipografia

Duas famílias, do Google Fonts: Archivo (variável, pesos 100 a 900) e JetBrains Mono.
Títulos: Archivo 900, caixa alta, entrelinha 0,9, espaçamento -0,05em (titulo-capa, titulo-secao). Cartões: titulo-cartao, espaçamento -0,025em. Títulos de frase terminam com ponto: "DO DESIGN AO APP NO AR."
Texto: Archivo 400 em corpo (16 px) e intro (18 px, entrelinha 1,625), com no máximo 672 px de largura.
Rótulos: JetBrains Mono 700, caixa alta, espaçamento 0,1em (rotulo-secao, rotulo). Metadados em 400 (meta), separados por " / " e " · ": "01 / DESIGN DE PRODUTO · 2023-2024".
O rótulo de seção leva antes um quadrado de 10 px na cor do texto: ■ CASES.
Sem itálico. Sublinhado só no hover de link, afastado 8 px do texto.

Estilos

titulo-capaTítulos · 100px · entrelinha 0.9 · peso 900 · espaço -0.05em

DO DESIGN AO APP NO AR.

Abertura de página (h1). Caixa alta, uma ideia por linha. No celular: clamp(2.5rem, 12vw, 7rem).

titulo-secaoTítulos · 72px · entrelinha 0.92 · peso 900 · espaço -0.05em

PESQUISA, DESIGN E CÓDIGO NO MESMO LUGAR.

Frase de cada seção, abaixo do rótulo. Caixa alta. No celular: clamp(1.75rem, 8.5vw, 3rem); 60 px a partir de 768 px.

titulo-cartaoTítulos · 30px · entrelinha 1 · peso 900 · espaço -0.025em

CRÉDITO RURAL EM FLUXOS CLAROS PARA O PRODUTOR

Título de cartão de case e de artigo. Caixa alta. 24 px no celular.

introTexto · 18px · entrelinha 1.625 · peso 400

Douglas Dias pesquisa e desenha. Thiago Felipe programa o app, a web e a API.

Apoio de abertura e de seção, até 672 px de largura.

corpoTexto · 16px · entrelinha 1.5 · peso 400

Você fala direto com os dois, sem repasse entre equipes.

Texto corrido, descrições de case e de serviço. Nunca menor que 16 px no celular.

rotulo-secaoRótulos · 14px · entrelinha 20px · peso 700 · espaço 0.1em

SERVIÇOS

Nome da seção (h2), caixa alta, com um quadrado de 10 px antes.

rotuloRótulos · 12px · entrelinha 16px · peso 700 · espaço 0.1em

LER O CASE →

Itens do menu, botões compactos, links de cartão. Caixa alta.

metaRótulos · 12px · entrelinha 16px · peso 400 · espaço 0.1em

01 / DESIGN DE PRODUTO · 2023-2024

Metadados: número, área, ano. Caixa alta, separados por " / " e " · ".

06 / 12

As três formas

Pesquisae descoberta

Designde produto

Códigofull stack e mobile

● círculo: pesquisa e descoberta. ■ quadrado: design de produto. ▲ triângulo: desenvolvimento full stack e mobile. É a ordem do trabalho e a ordem do logo.
Use as formas no logo, como marcador dos três serviços (48 px no site) e como padrão gráfico em capas e fundos.
O marcador de rótulo é sempre o quadrado de 10 px.
Setas: o caractere → depois do texto em links e botões ("Ler o case →"). No hover, ele anda 4 px para a direita.
Não use biblioteca de ícones nem emoji.

07 / 12

Grade, borda e espaço

Conteúdo com até 1280 px (largura-maxima). Margem lateral de 16 px no celular, 20 px a partir de 640 px e 32 px a partir de 768 px (espaco-4, espaco-5, espaco-8).
Cabeçalho fixo de 64 px (altura-cabecalho) com borda inferior de 2 px.
Seções com 64 px em cima e embaixo no celular e 112 px a partir de 768 px (espaco-16, espaco-28).
Alterne seções pretas e claras para dar ritmo. Na seção clara, use os valores do tema claro.
Cartões, botões e campos: borda-2, raio-0, sem sombra. Botões trocam fundo e texto no hover.
Link e botão têm pelo menos 44 px de altura (area-de-toque).

Espaços

espaco-14pxEntre as formas do marcador; deslocamento da seta no hover.
espaco-28pxEntre itens de menu; respiro interno pequeno.
espaco-312pxEntre o quadrado e o rótulo de seção; entre ícone e texto.
espaco-416pxMargem lateral no celular; padding de botão.
espaco-520pxMargem lateral a partir de 640 px; do rótulo ao título de seção.
espaco-624pxDo título à intro; padding de cartão.
espaco-832pxMargem lateral a partir de 768 px.
espaco-1664pxTopo e base das seções no celular.
espaco-28112pxTopo e base das seções a partir de 768 px.

Medidas

Token	Valor	Uso
`raio-0`	`0px`	Tudo: botões, cartões, campos, imagens, ícone de app. A marca não arredonda.
`raio-circulo`	`50%`	Só o círculo das formas e recortes redondos que a plataforma impõe (foto de perfil).
`borda-2`	`2px`	Toda borda e divisória: cabeçalho, cartões, botões, campos, linhas de tabela.
`largura-maxima`	`1280px`	Largura máxima do conteúdo (max-w-7xl do site).
`altura-cabecalho`	`64px`	Cabeçalho fixo, mais 2 px de borda inferior. Âncoras param 72 px abaixo do topo.
`area-de-toque`	`44px`	Altura mínima de link e botão.

08 / 12

Imagens

Fotos em preto e branco: escala de cinza, brilho 0,62 e contraste 1,25, como as fotos da equipe no site.
Retratos também podem virar arte em ASCII, como no site.
Arte de case: palavras em JetBrains Mono negrito, letras espaçadas e "/" entre as partes (C R É D I T O / R U R A L), num bloco preto ou com borda.
Sem ilustração, banco de imagem colorido nem gradiente.

09 / 12

Movimento

Títulos de abertura sobem linha a linha: 0,9 s, curva cubic-bezier(0.2, 0.8, 0.2, 1), 140 ms entre linhas.
Seções entram ao rolar: sobem 24 px e aparecem em 0,8 s, com a mesma curva.
Formas podem se mexer devagar: girar um quarto de volta (6 s), deslizar para o lado (5 s) ou pulsar até 82 % do tamanho (4 s).
Com "reduzir movimento" ligado no sistema, nada se mexe e nada começa escondido.

10 / 12

Voz e escrita

A dtxtech escreve como os dois sócios falam com cliente: direto, concreto e sem jargão de agência.

Como soamos

"Nós" para o estúdio e "você" para quem lê: "Você fala direto com os dois, sem repasse entre equipes."
Frases curtas e afirmativas, com o fato no começo.
Números, setores e nomes no lugar de adjetivos: "9 anos de design de produto e 6 de desenvolvimento full stack e mobile, em bancos, varejo, food service, telemedicina e SaaS."
O processo cabe em pares de verbos: "Entender antes de desenhar, testar antes de construir."
Sem exclamação, sem emoji e sem superlativo ("o melhor", "inovador", "revolucionário").

Títulos

Caixa alta, uma ideia, ponto final: "DO DESIGN AO APP NO AR.", "PESQUISA, DESIGN E CÓDIGO NO MESMO LUGAR."
O rótulo da seção (mono) diz onde a pessoa está; o título diz o que importa: ■ SERVIÇOS → "PESQUISA, DESIGN E CÓDIGO NO MESMO LUGAR."
O rótulo de seção é igual ao item do menu.

Botões e links

Verbo e objeto, no infinitivo: "Mandar e-mail para o estúdio", "Ver os cases", "Ler o case →".
Se precisar de detalhe, ele vai numa segunda linha em JetBrains Mono, menor, como o endereço de e-mail embaixo de "Mandar e-mail para o estúdio".

Rótulos e metadados

Curtos, em JetBrains Mono caixa alta: "CASES", "SERVIÇOS", "ESTÚDIO".
Metadado na ordem número, área, período: "01 / DESIGN DE PRODUTO · 2023-2024".

Faça e evite

Faça	Evite
Pesquisa, design e código no mesmo lugar.	Soluções digitais completas para alavancar o seu negócio.
Você fala direto com os dois, sem repasse entre equipes.	Nossa equipe multidisciplinar está à sua disposição!
Entender antes de desenhar, testar antes de construir.	Metodologia ágil e centrada no usuário.
App em React Native para garçons, embarcado em máquinas POS.	Desenvolvemos um app incrível e inovador.
O lançamento é o começo.	Entregamos excelência de ponta a ponta.

Dois idiomas

O site existe em português e inglês. Cada peça fica num idioma só.
O nome, as formas, a caixa alta dos títulos e os rótulos mono seguem as mesmas regras nos dois.

11 / 12

Aplicações

Ícone do site

Ícone do site em 512 px

favicon.svg e favicon-32.png na aba do navegador; apple-icon-180.png na tela inicial do iPhone; icone-512.png e icone-app.svg onde pedirem ícone grande.
O ícone é sempre o símbolo em tinta, com cantos retos. Funciona igual em navegador claro e escuro, então um arquivo serve para os dois.

Cabeçalho do site

Use dtxtech-horizontal-fundo-escuro.svg com 16 px de altura no celular e 20 px a partir de 640 px.
O link do logo leva ao topo e tem pelo menos 44 px de altura.

Foto de perfil

foto-de-perfil-1024.png no LinkedIn, GitHub, WhatsApp Business e Instagram.
O símbolo já tem margem para o recorte redondo. Não aproxime nem corte.

Imagem de compartilhamento

Imagem de compartilhamento: logo, DO DESIGN AO APP NO AR. e a linha em mono

og-1200x630.png aparece quando alguém manda o link do site no WhatsApp, LinkedIn ou Slack. Coloque no og:image das páginas.
Logo pequeno no topo, o título da capa do site em titulo-capa e uma linha em mono.

Propostas e apresentações

Formato 16:9, fundo tinta, texto papel.
Título de slide em Archivo 900 caixa alta (titulo-secao); rótulo em mono com o quadrado antes; número da página em mono, "03 / 12".
Logo horizontal pequeno no canto superior esquerdo de todo slide; na capa, maior, com H de pelo menos 24 px.
Tabelas e caixas com borda-2 e raio-0. Sem foto colorida, sem gradiente, sem ícone.

Assinatura de e-mail

Só texto, mais o logo pequeno, para não cair no spam nem quebrar no celular:

Douglas Dias
Design de produto · dtxtech
nome@dtxtech.studio

Logo: dtxtech-horizontal-fundo-claro.png com 168 px de largura (a maioria dos e-mails abre em fundo claro).

Crédito nos sites dos clientes

Quando o site de um cliente levar crédito, use o rodapé: "Site feito por dtxtech" em meta, com dtxtech-formas-* a 10 px de altura antes do texto e link para o site do estúdio.
O crédito nunca briga com a marca do cliente: tom de texto-apoio do site dele, sem caixa nem fundo.

Documentos

Contrato, proposta em PDF e fatura: dtxtech-horizontal-fundo-claro.svg no topo à esquerda, com H de 12 px (cerca de 130 px de largura).
Texto em Archivo; números e referências em JetBrains Mono.

12 / 12

Arquivos

Baixar tudo .zip · 118,2 KB

Arquivos do logo

Todos em SVG, com o nome convertido em desenho (não dependem de fonte instalada). A horizontal também em PNG de 2400 px, fundo transparente.

dtxtech-horizontal-fundo-escuro.svg / .png: para fundo tinta. Formas em papel, grafite e prata; nome em papel.
dtxtech-horizontal-fundo-claro.svg / .png: para fundo papel. Formas em tinta, grafite-escuro e chumbo; nome em tinta.
dtxtech-horizontal-uma-cor-claro.svg: tudo em papel (#F2F2F2), para fundo escuro ou foto escura.
dtxtech-horizontal-uma-cor-escuro.svg: tudo em tinta (#060606), para fundo claro, carimbo e impressão a uma cor.
dtxtech-simbolo-fundo-escuro.svg / -fundo-claro.svg: o símbolo quadrado, sem fundo.
dtxtech-formas-fundo-escuro.svg / -fundo-claro.svg: só as três formas, em linha.
dtxtech-nome-fundo-escuro.svg (papel) / -fundo-claro.svg (tinta): só o nome.

Ícones e imagem do site

favicon.svg: ícone da aba, símbolo sobre tinta, 80 % do quadrado.
favicon-32.png: o mesmo em 32 px, para navegadores que não leem SVG.
apple-icon-180.png: tela inicial do iPhone.
icone-512.png e icone-app.svg: ícone grande (manifesto do site, lojas, integrações), símbolo em 62 % do quadrado.
og-1200x630.png: imagem de compartilhamento do link (og:image).

Foto de perfil

foto-de-perfil-1024.png e foto-de-perfil.svg: símbolo sobre tinta, com margem para o recorte redondo das redes. Use igual em LinkedIn, GitHub, WhatsApp Business e Instagram.