Authkit
Catedral de vidro esmerilado á medianoite
AuthKit crea unha estética de presentación de produtos nocturna: unha lona case negra con superficies de vidro esmerilado, unha grella de liñas apenas visibles e texto brillante que parece iluminado por unha capa de vidro. A tipografía é case enteiramente branca sobre un fondo escuro, cun único acento púrpura brillante como único elemento funcional: cada superficie interactiva ten unha liña suave e fina de branco azulado frío en lugar dun marco ríxido. Os compoñentes están dispostos en capas translúcidas, superpostas sobre un brillo ambiental, e as tarxetas aparecen como placas de vidro iluminadas desde abaixo, en lugar de paneis de papel. O espazado é amplo e rítmico; o elemento principal é un único logotipo iluminado que abrangue todo o ancho da páxina, rodeado de tarxetas de vidro flotantes, en lugar dun deseño tradicional de pantalla dividida.
Unha lona escura de ancho completo cun contedor de contido centrado, cunha anchura máxima de 1200 px. O elemento principal é un único logotipo iluminado centrado ("AuthKit" en fonte degradada) debaixo dun texto pequeno en forma de cella, detrás/debaixo do cal se desprenden tres tarxetas de vidro flotantes cun formulario de inicio de sesión (tarxeta esquerda inclinada á esquerda, tarxeta central maximizada, tarxeta dereita inclinada á dereita). Un tema claro/escuro alternable está centrado debaixo do elemento principal. A fila de características é unha liña de tempo horizontal de 6 iconas con liñas de conexión finas entre as iconas circulares. Ritmo da sección: cada sección comeza cun texto centrado en forma de cella enmarcado por liñas horizontais esvaídas, seguido dun título grande centrado (44-48 px), seguido dunha soa liña de texto de corpo silenciado (16-18 px), cunha anchura máxima de ~640 px. A sección Personalizar mostra unha maqueta dunha xanela do navegador cunha tarxeta de inicio de sesión situada no centro rodeada de paneis flotantes de inspección da IU (paletas de cores, controis deslizantes de radio, selector de iconas do logotipo, campo de texto do botón, campo de fondo da páxina) colocados nas esquinas da lona, como un espazo de traballo de ferramentas de deseño.
O deseño visual está dominado por maquetas de formularios de inicio de sesión, elaboradas cun estilo de "morfoloxía de vidro" (campos de entrada de correo electrónico/contrasinal, botóns de inicio de sesión en redes sociais, entrada de código sen contrasinal), presentadas como tarxetas flotantes e translúcidas sobre un lenzo de medianoite. As iconas destacadas son glifos lineais monocromáticos en #d1e4fa dentro de mosaicos redondos e mate. Unha grella sutil (liñas de 1 px en rgba(186,215,247,0.06)) cobre toda a páxina, creando atmosfera, mentres que un foco de degradado cónico brilla na parte superior do elemento principal. Sen fotos, sen imaxes de estilo de vida, sen capturas de pantalla de produtos: o produto en si é o elemento visual: campos de inicio de sesión dispostos como prototipos de vidro nun estudo escuro.
Paleta
Marca
- Void Violet
#663af3— A cor principal para o botón de chamada á acción (CTA) é a única cor de acento que se usa exclusivamente para o botón "Continuar/Enviar" nos formularios de inicio de sesión; o púrpura vibrante sobre o fondo case negro crea unha sensación de urxencia sen interromper a combinación de cores monocromática.
Neutro
- Midnight Canvas
#05060f— O fondo da páxina, a superficie máis profunda da tarxeta, o recheo da insignia: unha base case negra sobre a que flota todo o demais. - Steel Plate
#2f343e— Superficie elevada, botóns de acción secundaria/fantasma, panel traseiro discreto. - Fog Veil
#9da7ba— O texto principal, o texto da tarxeta, é lexible, pero relegado a un segundo plano en comparación cos títulos. - Moon Mist
#c7d3ea— Texto principal, etiquetas adicionais, texto auxiliar silenciado - Frost Glow
#d1e4fa— A cor de recheo principal para o texto do corpo e das ligazóns, o texto das iconas e o recheo das iconas é o primeiro plano brillante predeterminado. - Ice Highlight
#d8ecf8— Texto claro en superficies escuras, etiquetas invertidas e titulares de alto contraste. Non o empregues como cor principal para chamadas á acción; no logotipo de AuthKit e nos titulares clave úsase un degradado de titular (unha transición suave do azul claro ao azul suave de arriba a abaixo).
Tipografía
de 12 a 48 px · 8 pasos
- Untitled Sans — substitución: Inter · contornos 400, 500, 600, 700 · Texto principal, interface de usuario, botóns, campos de entrada, iconas, cabeceiras pequenas: unha fonte universal para todo o funcional.
- aeonikPro — substitución: Space Grotesk · contornos 400, 500 · Ao mostrar só os títulos (a marca AuthKit, os títulos das seccións e o corpo do texto), unha fonte cun grosor de 500 puntos e entre 44 e 48 px dálle á marca un aspecto amplo e discreto en lugar dun acento rechamante.
- dotDigital — substitución: JetBrains Mono · contornos 400 · Texto en maiúsculas ("Presentación", "Deseño ampliable", "Brilla con intensidade"): o texto en maiúsculas monoespazado cun espazado de 0,10 cm serve como separador sutil entre o corpo do texto e o título.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | espazoso |
| Paso básico | 16px |
| Radio do botón | 999px |
| Radio da tarxeta | 16px |
| Sombras | sen bordos en vez de sombras |
| Entre seccións | 120px |
| Largura da páxina | 1200px |
A IA creará o teu sitio web ao estilo de Authkit e o encherá
- Enche con produtos e publicacións a través da ligazón: Instagram, TikTok, Facebook.
- Transfire contido do teu sitio antigo: só tes que especificar o enderezo.
- Deseño moderno no mellor motor: React ( Next.js) con renderización de servidor e optimización SEO listas para usar.
- Optimización SEO totalmente automatizada para resultados de busca e recomendacións de redes neuronais.
Estilos semellantes
- Resend — terciopelo negro con cor neón púrpura
- Gsap — Unha pizarra branca animada nun estudo de deseño. Unha parede case negra, xiz de cor crema cálida e cinco rotuladores de cores, un para cada disciplina de animación.
- Slash — Bóveda de medianoite con libros maiores dourados
- Raycast — Centro de Comando de Medianoite, Coral Neon
- Dimension — unha estación de traballo iluminada ao anoitecer con paneis de vidro esmerilado
- Modal — Un terminal fosforescente nunha sala de servidores escura: a única fonte de luz é unha cor verde brillante.
- Reflect Notes — O espazo estrelado violeta é un observatorio escuro onde as notas flotan coma constelacións contra un pano de fondo dun baleiro índigo case negro.
- LaunchDarkly — A sala de control de neón é unha cabina escura onde os sinais morados pulsan a través de paneis negros como o azabache.
- Ameba — A sala de control á medianoite: un pulso azul eléctrico dentro de paneis de vidro esmerilado
- AgentQL — Auroras boreais sobre a terminal pola noite
- Neon — Unha sala de servidores despois do anoitecer. Escuridade pura, onde a única luz provén dos datos e das interaccións dos usuarios.
- N8n — Motor de fluxo de traballo á medianoite: a sensación dun lenzo de automatización en tempo real nunha sala de servidores escura, iluminado por indicadores de estado e fluxos de datos.