Authkit
Mattéiert Glas Kathedral bei Mëtternuecht
AuthKit kreéiert eng Ästhetik vun enger Produktpresentatioun an der Nuecht: eng bal schwaarz Leinwand mat mattéierte Glasoberflächen, e Raster aus kaum siichtbare Linnen an engem liichtenden Text, deen duerch eng Glasschicht beliicht schéngt. D'Schrëft ass bal ganz wäiss virun engem donkelen Hannergrond, mat engem eenzegen hellviolette Akzent als eenzegt funktionellt Element - all interaktiv Uewerfläch huet eng mëll, dënn Linn vu kalem Blo-Wäiss amplaz vun engem steife Kader. D'Komponente sinn op transluzente Schichten arrangéiert, iwwer engem ambienten Liicht geschichtet, an d'Kaarte gesi wéi Glasplacken aus ënnen beliicht, amplaz vu Pabeierpanneauen. Den Ofstand ass grouss a rhythmesch; den Haaptelement ass en eenzegt beliichte Logo, dat déi ganz Breet vun der Säit erstreckt, ëmginn vu schwiewende Glaskaarten, amplaz vun engem traditionellen Split-Screen-Layout.
Eng donkel Leinwand a voller Breet mat engem zentréierten Inhaltscontainer, maximal 1200px breet. Den Haaptelement ass en eenzegt, zentréiert, beliicht Logo ("AuthKit" an enger ofgestufter Schrëft) ënner engem klenge auebrauefërmegen Text, hannert deem/ënner deenen dräi schwiewend Glaskaarte mat engem Loginformular sech ausbreeden (lénks Kaart no lénks gekippt, Mëtt Kaart maximéiert, riets Kaart no riets gekippt). En hell/donkelt Thema-Turnschalter ass zentréiert ënnert dem Haaptelement. D'Feature-Rei ass eng horizontal Zäitlinn vu 6 Ikonen mat dënnen Verbindungslinnen tëscht de kreesfërmegen Ikonen. Sektiounsrhythmus: all Sektioun fänkt mat engem zentréierten auebrauefërmegen Text un, deen duerch ausbleechend horizontal Linnen ëmrahmt gëtt, gefollegt vun engem groussen, zentréierten Titel (44-48px), gefollegt vun enger eenzeger Zeil gedämpfter Kierpertext (16-18px), maximal Breet ~640px. D'Sektioun "Personaliséieren" weist e Mockup vun engem Browserfenster mat enger zentral placéierter Loginkaart, déi vu schwiewenden UI-Inspektiounspanele (Faarfpaletten, Radius-Schieber, Logo-Ikon-Selektor, Knäppchentextfeld, Säitenhannergrondfeld) ëmginn ass, déi an den Ecker vum Leinwand positionéiert sinn, wéi e Workspace fir Design-Tools.
Den visuellen Design gëtt vu Login-Formular-Mockups dominéiert, déi am Stil vun enger "Glasmorphologie" (E-Mail-/Passwuert-Inputfelder, Social-Media-Login-Knäppercher, passwuertlos Code-Eingabe) gemaach sinn, a ginn als schwiewend, duerchscheinend Kaarten op enger Leinwand presentéiert, déi Mëtternuecht ass. D'Feature-Ikonen sinn monochrom linear Glyphen an #d1e4fa a ronnen, matte Kachelen. E subtilt Raster (1px Linnen an rgba(186,215,247,0.06)) bedeckt déi ganz Säit a kreéiert Atmosphär, während e konesche Gradient-Spotlight uewen um Haaptelement blénkt. Keng Fotoen, keng Lifestyle-Biller, keng Produkt-Screenshots - d'Produkt selwer ass dat visuellt Element: Login-Felder, déi wéi Glasprototypen an engem däischteren Atelier arrangéiert sinn.
Palette
Mark
- Void Violet
#663af3— Déi primär Faarf fir de Call-to-Action (CTA) Knäppchen ass déi eenzeg Akzentfaarf, déi exklusiv fir de "Weider/Senden" Knäppchen a Loginformulairen benotzt gëtt; dat liewegt Violett géint den bal schwaarzen Hannergrond kreéiert e Gefill vun Dringlechkeet, ouni dat monochromatescht Faarfschema ze stéieren.
Neutral
- Midnight Canvas
#05060f— Den Hannergrond vun der Säit, déi déifst Uewerfläch vun der Kaart, d'Fëllung vum Badge - eng bal schwaarz Basis, op där alles anescht schwëmmt. - Steel Plate
#2f343e— Erhuewen Uewerfläch, Phantom-/Sekundäraktiounsknäppercher, diskret Panel-Récksäit. - Fog Veil
#9da7ba— Den Haapttext, den Text op der Kaart, ass liesbar, awer am Verglach mat den Iwwerschrëften an den Hannergrond verbannt. - Moon Mist
#c7d3ea— Haapttext, zousätzlech Etiketten, gedämpften Niewentext - Frost Glow
#d1e4fa— Déi primär Fëllfaarf fir Kierper- a Linktext, Ikontext a Ikonfëllung ass den standardméissege liichtende Virdergrond. - Ice Highlight
#d8ecf8— Hellen Text op donkelen Uewerflächen, ëmgedréint Etiketten an Iwwerschrëften mat héijem Kontrast. Benotzt et net als Haaptfaarf fir Handlungsruff; e Schlagzeilgradient - en flëssegen Iwwergang vu hellblo op mëllt Blo vun uewen no ënnen - gëtt am AuthKit Logo an den Haaptiwwerschrëften benotzt.
Typographie
vun 12 bis 48px · 8 Schrëtt
- Untitled Sans — Ersatz: Inter · Konturen 400, 500, 600, 700 · Haapttext, Benotzerinterface, Knäppercher, Inputfelder, Ikonen, kleng Iwwerschrëften - eng universell Schrëft fir alles funktionellt.
- aeonikPro — Ersatz: Space Grotesk · Konturen 400, 500 · Wann nëmmen Iwwerschrëften ugewise ginn – den AuthKit-Branding, Sektiounsiwwerschrëften an den Haapttext – gëtt eng Schrëftgewiicht vu 500 Punkten bei 44-48px dem Branding e breede, onopfällegen Androck anstatt engem opfällegen Akzent.
- dotDigital — Ersatz: JetBrains Mono · Konturen 400 · Groussbuchstawen ("Aféierung", "Erweiterbaren Design", "Shine Bright") - Groussbuchstawentext mat engem Ofstand vun 0,10 em déngt als subtil Trenner tëscht dem Haapttext an der Iwwerschrëft.
Intervaller a Form
| Zweck | Bedeitung |
|---|---|
| Dicht | geräumig |
| Basis Schrëtt | 16px |
| Knäppchenradius | 999px |
| Kaarteradius | 16px |
| Schied | keng Grenzen amplaz vu Schied |
| Tëscht de Sektiounen | 120px |
| Säitebreet | 1200px |
KI baut Är Websäit am Stil vun Authkit op a fëllt se aus
- Fëllt mat Produkter a Posts iwwer de Link aus - Instagram, TikTok, Facebook.
- Inhalt vun Ärer aler Säit transferéieren - gitt einfach d'Adress un.
- Modernen Design op der beschter Engine: React ( Next.js) mat Serverrendering an SEO Optimiséierung direkt aus der Këscht.
- Vollautomatesch SEO-Optimiséierung fir Sichresultater an Empfehlungen fir neuronal Netzwierker.
Ähnlech Stiler
- Resend — schwaarze Samt mat purpurroude Neonfaarf
- Gsap — Eng animéiert Wäisswandtafel an engem Designstudio. Eng bal schwaarz Mauer, waarm Crèmekräid a fënnef faarweg Marker - ee fir all Animatiounsdisziplin.
- Slash — Mëtternuechtstëbs mat vergoldete Ledgeren
- Raycast — Mëtternuechtskommandozentrum, Coral Neon
- Dimension — eng Aarbechtsplaz mat mattéierte Glaspanneauen, déi bei Dämmerung beliicht sinn
- Modal — En phosphoreszenten Terminal an engem däischteren Serverraum - déi eenzeg Liichtquell ass eng hellgréng Faarf
- Reflect Notes — De stärekleiege violette Raum ass en däischtert Observatoire, wou Noten wéi Stärebiller virun engem Hannergrond vun bal schwaarzer indigoer Eidelkeet schwiewen.
- LaunchDarkly — De Neon-Kontrollraum ass e donkelen Cockpit, wou violett Signaler duerch kolschwaarz Paneele pulséieren.
- Ameba — D'Kontrollraum ëm Mëtternuecht – en elektresche bloe Puls an de matte Glaspanneauen
- AgentQL — Nordliichter iwwer dem Terminal an der Nuecht
- Neon — E Serverraum nom Däischteren. Reng Däischtert, wou dat eenzegt Liicht vun Daten an Benotzerinteraktiounen kënnt.
- N8n — Workflow Engine um Mëtternuecht – d'Gefill vun enger Echtzäit-Automatiséierungsleinwand an engem donkelen Serverraum, beliicht duerch Statusindikatoren an Datenstréim