Authkit
Catedrala din sticlă mată la miezul nopții
AuthKit creează o estetică de prezentare a produselor pe timp de noapte: o pânză aproape neagră cu suprafețe de sticlă mată, o grilă de linii abia vizibile și text strălucitor care pare iluminat de un strat de sticlă. Fontul este aproape în întregime alb pe un fundal întunecat, cu un singur accent violet strălucitor ca singur element funcțional - fiecare suprafață interactivă are o linie moale și subțire de un alb-albastru rece, în loc de o ramă rigidă. Componentele sunt aranjate pe straturi translucide, stratificate peste o strălucire ambientală, iar cardurile apar ca plăci de sticlă iluminate de jos, mai degrabă decât ca panouri de hârtie. Spațierea este mare și ritmică; elementul principal este un singur logo iluminat care se întinde pe întreaga lățime a paginii, înconjurat de carduri de sticlă plutitoare, în loc de un aspect tradițional pe ecran divizat.
O pânză închisă la culoare, cu lățime completă, cu un container de conținut centrat, cu lățimea maximă de 1200px. Elementul principal este un singur logo, centrat, iluminat („AuthKit” cu font gradient) sub un text mic în formă de sprânceană, în spatele căruia/sub care se desfășoară trei carduri plutitoare din sticlă cu un formular de autentificare (cardul din stânga înclinat la stânga, cardul central maximizat, cardul drept înclinat la dreapta). O temă de comutare deschisă/întunecată este centrată sub elementul principal. Rândul de caracteristici este o cronologie orizontală formată din 6 pictograme cu linii subțiri de legătură între pictogramele circulare. Ritmul secțiunii: fiecare secțiune începe cu un text centrat în formă de sprânceană, încadrat de linii orizontale estompate, urmat de un titlu mare, centrat (44-48px), urmat de o singură linie de text estompat (16-18px), cu lățime maximă de ~640px. Secțiunea Personalizare afișează o machetă a unei ferestre de browser cu un card de autentificare amplasat central, înconjurat de panouri plutitoare de inspector UI (palete de culori, glisoare de rază, selector de pictograme logo, câmp text buton, câmp fundal pagină) poziționate în colțurile pânzei, ca un spațiu de lucru pentru instrumente de design.
Designul vizual este dominat de machete de formulare de autentificare, realizate într-un stil de „morfologie din sticlă” (câmpuri de introducere e-mail/parolă, butoane de conectare la rețelele sociale, introducere de cod fără parolă), prezentate ca niște carduri plutitoare, translucide, pe o pânză de culoare închisă. Pictogramele principale sunt glife liniare monocrome în #d1e4fa, încadrate în dale rotunde, mate. O grilă subtilă (linii de 1px în rgba(186,215,247,0.06)) acoperă întreaga pagină, creând atmosferă, în timp ce un reflector conic gradient strălucește în partea de sus a elementului principal. Fără fotografii, fără imagini de lifestyle, fără capturi de ecran ale produselor - produsul în sine este elementul vizual: câmpuri de autentificare aranjate ca niște prototipuri din sticlă într-un studio întunecat.
Paletă
Marca
- Void Violet
#663af3— Culoarea principală pentru butonul de îndemn la acțiune (CTA) este singura culoare de accent folosită exclusiv pentru butonul „Continuă/Trimite” din formularele de conectare; violetul vibrant pe fundalul aproape negru creează un sentiment de urgență fără a perturba schema de culori monocromatică.
Neutru
- Midnight Canvas
#05060f— Fundalul paginii, suprafața cea mai adâncă a cărții de vizită, umplutura insignei — o bază aproape neagră pe care plutește totul. - Steel Plate
#2f343e— Suprafață ridicată, butoane cu acțiune fantomă/secundară, panou de protecție discret. - Fog Veil
#9da7ba— Textul principal, textul de pe carte, este lizibil, dar retrogradat în fundal în comparație cu titlurile. - Moon Mist
#c7d3ea— Text principal, etichete suplimentare, text auxiliar silențios - Frost Glow
#d1e4fa— Culoarea principală de umplere pentru textul corpului și al linkului, textul pictogramelor și umplerea pictogramelor este prim-planul luminos implicit. - Ice Highlight
#d8ecf8— Text deschis la culoare pe suprafețe întunecate, etichete inversate și titluri cu contrast ridicat. Nu o folosiți ca și culoare principală pentru îndemnuri la acțiune; în sigla AuthKit și în titlurile cheie se folosește un gradient de titluri - o tranziție lină de la albastru deschis la albastru pal.
Tipografie
de la 12 la 48px · 8 pași
- Untitled Sans — înlocuire: Inter · contururi 400, 500, 600, 700 · Text principal, interfață utilizator, butoane, câmpuri de introducere, pictograme, titluri mici - un font universal pentru tot ce este funcțional.
- aeonikPro — înlocuire: Space Grotesk · contururi 400, 500 · Afișând doar titlurile — brandingul AuthKit, titlurile secțiunilor și corpul de text — o grosime a fontului de 500 de puncte, de 44-48 px, conferă brandingului un aspect amplu și discret, mai degrabă decât un accent strident.
- dotDigital — înlocuire: JetBrains Mono · contururi 400 · Text cu majuscule („Prezentare”, „Design extensibil”, „Strălucește intens”) - textul cu majuscule monospațiate, cu o spațiere de 0,10 em, servește ca separatoare subtile între corpul textului și titlu.
Intervale și formă
| Scop | Sens |
|---|---|
| Densitate | spațios |
| Pasul de bază | 16px |
| Raza butonului | 999px |
| Raza cardului | 16px |
| Umbre | fără - margini în loc de umbre |
| Între secțiuni | 120px |
| Lățimea paginii | 1200px |
Inteligența artificială vă va construi site-ul web în stilul Authkit și îl va completa
- Completează cu produse și postări prin link - Instagram, TikTok, Facebook.
- Transferați conținut de pe vechiul site - specificați doar adresa.
- Design modern pe cel mai bun motor: React ( Next.js) cu randare pe server și optimizare SEO gata de utilizare.
- Optimizare SEO complet automatizată pentru rezultatele căutării și recomandări de rețele neuronale.
Stiluri similare
- Resend — catifea neagră cu culoare neon violet
- Gsap — O tablă albă animată într-un studio de design. Un perete aproape negru, cretă crem caldă și cinci markere colorate - câte unul pentru fiecare disciplină de animație.
- Slash — Boltă de la miezul nopții cu registre aurite
- Raycast — Centrul de comandă de la miezul nopții, Coral Neon
- Dimension — o stație de lucru luminată la amurg, cu panouri de sticlă mată
- Modal — Un terminal fosforescent într-o cameră de servere întunecată - singura sursă de lumină este o culoare verde strălucitor
- Reflect Notes — Spațiul violet înstelat este un observator întunecat unde notele plutesc precum constelațiile pe un fundal de gol indigo aproape negru.
- LaunchDarkly — Camera de control cu neon este o cabină de control întunecată, unde semnale mov pulsează prin panouri negre ca tăciunele.
- Ameba — Camera de control la miezul nopții – o pulsație albastră electrică în interiorul panourilor de sticlă mată
- AgentQL — Aurora boreală deasupra terminalului noaptea
- Neon — O cameră de servere după lăsarea întunericului. Întuneric pur, unde singura lumină provine din date și interacțiunile utilizatorilor.
- N8n — Motor de flux de lucru la miezul nopții – senzația unei pânze de automatizare în timp real într-o cameră de servere întunecată, iluminată de indicatori de stare și fluxuri de date