Brandbook + Design System
Tudo o que faz uma peça parecer SPT Fácil: o que a marca promete, como fala, como fotografa o campo, e as cores, tipos, componentes e modelos que a Arte One já usa nas artes e no site novo.
Parte I
Quem a SPT Fácil é antes de qualquer pixel. O que é fato vem com a fonte; o que é proposta da Arte One está sinalizado para validar com o cliente.
01 · Essênciaplataforma de marca
“Precisão no solo, velocidade na entrega” está no site desde o Wix e no rodapé de todas as artes. Tudo abaixo organiza o que essas peças já vinham dizendo.
Fato · site sptfacil.com.br e artes de mar–out/26Precisão no solo, velocidade na entrega.Assinatura da marca · ao lado da logo em toda peça
Promessa
A SPT faz a sondagem e entrega o relatório; quem decide a fundação é o projetista, com informação confiável na mão.
Proposta · validar com o clientePara quem
Quem vai construir ou ampliar e precisa conhecer o terreno antes do projeto: engenheiro, construtora e dono de obra em Curitiba e região metropolitana.
Proposta · área de atendimento é fato (Luiz, 06/10)Pilares de conteúdo
Por que sondar antes de escolher a fundação. “Seu terreno é viável?”
Água, camadas, aterro, terreno vizinho diferente.
Ensaio, boletim, relatório. O que o engenheiro procura.
Equipe, equipamento e obra real, com EPI e cuidado.
Dia do Geólogo, Dia das Crianças: afeto, sem empurrar serviço.
02 · Personalidadecomo a marca se comporta
Quatro traços para decidir rápido se uma peça, uma foto ou uma legenda está no tom.
Nomeia ensaio, camada, nível d’água
Jargão sem explicar
Uma pergunta, uma resposta curta
Parágrafo na arte
Foto real de campo, dado, norma
Garantia de que “nada vai trincar”
Agenda rápida, entrega no prazo
Pressa, “corre”, urgência falsa
03 · Voztexto na arte e na legenda
A peça faz uma pergunta que o dono da obra já se fez. A legenda explica o porquê técnico em poucas linhas e deixa claro que a sondagem dá os dados para o projetista decidir.
Na arte
Título curto em Anton, com a segunda metade em amarelo. Uma frase de apoio com o trecho-chave em negrito. Título sem ponto final (revisão do Paulo, 17/09).
Na legenda
Abre com a situação real, explica em 2 ou 3 frases e fecha com o que a sondagem entrega. Sem prometer resultado de obra.
No atendimento
Valor é negociado conforme a demanda; não vai para arte nem site (Luiz, 06/10). O convite é sempre para chamar no WhatsApp.
Dizemos
Evitamos
Anatomia da legenda
04 · Fotografiaestilo e direção
As melhores fotos do acervo têm o equipamento amarelo contra céu azul, equipe com EPI e solo à mostra. Foto com marca ou placa da Geoloc não entra: o Vilson pediu a troca no site em 29/09.
Fato · apontamentos do Vilson no Yep, 29/09/2026
Fotos do acervo enviado pelo cliente (abr e mai/26), as mesmas já usadas no site novo, sem as que têm marca da Geoloc.
Três famílias de foto
Tripé, sonda e equipe trabalhando. É a prova de que a SPT existe e está na obra. A família que mais aparece.
Mãos com solo, caixas de amostra, provetas e prensa. Mostra o cuidado com o dado, de perto.
A sondagem dentro de uma obra que o público reconhece: talude, galpão, ampliação. Quando for imagem gerada ou de banco, leva “Imagem ilustrativa”.
Direção
Dia aberto, sol de lado. O céu azul faz o amarelo do equipamento saltar. Evitar fim de tarde escuro sem contraste.
Tripé inteiro na vertical, de baixo para cima, ou fechado na mão, na haste, na amostra.
Capacete, colete e luva visíveis. Foto sem EPI não entra: é a marca falando de segurança.
Céu, vegetação ou obra limpa. Para a linha clara, a foto vai recortada no card inclinado.
Trabalhando, não posando. Rosto só com autorização, olhando para o serviço.
O que é de sondagem: tripé, sonda, hastes, amostrador. Nada de escavadeira ou torre de petróleo.
Tratamento de cor
Uma foto, três recortes
Guia rápido para a equipe fotografar em campo
Dois enquadramentos do acervo do cliente: o detalhe dá confiança, o tripé inteiro dá escala.
Evitar
Placa, adesivo ou pintura no equipamento. Pedido do Vilson em 29/09.
A marca fala de segurança. A foto também.
Escavadeira ou perfuratriz de petróleo confunde o serviço.
Imagem gerada leva “Imagem ilustrativa”, discreta, fora do assunto.
05 · Aplicaçõesa marca fora do post
Como a identidade aparece nos pontos de contato que o cliente vê antes de chamar no WhatsApp.
Perfil do Instagram
Parte II
As peças da marca, com nome, medida e regra de uso, prontas para virar arte, template ou código. Medidas em pixels no canvas de 1080 de largura.
06 · Corescalas e papéis
Quatro escalas de dez passos geradas em OKLab a partir das cores reais das peças. O passo com contorno é a cor da marca; os outros servem para fundo, borda e sombra sem inventar cor nova.
| bg.canvas | #F4F5F6 |
| bg.page | #FFFFFF |
| text.primary | #000000 |
| text.muted | #55524F |
| highlight | #FDB812 |
| corner | #FDB812 |
| tab.bg | #FDB812 |
| tab.text | #140D11 |
| bg.canvas | #140D11 |
| photo.veil | #140D11 |
| text.primary | #FFFFFF |
| highlight.start | #FDB812 |
| highlight.end | #E37F30 |
| cta.bg | #E37F30 |
| cta.text | #FFFFFF |
| rule | #FDB812 |
Proporção numa peça da linha clara: 62 névoa · 18 amarelo · 17 carbono e preto · 3 laranja. Hex de base amostrados da logo oficial e das artes de mar–out/26. O site novo usa tons muito próximos: amarelo #F7B21B e preto #0D0D0B.
07 · Tipografiaartes e site
As fontes saíram dos próprios arquivos do Paulo: Anton e Montserrat no modelo de março, mais Gotham Ultra e Bold nas chamadas em caixa alta de julho. Gotham não é gratuita; aqui ela aparece como Montserrat 800, a aproximação mais fiel. No site, a pedido do Vilson, é uma fonte só: Roboto.
Fato · fontes embutidas nos .ai de mar/26 e jul/26; Roboto no site desde 29/09ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
Anton · 400
Título da linha clara, com destaque em amarelo.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
Montserrat · 400, 500, 700, 800
Apoio, assinatura, botão, site e caixa alta (no lugar da Gotham).
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
Roboto · só no site
Título, texto e botão do site novo.
Valores no canvas de 1080 px, medidos nas artes de feed. Amostras ao lado em escala reduzida.
08 · Logoselo metálico
A logo é um selo inclinado: painel carbono com “SPT” escovado, painel amarelo com “fácil” em carbono, e um aro de aço em volta. Ela já traz o próprio fundo, então funciona no claro, no escuro e sobre foto. Na arte, vem quase sempre com a assinatura ao lado.
Sobre branco
Sobre névoa · linha clara
Sobre foto com véu · linha escura
Área de proteção = altura das letras “SPT” (X) em volta do selo.
Precisão no solo,Mínimo · 140 pxno canvas de 1080No site novo, o rodapé trocou o letreiro montado em texto pelo arquivo oficial da logo (versão de 29/09). Use sempre o PNG oficial: “Logo-SPT-Facil-oficial.png”, na pasta Social Media do cliente.
09 · Grid e formatosmargens e zona segura
Margem lateral de 48 px (medida nas artes: o texto termina a uns 44 px da borda) e grid de 6 colunas. Assinatura no topo a 96 px. No story, 250 px no topo e na base ficam livres para a interface do Instagram.
10 · Componentesblocos que montam as peças
Cada bloco tem nome, tamanho e fundo certo. Montar uma arte é escolher blocos, não desenhar do zero.
Precisão no solo,11 · Peçasmodelos montados com os componentes
Montados em HTML na medida real e reduzidos para caber na tela. Texto entre colchetes é para trocar; o resto segue a regra. Fotos do acervo do cliente.
Precisão no solo,Feed · Educativo · linha claraO modelo do Paulo (mar/26): canto amarelo, assinatura no topo, título à direita, duas fotos inclinadas e aba com o site.
Precisão no solo,Story · Educativo · linha claraMesma peça do feed, título à esquerda. Assinatura e aba respeitam os 250 px livres.
Precisão no solo,Feed · Chamada · linha escuraFoto inteira com véu carbono, chamada em caixa alta e botão laranja. Base: “Uma ampliação muda a obra” (jul/26).
Precisão no solo,Story · Data comemorativaFoto inteira, data em amarelo, sem oferta. Base: Dia das Crianças (09/10) e Dia do Geólogo (mai/26).
Precisão no solo,Carrossel · Como funciona · 3 slidesCapa com foto de campo, os três passos e o fechamento com convite. Modelo novo, ainda não produzido para o cliente.
Proposta · validar com o clientePeças reais de referência
Modelo do Paulo · mar/26Seu terreno é viável · feed
Modelo do Paulo · mar/26Obra bem planejada · feed
Tema aprovado pela Kelly · 08/10Uma ampliação muda a obra
Em aprovação interna · 08/10Nível da água · revisão 3
Em aprovação interna · 09/10Dia das Crianças · story12 · Legibilidademedida, não estimada
Contraste calculado pela fórmula WCAG 2.2 com os hex reais. A peça é vista num celular de cerca de 390 px de largura, então todo tamanho do canvas de 1080 cai a 36%.
| Amostra | Contraste | Nível | Uso |
|---|---|---|---|
| Solo 01 | 19.24:1 | AAA | Título e texto na linha clara |
| Solo 01 | 7.11:1 | AAA | Texto de apoio na linha clara |
| Solo 01 | 1.60:1 | Reprova | Destaque amarelo no claro (decorativo) |
| Solo 01 | 10.99:1 | AAA | Texto na aba e no canto amarelo |
| Solo 01 | 19.17:1 | AAA | Título branco na linha escura |
| Solo 01 | 10.99:1 | AAA | Destaque amarelo na linha escura |
| Solo 01 | 2.86:1 | Reprova | Botão laranja com texto branco (como está hoje) |
| Solo 01 | 4.80:1 | AA | Botão laranja escurecido (proposta) |
| Solo 01 | 6.70:1 | AA | Botão laranja com texto carbono (proposta) |
Tamanho mínimo
| Aviso legal e site | 22 px → 7,9 no celular |
| Assinatura ao lado da logo | 20 px → 7,2 |
| Frase de apoio | 30 px → 10,8 |
| Título | 76 px → 27 |
Regras
13 · Tokenspara template e código
Use no gerador de posts, no site ou no Figma. Nomes iguais aos desta prancha.
{
"color": {
"amarelo": {
"50": "#FFF9E4",
"100": "#FFEAC1",
"200": "#FEDA9C",
"300": "#FCCA70",
"400": "#FDB812",
"500": "#CE8F00",
"600": "#A16800",
"700": "#764300",
"800": "#4E2000",
"900": "#270000"
},
"laranja": {
"50": "#FFF6E9",
"100": "#FFDFC9",
"200": "#F9C8A9",
"300": "#F0B188",
"400": "#E89A64",
"500": "#E37F30",
"600": "#B35A00",
"700": "#843600",
"800": "#581200",
"900": "#2E0000"
},
"carbono": {
"50": "#FAFAFA",
"100": "#DCDCDC",
"200": "#BFBEBF",
"300": "#A3A2A2",
"400": "#878687",
"500": "#6D6B6C",
"600": "#545253",
"700": "#3C3A3B",
"800": "#252324",
"900": "#140D11"
},
"nevoa": {
"50": "#FAFAFA",
"100": "#F4F5F6",
"200": "#D2D4D6",
"300": "#B2B4B7",
"400": "#929599",
"500": "#74787C",
"600": "#575B60",
"700": "#3C4045",
"800": "#22272C",
"900": "#0B1015"
}
},
"semantic": {
"clara": {
"bg.canvas": "#F4F5F6",
"bg.page": "#FFFFFF",
"text.primary": "#000000",
"text.muted": "#55524F",
"highlight": "#FDB812",
"corner": "#FDB812",
"tab.bg": "#FDB812",
"tab.text": "#140D11"
},
"escura": {
"bg.canvas": "#140D11",
"photo.veil": "#140D11",
"text.primary": "#FFFFFF",
"highlight.start": "#FDB812",
"highlight.end": "#E37F30",
"cta.bg": "#E37F30",
"cta.text": "#FFFFFF",
"rule": "#FDB812"
}
},
"type": {
"family.display": "Anton",
"family.sans": "Montserrat",
"family.caps": "Gotham Ultra/Bold no original · Montserrat 800 como aproximação",
"family.site": "Roboto",
"title": "76/1.0 display 400",
"title.caps": "64/1.05 sans 800 caps",
"lead": "30/1.3 sans 400 (+700 no trecho-chave)",
"tagline": "20/1.15 sans 500/700 caps",
"label": "30/1.1 sans 800 caps +0.04em",
"cta": "32/1 sans 700 caps",
"url": "22/1 sans 500/700",
"legal": "22/1.3 sans 400"
},
"layout": {
"canvas.width": 1080,
"margin.side": 48,
"logo.top": 96,
"story.safe": 250,
"columns": 6,
"photo.skew": "-12deg",
"radius.photo": 28,
"radius.cta": 12,
"logo.min": 140
}
}
Baixar tokens.json
Parte III
O que a equipe precisa saber do cliente antes de produzir. Uso interno da Arte One.
14 · Na ponta da línguaatualizado em 09/10/2026
Sondagem SPT, mista e rotativa, e laboratório de solos. Site novo em revisão com o Luiz.Foco atual · site novo e posts educativos
Quem aprova
Kelly aprova os posts no grupo “MKT SPT Fácil | ArteOne”. Luiz acompanha o site e os serviços.
Três regras do cliente
“Perfuração”, nunca “furo”. Sem preço exposto. Curitiba e região metropolitana.
Onde fica
Rua Louis Esquier, 232 · Uberaba · Curitiba/PR · atendimento seg a sex, 9h às 18h
15 · Pessoas e canais
Site novo, serviços e setor ambiental. No grupo MKT desde 18/09.
Aprova os posts no grupo (“pode mandar que faço as aprovações”, 03/09).
Criou o modelo de arte e revisa site e peças no Yep.
Revisa site e vídeo, cuida do provedor do site com o cliente.
(41) 9 9851-0713 · contato@sptfacil.com.br
@sptfacil
Links
Acessos e credenciais ficam só no dossiê interno do Drive: “DOSSIE - SPT Fácil.md”.
16 · Pendênciasdono e próxima ação
Luiz · a versão com os ajustes de 06/10 (menu único, sem preço, região metropolitana) está no ar. Próxima ação: retorno dele sobre o conjunto.
Luiz · enviar a lista de serviços ambientais e fotos. Com o material, a Arte One monta a página no mesmo padrão.
SPT · boleto enviado pelo Vilson no grupo em 09/10. Pagar dentro de 5 dias evita a suspensão do serviço.
Luiz · o site traz 83.430-090 e o Google traz 81560-440. Confirmar o certo antes do site novo ir para o domínio.
Paulo e Vilson · Nível da água (revisão 3) e story do Dia das Crianças. Depois do ok, seguem para a Kelly no grupo.
Junior · perfil criado em 02/09 e ainda não verificado. Próxima ação: pedido de análise ao suporte do Google, texto já preparado.
17 · Histórico
Paulo cria o modelo de feed: canto amarelo, Anton + Montserrat, fotos inclinadas.
Cliente envia fotos de campo e laboratório; posts de abril e maio, com o Dia do Geólogo.
Cliente manda o “Conteúdo para Site 2026” no grupo.
Acessos Google e Instagram chegam pelo Paulo.
Perfil da Empresa no Google criado; Kelly assume as aprovações no dia seguinte.
Sete posts educativos com legenda enviados para aprovação.
Domínio verificado no Search Console; site ligado ao Perfil da Empresa.
Luiz pede o setor ambiental no site; decisão de fazer um site novo.
Rodadas de ajuste do site com o Vilson e o Paulo no Yep (v2 a v7).
Vídeo animado do tripé enviado no grupo.
Prévia do site novo enviada ao Luiz.
Ajustes do Luiz no ar: menu único, sem preço, região metropolitana.
Kelly aprova três posts: ampliação, terrenos vizinhos e solo irregular.
Story do Dia das Crianças; boleto do provedor no grupo; brandbook e design system v1.0.
Fontes conferidas em 09/10: grupo MKT SPT Fácil (Evolution), ClickUp, repositório do site novo, arquivos do cliente no Drive e memória da frente Arte One.