Authkit
Frostad glaskatedral vid midnatt
AuthKit skapar en estetik för produktpresentationer i nattetid: en nästan svart duk med frostade glasytor, ett rutnät av knappt synliga linjer och glödande text som verkar upplyst av ett glaslager. Typsnittet är nästan helt vitt mot en mörk bakgrund, med en enda ljuslila accent som enda funktionella element – varje interaktiv yta har en mjuk, tunn linje av kallt blåvitt snarare än en stel ram. Komponenterna är arrangerade på genomskinliga lager, lager över ett omgivande sken, och korten visas som glasplattor upplysta underifrån, snarare än papperspaneler. Avståndet är stort och rytmiskt; huvudelementet är en enda upplyst logotyp som sträcker sig över hela sidans bredd, omgiven av flytande glaskort, snarare än en traditionell delad skärmlayout.
En mörk arbetsyta i full bredd med en centrerad innehållsbehållare, max 1200px bred. Huvudelementet är en enda, centrerad, upplyst logotyp ("AuthKit" i ett tonad typsnitt) under en liten ögonbrynsformad text, bakom/under vilken tre flytande glaskort med ett inloggningsformulär sprider sig ut (vänster kort lutat åt vänster, mittenkort maximerat, höger kort lutat åt höger). En ljus/mörk temaväxling är centrerad under huvudelementet. Funktionsraden är en horisontell tidslinje med 6 ikoner med tunna anslutande linjer mellan de cirkulära ikonerna. Sektionsrytm: varje sektion börjar med en centrerad ögonbrynsformad text inramad av bleknande horisontella linjer, följt av en stor, centrerad titel (44-48px), följt av en enda rad med dämpad brödtext (16-18px), max bredd ~640px. Avsnittet Anpassa visar en mockup av ett webbläsarfönster med ett centralt placerat inloggningskort omgivet av flytande UI-inspektörspaneler (färgpaletter, radiereglage, logotypikonväljare, knapptextfält, sidbakgrundsfält) placerade i hörnen av arbetsytan, som en arbetsyta för designverktyg.
Den visuella designen domineras av mockups för inloggningsformulär, utformade i en "glasmorfologi"-stil (fält för inmatning av e-post/lösenord, inloggningsknappar för sociala medier, lösenordsfri kodinmatning), presenterade som flytande, genomskinliga kort mot en midnattsduk. Funktionsikoner är monokroma linjära tecken i #d1e4fa inom runda, matta plattor. Ett subtilt rutnät (1px-linjer i rgba(186,215,247,0.06)) täcker hela sidan och skapar atmosfär, medan en konisk gradientspotlight glittrar högst upp på huvudelementet. Inga foton, inga livsstilsbilder, inga produktskärmdumpar – själva produkten är det visuella elementet: inloggningsfält arrangerade som glasprototyper i en mörk studio.
Palett
Stämpla
- Void Violet
#663af3— Primärfärgen för uppmaningsknappen (CTA) är den enda accentfärgen som används exklusivt för knappen "Fortsätt/Skicka" i inloggningsformulär. Den livfulla lila färgen mot den nästan svarta bakgrunden skapar en känsla av brådska utan att störa det monokromatiska färgschemat.
Neutral
- Midnight Canvas
#05060f— Sidans bakgrund, kortets djupaste yta, märkets fyllning – en nästan svart bas som allt annat flyter på. - Steel Plate
#2f343e— Upphöjd yta, fantom-/sekundära knappar, diskret panelbaksida. - Fog Veil
#9da7ba— Huvudtexten, texten på kortet, är läsbar, men förpassad till bakgrunden jämfört med rubrikerna. - Moon Mist
#c7d3ea— Huvudtext, ytterligare etiketter, dämpad hjälptext - Frost Glow
#d1e4fa— Den primära fyllningsfärgen för brödtext och länktext, ikontext och ikonfyllning är den standardmässiga glödande förgrunden. - Ice Highlight
#d8ecf8— Ljus text på mörka ytor, inverterade etiketter och rubriker med hög kontrast. Använd den inte som primärfärg för uppmaningar till handling; en rubrikgradient – en smidig övergång från ljusblått till mjukblått från topp till botten – används i AuthKit-logotypen och viktiga rubriker.
Typografi
från 12 till 48px · 8 steg
- Untitled Sans — ersättning: Inter · konturer 400, 500, 600, 700 · Huvudtext, användargränssnitt, knappar, inmatningsfält, ikoner, små rubriker – ett universellt typsnitt för allt funktionellt.
- aeonikPro — ersättning: Space Grotesk · konturer 400, 500 · Genom att endast visa rubriker – AuthKit-varumärket, avsnittsrubriker och brödtext – ger en teckensnittsvikt på 500 punkter vid 44–48 pixlar varumärket ett brett, diskret utseende snarare än en flashig accent.
- dotDigital — ersättning: JetBrains Mono · konturer 400 · Versaler ("Introduktion", "Expanderingsbar design", "Shine Bright") – versaler med ett fast radavstånd på 0,10 cm fungerar som diskreta avgränsare mellan brödtexten och rubriken.
Intervaller och form
| Ändamål | Menande |
|---|---|
| Densitet | rymlig |
| Grundläggande steg | 16px |
| Knappradie | 999px |
| Kortradie | 16px |
| Skuggor | inga gränser istället för skuggor |
| Mellan sektioner | 120px |
| Sidbredd | 1200px |
AI kommer att bygga din webbplats i Authkit -stil och fylla den
- Fyll på med produkter och inlägg via länken - Instagram, TikTok, Facebook.
- Överför innehåll från din gamla webbplats – ange bara adressen.
- Modern design på den bästa sökmotorn: React ( Next.js) med serverrendering och SEO-optimering direkt ur lådan.
- Helautomatisk SEO-optimering för sökresultat och rekommendationer för neurala nätverk.
Liknande stilar
- Resend — svart sammet med lila neonfärg
- Gsap — En animerad whiteboardtavla i en designstudio. En nästan svart vägg, varm krämfärgad krita och fem färgade tuschpennor – en för varje animationsdisciplin.
- Slash — Midnattsvalv med förgyllda böcker
- Raycast — Midnattskommandocentralen, Coral Neon
- Dimension — en arbetsplats upplyst i skymningen med frostade glaspaneler
- Modal — En fosforescerande terminal i ett mörklagt serverrum - den enda ljuskällan är en ljusgrön färg
- Reflect Notes — Den stjärnklara violetta rymden är ett mörkt observatorium där toner svävar likt konstellationer mot en bakgrund av nästan svart indigofärgad tomhet.
- LaunchDarkly — Neonkontrollrummet är en mörk cockpit där lila signaler pulserar genom kolsvarta paneler.
- Ameba — Kontrollrummet vid midnatt – en elektrisk blå puls inuti frostade glaspaneler
- AgentQL — Norrsken över terminalen på natten
- Neon — Ett serverrum efter mörkrets inbrott. Rent mörker, där det enda ljuset kommer från data och användarinteraktioner.
- N8n — Workflow Engine vid midnatt – känslan av en realtidsautomationsduk i ett mörkt serverrum, upplyst av statusindikatorer och dataströmmar