Authkit
Katedral na May Frosting Glass sa Hatinggabi
Lumilikha ang AuthKit ng isang estetika ng presentasyon ng produkto sa gabi: isang halos itim na canvas na may mga ibabaw na may frosted glass, isang grid ng mga linyang halos hindi nakikita, at kumikinang na teksto na tila naliliwanagan ng isang layer ng salamin. Ang typeface ay halos buong puti laban sa isang madilim na background, na may isang matingkad na lilang accent bilang tanging functional element—bawat interactive na ibabaw ay may malambot at manipis na linya ng malamig na asul-puti sa halip na isang matibay na frame. Ang mga bahagi ay nakaayos sa mga translucent na layer, nakapatong sa isang ambient glow, at ang mga card ay lumilitaw bilang mga glass plate na naliliwanagan mula sa ibaba, sa halip na mga panel ng papel. Malaki at maindayog ang pagitan; ang pangunahing elemento ay isang iisang naliliwanagan na logo na sumasaklaw sa buong lapad ng pahina, na napapalibutan ng mga lumulutang na glass card, sa halip na isang tradisyonal na split-screen layout.
Isang full-width, dark canvas na may nakasentrong content container, max 1200px ang lapad. Ang pangunahing elemento ay isang iisang nakasentro, may ilaw na logo ("AuthKit" na may gradient font) sa ilalim ng maliit na tekstong hugis kilay, sa likod/sa ibaba ay tatlong lumulutang na glass card na may nakausling login form (kaliwang card na nakatagilid pakaliwa, gitnang card na naka-maximize, kanang card na nakatagilid pakanan). Ang toggle ng matingkad/madilim na tema ay nakasentro sa ilalim ng pangunahing elemento. Ang feature row ay isang pahalang na timeline ng 6 na icon na may manipis na linyang nagdudugtong sa pagitan ng mga pabilog na icon. Section rhythm: ang bawat seksyon ay nagsisimula sa isang nakasentrong tekstong hugis kilay na naka-frame ng mga kumukupas na pahalang na linya, na sinusundan ng isang malaki, nakasentrong pamagat (44-48px), na sinusundan ng isang linya ng naka-mute na body copy (16-18px), max width ~640px. Ang seksyong Customize ay nagpapakita ng mockup ng isang browser window na may nakasentrong login card na napapalibutan ng mga lumulutang na UI inspector panel (mga color palette, radius slider, logo icon selector, button text field, page background field) na nakaposisyon sa mga sulok ng canvas, tulad ng isang design tools workspace.
Ang biswal na disenyo ay pinangungunahan ng mga mockup ng login form, na ginawa sa istilo ng "glass morphology" (mga input field ng email/password, mga button sa pag-login sa social media, entry ng code na walang password), na ipinakita bilang mga lumulutang at translucent na card laban sa isang midnight canvas. Ang mga feature icon ay mga monochrome linear glyph sa #d1e4fa sa loob ng bilog at matte na mga tile. Isang banayad na grid (1px na linya sa rgba(186,215,247,0.06)) ang sumasakop sa buong pahina, na lumilikha ng kapaligiran, habang ang isang conical gradient spotlight ay kumikinang sa tuktok ng pangunahing elemento. Walang mga larawan, walang mga larawan ng lifestyle, walang mga screenshot ng produkto—ang produkto mismo ang biswal na elemento: mga login field na nakaayos na parang mga prototype ng salamin sa isang madilim na studio.
Paleta
Tatak
- Void Violet
#663af3— Ang pangunahing kulay para sa button na "call-to-action" (CTA) ay ang tanging kulay ng accent na eksklusibong ginagamit para sa button na "Magpatuloy/Isumite" sa loob ng mga login form; ang matingkad na lila laban sa halos itim na background ay lumilikha ng pakiramdam ng pagkaapurahan nang hindi naaapektuhan ang monochromatic color scheme.
Neutral
- Midnight Canvas
#05060f— Ang background ng pahina, ang pinakamalalim na bahagi ng card, ang laman ng badge—isang halos itim na base kung saan nakalutang ang lahat ng iba pa. - Steel Plate
#2f343e— Nakataas na ibabaw, mga buton na phantom/pangalawang aksyon, discreet na panel sa likod. - Fog Veil
#9da7ba— Ang pangunahing teksto, ang teksto sa card, ay mababasa, ngunit mas nakalagay sa background kumpara sa mga heading. - Moon Mist
#c7d3ea— Pangunahing teksto, mga karagdagang label, naka-mute na pantulong na teksto - Frost Glow
#d1e4fa— Ang pangunahing kulay ng pagpuno para sa teksto ng katawan at link, teksto ng icon, at pagpuno ng icon ay ang default na kumikinang na foreground. - Ice Highlight
#d8ecf8— Maliwanag na teksto sa madilim na mga ibabaw, nakabaligtad na mga label, at mga headline na may mataas na contrast. Huwag itong gamitin bilang pangunahing kulay para sa mga panawagan para sa aksyon; isang gradient ng headline—isang maayos na paglipat mula sa mapusyaw na asul patungo sa malambot na asul mula itaas hanggang ibaba—ang ginagamit sa logo ng AuthKit at mga pangunahing headline.
Tipograpiya
mula 12 hanggang 48px · 8 hakbang
- Untitled Sans — kapalit: Inter · mga balangkas 400, 500, 600, 700 · Pangunahing teksto, user interface, mga buton, mga input field, mga icon, maliliit na heading - isang unibersal na font para sa lahat ng functional.
- aeonikPro — kapalit: Space Grotesk · mga balangkas 400, 500 · Ang pagpapakita lamang ng mga heading—ang branding ng AuthKit, mga heading ng seksyon, at body text—ang 500-point font weight na 44-48px ay nagbibigay sa branding ng malawak at simple na hitsura sa halip na isang magarbong accent.
- dotDigital — kapalit: JetBrains Mono · mga balangkas 400 · Tekstong all-caps ("Introducing," "Expandable Design," "Shine Bright") - ang monospaced all-caps na teksto na may 0.10em spacing ay nagsisilbing banayad na panghiwalay sa pagitan ng katawan ng teksto at ng heading.
Mga pagitan at anyo
| Layunin | Kahulugan |
|---|---|
| Densidad | maluwang |
| Pangunahing hakbang | 16px |
| Radius ng buton | 999px |
| Radius ng card | 16px |
| Mga anino | walang - mga hangganan sa halip na mga anino |
| Sa pagitan ng mga seksyon | 120px |
| Lapad ng pahina | 1200px |
Gagawa ang AI ng website mo sa estilong Authkit at pupunuin ito
- Punuin ng mga produkto at post gamit ang link - Instagram, TikTok, Facebook.
- Maglipat ng nilalaman mula sa iyong lumang site—tukuyin lamang ang address.
- Modernong disenyo gamit ang pinakamahusay na engine: React ( Next.js) na may kasamang server rendering at SEO optimization na agad-agad.
- Ganap na awtomatikong pag-optimize ng SEO para sa mga resulta ng paghahanap at mga rekomendasyon sa neural network.
Mga katulad na estilo
- Resend — itim na pelus na may lilang kulay neon
- Gsap — Isang animated whiteboard sa isang design studio. Isang halos itim na dingding, mainit na kremang chalk, at limang kulay na marker—isa para sa bawat disiplina ng animation.
- Slash — Hatinggabing vault na may ginintuang mga ledger
- Raycast — Sentro ng Pamumuno sa Hatinggabi, Coral Neon
- Dimension — isang workstation na naliliwanagan ng takipsilim na may mga panel na may frosted glass
- Modal — Isang phosphorescent terminal sa isang madilim na silid ng server - ang tanging pinagmumulan ng liwanag ay isang matingkad na berdeng kulay
- Reflect Notes — Ang mabituing lilang kalawakan ay isang madilim na obserbatoryo kung saan ang mga nota ay lumulutang na parang mga konstelasyon laban sa likuran ng halos itim na kawalan ng indigo.
- LaunchDarkly — Ang neon control room ay isang madilim na cockpit kung saan ang mga lilang signal ay dumadaloy sa mga jet-black panel.
- Ameba — Ang control room sa hatinggabi – isang electric blue pulse sa loob ng mga frosted glass panel
- AgentQL — Mga Northern Lights sa ibabaw ng terminal sa gabi
- Neon — Isang silid ng server pagkagabi. Purong kadiliman, kung saan ang tanging liwanag ay nagmumula sa data at mga interaksyon ng user.
- N8n — Workflow Engine sa Hatinggabi – ang pakiramdam ng isang real-time automation canvas sa isang madilim na silid ng server, na naliliwanagan ng mga tagapagpahiwatig ng katayuan at mga stream ng data