Superhuman
Comité de rédaction de l'heure dorée
Superhuman se situe à la croisée de la photographie éditoriale et de l'interface utilisateur logicielle: une toile aux tons chauds, évoquant le parchemin (jamais d'un blanc pur), encadre des éléments de marque bordeaux et des touches de violet éclatant. Les titres, en police 460, restent discrets, laissant la vedette aux photographies cinématographiques pleine page, tandis que des fiches produits translucides flottent comme du verre au-dessus des images. La palette reste sobre et éditoriale la plupart du temps: surfaces crème, texte anthracite, bordures gris chaud subtiles et espacement généreux entre les éléments. La couleur est réservée à la ponctuation de la marque: un simple appel à l'action bordeaux, des liens violets, un bouton d'extension lilas clair. Le système évite délibérément les ombres marquées et les dégradés sur les surfaces de l'interface. La profondeur est obtenue par la superposition de photographies et un léger flou d'arrière-plan dans le titre, plutôt que par un effet de superposition.
L'élément principal est une photographie pleine largeur avec un titre centré (48-64 px/460 px) et un unique appel à l'action illustré par une image de vin. Des fiches produits translucides flottantes sont superposées sur les bords gauche et droit. En dessous, une bande logo blanche (6 cellules par ligne, largeur maximale limitée) précède une section d'onglets aux surfaces blanches sur fond parchemin. Une bande turquoise foncée rompt le rythme aux deux tiers de la page (pleine largeur, deux colonnes: image à gauche, texte à droite), créant le seul contraste tonal lors du défilement. Une bande dégradée suit. L'espacement vertical entre les sections est de 64 à 96 px. La largeur maximale du contenu est d'environ 1200 px, centrée, l'élément principal et la bande foncée occupant toute la largeur de la fenêtre. La navigation se compose d'un unique en-tête fixe à fond flou; pas de barre latérale ni de méga menu. Le pied de page est une page bordeaux pleine largeur présentant une mise en page à plusieurs colonnes de liens. Le rythme général est le suivant: cadre principal → contenu blanc/crème apaisant → bande foncée avec l’image principale → dégradé atmosphérique → pied de page bordeaux, alternant bandes claires et foncées pour créer un rythme éditorial.
L'élément visuel principal est une photographie cinématographique: un portrait pleine largeur sur fond de ciel ouvert sert de point focal, avec une seconde bande atmosphérique positionnée plus bas sur la page. L'image, aux tons chauds et subtilement atténués, est prise de profil, évoquant la lumière dorée du crépuscule et lui conférant une allure plus éditoriale que institutionnelle. Une bande sombre, ornée de rectangles géométriques translucides et d'inscriptions manuscrites, se superpose à la photographie d'un homme pensif – un collage de surfaces plutôt qu'une image unique. L'interface utilisateur se présente sous forme de vignettes flottantes superposées directement à la photographie, et non comme des captures d'écran séparées. On n'y trouve ni illustrations libres de droits, ni rendus 3D, ni formes décoratives abstraites, à l'exception de la bande atmosphérique en dégradé. Les icônes sont des icônes minimalistes monochromes, de 16 à 20 pixels de large environ, leur largeur correspondant à une police de 460 points.
Palette
Marque
- Midnight Wine
#421d24— Les principaux boutons d'action, la bannière publicitaire et le pied de page sont d'un bordeaux chaud, presque noir, qui ressemble plus à de l'encre qu'à du rouge, ancrant la palette de couleurs sans être envahissants. - Royal Violet
#714cb6— Le violet sert à mettre en évidence les liens, les balises et les courtes phrases. Il ne doit pas être utilisé comme couleur principale pour les appels à l'action.
Neutre
- Lilac Mist
#d4c7ff— Le remplissage secondaire des surfaces, les icônes lumineuses et les fonds des boutons fantômes présentent tous une couleur violette discrète qui évoque le style de la marque sans attirer indûment l'attention. - Deep Lagoon
#0c4243— Le fond sombre de la bande dessinée, utilisé comme principal élément narratif, est la seule surface sombre du système, combinée à un motif géométrique superposé. - Warm Parchment
#f2f0eb— La surface de travail de la page est l'élément dominant; une couleur crème chaude remplace le blanc comme base, conférant à l'ensemble du système une chaleur éditoriale. - Soft Mist
#e3e3e2— Bordures fines, contours de cartes, lignes de séparation — un gris clair et chaud qui se fond dans le parchemin tout en définissant clairement les bords. - Ink Charcoal
#292827— Texte courant, titres, contours des icônes: une couleur chaude, presque noire, avec suffisamment de brun pour évoquer l’encre sur le papier, jamais froide #000 - Stone Gray
#666666— Textes secondaires, textes d'accompagnement, descriptions discrètes – un seul gris moyen, utilisé avec parcimonie pour ne jamais concurrencer le texte principal.
Typographie
de 12 à 64 px · 8 étapes
- Super Sans VF — remplacement: Inter (closest open equivalent for variable weight range) · grandes lignes 460, 500, 540, 600, 700 · Une seule police est utilisée dans tout le système. Les variables d'axe couvrent la plage de 460 (une police signature, légèrement tronquée pour tous les grands titres) à 540 (texte courant en gras) et 700 (petites légendes en gras). Un VF spécialement conçu donne aux titres en graisse 460 un aspect plus soigné que négligé: avec un espacement réduit entre les lettres (48-64 px), l'effet « légèrement tronqué» est perçu comme un gage d'assurance plutôt que de faiblesse.
Intervalles et forme
| But | Signification |
|---|---|
| Densité | dense |
| Étape de base | 8px |
| Rayon du bouton | 16px |
| Rayon de la carte | 16px |
| Ombres | non - des bordures à la place des ombres |
| Entre les sections | 64-96px |
| Largeur de la page | 1200px |
L'IA construira votre site web dans le style Superhuman 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
- AI for Business — Showroom éditorial brutaliste aux tons gris chauds
- Jeton — Un éditorial sur la fintech sur du marbre chaud
- Airtable — Un séminaire convivial avec des chapitres marqués de différentes couleurs
- Osmo — Le musée des promoteurs immobiliers sur béton gris
- Linktr — Les affiches éditoriales s'empilent comme des bonbons. Le site web est conçu en blocs de couleur, avec des titres vert vif sur fond bleu cobalt et des éléments de navigation blancs en forme de pilule flottant au-dessus de champs bordeaux.
- Outsource Consultants — Une feuille architecturale grand format sur papier os. Une esthétique monographique, où une unique touche d'indigo vif interrompt la grille typographique maximaliste, par ailleurs chaleureuse.
- Streamtime — Tableau d'inspiration tactile et créatif - Table de scrapbooking design
- Switch-Lit — Grille éditoriale imprimée à l'encre sur papier crème
- HubSpot — Un papier couleur crème chaude rehaussé d'une unique touche d'orange. HubSpot évoque un magazine de luxe imprimé sur papier épais: titres à empattements, pages couleur crème chaude et une unique touche d'orange vif qui met en valeur les points essentiels.
- Granola — Notes de terrain sur vélin chaud — Granola se lit comme un carnet Moleskine usé, ouvert sur un bureau ensoleillé: les titres à empattements lui confèrent une impression de solidité, les accents verts organiques évoquent une encre végétale, et les fines lignes dans les marges des fiches rappellent des notes manuscrites.
- Secure — Une conversation dans un café européen, baigné par la douce lumière du jour, offre une vision chaleureuse et élégante des appels vidéo, où les titres à empattement se lisent comme un article de magazine réfléchi plutôt que comme une page produit technologique.
- Mockups made easy — Studio de design éditorial sur papier blanc