Authkit
Catedral de Vidro Fosco à Meia-Noite
A AuthKit cria uma estética de apresentação de produtos noturna: uma tela quase preta com superfícies de vidro fosco, uma grade de linhas quase invisíveis e texto brilhante que parece iluminado por uma camada de vidro. A tipografia é quase inteiramente branca sobre um fundo escuro, com um único detalhe em roxo vibrante como único elemento funcional — cada superfície interativa possui uma linha fina e suave em um tom frio de azul-esbranquiçado, em vez de uma moldura rígida. Os componentes são dispostos em camadas translúcidas, sobrepostas a um brilho ambiente, e os cartões aparecem como placas de vidro iluminadas por baixo, em vez de painéis de papel. O espaçamento é amplo e rítmico; o elemento principal é um único logotipo iluminado que ocupa toda a largura da página, cercado por cartões de vidro flutuantes, em vez de um layout tradicional de tela dividida.
Uma tela escura de largura total com um contêiner de conteúdo centralizado, com largura máxima de 1200px. O elemento principal é um único logotipo iluminado e centralizado ("AuthKit" em fonte gradiente) abaixo de um pequeno texto em formato de sobrancelha, atrás do qual/abaixo do qual três cartões de vidro flutuantes com um formulário de login se abrem em leque (o cartão da esquerda inclinado para a esquerda, o cartão central maximizado e o cartão da direita inclinado para a direita). Um botão para alternar entre os temas claro e escuro está centralizado abaixo do elemento principal. A linha de destaque é uma linha do tempo horizontal com 6 ícones e finas linhas de conexão entre os ícones circulares. Ritmo das seções: cada seção começa com um texto centralizado em formato de sobrancelha emoldurado por linhas horizontais com efeito de fade, seguido por um título grande e centralizado (44-48px) e, em seguida, por uma única linha de texto discreto (16-18px), com largura máxima de aproximadamente 640px. A seção Personalizar exibe uma maquete de uma janela do navegador com um cartão de login localizado centralmente, cercado por painéis flutuantes do inspetor de interface do usuário (paletas de cores, controles deslizantes de raio, seletor de ícone de logotipo, campo de texto do botão, campo de plano de fundo da página) posicionados nos cantos da tela, como um espaço de trabalho de ferramentas de design.
O design visual é dominado por mockups de formulários de login, elaborados em um estilo de "morfologia de vidro" (campos de entrada de e-mail/senha, botões de login de redes sociais, entrada de código sem senha), apresentados como cartões flutuantes e translúcidos sobre um fundo preto. Os ícones de recursos são glifos lineares monocromáticos em #d1e4fa dentro de ladrilhos redondos foscos. Uma grade sutil (linhas de 1px em rgba(186,215,247,0.06)) cobre toda a página, criando atmosfera, enquanto um foco de luz cônico com gradiente brilha no topo do elemento principal. Sem fotos, sem imagens de estilo de vida, sem capturas de tela do produto — o próprio produto é o elemento visual: campos de login dispostos como protótipos de vidro em um estúdio escuro.
Paleta
Marca
- Void Violet
#663af3— A cor principal do botão de chamada para ação (CTA) é a única cor de destaque usada exclusivamente para o botão "Continuar/Enviar" nos formulários de login; o roxo vibrante em contraste com o fundo quase preto cria uma sensação de urgência sem interromper o esquema de cores monocromático.
Neutro
- Midnight Canvas
#05060f— O fundo da página, a superfície mais profunda do cartão, o preenchimento do emblema — uma base quase preta sobre a qual tudo o mais flutua. - Steel Plate
#2f343e— Superfície elevada, botões de ação secundários/fantasma, painel traseiro discreto. - Fog Veil
#9da7ba— O texto principal, o texto no cartão, é legível, mas relegado ao segundo plano em comparação com os títulos. - Moon Mist
#c7d3ea— Texto principal, rótulos adicionais, texto auxiliar silenciado - Frost Glow
#d1e4fa— A cor de preenchimento principal para o corpo do texto e do link, o texto do ícone e o preenchimento do ícone é o brilho de primeiro plano padrão. - Ice Highlight
#d8ecf8— Texto claro em superfícies escuras, rótulos invertidos e títulos de alto contraste. Não use essa cor como principal para chamadas à ação; um gradiente nos títulos — uma transição suave do azul claro para o azul suave de cima para baixo — é usado no logotipo do AuthKit e nos títulos principais.
Tipografia
de 12 a 48px · 8 etapas
- Untitled Sans — substituição: Inter · esboços 400, 500, 600, 700 · Texto principal, interface do usuário, botões, campos de entrada, ícones, títulos pequenos - uma fonte universal para todas as funcionalidades.
- aeonikPro — substituição: Space Grotesk · esboços 400, 500 · Exibindo apenas os títulos — a marca AuthKit, os títulos das seções e o corpo do texto — uma fonte de 500 pontos com espaçamento de 44 a 48 pixels confere à marca uma aparência ampla e discreta, em vez de um destaque chamativo.
- dotDigital — substituição: JetBrains Mono · esboços 400 · Texto em letras maiúsculas ("Apresentando", "Design Expansível", "Brilhe Intensamente") - texto monoespaçado em letras maiúsculas com espaçamento de 0,10em serve como separador sutil entre o corpo do texto e o título.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | espaçoso |
| Passo básico | 16px |
| Raio do botão | 999px |
| Raio do cartão | 16px |
| Sombras | não - bordas em vez de sombras |
| Entre seções | 120px |
| Largura da página | 1200px |
A IA criará seu site no estilo Authkit 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
- Resend — veludo preto com detalhes em roxo neon
- Gsap — Um quadro branco animado em um estúdio de design. Uma parede quase preta, giz creme em tom quente e cinco marcadores coloridos — um para cada área da animação.
- 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.
- 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.
- LaunchDarkly — A sala de controle neon é uma cabine escura onde sinais roxos pulsam através de painéis pretos como azeviche.
- 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.
- Neon — Uma sala de servidores após o anoitecer. Escuridão total, onde a única luz vem dos dados e das interações dos usuários.
- N8n — Workflow Engine à Meia-Noite – a sensação de uma tela de automação em tempo real em uma sala de servidores escura, iluminada por indicadores de status e fluxos de dados.