Authkit
Catedral de vidre glaçat a mitjanit
AuthKit crea una estètica de presentació de productes nocturna: un llenç gairebé negre amb superfícies de vidre esmerilat, una quadrícula de línies gairebé invisibles i text brillant que sembla il·luminat per una capa de vidre. La tipografia és gairebé completament blanca sobre un fons fosc, amb un únic accent morat brillant com a únic element funcional: cada superfície interactiva té una línia suau i prima de color blau-blanc fred en lloc d'un marc rígid. Els components estan disposats en capes translúcides, superposades sobre una resplendor ambiental, i les targetes apareixen com a plaques de vidre il·luminades des de baix, en lloc de panells de paper. L'espaiat és gran i rítmic; l'element principal és un únic logotip il·luminat que abasta tota l'amplada de la pàgina, envoltat de targetes de vidre flotants, en lloc d'un disseny tradicional de pantalla dividida.
Un llenç fosc d'amplada completa amb un contenidor de contingut centrat, d'una amplada màxima de 1200 px. L'element principal és un únic logotip centrat i il·luminat ("AuthKit" en una font degradada) sota un text petit en forma de cella, darrere/sota del qual s'exposen tres targetes de vidre flotants amb un formulari d'inici de sessió (targeta esquerra inclinada a l'esquerra, targeta central maximitzada, targeta dreta inclinada a la dreta). Un botó de tema clar/fosc està centrat sota l'element principal. La fila de funcions és una línia de temps horitzontal de 6 icones amb línies de connexió primes entre les icones circulars. Ritme de la secció: cada secció comença amb un text centrat en forma de cella emmarcat per línies horitzontals esvaïdes, seguit d'un títol gran centrat (44-48 px), seguit d'una sola línia de text del cos silenciat (16-18 px), amplada màxima ~640 px. La secció Personalitza mostra una maqueta d'una finestra del navegador amb una targeta d'inici de sessió situada al centre envoltada de panells d'inspector d'IU flotants (paletes de colors, controls lliscants de radi, selector d'icones del logotip, camp de text de botons, camp de fons de la pàgina) situats a les cantonades del llenç, com un espai de treball d'eines de disseny.
El disseny visual està dominat per maquetes de formularis d'inici de sessió, elaborades amb un estil de "morfologia de vidre" (camps d'entrada de correu electrònic/contrasenya, botons d'inici de sessió a les xarxes socials, entrada de codi sense contrasenya), presentades com a targetes flotants i translúcides sobre un llenç de mitjanit. Les icones destacades són glifs lineals monocroms en #d1e4fa dins de mosaics rodons i mats. Una quadrícula subtil (línies d'1 px en rgba(186,215,247,0.06)) cobreix tota la pàgina, creant atmosfera, mentre que un focus de gradient cònic brilla a la part superior de l'element principal. No hi ha fotos, ni imatges d'estil de vida, ni captures de pantalla de productes: el producte en si és l'element visual: camps d'inici de sessió disposats com prototips de vidre en un estudi fosc.
Paleta
Marca
- Void Violet
#663af3— El color principal del botó de crida a l'acció (CTA) és l'únic color d'accent que s'utilitza exclusivament per al botó "Continua/Envia" dins dels formularis d'inici de sessió; el porpra vibrant sobre el fons gairebé negre crea una sensació d'urgència sense interrompre l'esquema de colors monocromàtic.
Neutral
- Midnight Canvas
#05060f— El fons de la pàgina, la superfície més profunda de la targeta, el farciment de la insígnia: una base gairebé negra sobre la qual flota tota la resta. - Steel Plate
#2f343e— Superfície elevada, botons d'acció fantasma/secundària, panell posterior discret. - Fog Veil
#9da7ba— El text principal, el text de la targeta, és llegible, però relegat a un segon pla en comparació amb els encapçalaments. - Moon Mist
#c7d3ea— Text principal, etiquetes addicionals, text auxiliar silenciat - Frost Glow
#d1e4fa— El color d'ompliment principal per al text del cos i dels enllaços, el text de les icones i l'ompliment de les icones és el primer pla brillant per defecte. - Ice Highlight
#d8ecf8— Text clar sobre superfícies fosques, etiquetes invertides i titulars d'alt contrast. No l'utilitzeu com a color principal per a crides a l'acció; al logotip d'AuthKit i als titulars clau s'utilitza un degradat de titular (una transició suau del blau clar al blau suau de dalt a baix).
Tipografia
de 12 a 48 px · 8 passos
- Untitled Sans — reemplaçament: Inter · esquemes 400, 500, 600, 700 · Text principal, interfície d'usuari, botons, camps d'entrada, icones, encapçalaments petits: una font universal per a tot allò funcional.
- aeonikPro — reemplaçament: Space Grotesk · esquemes 400, 500 · Mostrant només els encapçalaments (la marca AuthKit, els encapçalaments de secció i el text del cos), un pes de lletra de 500 punts a 44-48 px dóna a la marca un aspecte ampli i discret en lloc d'un accent cridaner.
- dotDigital — reemplaçament: JetBrains Mono · esquemes 400 · Text en majúscules ("Presentació", "Disseny expandible", "Brilla amb força"): el text en majúscules monoespaiat amb un espaiat de 0,10 cm serveix com a separadors subtils entre el text del cos i l'encapçalament.
Intervals i forma
| Propòsit | Significat |
|---|---|
| Densitat | espaiós |
| Pas bàsic | 16px |
| Radi del botó | 999px |
| Radi de la targeta | 16px |
| Ombres | sense vores en comptes d'ombres |
| Entre seccions | 120px |
| Amplada de la pàgina | 1200px |
La IA crearà el vostre lloc web a l'estil Authkit i l'omplirà.
- Omple amb productes i publicacions a través de l'enllaç: Instagram, TikTok, Facebook.
- Transfereix contingut del teu lloc web antic; només cal que especifiquis l'adreça.
- Disseny modern en el millor motor: React ( Next.js) amb renderització de servidor i optimització SEO des del primer moment.
- Optimització SEO totalment automatitzada per a resultats de cerca i recomanacions de xarxes neuronals.
Estils similars
- Resend — vellut negre amb color neó morat
- Gsap — Una pissarra blanca animada en un estudi de disseny. Una paret gairebé negra, guix de color crema càlid i cinc retoladors de colors, un per a cada disciplina d'animació.
- Slash — Volta de mitjanit amb llibres majors daurats
- Raycast — Centre de Comandament de Mitjanit, Coral Neon
- Dimension — una estació de treball il·luminada al capvespre amb panells de vidre esmerilat
- Modal — Un terminal fosforescent en una sala de servidors fosca: l'única font de llum és un color verd brillant.
- Reflect Notes — L'espai estrellat violeta és un observatori fosc on les notes suren com constel·lacions sobre un fons de buit gairebé negre indi.
- LaunchDarkly — La sala de control de neó és una cabina fosca on els senyals porpres pulsen a través de panells negres com el carbó.
- Ameba — La sala de control a mitjanit: un pols blau elèctric dins dels panells de vidre glaçat
- AgentQL — Aurores boreals sobre la terminal a la nit
- Neon — Una sala de servidors després de la foscor. Foscor pura, on l'única llum prové de les dades i les interaccions dels usuaris.
- N8n — Motor de flux de treball a mitjanit: la sensació d'un llenç d'automatització en temps real en una sala de servidors fosca, il·luminat per indicadors d'estat i fluxos de dades.