Nunca publicar dado pessoal de terceiros
Nome, salário, telefone, ficha de saúde ou identificação de funcionário, cliente ou candidato fica fora — mesmo em print de sistema próprio.
O sistema por trás do site.
Tudo nesta página está sendo renderizado pelo mesmo CSS das páginas públicas. Se algo mudar em assets/css/arco.css, muda aqui junto — é documentação que não tem como ficar desatualizada.
01 / Marca
Assinatura e emblema.
Regras de aplicação
- → Ink sobre paper; paper sobre space ou ink
- → Sem sombra, contorno, gradiente, distorção ou 3D
- → Não alterar a proporção entre wordmark, LABS e emblema
- → Área livre mínima: a altura do L de LABS
- → Emblema isolado só em tamanho pequeno
Assinatura 02B — Trajetória, aprovada em 22/09/2026. Kit oficial em 02 - Marca/logo/final/. O lettering é proprietário e não deve ser trocado por Bricolage. A vetorização fiel segue como etapa técnica futura.
02 / CorSete tokens,
Sete tokens,
um acento por composição.
paper#F8F5ED
base clara
base clara
ink#242324
texto e ação
texto e ação
space#0C161B
sistemas e dados
sistemas e dados
mist#D6E5DF
texto no escuro
texto no escuro
lilac#C2BEF2
campo editorial
campo editorial
signal#D1EE87
atenção no escuro
atenção no escuro
amber#E7A45C
atmosfera
atmosfera
Regras
- → Um acento dominante por composição — sinal em tudo não significa nada
- → Alternar seções claras e escuras para dar ritmo
- → Sobre signal, o texto é sempre escuro
- → Âmbar é luz e matéria, não cor-assinatura fixa
Fora do sistema
- × Coral #FF6B6B — identidade antiga, aposentada
- × Rosa e pêssego — rejeitados pelo fundador
- × Azul acinzentado #A7BCCB — em avaliação, ainda não aprovado
03 / TipografiaTrês famílias,
Três famílias,
papéis que não se misturam.
Boas ideias ganham órbita
Da estrutura à expressão
CRM que o time realmente usa
Desenhamos operações, conectamos dados e construímos produtos com IA. Do primeiro processo ao sistema que sua equipe usa todos os dias.
CAPACIDADES / UMA OPERAÇÃO CONECTADA
Rótulo não substitui corpo de texto: se a informação precisa ser lida, ela é texto. Inter saiu do sistema na v2.
04 / Espaço
Escala de oito.
8
16
24
32
48
64
96
Respiro maior entre capítulos, agrupamento próximo para informação relacionada. Cantos de 3px, divisórias de 1px, grid de duas colunas que vira uma no celular.
05 / Componentes
As peças que se repetem.
Botões e links
Os mesmos botões no escuro
Chips de stack
API · Node e TypeScript
Dados · Postgres
MCP · agente e sistema
Comparativo é / não é
É isto
- → Afirmação concreta e verificável
Não é
- × Promessa que não dá para sustentar
Passos numerados
Diagnóstico
O que trava hoje.
Desenho
Como resolver.
Implantação
Colocar no ar.
Ajuste
Acompanhar o uso.
06 / Arquétipos de layoutOnze páginas,
Onze páginas,
nenhuma igual à outra.
Cada página usa uma combinação diferente destes blocos. A regra é simples: duas páginas vizinhas no percurso não repetem o mesmo arquétipo de abertura nem a mesma seção de destaque.
Abertura
Hero dividido
.hero — texto à esquerda, objeto à direita. O padrão das páginas de oferta.
Abertura
Cósmico
.cosmos — largura total, texto centrado sobre a arte. Usado no Lifesystem.
Abertura
Retrato
.object.portrait — foto vertical com véu e rótulos sobrepostos. Usado no Sobre.
Seção
Índice editorial
.indice — lista numerada de largura total, com realce ao passar o mouse.
Seção
Lateral fixa
.fixo — título ancorado enquanto a lista rola ao lado.
Seção
Zigue-zague
.zig — arte e texto alternando de lado a cada linha.
Seção
Mosaico
.bento — grade de células de tamanhos diferentes, com destaque.
Seção
Faixa tipográfica
.faixa — uma frase grande, sem cabeçalho de seção.
Transição
Marquee
.marquee — faixa em movimento contínuo, pausa ao passar o mouse.
07 / Ilustração
Biblioteca própria.
Todas em SVG, desenhadas para a casa. Nenhuma é captura de tela real: mockup de produto usa dado fictício e é identificado como tal.
08 / Movimento
Prática, ainda não assinatura.
O movimento introduz ritmo e evidencia mudança de estado — não decora. Estas são as regras em vigor; a assinatura definitiva continua em aberto.
Animação dentro do SVG
Heros e diagramas animam por CSS no próprio arquivo, carregados com <object> e não <img>.
Revelação no scroll
Blocos entram escalonados em 70ms. O que já está visível na abertura aparece na hora.
Estado base visível
Nada fica escondido esperando evento. Se a animação falhar, o conteúdo aparece igual.
Respeito à preferência
Tudo dentro de prefers-reduced-motion: quem desativou movimento vê a página parada.
09 / Regras de publicaçãoAs quatro travas
As quatro travas
inegociáveis.
Aprendidas na prática, construindo os cases deste site. Valem para qualquer peça — site, carrossel, proposta ou apresentação.
Nenhum valor financeiro sem decisão explícita
Print com R$ na tela fica fora ou entra desfocado. Faturamento da casa não é material de marketing por padrão.
Nenhum resultado quantitativo sem evidência
Sem número estimado, sem percentual inventado. Se não dá para verificar, não entra como resultado.
Nenhuma taxa de concorrente sem reconferir
Comparativo com número alheio exige fonte revalidada na data da publicação.
A fonte completa da marca é 02 - Marca/brand-guidelines.md (v2). Esta página é a face visual dele.