Authkit
Cathédrale de verre dépoli à minuit
AuthKit crée une esthétique nocturne pour la présentation de produits: une toile quasi noire aux surfaces de verre dépoli, une grille aux lignes à peine visibles et un texte lumineux comme illuminé par une couche de verre. La typographie est presque entièrement blanche sur fond sombre, avec une unique touche de violet vif comme seul élément fonctionnel. Chaque surface interactive est soulignée d'un fin liseré bleu-blanc froid plutôt que d'un cadre rigide. Les composants sont disposés sur des calques translucides, superposés à une douce lumière ambiante, et les cartes apparaissent comme des plaques de verre éclairées par en dessous, plutôt que comme des panneaux de papier. L'espacement est ample et rythmé; l'élément principal est un logo lumineux unique occupant toute la largeur de la page, entouré de cartes de verre flottantes, remplaçant ainsi la traditionnelle mise en page en écran partagé.
Un canevas sombre pleine largeur avec un conteneur de contenu centré, d'une largeur maximale de 1200 px. L'élément principal est un logo unique, centré et lumineux (« AuthKit» en police dégradée) surmontant un petit texte en forme de sourcil. Derrière/sous ce logo se déploient trois cartes transparentes flottantes contenant un formulaire de connexion (carte de gauche inclinée à gauche, carte centrale agrandie, carte de droite inclinée à droite). Un bouton permettant de basculer entre les thèmes clair et sombre est centré sous l'élément principal. La barre d'outils est une chronologie horizontale de six icônes circulaires reliées par de fines lignes. Rythme des sections: chaque section commence par un texte centré en forme de sourcil, encadré de lignes horizontales estompées, suivi d'un grand titre centré (44-48 px), puis d'une seule ligne de texte discret (16-18 px), d'une largeur maximale d'environ 640 px. La section Personnaliser affiche une maquette d'une fenêtre de navigateur avec une carte de connexion située au centre, entourée de panneaux d'inspection d'interface utilisateur flottants (palettes de couleurs, curseurs de rayon, sélecteur d'icône de logo, champ de texte de bouton, champ d'arrière-plan de page) positionnés aux coins du canevas, comme un espace de travail d'outils de conception.
Le design visuel est dominé par des maquettes de formulaires de connexion, conçues dans un style « morphologie du verre» (champs de saisie e-mail/mot de passe, boutons de connexion aux réseaux sociaux, saisie de code sans mot de passe), présentées comme des cartes translucides flottantes sur un fond noir profond. Les icônes des fonctionnalités sont des glyphes linéaires monochromes en #d1e4fa, intégrés à des vignettes rondes mates. Une grille discrète (lignes de 1 px en rgba(186,215,247,0.06)) recouvre toute la page, créant une ambiance particulière, tandis qu’un projecteur conique à dégradé scintille au-dessus de l’élément principal. Aucune photo, aucune image lifestyle, aucune capture d’écran du produit: le produit lui-même est l’élément visuel principal: des champs de connexion agencés comme des prototypes en verre dans un studio obscur.
Palette
Marque
- Void Violet
#663af3— La couleur principale du bouton d'appel à l'action (CTA) est la seule couleur d'accentuation utilisée exclusivement pour le bouton « Continuer/Soumettre» dans les formulaires de connexion; le violet vif sur fond presque noir crée un sentiment d'urgence sans perturber le schéma de couleurs monochromes.
Neutre
- Midnight Canvas
#05060f— Le fond de la page, la surface la plus profonde de la carte, le remplissage du badge — une base presque noire sur laquelle tout le reste semble flotter. - Steel Plate
#2f343e— Surface en relief, boutons d'action fantôme/secondaire, panneau arrière discret. - Fog Veil
#9da7ba— Le texte principal, le texte sur la carte, est lisible, mais relégué à l'arrière-plan par rapport aux titres. - Moon Mist
#c7d3ea— Texte principal, étiquettes supplémentaires, texte auxiliaire atténué - Frost Glow
#d1e4fa— La couleur de remplissage principale du texte du corps et des liens, du texte des icônes et du remplissage des icônes est la couleur de premier plan lumineuse par défaut. - Ice Highlight
#d8ecf8— Utilisez du texte clair sur fond sombre, des étiquettes inversées et des titres à fort contraste. Évitez d'utiliser cette couleur comme couleur principale pour les appels à l'action; un dégradé de bleu clair à bleu foncé, de haut en bas, est utilisé dans le logo AuthKit et les titres principaux.
Typographie
de 12 à 48 px · 8 étapes
- Untitled Sans — remplacement: Inter · grandes lignes 400, 500, 600, 700 · Texte principal, interface utilisateur, boutons, champs de saisie, icônes, petits titres: une police universelle pour toutes les fonctionnalités.
- aeonikPro — remplacement: Space Grotesk · grandes lignes 400, 500 · En n'affichant que les titres (la marque AuthKit, les titres de section et le texte principal), une police de 500 points à 44-48 px donne à la marque un aspect large et discret plutôt qu'un accent tape-à-l'œil.
- dotDigital — remplacement: JetBrains Mono · grandes lignes 400 · Texte en majuscules (« Présentation», « Conception extensible», « Brillez de mille feux») - Le texte en majuscules à chasse fixe avec un espacement de 0,10 em sert de séparateur subtil entre le corps du texte et le titre.
Intervalles et forme
| But | Signification |
|---|---|
| Densité | spacieux |
| Étape de base | 16px |
| Rayon du bouton | 999px |
| Rayon de la carte | 16px |
| Ombres | non - des bordures à la place des ombres |
| Entre les sections | 120px |
| Largeur de la page | 1200px |
L'IA construira votre site web dans le style Authkit et le remplira.
- Partagez vos produits et publications via le lien - Instagram, TikTok, Facebook.
- Transférez le contenu de votre ancien site: il vous suffit de préciser l’adresse.
- Conception moderne sur le meilleur moteur: React ( Next.js) avec rendu côté serveur et optimisation SEO intégrée.
- Optimisation SEO entièrement automatisée pour les résultats de recherche et recommandations de réseaux neuronaux.
Styles similaires
- Resend — velours noir avec une couleur néon violette
- Gsap — Un tableau blanc animé dans un studio de design. Un mur presque noir, de la craie couleur crème chaude et cinq marqueurs de couleur — un pour chaque discipline d'animation.
- Slash — Chambre forte de minuit avec des livres de comptes dorés
- Raycast — Centre de commandement de minuit, néon corail
- Dimension — un poste de travail éclairé au crépuscule avec des panneaux en verre dépoli
- Modal — Un terminal phosphorescent dans une salle serveur plongée dans l'obscurité - la seule source de lumière est d'un vert éclatant
- Reflect Notes — L'espace violet étoilé est un observatoire obscur où des notes flottent comme des constellations sur un fond d'indigo presque noir et vide.
- LaunchDarkly — La salle de contrôle éclairée au néon est un cockpit sombre où des signaux violets pulsent à travers des panneaux d'un noir profond.
- Ameba — La salle de contrôle à minuit – une pulsation bleu électrique à l'intérieur de panneaux de verre dépoli
- AgentQL — Aurores boréales au-dessus du terminal la nuit
- Neon — Une salle serveur à la nuit tombée. L'obscurité totale, où la seule lumière provient des données et des interactions des utilisateurs.
- N8n — Workflow Engine à minuit – l’impression d’un canevas d’automatisation en temps réel dans une salle serveur obscure, éclairée par des indicateurs d’état et des flux de données