Documento interno
Identidade visual 4Space
Este guia define o uso correto da marca 4Space em materiais digitais e impressos. Destina-se à equipe, fornecedores e parceiros autorizados. Não divulgue como página pública de marketing; o acesso é por URL direta.
- ·Use apenas os arquivos e cores aprovados abaixo. Em dúvida, priorize contraste e legibilidade.
- ·Não distorcer, recortar sobre elementos concorrentes nem alterar proporções do logotipo.
Marca
Logotipo
Arquivos mestre em PNG: lockups verticais e símbolo isolado em 1024×1024; lockups horizontais em 1024×682. Escolha branco ou preto conforme o fundo; não inverta com filtros nem altere proporções.
Lockup vertical — branco
Fundo escuro ou colorido com contraste AA ou superior.
Lockup vertical — preto
Fundo claro, papel ou impressão em preto.
Símbolo — branco
Favicon, avatar e aplicações com pouca largura.
Símbolo — preto
Superfícies claras e uso mínimo da marca.
Lockup horizontal
Versão em linha: ícone à esquerda e wordmark à direita. Indicada para topo de página, e-mail institutional e layouts que exigem pouca altura.
Lockup horizontal — branco
Cabeçalhos de site, barras de navegação e faixas largas.
Lockup horizontal — preto
Fundos claros e documentos em largura total.
Arquivos em public/brand/: 4space-white.png, 4space-black.png, 4space-minimal-white.png, 4space-minimal-black.png, 4space-horizontal-white.png, 4space-horizontal-black.png.
Proteção
Área de respiro
Mantenha área livre ao redor do logo de, no mínimo, metade da altura do símbolo em todos os lados. Não posicione texto, ícones ou bordas dentro dessa zona.
A caixa tracejada ilustra a zona de exclusão; o padding é proporcional ao tamanho exibido do logo.
Versões
Monocromático
O conjunto monocromático oficial são as variantes PNG acima (vertical, horizontal e símbolo, em branco ou preto). Não aplique escala de cinza nem curvas sobre raster para simular outra cor: use sempre o arquivo correto. Para favicon ou ícone de app, prefira o símbolo isolado nas variantes minimal.
Sistema
Paleta de cores
Tokens definidos em globals.css. Use sempre os valores hex abaixo para consistência entre web, PDF e apresentações.
Background
#f8f8f8
--background
Foreground
#000000
--foreground
Primary (botões)
#000000
--primary
Primary foreground
#ffffff
--primary-foreground
Brand (dourado)
#c5a059
--brand
Card
#ffffff
--card
Secondary
#f0f0f0
--secondary
Muted
#ebebeb
--muted
Muted foreground
#666666
--muted-foreground
Accent
#f5f0e6
--accent
Border
#e5e5e5
--border
Ring (foco)
#c5a059
--ring
Raio de borda padrão de componentes: 0,5rem (--radius), alinhado ao tema do produto.
Tipografia
Famílias e hierarquia
O site utiliza Geist Sans para texto corrido e títulos, e Geist Mono para ênfases técnicas e código, carregadas no layout raiz da aplicação.
Display / H1
Soluções digitais para empresas
Seção / H2
Nossos serviços
Corpo
Texto de apoio em tom neutro, com peso regular e boa linha de leitura em telas e materiais institucionais.
Mono / código
npm run build — Next.js 15 · React 19- Pesos usados na interface: regular, medium e bold para hierarquia.
- Evite mais de três níveis de tamanho na mesma viewport.
Interface
Componentes de marca
Padrões de botão, cartão e link como aparecem no produto — reproduza estas combinações em landing pages e documentos internos.
Botão primário
Card
Título do bloco
Conteúdo secundário em tom neutro, borda sutil e fundo card.
Link inline
Saiba mais sobre nossos trabalhos ou volte ao início.
Tom
Voz da marca
- →Profissional e direto: priorize clareza sobre jargão; o cliente deve entender o valor em poucos segundos.
- →Orientado a resultado: conecte serviços a outcomes mensuráveis (eficiência, vendas, presença digital).
- →Confiança sem exageros: evite promessas vagas ou superlativos vazios; prefira casos e linguagem factual.