Authkit
Katedral nga Gitabonan og Salamin sa Tungang Gabii
Ang AuthKit nagmugna og usa ka nighttime product presentation aesthetic: usa ka hapit itom nga canvas nga adunay frosted glass surfaces, usa ka grid sa halos dili makita nga mga linya, ug nagdan-ag nga teksto nga daw gidan-agan sa usa ka glass layer. Ang typeface halos puro puti batok sa usa ka ngitngit nga background, nga adunay usa ka hayag nga purpura nga accent isip bugtong functional element—ang matag interactive surface adunay humok, nipis nga linya sa bugnaw nga asul-puti imbes nga usa ka gahi nga frame. Ang mga component gihan-ay sa translucent layers, gipatong-patong ibabaw sa ambient glow, ug ang mga card makita isip mga glass plate nga gidan-agan gikan sa ubos, imbes nga mga panel nga papel. Ang spacing dako ug ritmiko; ang pangunang elemento usa ka nagdan-ag nga logo nga nagsangkad sa tibuok gilapdon sa panid, gilibutan sa naglutaw nga mga glass card, imbes nga usa ka tradisyonal nga split-screen layout.
Usa ka full-width, dark canvas nga adunay centered content container, maximum 1200px ang gilapdon. Ang main element kay usa ka single, centered, hayag nga logo ("AuthKit" sa gradient font) ubos sa gamay nga teksto nga porma og kilay, sa luyo/ubos niini tulo ka naglutaw nga glass cards nga adunay login form nga gipalapad (wala nga card nga gikiling sa wala, center card nga gi-maximize, tuo nga card nga gikiling sa tuo). Usa ka light/dark theme toggle ang gisentro sa ubos sa main element. Ang feature row kay usa ka pinahigda nga timeline sa 6 ka icon nga adunay nipis nga nagkonektar nga mga linya tali sa mga lingin nga icon. Section rhythm: ang matag seksyon magsugod sa usa ka nakasentro nga teksto nga porma og kilay nga gi-frame sa fading horizontal lines, gisundan sa usa ka dako, centered title (44-48px), gisundan sa usa ka linya sa muted body copy (16-18px), maximum width ~640px. Ang Customize section nagpakita og mockup sa browser window nga adunay centrally located login card nga gilibutan sa naglutaw nga UI inspector panels (color palettes, radius sliders, logo icon selector, button text field, page background field) nga gibutang sa mga kanto sa canvas, sama sa design tools workspace.
Ang biswal nga disenyo gidominar sa mga mockup sa porma sa pag-login, nga gihimo sa estilo nga "glass morphology" (mga input field sa email/password, mga buton sa pag-login sa social media, pagsulod sa code nga walay password), gipresentar isip naglutaw, translucent nga mga kard batok sa usa ka midnight canvas. Ang mga feature icon kay monochrome linear glyphs sa #d1e4fa sulod sa lingin, matte nga mga tile. Usa ka gamay nga grid (1px nga linya sa rgba(186,215,247,0.06)) ang nagtabon sa tibuok panid, nga nagmugna og atmospera, samtang ang conical gradient spotlight naggilakgilak sa ibabaw sa pangunang elemento. Walay mga litrato, walay mga hulagway sa estilo sa kinabuhi, walay mga screenshot sa produkto—ang produkto mismo mao ang biswal nga elemento: mga login field nga gihan-ay sama sa mga prototype sa bildo sa usa ka ngitngit nga studio.
Paleta
Brand
- Void Violet
#663af3— Ang pangunang kolor para sa call-to-action (CTA) button mao lamang ang accent color nga gigamit lamang para sa "Continue/Submit" button sulod sa login forms; ang hayag nga purpura batok sa halos itom nga background nagmugna og pagbati sa pagkadinalian nga wala makabalda sa monochromatic color scheme.
Neutral
- Midnight Canvas
#05060f— Ang background sa panid, ang kinailadman nga bahin sa kard, ang sulod sa badge—usa ka halos itom nga base diin naglutaw ang tanan. - Steel Plate
#2f343e— Gipataas nga nawong, mga butones nga phantom/secondary action, discreet panel backing. - Fog Veil
#9da7ba— Ang pangunang teksto, ang teksto sa kard, mabasa, apan gibutang lang sa background kon itandi sa mga ulohan. - Moon Mist
#c7d3ea— Pangunang teksto, dugang nga mga label, gipahilom nga auxiliary nga teksto - Frost Glow
#d1e4fa— Ang pangunang kolor sa pagpuno para sa body ug link text, icon text, ug icon fill mao ang default nga nagdan-ag nga foreground. - Ice Highlight
#d8ecf8— Hayag nga teksto sa ngitngit nga mga nawong, baliktad nga mga label, ug taas nga contrast nga mga headline. Ayaw kini gamita isip pangunang kolor para sa mga panawagan sa aksyon; usa ka headline gradient—usa ka hapsay nga transisyon gikan sa hayag nga asul ngadto sa humok nga asul gikan sa taas hangtod sa ubos—ang gigamit sa logo sa AuthKit ug mga importanteng headline.
Tipograpiya
gikan sa 12 ngadto sa 48px · 8 ka lakang
- Untitled Sans — kapuli: Inter · mga balangkas 400, 500, 600, 700 · Pangunang teksto, user interface, mga butones, mga input field, mga icon, gagmay nga mga heading - usa ka unibersal nga font para sa tanan nga magamit.
- aeonikPro — kapuli: Space Grotesk · mga balangkas 400, 500 · Ang pagpakita lang sa mga ulohan—ang branding sa AuthKit, mga ulohan sa seksyon, ug teksto sa lawas—ang 500-point nga gibug-aton sa font sa 44-48px naghatag sa branding og lapad ug yano nga hitsura imbes nga usa ka magarbohon nga aksento.
- dotDigital — kapuli: JetBrains Mono · mga balangkas 400 · Teksto nga all-caps ("Introducing," "Expandable Design," "Shine Bright") - monospaced all-caps nga teksto nga may 0.10em spacing nagsilbing gamay nga panagbulag tali sa body text ug sa heading.
Mga interval ug porma
| Katuyoan | Kahulugan |
|---|---|
| Densidad | lapad |
| Batakang lakang | 16px |
| Radius sa butones | 999px |
| Radius sa kard | 16px |
| Mga anino | walay - mga utlanan imbes nga mga anino |
| Taliwala sa mga seksyon | 120px |
| Lapad sa panid | 1200px |
Ang AI motukod sa imong website sa estilo sa Authkit ug mopuno niini
- Pun-a og mga produkto ug mga post pinaagi sa link - Instagram, TikTok, Facebook.
- Ibalhin ang sulod gikan sa imong daang site—ipiho lang ang adres.
- Modernong disenyo sa pinakamaayong makina: React ( Next.js) nga adunay server rendering ug SEO optimization nga andam na gamiton.
- Bug-os nga awtomatik nga pag-optimize sa SEO para sa mga resulta sa pagpangita ug mga rekomendasyon sa neural network.
Parehas nga mga estilo
- Resend — itom nga velvet nga adunay kolor nga neon nga purpura
- Gsap — Usa ka animated whiteboard sa usa ka design studio. Usa ka halos itom nga bungbong, init nga cream chalk, ug lima ka kolor nga marker—usa para sa matag disiplina sa animation.
- Slash — Tunga sa tungang gabii nga vault nga adunay mga gilded ledger
- Raycast — Sentro sa Komandante sa Tungang Gabii, Coral Neon
- Dimension — usa ka workstation nga nalamdagan sa kangitngit nga adunay mga panel nga bildo nga may frosted
- Modal — Usa ka phosphorescent terminal sa usa ka ngitngit nga server room - ang bugtong tinubdan sa kahayag mao ang hayag nga berde nga kolor
- Reflect Notes — Ang mabituon nga violet nga kawanangan usa ka ngitngit nga obserbatoryo diin ang mga nota naglutaw sama sa mga konstelasyon batok sa talan-awon sa halos itom nga indigo nga kahaw-ang.
- LaunchDarkly — Ang neon control room usa ka ngitngit nga cockpit diin ang mga purpura nga signal mo-pitik agi sa mga jet-black nga panel.
- Ameba — Ang control room sa tungang gabii – usa ka electric blue nga pulso sulod sa mga frosted glass panel
- AgentQL — Northern Lights ibabaw sa terminal sa gabii
- Neon — Usa ka server room kon gabii na. Kangitngit gyud, diin ang bugtong kahayag gikan sa datos ug interaksyon sa tiggamit.
- N8n — Workflow Engine sa Tungang Gabii – ang pagbati sa usa ka real-time automation canvas sa usa ka ngitngit nga server room, nga gidan-agan sa mga status indicator ug data streams