v1.0 · Biblioteca de Marca · Uso Interno

Manual da Marca
Code to You Tech

A referência única e viva da identidade — da estratégia ao pixel. Documento em evolução: sempre que a marca crescer, ele cresce junto.

01 — Essência da Marca

Por que existimos

Construímos e mantemos sistemas, automações e soluções com IA para PMEs — com uma diferença: você enxerga exatamente o que está sendo feito e por quê, do começo ao fim.

Missão

Desenvolver soluções que reduzem tempo perdido e aumentam a efetividade de PMEs e empreendedores individuais.

Visão

Ser referência boutique em automação e sistemas sob medida — crescendo em reputação, não em burocracia.

Matriz de personalidade

Técnica / especialistaSimples / acessível
Séria Descontraída
Premium / exclusivaPé no chão
InovadoraConfiável / estável
DistantePróxima
Régua negativa — o que nunca somos
  • Vendedores de promessa mágica
  • Caixa-preta sem explicação
  • Gambiarra "pra ontem"
  • Jargão pra impressionar
  • Some depois da entrega
  • Preço como único argumento
Personalidade em 3 palavras

Transparente ·
Competente ·
Próxima

Arquétipo: o Sábio com o calor do Companheiro. Referência de espírito: Anthropic.

Valores inegociáveis

01
Honestidade
Não vendemos o que não entregamos.
02
Transparência
Você vê o que é feito e como.
03
Efetividade
Resolve de verdade — não só existe.
04
Fidelidade ao pedido
Sem inventar escopo.
05
Domínio técnico
Código de verdade, não gambiarra.
02 — Paleta de Cores

Azul-petróleo, linho e âmbar

Clique em qualquer cor para copiar o hex. O petróleo carrega a confiança técnica; o linho dá o respiro boutique; o âmbar é o toque humano — o "to You".

70% Petróleo25% Linho5%
Texto sobre claro: Grafite (#1B2C30). Nunca âmbar em texto corrido.
Texto sobre escuro: Linho ou Névoa. Contraste sempre ≥ 4.5:1.
Âmbar: só como acento — no máximo 5% da área. Nunca como fundo grande.

Gradiente

✓ Petróleo → Maré (frio, o oficial)
✕ Petróleo → Âmbar (embaça no meio)
03 — Tipografia

Publica Sans — geométrica e sólida

Uma sans geométrica, moderna, legível em telas pequenas. A personalidade vem do peso e do respiro. Outfit é a substituta livre quando a Publica Sans não estiver instalada.

Displayaté 64px · peso 700 · lh 1.0 · tracking -0.025emCapas e heros. Uso raro, alto impacto.
Automação que você entende
H1 · Título40px · peso 700 · lh 1.05 · tracking -0.02emTítulos de seção.
Automação que você entende
H2 · Subtítulo28px · peso 700 · lh 1.15 · tracking -0.015emDivisões dentro da seção.
Automação que você entende
H3 · Bloco20px · peso 700 · lh 1.3Títulos de card e bloco.
Automação que você entende
Corpo16px · peso 400 · lh 1.6Texto corrido. 60–75 caracteres por linha.
A gente te mostra como funciona — e faz funcionar, com transparência do começo ao fim.
Rótulo12px · peso 600 · lh 1.2 · tracking 0.22emEyebrows e etiquetas. Sempre CAIXA ALTA.
Feito para você
04 — Logo

Monograma CY + assinatura

Anatomia

Traço contínuo entrelaçado formando C + Y. Escondido no Y, o > do prompt de terminal — código, terminal e automação num só gesto. Cor sempre via gradiente frio.

Variações

Gradiente · claro
Gradiente · escuro
Ícone de app
Sólido · pequeno

Área de proteção

Deixe ao redor um respiro ≥ à altura do C.

Tamanho mínimo

Ícone: 24px de altura (o > precisa aparecer). Lockup completo: 110px de largura.

Usos incorretos

✕
DistorcerNunca esticar
✕
GirarMantenha na horizontal
✕
RecolorirSó cores da paleta
✕
SombraSem sombra/contorno
✕
InclinarSem itálico falso
05 — Elementos Visuais

Gradiente, prompt e respiro

Gradiente frio

Petróleo → Maré. A cor flui pelo traço, nunca em blocos.

O prompt >

>_

O chevron do terminal é a assinatura conceitual da marca.

Respiro

Muito espaço negativo. Minimalismo premium: sofisticação por subtração.

Iconografia

Ícones de traço (line), cantos arredondados, peso consistente com o monograma. Nunca preenchidos pesados.

06 — Grid & Layout

Estrutura de página

Como organizar qualquer tela ou peça — grade, respiro e ritmo consistentes, tudo derivado da escala de 4px.

Contêiner & margens

Largura máxima do conteúdo: 1140px, centralizado. Margens laterais: 24px no mobile, indo a auto no desktop. Nunca cole o conteúdo na borda.

Grade de 12 colunas

Gutter de 16–24px. Componha em 12, 6, 4 ou 3 colunas — sempre múltiplos que fecham 12.

Escala de espaçamento — base 4px

Todo espaço (padding, gap, margem) sai desta escala. Consistência > improviso.

4px
8px
12px
16px
24px
32px
48px
64px
96px

Breakpoints

FaixaLarguraColunasMargem lateral
Mobile< 640px416–24px
Tablet640 – 1024px824–32px
Desktop> 1024px12auto · máx 1140px

Anatomia da página

Header enxuto → Hero (a tese) → seções com ritmo → rodapé. Um destaque por tela.

Ritmo & respiro

  • Entre seções: 96px (desktop) / 64px (mobile)
  • Entre blocos: 24–32px
  • Dentro de um card: 16px
  • Texto corrido: 60–75 caracteres por linha
  • Um foco por composição — o resto, silêncio.

Padrões de layout

Hero
Título + subtítulo + 1 CTA. A tese da página.
Grade de serviços
Cards iguais em 3 colunas.
Split
Texto de um lado, imagem/visual do outro.
Linha de números
Provas sociais / métricas em faixa.
Faixa de CTA
Bloco petróleo com chamada + botão.
07 — Componentes UI

A interface da marca

Uma biblioteca base construída inteiramente com os tokens (seção 10). Todos os estados e variações que você precisa pra montar telas consistentes.

Botões
Variantes
Tamanhos
Estados
Formulários
A gente nunca compartilha seu contato.
Número incompleto.
Feedback

Badges & status

✓ EntregueNovoAtenção

Alertas

💡 A gente te avisa em cada etapa — sem surpresa.
✓ Automação publicada com sucesso.
⚠ Pagamento pendente há 3 dias.

Passe o mouse: o que é automação?Fazer o sistema trabalhar sozinho por você.

Navegação
Automação, sistemas sob medida e IA aplicada para PMEs.
Você acompanha cada etapa — do levantamento à entrega, sem caixa-preta.
Manutenção contínua opcional: a gente não some depois da entrega.
Trilha
Páginas
Filtros
TodosAutomaçãoSistemasIA
Dados
10
dias de entrega
100%
acompanhado
0
surpresa
Progresso
EtapaStatus
LevantamentoConcluído
DesenvolvimentoEm curso
TestesPendente
Conteúdo
Code to You Tech
Avatar / monograma
"Finalmente alguém que me mostra o que está fazendo."
Vocês somem depois da entrega?
Nunca. Oferecemos manutenção contínua opcional.
Quanto tempo leva?
Depende do escopo — a proposta traz o cronograma completo.
Cards
Automação

Card de serviço

Faço seus sistemas conversarem entre si — e você acompanha cada etapa.

Projeto
R$ —/sob medida
  • Escopo definido junto
  • Você acompanha tudo
  • 30 dias de ajustes
Manutenção ★
R$ —/mês
  • Suporte contínuo
  • Pequenos ajustes
  • A gente não some
08 — Aplicações

A marca no mundo

Bruno Araújo
Code to You Tech · Automação & Sistemas
✉ contato@codetoyou.tech · 🌐 codetoyou.tech

Cartão, assinatura, WhatsApp Business, proposta e contrato já produzidos no kit da marca (pasta cty_branding/).

09 — Do's & Don'ts

O que fazer e o que evitar

Faça Marca

  • Gradiente frio sobre fundo adequado
  • Respeitar a área de proteção
  • Versão sólida em tamanhos pequenos
  • Preservar o > do prompt
  • Âmbar em doses (≤5%)

Evite Marca

  • Distorcer, girar, inclinar
  • Cores fora da paleta
  • Sombra ou contorno no logo
  • Âmbar como fundo grande
  • Encher os vãos do traço

Tom de voz

Não fale assimOfereço soluções de RPA e integração via API com arquitetura escalável.
Fale assimFaço seus sistemas conversarem entre si, pra você parar de digitar a mesma coisa duas vezes. Te mostro como funciona antes de começar.
Não fale assimSegue orçamento em anexo.
Fale assimMontei a proposta separando o que você ganha, como vou fazer e quanto custa. Qualquer ponto, a gente ajusta junto.
10 — Tokens CSS

Design tokens

Estes tokens alimentam este próprio brandbook. Copie e cole no seu projeto.

tokens.css
:root {
  /* Paleta */
  --color-primary:    #0F4C5C;   /* petróleo */
  --color-secondary:  #2E7A85;   /* maré */
  --color-background: #F4EFE3;   /* linho */
  --color-text:       #1B2C30;   /* grafite */
  --color-muted:      #56696D;
  --color-accent:     #E4A063;   /* âmbar */
  --color-primary-deep: #072A31;
  --color-mist:         #7FB0B4;
  --grad-cool: linear-gradient(120deg, #072A31, #2E7A85);

  /* Tipografia */
  --font-heading: "Publica Sans", "Outfit", system-ui, sans-serif;
  --font-body:    "Publica Sans", "Outfit", system-ui, sans-serif;

  /* Espaçamento — escala 4px */
  --space-4: 4px;   --space-8: 8px;   --space-12: 12px;  --space-16: 16px;
  --space-24: 24px; --space-32: 32px; --space-48: 48px;  --space-64: 64px;  --space-96: 96px;

  /* Bordas */
  --radius-sm: 6px;  --radius-md: 12px;  --radius-lg: 20px;  --radius-full: 9999px;
}
Code to You Tech · Brandbook v1.0 · Documento vivo Código de verdade, feito para você.
Copiado!