# Atlas Vértice — Design System 1.0

10 de setembro de 2026 · Identidade aprovada · Catálogo executável

O [Design System](/design-system) reúne a identidade Vértice, fundamentos, componentes reais e um laboratório de movimento. A rota antiga `/design` redireciona somente a página; os arquivos em `/design/*` continuam disponíveis. Os exemplos são locais e fictícios: não consultam clientes, enviam e-mails, criam sessões ou realizam operações remotas.

## Identidade

Vértice é a única identidade oficial. O ápice separado comunica direção; as aberturas e a proporção do símbolo fazem parte do arquivo mestre. As propostas históricas não são alternativas de uso.

- [Brand book](/brand) · [PDF](/brand/ATLAS-BRANDBOOK.pdf) · [Kit completo](/brand/ATLAS-BRAND-KIT.zip).
- [Símbolo branco SVG](/brand/atlas-symbol-light.svg) · [PNG](/brand/atlas-symbol-light.png).
- [Assinatura branca SVG](/brand/atlas-lockup-light.svg) · [Assinatura escura SVG](/brand/atlas-lockup-dark.svg) · [Gelo SVG](/brand/atlas-lockup-ice.svg).
- [Favicon dedicado](/favicon.svg).

Sendo H a altura total do símbolo, a área livre mínima é H/4; em apresentações, preferir H/2. Mínimos digitais: símbolo com 24 px de altura e assinatura com 160 px de largura. Conferir o favicon em 16 e 32 px. Preservar o espaçamento interno da assinatura. Não esticar, rotacionar, redesenhar ou aplicar brilho dentro da marca. Luz e reflexos pertencem à superfície que a recebe.

## Fundamentos compartilhados

Fonte de implementação: `styles/tokens.css`. Os nomes são prefixados com `--atlas-`, para adoção progressiva sem substituir indiscriminadamente o tema existente.

| Token CSS | Valor | Função |
|---|---|---|
| `--atlas-universe` | `#030B14` | Universo e fundo principal |
| `--atlas-reading` | `#091522` | Formulários, tabelas e leitura |
| `--atlas-text` | `#F1F7FC` | Texto principal |
| `--atlas-muted` | `#ACC1D0` | Texto secundário |
| `--atlas-ice` | `#8BD8FF` | Foco, seleção e informação |
| `--atlas-champagne` | `#EAC687` | Assinatura e ação principal |
| `--atlas-success` | `#8DE3BF` | Confirmação |
| `--atlas-error` | `#FF9CA8` | Erro e recuperação |

**Tipografia:** Space Grotesk (`--display`) para títulos, identidade e números; Manrope (`--body`) para informação e interação. Display 48–72 px; títulos 24–36 px; corpo 16/26; controles 14/22; metadados 12/18. Números comparáveis usam `font-variant-numeric: tabular-nums`. Rótulos nunca dependem somente de caixa alta ou placeholder.

**Espaçamento:** 4, 8, 12, 16, 24, 32, 48 e 64 px. Raios compartilhados: controle 12 px, painel 28 px, cápsula 999 px. Os componentes específicos podem ajustar o raio à densidade. Botões Atlas oferecem 48 px de altura mínima. Foco: contorno azul gelo de 2 px, com 4 px de separação. Ícones Lucide em 16, 20 ou 24 px, com nome acessível quando não há texto visível.

**Elevação:** uma borda funcional precede a sombra. Painel: `0 18px 54px #0006`; overlay: `0 30px 90px #0009`. Camadas compartilhadas: navegação 30, overlay 50 e feedback 70. Contextos de empilhamento locais do mapa continuam independentes.

## Materiais

| Material em `AtlasSurface` | Uso | Comportamento |
|---|---|---|
| `reading` | Tarefas e informação | Fundo Leitura sólido |
| `glass` | Controles sobre o mapa | Fundo escuro, blur 20 px, borda e sombra localizada |
| `hologram` | Identidade e presença | Gradiente escuro e reflexo interno de borda |

O modo opaco substitui as superfícies por Leitura e remove o blur. `prefers-reduced-transparency` e ausência de suporte a `backdrop-filter` recebem fallback. Reflexos nunca atravessam textos. O Atlas interpreta materiais ópticos na web; não utiliza a API nativa Liquid Glass da Apple.

## Contrato de componentes

```tsx
import '@/styles/tokens.css'; // uma vez no layout
import {
  AtlasButton, AtlasSurface, AtlasStatusBadge,
  AtlasEmptyState, AtlasOTPInput,
} from '@/components/atlas';
import { atlasMotion, atlasTransition } from '@/lib/motion';

<AtlasButton tone="primary" loading={saving} loadingLabel="Salvando…">
  Salvar alterações
</AtlasButton>
<AtlasSurface material="reading">…</AtlasSurface>
<AtlasStatusBadge tone="warning">Em revisão</AtlasStatusBadge>
<AtlasOTPInput value={code} onChange={setCode} aria-label="Código de acesso" />
```

- `AtlasButton`: `primary`, `secondary`, `quiet` e `danger`; loading anuncia `aria-busy`, preserva rótulo e impede duplicação. `disabled` mantém o estado indisponível. Evitar ações destrutivas sem explicar a consequência.
- `AtlasSurface`: wrapper do Card existente. Materiais compartilham bordas, cores e geometrias.
- `AtlasStatusBadge`: `neutral`, `success`, `warning`, `error`, `info`; texto e ícone acompanham a cor. O componente não deduz estado técnico.
- `AtlasEmptyState`: título, descrição, ícone e ação opcional. Explica ausência de registros ou indisponibilidade sem apagar contexto.
- `AtlasOTPInput`: input-otp existente, oito posições por padrão, dígitos numéricos, colagem e `autocomplete="one-time-code"`. Validação de código, expiração, tentativas e sessão pertencem ao servidor chamador.

O catálogo usa também Input, Textarea, Checkbox, RadioGroup, Switch, Select, Tabs, DropdownMenu, Popover, Tooltip, Dialog, Sheet, Avatar, Skeleton, Table e Toast existentes em `components/ui`. Dialog e Sheet gerenciam foco, Escape e retorno ao gatilho. Os componentes de domínio só devem acrescentar regras do produto que a primitiva não cobre.

## Como experimentar o catálogo

1. **Controles:** selecione padrão, hover, foco, pressionado, desabilitado e carregando. O preview visual não substitui a verificação real com Tab, Enter, Espaço, mouse ou toque. Simule salvamento e falha; o feedback conclui depois de 900 ms somente para demonstrar estados.
2. **Formulários:** valide um e-mail, altere papel e descrição, teste escolhas independentes, upload local e OTP. Arquivos aceitos no exemplo: PNG, JPEG ou WebP até 5 MB, sem transferência. No OTP ilustrativo, `12345678` resulta em sucesso; outro código completo demonstra erro.
3. **Estrutura:** abra menus, popover, confirmação e drawer; use Escape e confira o retorno do foco. Publique/despublique o exemplo, recolha a sidebar, mude o contexto e abra o menu mobile. Nenhuma publicação real ocorre.
4. **Dados:** cinco registros fictícios permitem busca, filtro, ordem e paginação. A tabela mostra situação editorial separada de disponibilidade. O gráfico sintético alterna 7/14 dias, seleção de barra, ausência de dados e alto contraste; a tabela textual oferece os mesmos valores.
5. **Fluxos de produto:** percorra e-mail → OTP → confirmação, convite pendente → revogado, estados do Atlas AI e uma apresentação 9:16 com três quadros manuais. São demonstrações de interface, com mensagens explícitas sobre seu escopo local.

Cada família inclui trechos de uso e regras de comportamento. Os cenários mantêm dados de exemplo em estado React e retornam ao estado inicial ao sair da página ou remontar a amostra. Nenhum dado demonstrativo é convertido automaticamente em cadastro real.

## Verdade de dados

Publicado significa visível editorialmente; não significa online. Localização do pino representa a cidade do cliente, mesmo quando o host está em outra região. O guia nunca consulta contatos, hosts ou métricas reais.

Gráficos ilustrativos identificam sua origem, intervalo, unidade e cobertura. `null` significa sem medição e aparece como lacuna, nunca como zero. A média usa somente dias medidos. Sem amostras, mostrar ausência de dados. Alto contraste preserva o significado com rótulos e padrões, não apenas cores.

No produto, loading termina pela resposta efetiva da operação. Não avançar porcentagens por temporizador nem simular sinais de telemetria. Falhas preservam os dados e oferecem recuperação. E-mails de acesso usam resposta uniforme; a autorização depende do servidor, não do estado de uma tela.

## Motion e scroll nativo

`lib/motion.ts` exporta tempos em segundos para Motion; CSS usa a mesma escala em milissegundos.

| Intenção | Tempo |
|---|---:|
| Feedback | 100 ms |
| Troca | 240 ms |
| Entrada | 420 ms |
| Saída | 260 ms |
| Movimento reduzido | 120 ms |

Curva compartilhada: `cubic-bezier(.22, 1, .36, 1)`. O laboratório permite mudar a entrada entre 120 e 800 ms para comparação; isso não altera os tokens do produto. Cliques rápidos devem seguir a escolha mais recente. Elementos que saem não continuam recebendo interação.

O scroll continua inteiramente nativo. Uma linha no topo acompanha o progresso real da página; três amostras demonstram revelação ao entrar na área visível, sem prender a rolagem. Efeitos são pausáveis e o sistema respeita `prefers-reduced-motion`: sem voo, perspectiva, deslocamento ou loops; pequenas dissolvências preservam o feedback. A aba oculta pausa efeitos ambientes.

## Globo e presença

O laboratório mantém três presenças fictícias, pinos com retrato, localização geográfica, seleção por botão e card do agente. O mapa pode ser arrastado e tem controles de câmera. A direção Vértice é preservada no retrato e na moldura; o fundo de leitura mantém dados nítidos. O card devolve foco à seleção disponível ao fechar. O laboratório não mede servidores nem representa uma integração de IA ativa.

## Verificação antes de adotar um padrão

- Percorrer controles com teclado; verificar foco visível, nomes e ações por Enter/Espaço.
- Abrir e fechar modal/drawer por ação e por Escape; conferir contenção e retorno de foco.
- Testar 360 px, tablet, desktop, baixa altura e teclado virtual; tabela pode ter rolagem horizontal própria, a página não.
- Conferir movimento reduzido, modo opaco, ausência de dados, erros e recuperação.
- Medir contraste contra o fundo efetivamente renderizado. Metas: 4,5:1 para texto normal e 3:1 para texto grande e contornos funcionais.
- Confirmar valores e disponibilidade no backend antes de rotular dados como reais.

O catálogo documenta e implementa padrões; não constitui certificação de acessibilidade, benchmark ou validação de todos os dispositivos.

## Referências preservadas

- [Materiais e acessibilidade](/design/atlas-liquid-glass.md)
- [Cinema e motion](/design/atlas-cinematic-motion.md)
- [Mapa e hologramas](/design/atlas-holographic-map.md)

Esses arquivos preservam a pesquisa que originou a linguagem. Quando uma hipótese histórica divergir deste documento, dos arquivos oficiais da marca ou dos componentes de produção, a identidade aprovada e o contrato executável prevalecem.