Authkit
Frostklaasist katedraal keskööl
AuthKit loob öise tooteesitluse esteetika: peaaegu must lõuend mattklaasist pindadega, vaevumärgatavate joonte ruudustikuga ja hõõguva tekstiga, mis näib olevat valgustatud klaasikihiga. Kirjatüüp on peaaegu täielikult valge tumedal taustal, mille ainsa funktsionaalse elemendina on üks ere lilla aktsent – igal interaktiivsel pinnal on jäiga raami asemel pehme, õhuke jaheda sinakasvalge joon. Komponendid on paigutatud poolläbipaistvatele kihtidele, mis on asetatud ümbritseva kuma peale, ja kaardid näevad välja nagu altpoolt valgustatud klaasplaadid, mitte paberpaneelid. Vahed on suured ja rütmilised; peamine element on üks valgustatud logo, mis ulatub üle kogu lehe laiuse ja mida ümbritsevad ujuvad klaaskaardid, mitte traditsiooniline jagatud ekraani paigutus.
Täislaiuses tume lõuend tsentreeritud sisukonteineriga, maksimaalse laiusega 1200 pikslit. Põhielement on üks tsentreeritud valgustatud logo ("AuthKit" gradientfondis) väikese kulmukujulise teksti all, mille taga/all laiuvad kolm hõljuvat klaasist kaarti sisselogimisvormiga (vasak kaart vasakule kallutatud, keskmine kaart maksimeeritud, parem kaart paremale kallutatud). Põhielemendi all on tsentreeritud heleda/tumeda teema lüliti. Funktsioonide rida on horisontaalne ajajoon, mis koosneb 6 ikoonist, mille vahel on õhukesed ühendusjooned ringikujuliste ikoonide vahel. Sektsiooni rütm: iga sektsioon algab tsentreeritud kulmukujulise tekstiga, mida raamivad hääbuvad horisontaalsed jooned, millele järgneb suur tsentreeritud pealkiri (44–48 pikslit) ja seejärel üks rida summutatud põhiteksti (16–18 pikslit), maksimaalse laiusega ~640 pikslit. Kohandamisjaotis kuvab brauseriakna maketi, mille keskel asub sisselogimiskaart, mida ümbritsevad hõljuvad kasutajaliidese inspektori paneelid (värvipaletid, raadiuse liugurid, logoikooni valija, nupu tekstiväli, lehe taustaväli), mis on paigutatud lõuendi nurkadesse nagu disainitööriistade tööruum.
Visuaalset disaini domineerivad sisselogimisvormide maketid, mis on loodud "klaasist morfoloogia" stiilis (e-posti/parooli sisestusväljad, sotsiaalmeedia sisselogimisnupud, paroolivaba koodi sisestamine), mis on esitatud hõljuvate, poolläbipaistvate kaartidena kesköise lõuendi taustal. Funktsiooniikoonid on monokroomsed lineaarsed glüfid kirjas #d1e4fa ümarate mattide plaatide sees. Peen ruudustik (1px read rgba(186,215,247,0.06) värvitoonis) katab kogu lehe, luues atmosfääri, samal ajal kui põhielemendi ülaosas helendab kooniline gradientvalgus. Ei fotosid, elustiilipilte ega toote ekraanipilte – toode ise on visuaalne element: sisselogimisväljad, mis on paigutatud nagu klaasist prototüübid pimedas stuudios.
Palett
Bränd
- Void Violet
#663af3— Tegevusele kutsuva nupu (CTA) põhivärv on ainus aktsentvärv, mida kasutatakse ainult sisselogimisvormide nupul „Jätka/Esita”; erksavärviline lilla peaaegu mustal taustal loob pakilisuse tunde, häirimata monokromaatilist värvilahendust.
Neutraalne
- Midnight Canvas
#05060f— Lehekülje taust, kaardi sügavaim pind, märgi täidis – peaaegu must alus, millel kõik muu hõljub. - Steel Plate
#2f343e— Tõstetud pind, fantoom-/sekundaarsed nupud, diskreetne paneeli tagakülg. - Fog Veil
#9da7ba— Põhitekst, kaardil olev tekst, on loetav, kuid pealkirjadega võrreldes tagaplaanile taandunud. - Moon Mist
#c7d3ea— Põhitekst, lisasildid, summutatud abitekst - Frost Glow
#d1e4fa— Põhi- ja lingiteksti, ikooniteksti ja ikoonitäite peamine täitevärv on vaikimisi helendav esiplaan. - Ice Highlight
#d8ecf8— Hele tekst tumedatel pindadel, ümberpööratud sildid ja suure kontrastsusega pealkirjad. Ärge kasutage seda tegevusele kutsuvate tekstide põhivärvina; AuthKiti logos ja peamistes pealkirjades kasutatakse pealkirjagradienti – sujuvat üleminekut helesinisest pehme siniseni ülalt alla.
Tüpograafia
12-st 48 pikslini · 8 sammu
- Untitled Sans — asendamine: Inter · kontuurid 400, 500, 600, 700 · Põhitekst, kasutajaliides, nupud, sisestusväljad, ikoonid, väikesed pealkirjad – universaalne font kõige funktsionaalse jaoks.
- aeonikPro — asendamine: Space Grotesk · kontuurid 400, 500 · Ainult pealkirjade – AuthKiti brändingu, jaotiste pealkirjade ja põhiteksti – kuvamine 500-punktise fondi kaaluga 44–48 pikslit annab brändingule pigem laia ja tagasihoidliku ilme kui silmatorkava aktsendi.
- dotDigital — asendamine: JetBrains Mono · kontuurid 400 · Suurtähtedega tekst („Tutvustame“, „Laiendatav disain“, „Sära eredalt“) – üherealine suurtähtedega tekst 0,10 mm vahedega toimib peente eraldajatena põhiteksti ja pealkirja vahel.
Intervallid ja vorm
| Eesmärk | Tähendus |
|---|---|
| Tihedus | avar |
| Põhisamm | 16px |
| Nupu raadius | 999px |
| Kaardi raadius | 16px |
| Varjud | ei - varjude asemel äärised |
| Sektsioonide vahel | 120px |
| Lehe laius | 1200px |
Tehisintellekt loob teie veebisaidi Authkit stiilis ja täidab selle
- Täida toodete ja postitustega lingi kaudu - Instagram, TikTok, Facebook.
- Kanna sisu oma vanalt saidilt üle – täpsusta lihtsalt aadress.
- Moodne disain parimal mootoril: React ( Next.js) koos serveri renderdamise ja SEO optimeerimisega koheselt.
- Täisautomaatne SEO optimeerimine otsingutulemuste ja närvivõrgu soovituste jaoks.
Sarnased stiilid
- Resend — must samet lilla neoonvärviga
- Gsap — Animeeritud tahvel disainistuudios. Peaaegu must sein, soe kreemikas kriit ja viis värvilist markerit – üks iga animatsioonivaldkonna jaoks.
- Slash — Keskööseiklus kullatud pearaamatutega
- Raycast — Kesköö juhtimiskeskus, Coral Neon
- Dimension — hämaras valgustatud tööjaam mattklaasist paneelidega
- Modal — Fosforestseeruv terminal pimendatud serveriruumis - ainus valgusallikas on erkroheline värv
- Reflect Notes — Tähistaevas violetne kosmos on tume observatoorium, kus noodid hõljuvad nagu tähtkujud peaaegu musta indigosinise tühjuse taustal.
- LaunchDarkly — Neoonjuhtimisruum on tume kokpit, kus lillad signaalid pulseerivad läbi süsimustade paneelide.
- Ameba — Keskööl asuv juhtimisruum – elektriline sinine pulseerimine mattklaasist paneelide sees
- AgentQL — Virmalised terminali kohal öösel
- Neon — Serveriruum pärast pimeduse saabumist. Täielik pimedus, kus ainus valgus tuleb andmetest ja kasutajate interaktsioonidest.
- N8n — Töövoo mootor keskööl – reaalajas automatiseerimise lõuendi tunne pimedas serveriruumis, mida valgustavad olekuindikaatorid ja andmevood