Manual da marca
Como a marca se apresenta
A referência de uso da marca Seventy Sete: símbolo, wordmarks, cores, tipografia e tom de voz. Vale para o produto, para o site e para qualquer peça que leve o nome.
Nomes
Um nome para cada coisa
Três marcas convivem e não são intercambiáveis. Trocá-las muda o que está sendo dito.
Seventy Sete
A empresa, sempre em duas palavras separadas. É quem assina contrato, nota fiscal e este site.
SeventySete
A marca da plataforma, escrita junta. Aparece no produto e no material da plataforma.
S7
A abreviação e o prefixo dos módulos: S7 Tasks, S7 Market, S7 Draw. Nunca "s7" em minúsculas num texto corrido.
Space
O workspace compartilhado do produto. Sempre com S maiúsculo e nunca traduzido — é um termo do produto, não uma palavra comum.
Símbolo
O monograma S7
Um "S" e um "7" desenhados sobre a mesma grade modular. É o único ativo de marca sem dependência externa, e por isso o padrão dentro do produto.
- Margem de respiro
- Um módulo de folga em volta do desenho, já embutido no arquivo. Nada — texto, borda ou outro logo — entra nessa margem.
- Tamanho mínimo
- Não use abaixo de 16 px de altura. Como é SVG, cresce sem limite; quem quebra é a leitura do "7" no tamanho pequeno.
- Fundo
- As duas cores foram escolhidas para funcionar sobre o tema claro e o escuro sem alteração. Não existe versão "para fundo escuro".
Variantes
Dentro de um app, só o símbolo. As wordmarks são para peças fora do produto — elas dependem de uma fonte externa que a política de segurança do app bloqueia.
Padrão da plataforma: favicon e marca em todos os apps. Sem dependência externa.
Marcas de produto
Cada produto tem a sua, derivada do mesmo sistema modular do símbolo: dois elementos, azul que contém e roxo que escapa, sobre o módulo de 320 e as quatro inclinações do triângulo 8-15-17. Nenhuma delas é ícone de interface — a marca vem primeiro, e o ícone só entra quando o produto ainda não tem marca desenhada.
Aplicação
O que fazer e o que não fazer
Faça
- Aplique sobre fundo claro ou escuro, sem trocar as cores.
- Respeite a margem de um módulo já embutida no arquivo.
- Use os arquivos oficiais deste manual como origem.
- Marque o símbolo como decorativo (alt vazio) quando o texto ao lado já nomeia a tela.
- Prefira o SVG: ele escala sem perder o traço.
Não faça
- Não recolora, não aplique gradiente e não inverta as cores.
- Não distorça, não rotacione e não altere a proporção.
- Não aplique sombra, contorno, brilho ou textura.
- Não redesenhe o símbolo nem substitua por um caractere de fonte.
- Não use as wordmarks dentro de um app: elas puxam uma fonte externa que a política de segurança bloqueia.
Cor
Paleta
Cores da marca
As duas cores do símbolo. São fixas: não mudam com o tema e não têm variação por contexto.
O "S" do símbolo e o "Seventy" das wordmarks.
O "7" do símbolo e o "Sete" das wordmarks.
Paleta da interface
A cor dentro do produto não é escolhida: é consumida como token. Cada token tem um valor por tema, e a interface troca sozinha.
| Token | Claro | Escuro | Uso |
|---|---|---|---|
| --tree-color-bg-primary | #f6f8fa | #1c2128 | Fundo da página. |
| --tree-color-bg-surface | #ffffff | #22272e | Superfície elevada: card, painel, menu. |
| --tree-color-bg-subtle | #eff2f5 | #2d333b | Faixa de apoio e estado hover discreto. |
| --tree-color-text-primary | #1f2328 | #adbac7 | Texto de leitura e títulos. |
| --tree-color-text-muted | #59636e | #95a3b2 | Texto secundário, legenda e metadado. |
| --tree-color-border-default | #d0d7de | #444c56 | Borda de card, campo e divisória. |
| --tree-color-brand-primary | #0969da | #559cf5 | Ação principal, link e foco. |
| --tree-color-brand-soft | #ddf4ff | #1a3453 | Fundo suave de destaque e seleção. |
| --tree-color-status-success | #197d36 | #5bae5e | Confirmação e estado saudável. |
| --tree-color-status-warning | #946300 | #c99227 | Atenção e limite se aproximando. |
| --tree-color-status-error | #d1242f | #f5766e | Falha, erro e ação destrutiva. |
| --tree-color-status-info | #0969da | #6cb6ff | Aviso neutro e informação de contexto. |
Nunca escreva um valor de cor direto no produto. Use var(--tree-color-…) — um token inexistente não dá erro, só entrega a cor errada em silêncio.
Tipografia
Como o texto se comporta
Duas famílias no produto e uma terceira só nas peças de marca. A escala é fechada — nenhum tamanho fora dela.
A marca fala com clareza
"Google Sans Flex", "Segoe UI", sans-serifTodo o texto do produto e deste site.
A marca fala com clareza
"Google Sans Code", "SFMono-Regular", monospaceTexto de máquina: identificador, token, endereço, código.
A marca fala com clareza
Gabarito, Poppins, "Century Gothic", Futura, sans-serifApenas dentro das wordmarks. Não use em interface — a fonte vem de um servidor externo.
Escala
Oito degraus. O nome do degrau é o que se usa, nunca o valor.
A marca fala com clareza
A marca fala com clareza
A marca fala com clareza
A marca fala com clareza
A marca fala com clareza
A marca fala com clareza
A marca fala com clareza
A marca fala com clareza
Tema
Claro e escuro, decididos pelo usuário
A interface segue o tema do sistema operacional de quem está usando. Não existe botão de troca, e nenhuma tela força um tema — quem escolheu escuro no sistema recebe escuro em todo lugar, inclusive nesta página.
Tom de voz
Como escrevemos
A escrita é parte da marca. Estas quatro regras resolvem quase toda dúvida de redação.
Claro antes de esperto
Diga o que a coisa faz. Uma frase que precisa ser relida perdeu, mesmo sendo bonita.
Concreto, sem superlativo
Nada de "revolucionário" ou "líder de mercado". Prefira o fato verificável ao adjetivo.
Direto e sem jargão
Fale com a pessoa, na segunda pessoa. Termo técnico entra quando é o nome certo, não para impressionar.
Honesto sobre o estado
O que está em desenvolvimento é anunciado como tal. Prometer pronto o que não está é a única forma de perder a confiança de uma vez.
Seventy Sete, SeventySete, S7, Space, Assistant e os nomes dos produtos são marcas: aparecem iguais em português, inglês e espanhol.
Arquivos
Baixe os originais
Todos em SVG, sem dependência externa. Se precisar de outro formato, gere a partir destes.
Padrão da plataforma: favicon e marca em todos os apps. Sem dependência externa.
A grade e as cotas que geram o símbolo. É especificação de design, não peça de aplicação.
A folha que documenta o sistema modular inteiro. Referência para redesenho, nunca para aplicação.
