# Mountain (TOTVS) Design System

Um design system de marca + UI da **Mountain**, uma **parceira homologada TOTVS**. A Mountain é especialista nas soluções TOTVS onde mais entrega valor — **Protheus, Fluig e GoodData** — dentro do ecossistema TOTVS mais amplo. A Mountain **não** possui identidade autoral própria: ela *herda* a identidade TOTVS e documenta como a franquia se apresenta dentro dela. A ideia condutora é **"A TOTVS, perto de você"** — o cliente deve reconhecer a TOTVS primeiro e, em seguida, sentir a proximidade local.

> As regras de marca TOTVS aqui são normativas: cores, persona, tom e composição seguem a identidade oficial e não são invenção nossa.

## Fontes
- **`uploads/PHOTO-2026-06-22-17-49-26.jpg`** — o logotipo da Mountain (barras coloridas ascendentes + "Mountain" em branco sobre `#002233`). Recortado para `assets/logo-mountain-dark.png` e **vetorizado** (traçado a partir do upload, com as barras ajustadas à paleta exata da marca) para `assets/logo-mountain.svg`.
- Os arquivos oficiais de cor, tipografia, logo e grafismo da TOTVS **não foram fornecidos** — daí as ressalvas no fim deste documento. Contato de marca para aprovações: **marca@totvs.com.br**.

---

## FUNDAMENTOS DE CONTEÚDO
Como a Mountain escreve, seguindo a linguagem da marca TOTVS:

- **Idioma:** português do Brasil, sempre. Evite termos e siglas em inglês — diga "unidades de negócio", nunca "BUs / business units".
- **Pessoa / voz:** primeira pessoa do plural — **"nós"** ou o mais informal **"a gente"**; terceira pessoa **"a TOTVS"** (nunca "Grupo TOTVS"). Nunca primeira pessoa do singular. Isso mantém a marca próxima, mas especialista, não "excessivamente amigável".
- **Personalidade:** **Dinâmica · Colaborativa · Resolutiva.** Ideia de marca: *"Somos o trusted advisor do nosso cliente."* Não traduza "trusted advisor" literalmente.
- **Princípios:** simplifique sem perder profundidade · divida em etapas claras (prefira listas) · vá direto ao ponto (sem ser seco/formal) · fale simples, não simplista (mostre sempre personalidade).
- **Registro:** leve, direto, descontraído — mais informal que formal, mas nunca desleixado. **Nunca** abrevie ("tbm", "vc", "td"); **nunca** formal/rebuscado; nunca sisudo ou arrogante.
- **O tom muda conforme o contexto** — *apresentar a marca* / *conquistar um novo cliente* / *resolver problemas* / *conduzir um treinamento*, cada um com seus próprios canais. Não reduza tudo a um só tom.
- **Emoji:** sim, com moderação, para reforçar emoção ou storytelling (ex.: 🚀 💡 🤝) — nunca substituindo palavras essenciais, nunca ambíguos. Em contextos institucionais, use com parcimônia.
- **Nunca:** atacar concorrentes (nunca os nomeie); expressões pejorativas/capacitistas/de gênero; jargões como "usuário leigo". Prefira linguagem neutra em gênero quando soar natural ("que bom ver vocês aqui!").
- **Exemplos de copy:** "Menos burocracia, menos papelada. Mais segurança, mais praticidade." · "Não esquenta, a gente tá junto pra resolver!" · "Tem TOTVS em tudo!"

---

## FUNDAMENTOS VISUAIS
- **Cor primária:** azul escuro **`#002233`** — a âncora de toda composição. Branco e azul `#00dbff` completam o conjunto primário.
- **Secundárias:** roxo `#a44dff`, rosa `#ff009e`, verde `#00ffd4`. **Terciárias:** laranja `#ff8900`, limão `#d9ff65`. Nenhuma cor fora dessa paleta é permitida.
- **Gradientes:** dois sistemas, **apenas em fundos** (nunca em texto, ícones ou grafismos). *Corporativo* = azul escuro + uma de {azul, roxo, verde} a 100% de opacidade (sóbrio). *Análogo* = duas cores vizinhas da paleta (vibrante, tech). Branco e azul escuro ficam de fora do tipo análogo.
- **Tipografia:** uma família para tudo, dos títulos às legendas; nunca misturada com uma segunda fonte. Títulos grandes em peso **light** (200–300) e apertados (`-0.02em`); corpo em regular; ênfase em bold. Seis pesos (ExtraLight → ExtraBold). Substituída por **Sora** (ver ressalvas).
- **Espaçamento:** grade base de 4px; largura máxima de conteúdo 1200px, gutters de 32px.
- **Raios de canto:** suaves e arredondados, ecoando as terminações arredondadas do símbolo TOTVS — 8/12/20/28px + pill. Botões têm formato pill.
- **Fundos:** cores sólidas da paleta ou os dois sistemas de gradiente; canvas azul escuro com leves brilhos radiais de cor em áreas de hero. Sem padrões repetidos, sem malha de favo/hexágonos (explicitamente proibido), sem texturas no grafismo.
- **Grafismo assinatura:** um *hexágono extrudado* (uma forma 3D em anel sob projeção ortográfica — sem ponto de fuga), apenas em azul escuro / azul / roxo. **Não** é um hexágono regular. Os arquivos 3D oficiais não foram fornecidos, então esse sistema é documentado, mas **não reconstruído** aqui (nunca redesenhe assets da marca).
- **Imagem / fotografia:** ousada, dinâmica, orientada a movimento; ângulos inesperados e uso criativo de lentes. Luz ampla, neutra, natural (solar) — sem sombras duras. Cores vívidas mas genuínas (não super-saturadas, não acinzentadas). Elenco diverso, casual, confiante, positivo. Neutro-quente, não p&b, sem granulado pesado.
- **Sombras:** contidas, com tom frio (`rgba(0,34,51,...)`), institucionais — xs/sm/md/lg. Anel de foco = brilho ciano de 3px.
- **Movimento:** dinâmico mas nunca "quicando" ("sem ser inconsequente"). Easing padrão `cubic-bezier(.2,0,0,1)`, 120–320ms.
- **Estados de hover:** botões primários escurecem (`#0a3345`), o ciano accent escurece (`#00c4e6`), ghost/secundário ganham leve tom escuro; cards sobem `-2px` + aprofundam a sombra. **Pressionado:** `scale(.975)` sutil.
- **Bordas:** 1px neutra sutil (`#d2dde3`) em superfícies claras, 2px azul escuro forte para botões/inputs outline; `rgba(255,255,255,.12)` sobre escuro.
- **Cards:** brancos, raio de 20px, borda sutil de 1px + sombra suave; também variantes `outline` (2px) e `inverse` (azul escuro).
- **Transparência / blur:** usados no header fixo (`rgba(0,34,51,.92)` + blur) e no scrim do dialog (`rgba(0,24,36,.55)` + blur de 2px); o logo em si nunca deve receber transparência.

---

## ICONOGRAFIA
- **Especificação (TOTVS):** pictogramas simples, 2D, com traço em primeiro lugar, numa **grade de 24×24**, espessura = **1,5× módulo**, **cantos arredondados e terminações curvas** (combinando com símbolo/tipografia). Ícones de uma cor usam apenas primárias (azul escuro / azul / branco); ícones de duas cores mantêm a maioria das linhas em uma primária + um accent. **Não varie as cores dos ícones dentro de uma mesma peça.** Preto só sob limitação técnica.
- **Substituição:** o conjunto oficial de ícones TOTVS não foi fornecido. Usamos **Lucide** (CDN: `unpkg.com/lucide`) — estilo de linha, arredondado, grade 24 — via o componente `Icon` (espessura padrão 1.75). ⚠️ Ressalva: trocar pelo conjunto oficial quando disponível.
- **Emoji:** permitido no copy conforme o guia de linguagem (ver Fundamentos de Conteúdo), não como iconografia de UI.
- **Assets de logo/grafismo:** nunca desenhados à mão — referencie os arquivos oficiais. O único asset presente é o logotipo da Mountain (`assets/logo-mountain-dark.png`).

---

## Índice / manifesto
Raiz: `styles.css` (entrada de imports) · `tokens/` (cores, tipografia, fontes, espaçamento, efeitos) · `guidelines/cards/` (cards de especimen dos fundamentos) · `components/` · `ui_kits/` · `assets/` · `thumbnail.html` · `SKILL.md`.

### Componentes (`window.MountainTOTVSDesignSystem_ab1e2e`)
- **core/** — `Icon`
- **forms/** — `Button`, `IconButton`, `Input`, `Select`, `Checkbox`, `Radio`, `Switch`
- **feedback/** — `Badge`, `Tag`, `Alert`
- **surfaces/** — `Card`, `Dialog`

### UI kits
- **ui_kits/mountain-site/** — homepage interativa de marketing da Mountain, parceira homologada TOTVS (header, hero, unidades de negócio, seção trusted-advisor, dialog de contato, footer).

### Adições intencionais
- **Icon** — um wrapper de Lucide. A TOTVS define um *sistema* de ícones, mas não entrega um componente React; isso dá aos designers um glifo consistente e on-grid no estilo da marca.
- As primitivas reutilizáveis de UI (Button, Input, Card, …) são um conjunto padrão criado a partir dos fundamentos da marca — as fontes são um **manual de marca**, não uma biblioteca de componentes de produto, então não existia inventário proprietário de componentes para espelhar.

---

## RESSALVAS (precisam do seu input)
1. **Fontes** — a **tipografia proprietária TOTVS** (restrita por direitos autorais) não foi fornecida. Substituída por **Sora** (Google Fonts). Compartilhe as webfonts licenciadas da TOTVS para substituí-la.
2. **Ícones** — o **Lucide** substitui o conjunto oficial de ícones TOTVS. Envie os ícones/sprite reais se tiver.
3. **Grafismo (hexágonos 3D)** e os **arquivos oficiais do logo TOTVS** não foram fornecidos e são intencionalmente **não reconstruídos** (o manual proíbe redesenhar assets TOTVS). O **logotipo da Mountain é a marca própria da empresa**, então o vetorizei a partir do seu upload (`assets/logo-mountain.svg`) — um traçado fiel de pixels (nítido em tamanhos de exibição, levemente encorpado em zoom extremo); envie o vetor original para um arquivo mais nítido. Forneça os arquivos oficiais do grafismo e do logo TOTVS para adicioná-los como assets reais.
4. **Co-branding TOTVS** — como **parceira homologada** (não franquia), a Mountain **não usa** o lockup co-branded "TOTVS + unidade", restrito a sinalização de franquias pelo manual. Este DS nomeia a parceria textualmente e vincula ao certificado de homologação em vez de inventar um lockup.
