Telegram, WhatsApp+380637610482
Valery Danyuk
Valery DanyukpromoteurDéveloppement d'outils d'IA pour les entreprises. Haute qualité. Prix abordables.Écrire sur Telegram
Mercury — un aperçu d'un site dans ce style

Mercury

Les rives alpines au crépuscule

Mercury s'inscrit dans une esthétique bancaire alpine: un fond quasi noir (#171721) crée une atmosphère cinématographique, évoquant un observatoire, où les contenus semblent flotter comme des cartes graphite légèrement plus claires. L'interface est principalement monochrome – texte ivoire sur fond onyx – avec un unique élément bleu cobalt (#5266eb) réservé à l'opération principale « Ouvrir un compte». La typographie est l'élément expressif principal: une police d'affichage personnalisée de 480 (ni gras ni clair) associée à une police de corps discrète de 400 crée un style affirmé sans jamais être criard. Les composants sont plats et sans bordure, leur structure étant définie par un rayon de 12 px (comme sur les cartes graphite) et des commandes en forme de capsule, plutôt que par des ombres. La photo principale, qui occupe toute la surface de la page – des montagnes brumeuses se détachant sur une table solitaire – donne le ton avant même que l'interface utilisateur ne prenne le relais, et chaque élément suivant conserve cette sobriété et cette élégance discrètes.

Tout le contenu est conçu dans un style sombre et pleine largeur. L'écran principal est une photo pleine largeur de 100 px avec un titre centré, un sous-texte et un formulaire de collecte d'adresses e-mail (largeur maximale d'environ 640 px). En dessous, le contenu est organisé en sections d'une largeur maximale de 1 200 px avec des marges verticales de 72 px. Ces sections alternent entre une mise en page à deux colonnes (texte à gauche et image à droite) et des fiches descriptives de produits sur trois colonnes. La navigation est assurée par une barre supérieure transparente superposée à l'écran principal. Au défilement, cette barre se fond progressivement dans un fond sombre uni évoquant du verre dépoli (effet de flou). Le pied de page est sombre et contient des notes textuelles. La mise en page verticale est aérée, avec une densité importante et un espacement généreux entre les sections. Il n'y a pas de navigation latérale; toute la navigation se trouve dans la barre supérieure.

La section principale est dominée par des photographies cinématographiques pleine largeur – des paysages inspirants et atmosphériques (montagnes brumeuses, espaces de travail isolés en pleine nature) – qui présentent les services bancaires comme une expérience contemplative et sublime. Ces photographies sont de haute qualité, légèrement désaturées, avec des tons froids et un léger fond sombre pour préserver la lisibilité du texte. Sous cette section, les images alternent avec des captures d'écran de l'interface utilisateur du produit et des arrière-plans abstraits et atmosphériques. On n'y trouve ni illustrations, ni icônes s'apparentant à des œuvres d'art: les éléments visuels sont soit photographiques, soit purement fonctionnels. Le style des icônes de l'interface utilisateur est minimaliste, composé de lignes et de glyphes couleur ivoire, utilisé pour la navigation, les boutons et les formulaires.

Palette

Marque

  • Cobalt #5266eb — La couleur violette est utilisée pour les boutons remplis, les états de navigation sélectionnés et les moments de conversion déclenchés par le focus.

Neutre

  • Onyx Canvas #171721 — Arrière-plan de la page principale, superposition de base pour l'écran d'accueil, canevas pour le pied de page et les sections.
  • Graphite Card #1e1e2a — Les surfaces en relief du carton et des sections sont légèrement plus légères que la toile, créant ainsi une séparation douce.
  • Obsidian Button #272735 — Remplissages de boutons supplémentaires, arrière-plans de formulaires intégrés, surfaces interactives discrètes.
  • Slate Border #70707d — Séparateurs d'épaisseur moyenne et limites structurelles entre les blocs de contenu.
  • Mist Border #e2e3ed — Des bordures fines et à peine perceptibles, des contours de boutons à peine visibles, des bords de champs de saisie – une bordure claire sur un fond sombre.
  • Ash Text #c3c3cc — Texte principal, texte auxiliaire, étiquettes supplémentaires – une hiérarchie simplifiée sans perte de lisibilité.

Typographie

de 12 à 65 px · 9 étapes

  • arcadia — remplacement: Inter · grandes lignes 360, 400, 420, 480 · Interface principale et utilisateur: police de caractères pour la navigation, le corps du texte, les boutons, les champs de saisie, les étiquettes et les textes auxiliaires, avec une épaisseur de 400 pour le corps du texte et de 480 pour les éléments mis en valeur. L’échelle d’épaisseur intermédiaire (360, 420, 480) au lieu de l’échelle standard (300/400/600) confère au texte Mercury un aspect particulièrement équilibré: ni trop gras, ni trop fin, toujours harmonieux.
  • arcadiaDisplay — remplacement: Söhne Breit · grandes lignes 360, 480, 530 · La police utilisée pour les titres et les éléments décoratifs est de taille 480 pour toutes les tailles de titres de 28 à 65 px, tandis que la taille 530 est réservée aux éléments décoratifs les plus grands. Un faible interligne (1,1 à 1,2) et un espacement positif entre les lettres (0,01 à 0,02 em) confèrent au texte décoratif une apparence aérée et architecturale, contrairement à la structure compacte du texte éditorial.

Intervalles et forme

ButSignification
Densitémoyenne
Étape de base12px
Rayon du bouton32px
Rayon de la carte12px
Ombresnon - des bordures à la place des ombres
Entre les sections72px
Largeur de la page1200px

L'IA construira votre site web dans le style Mercury 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

  • Origin Financial — Une galerie nocturne d'une opulence discrète. Une pièce calme, presque obscure, où de grandes polices à empattement et quelques panneaux colorés illuminés créent l'impression que la finance est une œuvre d'art soigneusement agencée.
  • Air — sculpture « Ciel de minuit à travers le verre»
  • Slash — Chambre forte de minuit avec des livres de comptes dorés
  • dope.security — Terminal de minuit avec balises violettes
  • Modal — Un terminal phosphorescent dans une salle serveur plongée dans l'obscurité - la seule source de lumière est d'un vert éclatant
  • Giga — Horizon de minuit sur de l'obsidienne givrée
  • Dovetail — Centre de contrôle Blueprint à minuit
  • Dovetail — Un plan sous une lune noire — des lignes graphiques à peine visibles, une police blanche, une étincelle violette
  • AgentQL — Aurores boréales au-dessus du terminal la nuit
  • Supabase — Un éditeur de code à minuit, avec un point vert phosphorescent — une unique pulsation chromatique sur un océan de poussière de charbon
  • Changelog — La console de l'observatoire derrière une vitre sombre
  • 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.