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
- Graphite — Grille d'extrémité lumineuse. Créez des surfaces de produit sombres et bordées autour de marquages typographiques blancs précis et d'éclats occasionnels de lumière spectrale.
- Linearity — Une console de studio lumineuse. Créez des écrans avec des espaces de travail minimalistes noirs dotés d'une interface blanche éclatante, de touches chromées et de quelques accents orange vif.
- Featurebase — Une console éclairée de violet. Imaginez chaque page comme une scène sombre et silencieuse, avec un espace de travail lumineux pour le produit qui émerge du bord inférieur.
- Nuxt — Lueur terminale dans l'espace profond. Création de plans d'interface sombres et fermés où le vert apparaît comme un signal alimenté sur des surfaces bleu-noir.
- 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