Authkit
Kathedrale aus Milchglas um Mitternacht
AuthKit erzeugt eine nächtliche Produktpräsentationsästhetik: eine fast schwarze Leinwand mit mattierten Glasoberflächen, einem Raster aus kaum sichtbaren Linien und leuchtendem Text, der wie von einer Glasschicht erhellt wirkt. Die Schriftart ist fast vollständig weiß auf dunklem Hintergrund, mit einem einzigen leuchtend violetten Akzent als einzigem funktionalen Element – jede interaktive Fläche hat eine weiche, dünne Linie in kühlem Blauweiß anstelle eines starren Rahmens. Die Komponenten sind auf transparenten Ebenen angeordnet, die über einem sanften Leuchten liegen, und die Karten wirken wie von unten beleuchtete Glasplatten, nicht wie Papiertafeln. Die Abstände sind großzügig und rhythmisch; das Hauptelement ist ein einzelnes, beleuchtetes Logo, das sich über die gesamte Seitenbreite erstreckt und von schwebenden Glaskarten umgeben ist, anstatt eines traditionellen Split-Screen-Layouts.
Ein dunkles Canvas-Element in voller Breite mit einem zentrierten Inhaltsbereich (max. 1200 px breit). Das Hauptelement ist ein einzelnes, zentriertes, beleuchtetes Logo („AuthKit“ in einer Farbverlaufsschrift) unter einem kleinen, augenbrauenförmigen Text. Dahinter bzw. darunter befinden sich drei schwebende Glaskarten mit einem Anmeldeformular (die linke Karte ist nach links geneigt, die mittlere Karte maximiert, die rechte Karte nach rechts geneigt). Ein Schalter für das helle/dunkle Design ist zentriert unter dem Hauptelement angeordnet. Die Feature-Zeile besteht aus einer horizontalen Zeitleiste mit sechs Symbolen, die durch dünne Linien miteinander verbunden sind. Struktur der Abschnitte: Jeder Abschnitt beginnt mit einem zentrierten, augenbrauenförmigen Text, der von auslaufenden horizontalen Linien umrahmt wird. Darauf folgt ein großer, zentrierter Titel (44–48 px) und anschließend eine einzelne Zeile mit dezentem Fließtext (16–18 px, max. Breite ca. 640 px). Der Abschnitt "Anpassen" zeigt ein Mockup eines Browserfensters mit einer zentral angeordneten Anmeldekarte, die von schwebenden UI-Inspektorfeldern (Farbpaletten, Radius-Schieberegler, Logo-Symbolauswahl, Schaltflächentextfeld, Seitenhintergrundfeld) umgeben ist, die an den Ecken der Arbeitsfläche positioniert sind, ähnlich einem Arbeitsbereich für Designwerkzeuge.
Das visuelle Design wird von Login-Formular-Mockups dominiert, die im Stil der „Glasmorphologie“ gestaltet sind (E-Mail-/Passwort-Eingabefelder, Social-Media-Login-Buttons, passwortlose Codeeingabe) und als schwebende, transparente Karten auf dunklem Hintergrund präsentiert werden. Die Funktionssymbole sind monochrome, lineare Glyphen in #d1e4fa in runden, matten Kacheln. Ein dezentes Raster (1-Pixel-Linien in rgba(186,215,247,0.06)) überzieht die gesamte Seite und erzeugt eine besondere Atmosphäre, während ein kegelförmiger Farbverlaufs-Spotlight über dem Hauptelement glänzt. Keine Fotos, keine Lifestyle-Bilder, keine Produkt-Screenshots – das Produkt selbst ist das visuelle Element: Login-Felder, angeordnet wie gläserne Prototypen in einem dunklen Studio.
Palette
Marke
- Void Violet
#663af3— Die Primärfarbe für den Call-to-Action-Button (CTA) ist die einzige Akzentfarbe, die ausschließlich für den „Weiter/Absenden“-Button in Anmeldeformularen verwendet wird; das leuchtende Lila vor dem fast schwarzen Hintergrund erzeugt ein Gefühl der Dringlichkeit, ohne das monochrome Farbschema zu stören.
Neutral
- Midnight Canvas
#05060f— Der Seitenhintergrund, die tiefste Fläche der Karte, die Füllung des Abzeichens – eine fast schwarze Basis, auf der alles andere schwebt. - Steel Plate
#2f343e— Erhöhte Oberfläche, Phantom-/Sekundärfunktionsknöpfe, diskrete Panelrückseite. - Fog Veil
#9da7ba— Der Haupttext, also der Text auf der Karte, ist zwar lesbar, tritt aber im Vergleich zu den Überschriften in den Hintergrund. - Moon Mist
#c7d3ea— Haupttext, zusätzliche Beschriftungen, ausgeblendeter Hilfstext - Frost Glow
#d1e4fa— Die primäre Füllfarbe für Fließtext und Linktext, Symboltext und Symbolfüllung ist die standardmäßig leuchtende Vordergrundfarbe. - Ice Highlight
#d8ecf8— Helle Schrift auf dunklem Hintergrund, invertierte Beschriftungen und kontrastreiche Überschriften. Verwenden Sie sie nicht als Hauptfarbe für Handlungsaufforderungen; im AuthKit-Logo und in den wichtigsten Überschriften wird ein Farbverlauf verwendet – ein sanfter Übergang von Hellblau zu Zartblau von oben nach unten.
Typografie
von 12 auf 48 Pixel · 8 Schritte
- Untitled Sans — Ersatz: Inter · Umrisse 400, 500, 600, 700 · Haupttext, Benutzeroberfläche, Schaltflächen, Eingabefelder, Symbole, kleine Überschriften – eine universelle Schriftart für alles Funktionale.
- aeonikPro — Ersatz: Space Grotesk · Umrisse 400, 500 · Wenn nur Überschriften angezeigt werden – das AuthKit-Branding, Abschnittsüberschriften und Fließtext – verleiht eine Schriftstärke von 500 Punkt bei 44-48px dem Branding ein breites, zurückhaltendes Aussehen anstatt eines auffälligen Akzents.
- dotDigital — Ersatz: JetBrains Mono · Umrisse 400 · Text in Großbuchstaben („Introducing“, „Expandable Design“, „Shine Bright“) – nichtproportionaler Text in Großbuchstaben mit einem Zeilenabstand von 0,10em dient als dezente Trennlinie zwischen dem Fließtext und der Überschrift.
Intervalle und Form
| Zweck | Bedeutung |
|---|---|
| Dichte | geräumig |
| Grundlegender Schritt | 16px |
| Radius der Schaltfläche | 999px |
| Kartenradius | 16px |
| Schatten | Nein – Ränder statt Schatten |
| Zwischen den Abschnitten | 120px |
| Seitenbreite | 1200px |
KI erstellt Ihre Website im Authkit -Stil und füllt sie aus.
- Teile deine Produkte und Beiträge über den Link – Instagram, TikTok, Facebook.
- Übertragen Sie Inhalte von Ihrer alten Website – geben Sie einfach die Adresse an.
- Modernes Design auf der besten Plattform: React ( Next.js) mit serverseitigem Rendering und SEO-Optimierung direkt nach der Installation.
- Vollautomatisierte SEO-Optimierung für Suchergebnisse und Empfehlungen durch neuronale Netze.
Ähnliche Stile
- Resend — schwarzer Samt mit violetter Neonfarbe
- Gsap — Ein animiertes Whiteboard in einem Designstudio. Eine fast schwarze Wand, warme cremefarbene Kreide und fünf farbige Marker – einer für jede Animationsdisziplin.
- Slash — Mitternachtsgewölbe mit vergoldeten Büchern
- Raycast — Mitternachts-Kommandozentrale, Korallen-Neon
- Dimension — Ein dämmerungsbeleuchteter Arbeitsplatz mit Milchglaswänden
- Modal — Ein phosphoreszierendes Terminal in einem abgedunkelten Serverraum – die einzige Lichtquelle ist ein helles Grün.
- Reflect Notes — Der sternenklare violette Raum ist eine dunkle Sternwarte, in der Noten wie Sternbilder vor einem Hintergrund fast schwarzer indigoblauer Leere schweben.
- LaunchDarkly — Der neonbeleuchtete Kontrollraum ist ein dunkles Cockpit, in dem violette Signale durch pechschwarze Paneele pulsieren.
- Ameba — Der Kontrollraum um Mitternacht – ein elektrisch blauer Puls hinter Milchglasscheiben
- AgentQL — Nordlichter über dem Terminal bei Nacht
- Neon — Ein Serverraum nach Einbruch der Dunkelheit. Absolute Dunkelheit, in der das einzige Licht von Daten und Benutzerinteraktionen stammt.
- N8n — Workflow Engine um Mitternacht – das Gefühl einer Echtzeit-Automatisierungsoberfläche in einem dunklen Serverraum, erleuchtet von Statusanzeigen und Datenströmen.