Authkit
Catedral de cristal esmerilado a medianoche
AuthKit crea una estética de presentación de producto nocturna: un lienzo casi negro con superficies de vidrio esmerilado, una cuadrícula de líneas apenas visibles y texto brillante que parece iluminado por una capa de vidrio. La tipografía es casi completamente blanca sobre un fondo oscuro, con un único acento púrpura brillante como único elemento funcional; cada superficie interactiva tiene una línea suave y delgada de blanco azulado frío en lugar de un marco rígido. Los componentes están dispuestos en capas translúcidas, superpuestas sobre un brillo ambiental, y las tarjetas aparecen como placas de vidrio iluminadas desde abajo, en lugar de paneles de papel. El espaciado es amplio y rítmico; el elemento principal es un único logotipo iluminado que abarca todo el ancho de la página, rodeado de tarjetas de vidrio flotantes, en lugar de un diseño tradicional de pantalla dividida.
Un lienzo oscuro de ancho completo con un contenedor de contenido centrado, de un ancho máximo de 1200 px. El elemento principal es un único logotipo iluminado centrado ("AuthKit" en una fuente degradada) debajo de un pequeño texto en forma de ceja, detrás del cual/debajo del cual se despliegan tres tarjetas flotantes de cristal con un formulario de inicio de sesión (la tarjeta izquierda inclinada a la izquierda, la tarjeta central maximizada, la tarjeta derecha inclinada a la derecha). Un interruptor de tema claro/oscuro está centrado debajo del elemento principal. La fila de características es una línea de tiempo horizontal de 6 iconos con finas líneas de conexión entre los iconos circulares. Ritmo de la sección: cada sección comienza con un texto en forma de ceja centrado enmarcado por líneas horizontales desvanecidas, seguido de un título grande y centrado (44-48 px), seguido de una sola línea de texto atenuado (16-18 px), ancho máximo ~640 px. La sección Personalizar muestra una maqueta de una ventana del navegador con una tarjeta de inicio de sesión ubicada en el centro, rodeada de paneles flotantes de inspección de la interfaz de usuario (paletas de colores, controles deslizantes de radio, selector de iconos del logotipo, campo de texto del botón, campo de fondo de la página) situados en las esquinas del lienzo, como un espacio de trabajo de herramientas de diseño.
El diseño visual está dominado por maquetas de formularios de inicio de sesión, creadas con un estilo de "morfología de vidrio" (campos de entrada de correo electrónico/contraseña, botones de inicio de sesión en redes sociales, entrada de código sin contraseña), presentadas como tarjetas flotantes y translúcidas sobre un fondo negro. Los iconos de las funciones son glifos lineales monocromáticos en #d1e4fa dentro de mosaicos redondos y mate. Una sutil cuadrícula (líneas de 1 px en rgba(186,215,247,0.06)) cubre toda la página, creando una atmósfera, mientras que un foco cónico con degradado brilla en la parte superior del elemento principal. No hay fotos, ni imágenes de estilo de vida, ni capturas de pantalla del producto: el producto en sí es el elemento visual: campos de inicio de sesión dispuestos como prototipos de vidrio en un estudio oscuro.
Paleta
Marca
- Void Violet
#663af3— El color principal del botón de llamada a la acción (CTA) es el único color de acento que se utiliza exclusivamente para el botón "Continuar/Enviar" en los formularios de inicio de sesión; el vibrante color púrpura sobre el fondo casi negro crea una sensación de urgencia sin alterar la paleta de colores monocromática.
Neutral
- Midnight Canvas
#05060f— El fondo de la página, la superficie más profunda de la tarjeta, el relleno del emblema: una base casi negra sobre la que flota todo lo demás. - Steel Plate
#2f343e— Superficie en relieve, botones de acción fantasma/secundaria, panel trasero discreto. - Fog Veil
#9da7ba— El texto principal, el que aparece en la tarjeta, es legible, pero queda relegado a un segundo plano en comparación con los títulos. - Moon Mist
#c7d3ea— Texto principal, etiquetas adicionales, texto auxiliar atenuado - Frost Glow
#d1e4fa— El color de relleno principal para el texto del cuerpo y de los enlaces, el texto de los iconos y el relleno de los iconos es el color de primer plano brillante predeterminado. - Ice Highlight
#d8ecf8— Texto claro sobre superficies oscuras, etiquetas invertidas y titulares de alto contraste. No lo uses como color principal para las llamadas a la acción; en el logotipo de AuthKit y en los titulares clave se utiliza un degradado (una transición suave de azul claro a azul claro de arriba abajo).
Tipografía
De 12 a 48 píxeles · 8 pasos
- Untitled Sans — reemplazo: Inter · esquemas 400, 500, 600, 700 · Texto principal, interfaz de usuario, botones, campos de entrada, iconos, encabezados pequeños: una fuente universal para todo lo funcional.
- aeonikPro — reemplazo: Space Grotesk · esquemas 400, 500 · Al mostrar únicamente los encabezados (la marca AuthKit, los títulos de las secciones y el texto principal), una fuente de 500 puntos con un tamaño de entre 44 y 48 píxeles le da a la marca un aspecto amplio y discreto, en lugar de un toque llamativo.
- dotDigital — reemplazo: JetBrains Mono · esquemas 400 · Texto en mayúsculas ("Presentando," "Diseño expandible," "Brilla intensamente") - el texto monoespaciado en mayúsculas con un espaciado de 0,10em sirve como separadores sutiles entre el cuerpo del texto y el encabezado.
Intervalos y forma
| Objetivo | Significado |
|---|---|
| Densidad | espacioso |
| Paso básico | 16px |
| Radio del botón | 999px |
| Radio de la tarjeta | 16px |
| Oscuridad | no - bordes en lugar de sombras |
| Entre secciones | 120px |
| Ancho de página | 1200px |
La IA construirá tu sitio web al estilo de Authkit y lo rellenará.
- Rellena con productos y publicaciones a través del enlace - Instagram, TikTok, Facebook.
- Transfiere el contenido de tu antiguo sitio web; solo tienes que especificar la dirección.
- Diseño moderno sobre el mejor motor: React ( Next.js) con renderizado del lado del servidor y optimización SEO integrada.
- Optimización SEO totalmente automatizada para resultados de búsqueda y recomendaciones mediante redes neuronales.
Estilos similares
- Resend — terciopelo negro con color neón morado
- Gsap — Una pizarra animada en un estudio de diseño. Una pared casi negra, tiza de color crema cálido y cinco rotuladores de colores, uno para cada disciplina de animación.
- Slash — Bóveda de medianoche con libros de contabilidad dorados
- Raycast — Centro de mando de medianoche, neón coral
- Dimension — un puesto de trabajo iluminado al anochecer con paneles de vidrio esmerilado
- Modal — Un terminal fosforescente en una sala de servidores a oscuras: la única fuente de luz es de un color verde brillante.
- Reflect Notes — El espacio violeta estrellado es un observatorio oscuro donde las notas flotan como constelaciones contra un telón de fondo de un vacío índigo casi negro.
- LaunchDarkly — La sala de control de neón es una cabina oscura donde las señales púrpuras pulsan a través de paneles de color negro azabache.
- Ameba — La sala de control a medianoche: un pulso azul eléctrico dentro de los paneles de vidrio esmerilado.
- AgentQL — Auroras boreales sobre la terminal por la noche.
- Neon — Una sala de servidores al anochecer. Oscuridad absoluta, donde la única luz proviene de los datos y las interacciones de los usuarios.
- N8n — Motor de flujo de trabajo a medianoche: la sensación de un lienzo de automatización en tiempo real en una sala de servidores oscura, iluminado por indicadores de estado y flujos de datos.