Authkit
Frosted Glass Cathedral om middernacht
AuthKit makket in nachtlike produktpresintaasje-estetyk: in hast swart doek mei matte glêzen oerflakken, in raster fan amper sichtbere linen, en gloeiende tekst dy't ferljochte liket te wurden troch in glêzen laach. It lettertype is hast folslein wyt tsjin in donkere eftergrûn, mei in inkele helder pearse aksint as it ienige funksjonele elemint - elk ynteraktive oerflak hat in sêfte, tinne line fan koel blau-wyt ynstee fan in stiif frame. Komponinten binne regele op trochskinende lagen, laach oer in omjouwingsgloed, en de kaarten ferskine as glêzen platen dy't fan ûnderen ferljochte binne, ynstee fan papieren panielen. De ôfstân is grut en ritmysk; it haadelemint is in inkele ferljochte logo dy't de hiele breedte fan 'e pagina beslacht, omjûn troch driuwende glêzen kaarten, ynstee fan in tradisjonele split-screen-layout.
In donker kanvas oer folsleine breedte mei in sintraal ynhâldskontener, maksimaal 1200px breed. It haadelemint is in inkele, sintraal, ferljochte logo ("AuthKit" yn in gradientlettertype) ûnder in lytse wynbrauwfoarmige tekst, dêr't efter/ûnder trije driuwende glêzen kaarten mei in oanmeldformulier útwreidzje (linker kaart nei lofts kantele, sintraal kaart maksimaal, rjochter kaart nei rjochts kantele). In ljocht/tsjuster tema-wikselknop is sintraal ûnder it haadelemint. De funksjerige is in horizontale tiidline fan 6 ikoanen mei tinne ferbiningslinen tusken de sirkelfoarmige ikoanen. Seksjeritme: elke seksje begjint mei in sintraal wynbrauwfoarmige tekst omjûn troch ferdwinende horizontale linen, folge troch in grutte, sintraal titel (44-48px), folge troch in inkele rigel gedempte lichemtekst (16-18px), maksimaal breedte ~640px. De Oanpasse-seksje toant in mockup fan in browserfinster mei in sintraal pleatste oanmeldkaart omjûn troch driuwende UI-ynspekteurpanielen (kleurpaletten, radiussliders, logo-ikoanselektor, knoptekstfjild, side-eftergrûnfjild) pleatst yn 'e hoeken fan it kanvas, lykas in wurkromte foar ûntwerpark.
It fisuele ûntwerp wurdt dominearre troch mockups foar oanmeldformulieren, makke yn in "glêzen morfology"-styl (fjilden foar e-post/wachtwurd, knoppen foar oanmelde op sosjale media, wachtwurdleaze koade-ynfier), presintearre as driuwende, trochsichtige kaarten tsjin in middernachtsdoek. Funksje-ikoanen binne monochrome lineêre glyphs yn #d1e4fa binnen rûne, matte tegels. In subtyl raster (1px-linen yn rgba(186,215,247,0.06)) beslacht de hiele pagina, wêrtroch't in sfear ûntstiet, wylst in konyske gradiëntspotlight boppe-oan it haadelemint glinsteret. Gjin foto's, gjin libbensstylôfbyldings, gjin produkt-screenshots - it produkt sels is it fisuele elemint: oanmeldfjilden arranzjearre as glêzen prototypes yn in tsjustere studio.
Palet
Merk
- Void Violet
#663af3— De primêre kleur foar de knop "call-to-action" (CTA) is de ienige aksintkleur dy't eksklusyf brûkt wurdt foar de knop "Trochgean/Yntsjinje" binnen oanmeldformulieren; it libbene pearse tsjin de hast swarte eftergrûn skept in gefoel fan urginsje sûnder it monochromatyske kleurskema te fersteuren.
Neutraal
- Midnight Canvas
#05060f— De eftergrûn fan 'e side, it djipste oerflak fan 'e kaart, de opfoling fan it badge - in hast swarte basis wêrop al it oare driuwt. - Steel Plate
#2f343e— Ferhege oerflak, fantoom-/sekundêre aksjeknoppen, diskrete panielefterkant. - Fog Veil
#9da7ba— De haadtekst, de tekst op 'e kaart, is lêsber, mar nei de eftergrûn ferwiisd yn ferliking mei de kopteksten. - Moon Mist
#c7d3ea— Haadtekst, ekstra labels, gedempte helptekst - Frost Glow
#d1e4fa— De primêre opfolkleur foar lichem- en keppelingstekst, ikoantekst en ikoanopfolling is de standert gloeiende foargrûn. - Ice Highlight
#d8ecf8— Ljochte tekst op donkere oerflakken, omkearde labels en koppen mei heech kontrast. Brûk it net as de primêre kleur foar oprop ta aksje; in koptekstgradiënt - in glêde oergong fan ljochtblau nei sêftblau fan boppe nei ûnderen - wurdt brûkt yn it AuthKit-logo en wichtige koppen.
Typografy
fan 12 oant 48px · 8 stappen
- Untitled Sans — ferfanging: Inter · sketsen 400, 500, 600, 700 · Haadtekst, brûkersynterface, knoppen, ynfierfjilden, ikoanen, lytse kopteksten - in universeel lettertype foar alles funksjoneel.
- aeonikPro — ferfanging: Space Grotesk · sketsen 400, 500 · Troch allinich kopteksten wer te jaan - de AuthKit-branding, seksjekoppen en lichemstekst - jout in lettertypegewicht fan 500 punten op 44-48px de branding in brede, ûnderbelichte útstrieling ynstee fan in flitsende aksint.
- dotDigital — ferfanging: JetBrains Mono · sketsen 400 · Tekst yn haadletters ("Yntroduksje", "Útwreidber ûntwerp", "Shine Bright") - tekst yn haadletters mei in monospaced fan 0.10em tsjinnet as subtile skieders tusken de haadtekst en de koptekst.
Yntervallen en foarm
| Doel | Betsjutting |
|---|---|
| Dichtheid | rom |
| Basisstap | 16px |
| Knopradius | 999px |
| Kaartradius | 16px |
| Skaden | gjin grinzen ynstee fan skaden |
| Tusken seksjes | 120px |
| Sidebreedte | 1200px |
AI sil jo webside bouwe yn Authkit -styl en it folje
- Folje oan mei produkten en berjochten fia de link - Instagram, TikTok, Facebook.
- Oerdrage ynhâld fan jo âlde side - spesifisearje gewoan it adres.
- Modern ûntwerp op 'e bêste motor: React ( Next.js) mei serverrendering en SEO-optimalisaasje direkt út 'e doaze.
- Folslein automatisearre SEO-optimalisaasje foar sykresultaten en oanbefellings foar neurale netwurken.
Ferlykbere stilen
- Resend — swart fluweel mei pearse neonkleur
- Gsap — In animearre wytboerd yn in ûntwerpstudio. In hast swarte muorre, waarm crèmekleurich kryt en fiif kleurige stiften - ien foar elke animaasjedissipline.
- Slash — Middernachtskluis mei fergulde ledgers
- Raycast — Middernacht Kommando Sintrum, Coral Neon
- Dimension — in wurkstasjon mei skimerljocht en matte glêzen panielen
- Modal — In fosforeszente terminal yn in tsjustere serverkeamer - de ienige ljochtboarne is in helder griene kleur
- Reflect Notes — Stjerrefiolette romte is in tsjuster observatoarium dêr't noaten sweve as stjerrebylden tsjin in eftergrûn fan hast swarte indigo leechte.
- LaunchDarkly — De neonkontrôlekeamer is in tsjustere cockpit dêr't pearse sinjalen troch gitswarte panielen pulsearje.
- Ameba — De kontrôlekeamer om middernacht - in elektrysk blauwe puls yn matte glêzen panielen
- AgentQL — Noarderljocht boppe de terminal by nacht
- Neon — In serverkeamer nei tsjuster. Suvere tsjusternis, dêr't it ienige ljocht komt fan gegevens en brûkersynteraksjes.
- N8n — Workflow Engine om middernacht - it gefoel fan in real-time automatisearringsdoek yn in tsjustere serverkeamer, ferljochte troch statusindikatoaren en datastreamen