Manual da marca
Protheus · Fluig · GoodData

# A TOTVS, perto de você.

Começar pelo logo Baixar assets
01 — Fundamentos

## A marca

A Mountain é especialista nas soluções onde mais entrega valor: Protheus, Fluig e GoodData. Este manual reúne tudo que a gente usa no dia a dia — logo, cores, tipografia, ícones, tom de voz e componentes.

Ideia condutora
A TOTVS, perto de você

Especialista de verdade, sem distância. Perto do cliente do começo ao fim.

Personalidade
Dinâmica Colaborativa Resolutiva

Somos o trusted advisor do nosso cliente.

Especialidades
Protheus — gestão (ERP)
Fluig — processos e colaboração
GoodData — analytics e BI
02 — Identidade

## Logo

O lockup Mountain combina o símbolo de barras ascendentes com o wordmark. Escolha a versão pelo fundo: colorida sobre branco, monocromática sobre cinza claro, branca sobre preto ou azul escuro.

### Versões

Colorida — sobre branco
Monocromática — sobre cinza claro
Branca — sobre azul escuro
Branca — sobre preto

### Símbolo isolado

Use o símbolo sozinho só quando o wordmark não couber: avatar, favicon, selo. Em peças institucionais, o lockup completo vem primeiro.

### Área de respiro e tamanho mínimo

Mantenha em volta do logo um respiro igual à altura do símbolo. Nada entra nessa área: nem texto, nem imagem, nem borda.

Tamanho mínimo: 24px de altura para o lockup e 16px para o símbolo em tela. Em impressos, 20mm de largura para o lockup.

### Usos proibidos

Compare lado a lado. À esquerda o certo, à direita o que não pode.

Certo proporção original
Errado esticar ou distorcer
Errado girar ou inclinar
Errado fundo sem contraste
Errado aplicar transparência
Errado sombras ou efeitos
03 — Identidade

## Cores e gradientes

O azul escuro é a âncora de toda composição. Os accents entram em doses pequenas. Nenhuma cor fora desta paleta é permitida. Clique em qualquer amostra para copiar o hex.

### Paleta principal

{{ c.name }}
{{ c.hex }}
{{ c.token }}

### Estendida (legado)

Mantida para peças e temas já existentes. Em trabalhos novos, prefira as quatro cores principais.

{{ c.name }}
{{ c.hex }}

### Escalas de apoio

Azul escuro (superfícies escuras e bordas)
{{ c.hex }}
Neutros (cinzas quentes, com leve viés violeta — nunca azulados)
{{ c.hex }}

### Gradientes

Dois sistemas, só em fundos — nunca em texto, ícones ou grafismos. Corporativo: azul escuro + um accent, sóbrio. Análogo: dois accents vizinhos, vibrante e tech. Branco e azul escuro ficam fora do análogo.

Corporativo
azul escuro → azul
Corporativo
azul escuro → roxo
Corporativo
azul escuro → limão
Análogo
azul → roxo
Análogo
azul → limão
Análogo
roxo → limão

### Cores funcionais

Só para estados de interface. Não entram em peças de marca.

{{ c.name }} {{ c.hex }}
04 — Identidade

## Tipografia

Uma família para tudo, dos títulos às legendas. Nunca misture com uma segunda fonte. Títulos grandes em peso light e apertados; corpo em regular; ênfase em bold.

Família
Sora

Sora é a face da marca. Uma só família para tudo: título, corpo e legenda. Nunca combine com uma segunda fonte.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

### Pesos

ExtraLight · 200 A TOTVS, perto de você
Light · 300 A TOTVS, perto de você
Regular · 400 A TOTVS, perto de você
SemiBold · 600 A TOTVS, perto de você
Bold · 700 A TOTVS, perto de você
ExtraBold · 800 A TOTVS, perto de você

### Escala

Escala de terça maior (1,25). Títulos com tracking apertado (-0.02em); corpo com entrelinha 1,55.

Display · 64px · 200 Display
H1 · 48px · 300 Título de página
H2 · 36px · 300 Título de seção
H3 · 28px · 600 Subtítulo
H4 · 22px · 600 Título de bloco
Corpo · 16px · 400 Texto corrido, o padrão de leitura em qualquer peça.
Legenda · 12px · 400 Apoio, créditos e notas de rodapé.
05 — Identidade

## Iconografia

Pictogramas simples, 2D, com o traço em primeiro lugar, numa grade de 24×24. Espessura de 1,5× o módulo, cantos arredondados e terminações curvas — combinando com o símbolo e a tipografia.

Família de ícones
Lucide

Estilo de linha, cantos arredondados, grade de 24 — é a família que atende a especificação e a única em uso. Espessura padrão de 1,75. Use sempre o mesmo conjunto na peça inteira; não misture com outras bibliotecas.

{{ ic.label }}
Cor

Ícones de uma cor usam só primárias: azul escuro, azul ou branco. Ícones de duas cores mantêm a maioria das linhas numa primária e usam um accent. Preto só sob limitação técnica.

Consistência

Não varie as cores dos ícones dentro de uma mesma peça. Escolha uma e mantenha do começo ao fim.

Emoji

Emoji vale no texto, com moderação, para reforçar emoção. Nunca como iconografia de interface.

06 — Identidade

## Fotografia e fundos

A imagem é ousada, dinâmica, orientada a movimento: ângulos inesperados e uso criativo de lentes. Luz ampla, neutra, natural — sem sombras duras.

Sim

- Cores vívidas mas genuínas
- Luz solar, ampla e neutra
- Elenco diverso, casual, confiante
- Neutro-quente no tratamento
- Ângulos e enquadramentos inesperados

Não

- Super-saturação ou cores acinzentadas
- Sombras duras e contraluz pesado
- Preto e branco
- Granulado forte
- Pose corporativa engessada

### Fundos

Cores sólidas da paleta ou os dois sistemas de gradiente. Em áreas de hero, canvas azul escuro com brilhos radiais leves. Sem padrões repetidos e sem textura.

07 — Linguagem

## Tom de voz

Português do Brasil, sempre. A gente fala em primeira pessoa do plural — "nós" ou o mais informal "a gente" — e em terceira pessoa como "a Mountain". Nunca primeira pessoa do singular.

Princípios

- Simplifique sem perder profundidade
- Divida em etapas claras — prefira listas
- Vá direto ao ponto, sem ser seco
- Fale simples, não simplista

Registro

Leve, direto, descontraído. Mais informal que formal, mas nunca desleixado. Evite termos e siglas em inglês: diga "unidades de negócio", não "BUs".

O tom muda com o contexto

Apresentar a marca, conquistar um novo cliente, resolver problemas, conduzir um treinamento — cada um tem seu tom e seus canais. Não reduza tudo a um só.

### Nunca

Abreviar: "tbm", "vc", "td" Tom formal e rebuscado Sisudo ou arrogante Atacar ou citar concorrentes Expressões pejorativas ou capacitistas Jargões como "usuário leigo" Primeira pessoa do singular

### Exemplos de copy

Menos burocracia, menos papelada. Mais segurança, mais praticidade.
Não esquenta, a gente tá junto pra resolver!

Emoji: sim, com moderação, para reforçar emoção ou storytelling 🚀 💡 🤝 — nunca substituindo palavras essenciais, nunca ambíguos. Em contexto institucional, use com parcimônia. Prefira linguagem neutra em gênero quando soar natural: "que bom ver vocês aqui!".

08 — Sistema

## Espaçamento e grid

Grade base de 4px. Largura máxima de conteúdo 1200px, com gutters de 32px. Todo espaçamento é múltiplo de 4.

{{ s.px }} {{ s.token }}

### Raios de canto

Suaves e arredondados, ecoando as terminações curvas do símbolo Mountain. Botões são sempre pill.

xs · 4px
sm · 8px
md · 12px
lg · 20px
xl · 28px
pill

### Sombras

Contidas e com tom frio. Institucionais, não chamativas.

xs
sm
md
lg
foco

### Movimento

Dinâmico, mas nunca quicando. Easing padrão cubic-bezier(.2, 0, 0, 1); durações entre 120ms e 320ms. Cards sobem 2px no hover; botões pressionados dão um scale de 0,975.

09 — Sistema

## Componentes

Os componentes abaixo são os reais do design system — pode interagir com eles. Foram construídos a partir dos fundamentos da marca, já que as fontes originais são um manual, não uma biblioteca de produto.

### Botões

Primário Accent Secundário Ghost Desabilitado
Pequeno Médio Grande
Inverso Accent sobre escuro

### Badges e tags

Neutro Marca Info Sucesso Atenção Erro
Protheus Fluig GoodData

### Formulários

### Superfícies e mensagens

Card padrão

Branco, raio de 20px, borda sutil e sombra suave. Interativo: sobe 2px no hover.

Card outline

Borda de 2px, sem peso de sombra. Para listas densas.

Card inverso

Azul escuro, para blocos de destaque dentro de seções claras.

Mensagem contextual em linha, com ícone opcional à esquerda. Sua solicitação foi registrada. Confira os campos destacados e tenta de novo.
10 — Aplicações

## Aplicações

Formatos prontos que já seguem o sistema. Use como ponto de partida em vez de montar do zero.

{{ a.size }}
{{ a.name }}

{{ a.desc }}

Regras que valem em toda peça

- Azul escuro ancora a composição; accent em dose pequena.
- No máximo duas cores de fundo por peça ou apresentação.
- Gradiente só no fundo — nunca em texto, ícone ou grafismo.
- Uma família tipográfica, com títulos em light e apertados.
- Área de respiro do logo preservada, sem efeitos.
- Em slide 1920×1080, texto nunca abaixo de 24px.

11 — Registro

## A Mountain por aí

Onde a gente esteve. São registros de eventos e bastidores no ecossistema TOTVS — valem como memória e prova de presença, não como referência de produção.

Estas fotos não definem a direção fotográfica da marca. Para produzir imagem nova, siga o item 06 — Fotografia e fundos.

{{ r.name }}

{{ r.desc }}

12 — Assets

## Downloads

Arquivos do logo Mountain. Prefira SVG sempre que o meio aceitar — PNG só quando não houver alternativa.

{{ d.name }}
{{ d.format }}
Baixar
Pacote completo
O design system inteiro

Tokens, componentes, guidelines, UI kit, os dez templates e todos os assets — já na estrutura de skill, prontos para instalar. 2,1 MB.

Baixar o .zip
Manual da marca Mountain — Protheus · Fluig · GoodData
{{ toastText }}