Authkit
Cattedrale di vetro smerigliato a mezzanotte
AuthKit crea un'estetica notturna per la presentazione dei prodotti: una tela quasi nera con superfici in vetro satinato, una griglia di linee appena visibili e un testo luminoso che sembra illuminato da uno strato di vetro. Il carattere tipografico è quasi interamente bianco su uno sfondo scuro, con un unico accento viola brillante come unico elemento funzionale: ogni superficie interattiva presenta una linea sottile e morbida di un bianco-blu freddo anziché una cornice rigida. I componenti sono disposti su strati traslucidi, sovrapposti a una luce ambientale, e le schede appaiono come lastre di vetro illuminate dal basso, anziché pannelli di carta. La spaziatura è ampia e ritmica; l'elemento principale è un singolo logo illuminato che si estende per tutta la larghezza della pagina, circondato da schede di vetro fluttuanti, anziché un layout tradizionale a schermo diviso.
Una tela scura a tutta larghezza con un contenitore di contenuti centrato, largo al massimo 1200px. L'elemento principale è un singolo logo illuminato centrato ("AuthKit" in un carattere sfumato) sotto un piccolo testo a forma di sopracciglio, dietro il quale/sotto il quale si aprono a ventaglio tre schede di vetro fluttuanti con un modulo di accesso (la scheda a sinistra è inclinata a sinistra, quella centrale è ingrandita, quella a destra è inclinata a destra). Un interruttore per il tema chiaro/scuro è centrato sotto l'elemento principale. La riga principale è una timeline orizzontale di 6 icone con sottili linee di collegamento tra le icone circolari. Ritmo della sezione: ogni sezione inizia con un testo a forma di sopracciglio centrato e incorniciato da linee orizzontali sfumate, seguito da un titolo grande e centrato (44-48px), seguito da una singola riga di testo attenuato (16-18px), larghezza massima ~640px. La sezione Personalizza mostra un'anteprima di una finestra del browser con una scheda di accesso posizionata centralmente e circondata da pannelli di ispezione dell'interfaccia utente (tavolozze di colori, cursori di raggio, selettore dell'icona del logo, campo di testo del pulsante, campo di sfondo della pagina) posizionati agli angoli dell'area di lavoro, come in un'area di lavoro di strumenti di progettazione.
Il design visivo è dominato da mockup di moduli di login, realizzati in uno stile "morfologico del vetro" (campi di input per email/password, pulsanti di accesso tramite social media, inserimento del codice senza password), presentati come schede fluttuanti e traslucide su uno sfondo blu notte. Le icone delle funzionalità sono glifi lineari monocromatici in #d1e4fa all'interno di tessere rotonde e opache. Una sottile griglia (linee da 1px in rgba(186,215,247,0.06)) ricopre l'intera pagina, creando atmosfera, mentre un riflettore conico sfumato brilla nella parte superiore dell'elemento principale. Nessuna foto, nessuna immagine di lifestyle, nessuno screenshot del prodotto: il prodotto stesso è l'elemento visivo: campi di login disposti come prototipi di vetro in uno studio buio.
Tavolozza
Marca
- Void Violet
#663af3— Il colore principale del pulsante di invito all'azione (CTA) è l'unico colore d'accento utilizzato esclusivamente per il pulsante "Continua/Invia" all'interno dei moduli di accesso; il viola acceso su uno sfondo quasi nero crea un senso di urgenza senza interrompere la combinazione di colori monocromatica.
Neutro
- Midnight Canvas
#05060f— Lo sfondo della pagina, la superficie più profonda della carta, il riempimento del badge: una base quasi nera su cui tutto il resto fluttua. - Steel Plate
#2f343e— Superficie in rilievo, pulsanti di azione secondari/fantasma, pannello posteriore discreto. - Fog Veil
#9da7ba— Il testo principale, quello presente sulla scheda, è leggibile, ma risulta in secondo piano rispetto ai titoli. - Moon Mist
#c7d3ea— Testo principale, etichette aggiuntive, testo ausiliario attenuato - Frost Glow
#d1e4fa— Il colore di riempimento principale per il testo del corpo e dei link, il testo delle icone e il riempimento delle icone è il colore di primo piano luminoso predefinito. - Ice Highlight
#d8ecf8— Testo chiaro su superfici scure, etichette invertite e titoli ad alto contrasto. Non usarlo come colore principale per le call to action; nel logo di AuthKit e nei titoli principali viene utilizzato un gradiente per i titoli, ovvero una transizione graduale dal blu chiaro al blu tenue dall'alto verso il basso.
Tipografia
da 12 a 48 pixel · 8 passaggi
- Untitled Sans — sostituzione: Inter · contorni 400, 500, 600, 700 · Testo principale, interfaccia utente, pulsanti, campi di input, icone, titoli di piccole dimensioni: un font universale per ogni elemento funzionale.
- aeonikPro — sostituzione: Space Grotesk · contorni 400, 500 · Visualizzando solo le intestazioni (il logo AuthKit, i titoli di sezione e il corpo del testo), un carattere di 500 punti con una larghezza di 44-48 pixel conferisce al marchio un aspetto ampio e sobrio, piuttosto che un accento vistoso.
- dotDigital — sostituzione: JetBrains Mono · contorni 400 · Testo in maiuscolo ("Presentazione", "Design espandibile", "Brilla") - il testo in maiuscolo a spaziatura fissa con 0,10 em funge da discreto separatore tra il corpo del testo e l'intestazione.
Intervalli e forma
| Scopo | Senso |
|---|---|
| Densità | spazioso |
| Passo base | 16px |
| Raggio del pulsante | 999px |
| Raggio della carta | 16px |
| Ombre | no - bordi invece di ombre |
| Tra le sezioni | 120px |
| Larghezza del pannello | 1200px |
L'IA creerà il tuo sito web nello stile Authkit e lo riempirà
- Pubblica prodotti e contenuti tramite il link: Instagram, TikTok, Facebook.
- Trasferisci i contenuti dal tuo vecchio sito: basta specificare l'indirizzo.
- Design moderno sul miglior motore: React ( Next.js) con rendering lato server e ottimizzazione SEO integrata.
- Ottimizzazione SEO completamente automatizzata per i risultati di ricerca e raccomandazioni basate su reti neurali.
Stili simili
- Resend — velluto nero con dettagli viola neon
- Gsap — Una lavagna animata in uno studio di design. Una parete quasi nera, gesso color crema caldo e cinque pennarelli colorati, uno per ogni disciplina dell'animazione.
- Slash — Cripta di mezzanotte con registri dorati
- Raycast — Centro di comando di mezzanotte, Coral Neon
- Dimension — una postazione di lavoro illuminata dal crepuscolo con pannelli in vetro satinato
- Modal — Un terminale fosforescente in una sala server buia: l'unica fonte di luce è di un verde brillante.
- Reflect Notes — Lo spazio viola stellato è un osservatorio oscuro dove le note fluttuano come costellazioni su uno sfondo di vuoto indaco quasi nero.
- LaunchDarkly — La sala di controllo al neon è una cabina di pilotaggio buia dove segnali viola pulsano attraverso pannelli neri come la pece.
- Ameba — La sala di controllo a mezzanotte: un impulso blu elettrico all'interno di pannelli di vetro smerigliato.
- AgentQL — Aurora boreale sopra il terminal di notte
- Neon — Una sala server al calar della notte. Oscurità assoluta, dove l'unica luce proviene dai dati e dalle interazioni degli utenti.
- N8n — Workflow Engine at Midnight: la sensazione di un ambiente di automazione in tempo reale in una sala server buia, illuminato da indicatori di stato e flussi di dati.