Shopify
Serre de Minuit - Des marques déposées s'épanouissent sur un fond turquoise profond, illuminées par une simple étincelle de menthe.
Le système de design de Shopify est un laboratoire e-commerce nocturne: une toile quasi noire rehaussée d'un turquoise profond, une police sans empattement large et affirmée, et une unique touche de vert menthe éclatant qui dynamise l'interaction. L'interface évoque une chambre noire, où produits et marques sont la source de lumière: photos et vitrines se détachent sur des surfaces presque noires, tandis que les éléments chromés s'estompent. Les composants sont géométriques et pourtant doux: des cartes de 12 px de rayon aux bordures fines, des boutons en forme de pilule et une police de 330 gras qui suggère l'envergure sans ostentation. Un unique signe de ponctuation chromatique (#36f4a4) est utilisé avec parcimonie sur les liens, les étiquettes et les états de focus, réservant la couleur aux éléments fonctionnels afin que l'histoire du marchand reste au centre de l'attention.
La largeur maximale est d'environ 1280 px, centrée, avec des blocs d'accueil pleine largeur qui s'étendent au-delà du conteneur photo. La mise en page alterne: (1) une page d'accueil sombre pleine largeur avec un titre superposé et des boutons d'appel à l'action, (2) des sections sombres et confortables avec des blocs de texte et d'images pleine largeur sur 2 colonnes ou des grilles d'images sur 3 colonnes, (3) des panneaux interactifs (fiche produit, calculateur de frais de port, carte du monde) affichés sous forme de cartes en relief sur un canevas plus profond. La navigation est une barre supérieure fixe avec le logo, 3 éléments de navigation, des liens secondaires et le bouton d'appel à l'action principal, le tout aligné à droite. Le rythme vertical utilise des espaces de 80 px entre les sections avec une transition douce — pas de séparation entre les sections sombres, seulement un changement de teinte.
Le design visuel est principalement axé sur le détaillant: les photos de produits en pleine résolution et les photos d’événements de la marque constituent l’essentiel du visuel, souvent sous la forme de grands fonds avec du texte blanc superposé. Les images sont cadrées serrées, à fort contraste et festives (sonnerie du Nasdaq, salutations de groupe, gros plans de produits en main). Le fond sombre donne l’impression que ces photos sont éclairées par des projecteurs. Les illustrations sont minimalistes: les images de produits intégrées et les captures d’écran des vitrines servent principalement à expliquer les produits. Les icônes sont monochromes, d’une épaisseur de trait de 1,5 à 2 px, généralement blanches ou de couleur #36f4a4 pour les icônes actives.
Palette
Marque
- Shopify Mint
#36f4a4— Les indicateurs de navigation actifs, les anneaux de focus, les surlignages de balises et les surlignages au survol des liens sont les seuls éléments chromatiques qui créent une impression d'interactivité activée sur un fond sombre.
Neutre
- Midnight Forest
#02090a— canevas de page, images d'arrière-plan d'en-tête, images d'arrière-plan de section - Deep Lichen
#061a1c— Surfaces principales des cartes, panneaux en relief, blocs de contenu. - Shaded Fern
#072720— Panneau de navigation, cartes supplémentaires, surélévation à peine perceptible du panneau. - Spruce Border
#1e2c31— Bordures fines pour les cartes, lignes de séparation, contours des champs de saisie. - Abyss Indigo
#000a1e— Surface supplémentaire pour l'intégration de produits/démonstrations, panneaux avec descriptions des fonctions. - Pure White
#ffffff— Texte principal, remplissage des boutons, titre, logos.
Typographie
de 12 à 70 px · 8 étapes
- Neue Haas Grotesk — remplacement: Inter · grandes lignes 330, 400, 500, 550, 600 · Le système typographique principal repose sur des titres discrets, avec une épaisseur de police de 70 à 96 px (330 à 400); un texte courant avec une épaisseur de 16 à 18 px (400 à 500); et une navigation et une interface utilisateur avec une épaisseur de 14 à 16 px (500 à 550). L’épaisseur de police ultra-légère de 330 sur les grands écrans est une caractéristique distinctive: elle inspire confiance par la sobriété plutôt que par l’ostentation.
- Inter Variable — remplacement: Inter · grandes lignes 400, 420, 450, 550 · Police secondaire utilisée dans les éléments d'interface de navigation, les notes discrètes, les onglets et les microtextes de pied de page. Ses minuscules légèrement plus grandes et son espacement plus standard la rendent plus lisible en petits corps. Elle convient également aux situations où une police de graisse 420 comble l'écart entre une police standard et une police de taille moyenne.
Intervalles et forme
| But | Signification |
|---|---|
| Densité | moyenne |
| Étape de base | 12px |
| Rayon du bouton | 9999px |
| Rayon de la carte | 12px |
| 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 Shopify 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
- Retool — Un atelier chaleureux en obsidienne – une surface pour les outils de précision, éclairée par des braises incandescentes, où tout prend forme.
- Elektron — À minuit, le panneau de commande de l'équipement est une toile presque noire, où les photos des produits ressortent tandis que l'interface reste pratiquement invisible.
- REKKI — Panneau de commande de vol dans le laboratoire photo
- OFFFICE : — une galerie noire engloutie par une police monolithique
- Clyde — La salle d'exposition, éclairée par un unique projecteur, est une galerie presque obscure où la seule couleur présente est une boule aux tons chauds dégradés.
- Channel Studio — Un laboratoire photo de studio avec un abat-jour corail.
- Electronic Materials Office — Une braise incandescente dans une galerie décorée de charbon de bois
- ORYZO AI — Un reportage photo sur une chambre noire. Un objet solitaire flotte dans la pénombre chaude, une police crème pour seul décor.
- Factory — Le terminal de la « salle de guerre» à minuit. L'« usine» est un panneau de contrôle noir austère où une simple carte blanche apparaît comme un ordre éclairé par une lampe torche; le seul objet dans la pièce est le travail lui-même.
- Hungry Tiger — Des graffitis aux couleurs vives, comme le curcuma, ornent le mur du tandoor. Une palette harmonieuse d'or et de brun rouille, avec une police de caractères si imposante qu'elle évoque davantage une enseigne de marché aux épices qu'un site web.
- Bibliothèque — Une galerie en forme de cube noir sous un projecteur – une plaque lumineuse solitaire dans un vaste hall sombre
- Apple (España) — théâtre noir avec éclairage