Modal
Un terminal phosphorescent dans une salle serveur plongée dans l'obscurité - la seule source de lumière est d'un vert éclatant
La fenêtre modale fonctionne comme un terminal phosphorescent dans une salle serveur obscure: un fond presque noir, une typographie vert pâle et une unique touche de vert citron vif faisant office de témoin lumineux. L’interface est résolument tournée vers les développeurs: fenêtres de code à chasse fixe avec des points lumineux, icônes 3D isométriques d’un vert caractéristique et une abondance d’espace blanc, permettant à un élément de chaque section de briller. La typographie se répartit entre une police personnalisée (Goga) pour les titres et une police variable (Inter) pour tous les éléments d’interface, toutes deux avec un crénage négatif réduit. Les couleurs sont uniformément réparties: la plupart des écrans sont monochromes et le vert citron vif n’apparaît que pour les actions principales, le logo, les illustrations 3D et les éléments mis en valeur. Les composants sont plats et sans bordure, la profondeur étant créée par de subtiles bordures vertes et un flou d’arrière-plan plutôt que par des ombres.
La fenêtre modale utilise une mise en page sombre pleine largeur, d'une largeur maximale de 1280 px, pour afficher le contenu. L'encart principal est centré: le titre (la première phrase en vert citron), un sous-titre, deux appels à l'action et un objet 3D servant de point d'ancrage visuel, sans dissocier la mise en page de la barre latérale. Les sections de contenu suivent un rythme uniforme: bandeau (lettres majuscules, Moss 70) → titre Goga → texte discret, puis soit une mise en page à deux colonnes avec une description de la fonctionnalité (texte + code/carte visuelle), soit une grille à trois colonnes de cartes. L'espacement entre les sections est généreux (80 px). La page alterne entre des bandes noires profondes (#000000) et des bandes légèrement plus claires (#181818), avec une section claire (#def0dd) au centre pour aérer la page. La navigation se compose d'une unique barre supérieure fixe à fond flou, sans barre latérale ni méga-menu. Le pied de page est compact et sombre, avec des colonnes de liens vert discret. La densité du texte est optimale: chaque section bénéficie d’un espace suffisant et les grilles de cartes n’utilisent pas plus de trois colonnes.
L'identité visuelle de Modal se divise en deux modes: des rendus 3D lumineux du produit et des maquettes de fenêtres de code sombres. L'élément central est un cube 3D unique, rendu avec un dégradé marketing (du vert citron à l'émeraude), entouré d'un halo à dégradé radial qui baigne l'espace vide d'une lumière verte – signature visuelle de la marque. Les fiches de charge de travail contiennent des icônes 3D isométriques (un cube filaire, un escalier plein, des calques) rendues dans le même vert citron sur fond sombre. Le code et les résultats des benchmarks sont présentés sous forme de fenêtres de terminal avec des points lumineux, une coloration syntaxique à chasse fixe dans une palette phosphorescente et une bordure verte discrète – elles ressemblent à des captures d'écran d'une véritable interface en ligne de commande. Les logos des clients sont affichés comme des étiquettes vert-gris désaturées sur une seule ligne à faible contraste, symbolisant la confiance sans concurrence visuelle. La densité globale est faible: la plupart des pages contiennent principalement du texte et les images sont présentées comme des points focaux individuels plutôt que comme des grilles de photographies. Il n'y a pas de photographies; l'ensemble du système visuel est rendu, géométrique et lumineux.
Palette
Marque
- Lime Pulse
#7fee64— Les principaux éléments de l'identité visuelle de l'entreprise sont le logo, l'appel à l'action principal (CTA), le remplissage des balises, les états actifs et la couleur de base de l'illustration.
Neutre
- Phosphor White
#ddffdc— Le texte principal, la couleur du titre, le contour de l'icône et le texte rempli du bouton constituent la principale surface lisible. - Void Black
#000000— Canevas de la page, couche d'arrière-plan la plus profonde - Ground Iron
#181818— Remplissage du bouton principal, surfaces des cartes dans les zones sombres, surface de base de l'interface utilisateur. - Carbon Veil
#212525— Surfaces surélevées, fond de navigation, légèrement plus clair que le sol. - Circuit Border
#485346— Le contour/cadre d'action fantôme, la principale ligne fine interactive, est d'une teinte gris-vert atténuée. - Phosphor Blue-Black
#1f2a33— Lignes de marquage secondaires fines, séparant les traits entre les bandes foncées.
Typographie
de 12 à 64 px · 8 étapes
- Goga — remplacement: Inter Tight or Space Grotesk · grandes lignes 400, 500 · Police de titres et sous-titres – Utilisée pour tous les titres H1 à H4 et les fiches. Goga est une police sans empattement géométrique personnalisée, avec des ouvertures étroites et des terminaisons légèrement carrées. La graisse moyenne (500) est réservée à la mise en valeur des titres de fiches; la graisse normale (400) est utilisée pour les titres principaux et de section. Pour accéder aux formes alternatives des glyphes qui définissent l’identité de Modal, son jeu de styles « ss01» doit être activé. L’espacement négatif des lettres diminue progressivement de -0,007 em à 48 px à -0,017 em à 21 px.
- Inter Variable — remplacement: Inter · grandes lignes 400, 500 · Interface utilisateur et contenu textuel: navigation, boutons, texte, étiquettes, pied de page. La police moyenne (500) est utilisée par défaut pour les éléments interactifs et la navigation; la police normale (400) pour les paragraphes. L’espacement des lettres est sensiblement réduit, même en petites tailles (-0,026 em à 14 px, -0,022 em à 16 px), ce qui confère à l’interface une densité compacte. Pour la ponctuation alternative, le caractère « cv11» doit être inclus. Les étiquettes en majuscules à 12 px utilisent un espacement de +0,05 em pour compenser la densité du texte.
Intervalles et forme
| But | Signification |
|---|---|
| Densité | moyenne |
| Étape de base | 20px |
| Rayon du bouton | 12px |
| Rayon de la carte | 8px |
| Ombres | non - des bordures à la place des ombres |
| Entre les sections | 80px |
| Largeur de la page | 1280px |
L'IA construira votre site web dans le style Modal 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
- Slash — Chambre forte de minuit avec des livres de comptes dorés
- AgentQL — Aurores boréales au-dessus du terminal la nuit
- GitHub — Un panneau de commande spatial doté de points de contrôle bioluminescents — un espace de travail sombre et atmosphérique où une unique lueur verte indique la voie à suivre.
- Doppler — L'éclairage violet du coffre-fort à minuit. La toile presque noire brille d'un unique signal lavande et d'une lumière verte de confirmation; chaque surface est suffisamment incurvée pour être saisie.
- Basedash — Un terminal informatique nocturne à la police mate. Un observatoire obscur où les indicateurs brillent de violet et de vert, les titres à empattement flottent au-dessus du bruit ambiant, et les boutons blancs en forme de pilule sont les seuls éléments lumineux dans une pièce aux surfaces noires et douces.
- Superwhisper — Les aurores boréales se fondent sur le verre de minuit
- Better Stack — Console Midnight SRE
- Langbase — Console Midnight Northern Lights
- Astro — Centre de contrôle des missions spatiales lointaines avec une unique lueur violette provenant d'une nébuleuse
- Wayfinder — Un écran noir avec un titre à peine audible flottant au-dessus d'une illustration animée. L'interface se présente sous la forme d'un curseur de luminosité plutôt que d'un panneau de contrôle.
- HashiCorp — La salle de contrôle à minuit, éclairée par des néons violets, est une surface technique sombre où un cube hexagonal lumineux sert de seule référence de couleur.
- Umbrel — Un foyer chaleureux dans la salle des serveurs la nuit — une pièce sombre où une simple lueur pêche met en valeur ce qui compte vraiment.