Framer
galerie de néons dans le vide
Framer fonctionne dans une quasi-obscurité totale: une toile noire où le contenu flotte comme une enseigne lumineuse lors d’un vernissage. Les titres, composés en GT Walsheim Medium avec un interlignage serré de 0,8 à 1,1 et un espacement négatif marqué entre les lettres (-0,04 em à 54 px), créent une typographie condensée et décorative qui se projette au-delà de son aspect statique. Un bleu électrique unique (#0099ff) assure tous les accents fonctionnels (bordures, effet de halo, icônes, états actifs), tandis que le reste de l’interface demeure achromatique, s’appuyant sur de subtiles transitions de gris (#111, #171717, #242424) pour créer de la profondeur à partir du noir absolu. Les composants semblent pensés avec soin plutôt que décoratifs: rayons arrondis de 8 à 25 px, bordures fines de 1 px, ombres portées minimales et surfaces translucides laissant transparaître le vide.
Les sections pleine largeur s'étendent au-delà du canevas noir, leur contenu étant limité à une largeur maximale d'environ 1200 px et centré. La section principale présente un en-tête aligné à gauche et un unique bouton d'appel à l'action (CTA), la partie droite étant volontairement laissée vide – de manière asymétrique, et non centrée. Les sections alternent entre des mises en page textuelles (grand en-tête + sous-titre) et des captures d'écran de produits. La section « Inclus avec Framer» utilise un mur de logos dans une grille à 4 colonnes. Dans la section Communauté, une capture d'écran de produit est placée dans un conteneur centré, pleine largeur et aux coins arrondis. La navigation est minimaliste: une fine barre supérieure avec le logo à gauche et des liens alignés à droite, sans commandes visibles. Rythme des sections: d'importants espaces verticaux de 80 px séparent les sections, créant ainsi des îlots de contenu distincts.
Les captures d'écran de l'interface utilisateur du produit dominent: encadrées par une fenêtre chromée à points tricolores, elles deviennent l'image principale. Les logos, gage de qualité, apparaissent en lettres blanches sur fond noir, avec un espacement important. Aucune photographie, illustration ou image abstraite n'est utilisée: le langage visuel est celui du produit lui-même, présenté comme une interface vivante. Style des icônes: minimaliste, contour, monochrome et blanc, de petite taille. Densité du texte: prédominant, avec quelques grands extraits sous forme de captures d'écran du produit. L'équilibre visuel de l'espace privilégie clairement la typographie aux images.
Palette
Marque
- Vivid Violet
#0066ff— Le bouton d'action principal est le seul endroit de l'interface où un fond de bouton de couleur unie est affiché.
Neutre
- Bone
#ffffff— Titres principaux, texte principal sur fond sombre, le fond des boutons est la seule source de lumière. - Void
#000000— La page, l'arrière-plan de la navigation, les surfaces des cartes, le remplissage des icônes: tout est d'un noir infini qui absorbe tout le contenu non essentiel. - Graphite
#111111— Les surfaces en relief des cartes représentent un cran au-dessus du vide — grandes cartes fonctionnelles et conteneurs modaux. - Obsidian
#171717— Surface intermédiaire pour les boutons, les cartes supplémentaires, les remplissages d'interface utilisateur - sépare les éléments interactifs du canevas. - Slate
#242424— Au survol de la souris, les champs de saisie et les panneaux en retrait prennent la teinte neutre la plus claire avant de passer au format texte. - Ash
#333333— Remplissage profond pour les images d'arrière-plan inactives et les éléments structurels.
Typographie
de 12 à 68 px · 8 étapes
- sans-serif — remplacement: Inter · grandes lignes 400 · sans-serif - trouvé dans les données extraites mais non décrit par l'IA.
- GT Walsheim — remplacement: Inter Tight · grandes lignes 500 · La police utilisée pour les titres et les en-têtes est la police de la marque. Elle est fortement condensée, avec un interlignage de 0,8 à 1,1 et un espacement des lettres de -0,04 à -0,05 em pour une taille de police comprise entre 44 et 68 px. Il ne s'agit pas d'un élément décoratif; la chaleur géométrique de GT Walsheim, associée à des règles strictes, confère au système son identité visuelle: affirmée, compacte et légèrement futuriste. Pour une expression géométrique similaire, vous pouvez envisager Inter Tight ou Space Grotesk Bold.
- Inter Variable — remplacement: Inter · grandes lignes 400 · Le texte principal, la navigation et les titres secondaires constituent l'essentiel du contenu. L'axe variable d'Inter permet une interpolation fluide des épaisseurs. Le décalage se réduit à mesure que la taille augmente: de -0,001 em à 18 px et de -0,027 em à 22 px. La version variable permet des micro-animations fluides sur le site. Solution de remplacement: Inter ( Google) – une alternative quasiment identique.
Intervalles et forme
| But | Signification |
|---|---|
| Densité | moyenne |
| Étape de base | 10px |
| Rayon du bouton | 9999px |
| Rayon de la carte | 20px |
| Ombres | non - des bordures à la place des ombres |
| Entre les sections | 80px |
| Largeur de la page | 1200px |
L'IA construira votre site web dans le style Framer 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
- Auros — Terminal abyssal avec boules de données bioluminescentes
- 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.
- 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
- 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.
- Ameba — La salle de contrôle à minuit – une pulsation bleu électrique à l'intérieur de panneaux de verre dépoli
- Branding — Mur de galerie noir, touches de rouge sang - De grandes polices blanches flottent sur une toile sombre qui ressemble à un vide, interrompue par une unique touche de rouge vif et des éléments décoratifs saisissants qui font davantage penser à une signalétique de galerie qu'à une interface web.
- Harness — Centre de contrôle des missions à minuit avec des accents verts phosphorescents
- Koto — La galerie Obsidian à minuit. Une scène presque plongée dans l'obscurité, où la seule source de lumière chaude est un unique marqueur jaune, et des caractères condensés flottent dans le vaste espace négatif comme des affiches d'exposition.
- Ohzi — Un cube lumineux suspendu dans une galerie obscure
- Depot — Un terminal serveur sombre. Une console de développement presque noire, avec une unique LED verte signalant le début du travail, le reste de l'interface utilisateur étant affiché en graphite.
- Maciej Zadykowicz — La Midnight Gallery, avec sa fresque kaléidoscopique, est un mur d'atelier presque noir où une œuvre typographique vibrante et colorée capte l'attention tandis que tout le reste reste calme et réfléchi.