Auros
Terminal abissal com esferas de dados bioluminescentes
Auros funciona como um terminal fintech aninhado no abismo: uma tela turquesa quase preta com orbes de dados bioluminescentes e gradientes de luz do turquesa ao rosa, criando uma sensação de profundidade, fluidez e movimento. A interface é minimalista e cinematográfica, utilizando um único display de usuário (Matter) de espessura média com espaçamento negativo acentuado para criar escala sem ser excessivamente chamativa. As cores são distribuídas uniformemente — brancos e prateados acromáticos são usados para quase todo o conteúdo, enquanto a paleta cromática é reservada para gradientes atmosféricos, superfícies distintas dos cartões e um único botão característico em forma de pílula que muda de cor de azul-turquesa para rosa-lavanda. Os cartões flutuam sobre sutis saliências turquesa na superfície (raio de 16px, sem sombras) em vez de altura, de modo que a hierarquia é percebida como a profundidade da água em vez de uma sombra no papel. Os componentes têm um aspecto sofisticado e instrumental: marcas de espaçamento em maiúsculas, ícones de seta geométricos finos e grandes leituras numéricas em rosa claro.
Uma tela escura, em largura total, com conteúdo de largura máxima de 1440px. O elemento principal é um bloco de texto centralizado (linha superior → título → subtítulo → chamada para ação) que se estende por toda a altura da janela de visualização, com uma partícula como elemento de fundo. As seções são faixas de largura total separadas por grandes espaços verticais de mais de 68px, alternando entre a tela e superfícies ligeiramente rebaixadas. A seção "Explorar" utiliza um layout assimétrico de duas colunas: a coluna da esquerda contém cartões de recursos empilhados, enquanto a coluna da direita apresenta uma ilustração molecular geométrica. O conteúdo é centralizado em colunas estreitas (máximo de ~600px) para facilitar a leitura, em vez de se estender de uma extremidade à outra. O rodapé é um rebaixo (#011d1c) com uma margem vertical de 120px, criando o efeito de uma piscina profunda. A navegação é um painel fino e transparente com elementos espaçados de 16 a 24px. O ritmo geral é cinematográfico e espaçoso — cada seção respira, e o esquema de cores profundo, semelhante à água, cria a sensação de mergulhar mais fundo a cada passagem.
O estilo visual é minimalista e atmosférico. A página inicial apresenta uma esfera de partículas tridimensional — milhares de minúsculos pontos azul-turquesa e brancos formando uma esfera giratória que ecoa a tela, com detalhes em rosa-lavanda nas bordas, criando um efeito bioluminescente que lembra um objeto informativo. Diagramas moleculares geométricos planos (círculos brancos e linhas finas de conexão sobre uma tela escura) servem como elementos decorativos na coluna da direita. Sem fotografias, imagens de estilo de vida ou pessoas — a linguagem visual é baseada em gráficos de dados limpos e formas abstratas. A esfera de partículas é o elemento visual definidor da identidade da marca; ela deve aparecer pelo menos uma vez em todas as páginas importantes para reforçar a metáfora das profundezas do oceano.
Paleta
Marca
- Liquid Abyss
#012624— O plano de fundo principal serve como base da página, cabeçalho, elemento central e cor turquesa escura dominante. Ele cria uma atmosfera de águas profundas. - Liquid Deep
#011d1c— A superfície rebaixada corresponde ao fundo do rodapé e aos painéis de cartão mais profundos. Ela é percebida como um tom mais escuro que a tela, criando um sutil gradiente de profundidade descendente. - Liquid Kelp
#003734— Superfície elevada do cartão e preenchimento do botão — uma superfície elevada posicionada um degrau acima do vão. Usada para cartões de destaque, painéis de conteúdo e ponto de partida de um botão com gradiente.
Neutro
- Liquid Mist
#edfffe— Um tom frio de branco destaca o corpo do texto, os títulos das seções e a tipografia clara e aconchegante. Um sutil toque de azul integra o corpo do texto à paleta de cores turquesa. - Platinum
#ffffff— O branco puro é usado para títulos, elementos de navegação, contornos de ícones e textos de alto contraste. É a cor principal do texto em todos os níveis de título e na navegação principal. - Silver Mist
#bbc7c6— Texto secundário, descrições discretas e cores dos links em seu estado original. Apresentam um leve tom esverdeado, que complementa o fundo turquesa. - Ash
#f2f2f2— Texto adicional para citações e avaliações. Um tom de cinza neutro e frio para quando o subtom turquesa do Silver Mist parecer muito vibrante. - Slate Deep
#707777— Uma tonalidade superficial sutil para fundos inativos ou de baixa visibilidade. Ela fica entre a tela e o cartão, proporcionando uma diferença de altura muito discreta. - Lavender Phosphor
#fde9ff— Cor de fundo para estatísticas grandes, números de contadores e métricas importantes. O tom rosa no gradiente característico é usado com moderação como um toque luminoso em superfícies escuras.
Tipografia
de 10 a 96px · 6 etapas
- Matter — substituição: Inter · esboços 400, 500 · A fonte principal para títulos e corpo de texto é usada com peso 500 para todos os títulos (H1–H3) e textos cinéticos grandes (86–295px). Um peso 400 é usado para o corpo do texto e o texto da interface do usuário. Ela apresenta espaçamento negativo acentuado entre letras em tamanhos grandes (-0,04em em 61px, -0,046em em 86px) e espaçamento positivo amplo entre letras em maiúsculas de títulos (0,08em em 20px, 0,12em em 12px, 0,15em em 10px). A estratégia de usar apenas um peso médio para títulos é uma característica distintiva — sem fontes em negrito ou leves — o que confere à fonte uma sensação uniforme e mecânica de segurança.
- Arial — substituição: system-ui · esboços 400 · Uma fonte alternativa secundária para elementos interativos da interface do usuário (navegação, botões, microtexto do cabeçalho, rodapé). Aparece apenas em 14px – usada como uma alternativa segura e universal quando o Matter não está carregado, e abrange rótulos de formulário, texto de botões e pequenos textos auxiliares.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | média |
| Passo básico | 20px |
| Raio do botão | 6px |
| Raio do cartão | 16px |
| Sombras | não - bordas em vez de sombras |
| Entre seções | 68px |
| Largura da página | 1440px |
A IA criará seu site no estilo Auros e o preencherá.
- Compartilhe produtos e publicações através dos links - Instagram, TikTok, Facebook.
- Transfira o conteúdo do seu site antigo — basta especificar o endereço.
- Design moderno na melhor engine: React ( Next.js) com renderização no servidor e otimização de SEO integradas.
- Otimização de SEO totalmente automatizada para resultados de pesquisa e recomendações de redes neurais.
Estilos semelhantes
- Design Full-Time — um cinema de estúdio com um único foco de luz quente
- Air — escultura "Céu da Meia-Noite Através do Vidro"
- Slash — Cofre da meia-noite com livros-razão dourados
- Raycast — Centro de Comando da Meia-Noite, Neon Coral
- Dimension — uma estação de trabalho iluminada ao entardecer com painéis de vidro fosco
- Modal — Um terminal fosforescente em uma sala de servidores escura - a única fonte de luz é um verde brilhante.
- Giga — Horizonte da meia-noite sobre obsidiana congelada
- Reflect Notes — O espaço violeta estrelado é um observatório escuro onde as notas flutuam como constelações contra um pano de fundo de vazio índigo quase negro.
- Ameba — A sala de controle à meia-noite – um pulso azul elétrico dentro de painéis de vidro fosco.
- AgentQL — Aurora boreal sobre o terminal à noite.
- Frame — Um cinema para sessões de filmes noturnas. Uma sala escura onde um único foco de luz azul faz todo o trabalho, e a interface do usuário desaparece ao fundo, permitindo que o conteúdo criativo seja projetado para a frente.
- Harness — Centro de Controle da Missão à meia-noite com detalhes em verde fosforescente.