Authkit
Himmeälasikatedraali keskiyöllä
AuthKit luo yöaikaisen tuote-esittelyestetiikan: lähes musta kangas himmeillä lasipinnoilla, tuskin näkyvistä viivoista koostuva ruudukko ja hehkuva teksti, joka näyttää lasikerroksen valaisemalta. Kirjasintyyppi on lähes kokonaan valkoinen tummaa taustaa vasten, ja ainoana toiminnallisena elementtinä on yksi kirkkaan violetti aksentti – jokaisessa interaktiivisessa pinnassa on pehmeä, ohut viileän sinivalkoinen viiva jäykän kehyksen sijaan. Komponentit on järjestetty läpikuultaville kerroksille, jotka on kerrostettu ympäristön hehkun päälle, ja kortit näyttävät alhaalta valaistuilta lasilevyiltä paperipaneelien sijaan. Välistys on suuri ja rytminen; pääelementti on yksi valaistu logo, joka ulottuu koko sivun leveydelle ja jota ympäröivät kelluvat lasikortit perinteisen jaetun näytön asettelun sijaan.
Täysleveä, tumma kangas, jossa on keskitetty sisältösäilö, enintään 1200 pikseliä leveä. Pääelementti on yksi, keskitetty, valaistu logo ("AuthKit" liukuvärjätyllä fontilla) pienen kulmakarvan muotoisen tekstin alla, jonka takana/alapuolella kolme kelluvaa lasikorttia, joissa on kirjautumislomake, levittäytyvät (vasen kortti kallistettu vasemmalle, keskimmäinen kortti suurennettu, oikea kortti kallistettu oikealle). Vaalea/tumma teeman vaihtokytkin on keskitetty pääelementin alle. Ominaisuusrivi on vaakasuora aikajana, jossa on kuusi kuvaketta, joiden pyöreiden kuvakkeiden välissä on ohuet yhdysviivat. Osioiden rytmi: jokainen osio alkaa keskitetyllä kulmakarvan muotoisella tekstillä, jota reunustavat häipyvät vaakasuoria viivoja, jota seuraa suuri, keskitetty otsikko (44–48 pikseliä) ja sen jälkeen yksi rivi vaimennettua leipätekstiä (16–18 pikseliä), enimmäisleveys ~640 pikseliä. Mukauta-osiossa näkyy malli selainikkunasta, jossa on keskellä sijaitseva kirjautumiskortti, jota ympäröivät kelluvat käyttöliittymän tarkastuspaneelit (väripaletit, säteen liukusäätimet, logokuvakkeen valitsin, painikkeen tekstikenttä, sivun taustakenttä), jotka on sijoitettu kankaan kulmiin kuin suunnittelutyökalujen työtilassa.
Visuaalista suunnittelua hallitsevat kirjautumislomakkeiden pienoiskuvat, jotka on luotu "lasimorfologia"-tyyliin (sähköposti-/salasanakentät, sosiaalisen median kirjautumispainikkeet, salasanaton koodin syöttö) ja esitetty kelluvina, läpikuultavina kortteina keskiyön taustaa vasten. Ominaisuuskuvakkeet ovat yksivärisiä lineaarisia symboleja #d1e4fa-muodossa pyöreiden, mattapintaisten laattojen sisällä. Hienovarainen ruudukko (1 pikselin viivat rgba(186,215,247,0.06)-muodossa) peittää koko sivun luoden tunnelmaa, kun taas kartiomainen liukuvärjäys hohtaa pääelementin yläosassa. Ei valokuvia, ei lifestyle-kuvia, ei tuotenäyttöjä – itse tuote on visuaalinen elementti: kirjautumiskentät järjestettynä kuin lasiprototyypit pimeässä studiossa.
Paletti
Merkki
- Void Violet
#663af3— Toimintakehotuspainikkeen (CTA) pääväri on ainoa korostusväri, jota käytetään yksinomaan kirjautumislomakkeiden "Jatka/Lähetä"-painikkeessa; eloisa violetti lähes mustaa taustaa vasten luo kiireellisyyden tunteen häiritsemättä yksiväristä värimaailmaa.
Neutraali
- Midnight Canvas
#05060f— Sivun tausta, kortin syvin pinta, merkin täyttö – lähes musta pohja, jonka päällä kaikki muu kelluu. - Steel Plate
#2f343e— Kohotettu pinta, haamu-/toissijaiset toimintopainikkeet, huomaamaton paneelin tausta. - Fog Veil
#9da7ba— Pääteksti, kortin teksti, on luettavissa, mutta se on sijoittunut taustalle otsikoihin verrattuna. - Moon Mist
#c7d3ea— Pääteksti, lisätunnisteet, mykistetty aputeksti - Frost Glow
#d1e4fa— Leipä- ja linkkitekstin, kuvaketekstin ja kuvakkeiden täytön ensisijainen täyttöväri on oletusarvoinen hohtava etuala. - Ice Highlight
#d8ecf8— Vaalea teksti tummilla pinnoilla, käänteiset otsikot ja suurikontrastiset otsikot. Älä käytä sitä toimintakehotuksen päävärinä; AuthKit-logossa ja keskeisissä otsikoissa käytetään otsikkogradienttia – tasaista siirtymää vaaleansinisestä pehmeän siniseen ylhäältä alas.
Typografia
12:sta 48 pikseliin · 8 askelta
- Untitled Sans — korvaava: Inter · ääriviivat 400, 500, 600, 700 · Pääteksti, käyttöliittymä, painikkeet, syöttökentät, kuvakkeet, pienet otsikot – universaali fontti kaikelle toiminnalliselle.
- aeonikPro — korvaava: Space Grotesk · ääriviivat 400, 500 · Pelkkien otsikoiden – AuthKit-brändäyksen, osioiden otsikoiden ja leipätekstin – näyttäminen 500 pisteen fontilla 44–48 pikselin koossa antaa brändäykselle leveän ja hillityn ilmeen pikemminkin kuin räikeän aksentin.
- dotDigital — korvaava: JetBrains Mono · ääriviivat 400 · Isoilla kirjaimilla kirjoitettu teksti ("Esittelyssä", "Laajennettava muotoilu", "Loista kirkkaasti") – kiinteävälisesti kirjoitettu, 0,10 em:n rivivälillä kirjoitettu teksti toimii hienovaraisina erottimena leipätekstin ja otsikon välillä.
Intervallit ja muoto
| Tarkoitus | Merkitys |
|---|---|
| Tiheys | tilava |
| Perusvaihe | 16px |
| Painikkeen säde | 999px |
| Kortin säde | 16px |
| Varjot | ei - reunoja varjojen sijaan |
| Osioiden välillä | 120px |
| Sivun leveys | 1200px |
Tekoäly rakentaa verkkosivustosi Authkit -tyyliin ja täyttää sen
- Täytä tuotteilla ja julkaisuilla linkin kautta - Instagram, TikTok, Facebook.
- Siirrä sisältöä vanhalta sivustoltasi – määritä vain osoite.
- Moderni design parhaalla hakukonemoottorilla: React ( Next.js) palvelinrenderöinnillä ja SEO-optimoinnilla suoraan paketista.
- Täysin automatisoitu hakukoneoptimointi hakutuloksille ja neuroverkkosuosituksille.
Samankaltaisia tyylejä
- Resend — musta sametti violetilla neonvärillä
- Gsap — Animoitu valkotaulu suunnittelustudiossa. Lähes musta seinä, lämpimän kermanvärinen liitu ja viisi värillistä tussia – yksi jokaiselle animaatioalalle.
- Slash — Keskiyön holvi kullatuilla tilikirjoilla
- Raycast — Keskiyön komentokeskus, Coral Neon
- Dimension — hämärässä valaistu työasema, jossa on himmeät lasipaneelit
- Modal — Fosforoiva terminaali pimennetyssä palvelinhuoneessa - ainoa valonlähde on kirkkaanvihreä väri
- Reflect Notes — Tähtikirkas violetti avaruus on synkkä observatorio, jossa nuotit leijuvat kuin tähtikuviot lähes mustan indigonsinisen tyhjyyden taustalla.
- LaunchDarkly — Neonvalvomo on tumma ohjaamo, jossa violetit signaalit sykkivät pikimustien paneelien läpi.
- Ameba — Valvomohuone keskiyöllä – sähkönsininen syke himmeiden lasipaneelien sisällä
- AgentQL — Revontulet terminaalin yllä yöllä
- Neon — Palvelinhuone pimeän tultua. Täysi pimeys, jossa ainoa valo tulee datasta ja käyttäjien vuorovaikutuksesta.
- N8n — Työnkulkumoottori keskiyöllä – reaaliaikaisen automaatioalustan tuntu pimeässä palvelinhuoneessa, jota valaisevat tilaindikaattorit ja datavirrat