DESIGN SYSTEMVÉRTICE / 1.0VÉRTICE · DESIGN SYSTEM VIVO
O planeta dá a escala.
O agente dá a identidade.
A luz conecta os dois.
Arraste o globo. Toque no retrato.
O ápice separado aponta para o próximo horizonte. A forma oficial permanece íntegra, com ou sem luz.
Mínimo de H/4 ao redor da marca, sendo H a altura do símbolo. Para apresentações, prefira H/2. Nenhum texto ou borda invade esse espaço.
Símbolo: 24 px. Assinatura: 160 px de largura. Abaixo disso, use apenas o favicon dedicado.
Use SVG em interfaces e PNG em aplicações que exigem raster. Reflexos pertencem à superfície, preservando proporção, ápice e aberturas.
Profundidade com função. O vidro enquadra a experiência; a informação permanece nítida.
Reflexo localizado, superfície escura, volume sutil.
Interpretação web inspirada em Liquid Glass. CSS e composição de camadas; não é a tecnologia nativa da Apple.
Silêncio visual e espaço negativo.
Globo e território do cliente.
Retrato, haste e âncora orbital.
Cápsulas flutuantes e controles.
Card lateral e ação principal.
Formulários e relatórios legíveis.
Azul para foco. Champanhe como assinatura. Status sempre acompanhado de texto.
Atlas
#030B14Fundo principal#091522Informação e formulários#F1F7FCTexto principal#ACC1D0Texto secundário#8BD8FFFoco e seleção#EAC687Assinatura e ação#8DE3BFEstado confirmado#FF9CA8Erro e recuperaçãoInteligência
em presença.
Nomes claros. Cidades reconhecíveis. Dados que podem ser lidos sobre qualquer região do planeta.
Texto 16/26 · controles 14/20 · metadados 12/18A superfície muda; a leitura e o foco permanecem.
O controle “Modo opaco” substitui o vidro por Leitura. A preferência do sistema por menos transparência recebe o mesmo fallback.
Campos · painéis · cápsulas
Borda antes de sombra. Máximo: 0 30 90 / 60%.
Escala de 4 px; agrupamento por proximidade.
Algarismos tabulares em métricas. Navegação 30 · overlay 50 · feedback 70.
import { AtlasButton, AtlasSurface, AtlasStatusBadge,
AtlasEmptyState, AtlasOTPInput } from "@/components/atlas";
import { atlasMotion, atlasTransition } from "@/lib/motion";
// Importar uma vez no layout:
import "@/styles/tokens.css";
// Cores: --atlas-universe, --atlas-reading, --atlas-text,
// --atlas-muted, --atlas-ice, --atlas-champagne,
// --atlas-success, --atlas-error.
// Tipografia: --display (Space Grotesk), --body (Manrope).
// Fundo e controles adotam os tokens sem redefinir hex por tela.A seleção tem resposta, revelação e repouso. Nenhum corte seco; nenhuma espera só para exibir efeitos.
Aro nítido confirma o toque.
Um vínculo entre cidade e agente.
Curto deslocamento pela lateral.
Retrato, nome e dados se dissolvem.
A conclusão visual acontece em até 420 ms no desktop. Cliques rápidos seguem a seleção mais recente.
Um núcleo orbital acompanha a operação.
Amostra controlada de estados. No produto, cada etapa será acionada pelo carregamento real, sem porcentagens fictícias.
Troque a duração e interrompa a transição. A escolha mais recente prevalece.
A informação chega junto com a superfície.
Amostra prontaScroll reveal: role naturalmente até as três etapas. A linha no topo acompanha o progresso real da página.
Conteúdo revelado uma vez, ao entrar na área visível.
Uma transição curta mantém a relação entre os elementos.
O conteúdo continua disponível depois do movimento.
Resposta ao toque
Troca de conteúdo
Entrada de painel
Saída de painel
Movimento reduzido
Curva de entrada: cubic-bezier(.22, 1, .36, 1). No celular: entrada 320 ms, saída 220 ms. Pausar efeitos remove órbitas e perspectiva, preservando os estados.
Componentes reais. Estados acionáveis. Exemplos locais e identificados, sem dados de clientes.
Escolha um estado para inspecionar. No uso normal, mouse, toque e teclado acionam a mesma resposta.
Use Tab para conferir o foco real. Enter ou Espaço aciona o botão.
<AtlasButton tone="primary" loading={saving}
loadingLabel="Salvando…" onClick={save}>
Salvar alterações
</AtlasButton>
// 48px de toque · foco 2px · resposta 100ms
// loading bloqueia duplicação; preserve um rótulo.A ação indica o progresso e termina em um estado legível. Simulação local de 900 ms.
const { state } = request;
<AtlasButton loading={state === "loading"}
loadingLabel="Salvando…">Salvar</AtlasButton>
// No produto, a resposta vem do servidor.
// Erro preserva os dados e oferece nova tentativa.Ícones complementam rótulos. Uma ação sem texto mantém nome acessível e área de toque.
Lucide · traço de 1,5–2 px · ícones 16, 20 ou 24 px. Use o texto para explicar estados.
<Tooltip>
<TooltipTrigger render={<AtlasButton
tone="secondary" aria-label="Copiar exemplo" />} />
<TooltipContent>Copiar exemplo</TooltipContent>
</Tooltip>
// Tooltip também aparece ao receber foco.A imagem original orienta proporção, luz e profundidade. O catálogo transforma essa direção em materiais e componentes reutilizáveis.
RecuperarRetrato dominante, enquadramento lateral, borda óptica e vínculo com a cidade.
RefinarGeografia mais cinematográfica, variação dos retratos e composição em telefone real.
Não confundirOs exemplos visuais não representam mapa 3D fotorrealista, monitoramento ao vivo ou backend já conectado.
Três frentes de pesquisa: materiais ópticos, linguagem cinematográfica e geografia interativa. Fontes primárias e licenças consultadas em setembro de 2026.
Hierarquia entre conteúdo e controles; vidro concentrado nas superfícies flutuantes.
Territory / CitadelBase global de agentes, localização e hologramas com uma informação protagonista.
Perception / Iron Man 2Interfaces de vidro sofisticadas que preservam lógica e legibilidade.
GMUNK / OblivionUma linguagem consistente entre mapas, instrumentos e máquinas.
| Tecnologia | Decisão | Papel no Atlas | Licença / condições |
|---|---|---|---|
| Motion | Base | Presença, saída e continuidade entre estados. | MIT · núcleo |
| MapLibre | Base | Globo, zoom, câmera e pinos com retratos. | BSD-3-Clause |
| CSS + SVG | Base | Vidro, reflexos, órbitas e conectores. | Recursos da plataforma |
| Rive | Explorar | Atlas AI com estados visuais reativos. | Runtime MIT · editor separado |
| dotLottie | Alternativa | Animações de marca já produzidas. | MIT · verificar cada ativo |
| Paper Shaders | Explorar | Um efeito de luz localizado no avatar. | Apache-2.0 |
| GSAP | Reserva | Sequências de apresentação mais complexas. | Licença própria |
| Three.js / R3F / Drei | Futuro | Avatar volumétrico, se o ganho justificar. | MIT |
| Anime.js | Alternativa | Outro motor; sobrepõe funções do Motion. | MIT |
| Spline | Estudo | Composição 3D em editor visual. | Serviço e exportação por plano |
| Theatre.js | Reserva | Editor de timelines; custo extra de integração. | Core Apache-2.0 · Studio AGPL-3.0 |
| tsParticles | Dispensável | Partículas só se houver ganho na composição. | MIT |
| React Bits | Referência | Estudar efeitos isolados e adaptar à identidade. | MIT + Commons Clause |
A identidade só se sustenta quando o sistema funciona com teclado, toque, pouco espaço e preferências de acessibilidade.
Logo, avatar, pino, card e loading pertencem à mesma família. A tela parada também precisa impressionar.
Abrir, trocar, fechar e interromper funcionam sem saltos. Perspectiva e reflexos mantêm o texto legível.
Validar telefone real, contraste sobre o mapa, toque, rede lenta, falhas e desempenho junto dos efeitos.
O brand book reúne as versões oficiais da marca, regras de uso, aplicações, mockups e o novo superagente. O sistema já usa essa identidade nas telas e nas apresentações.