Superlist
Un espace de travail nocturne aux reflets de corail — une surface d'application aubergine discrète où une simple étincelle orange chaude signale chaque action
Superlist utilise un langage de productivité aux tons pourpre profond: aubergine intense, corail chaud comme seule couleur principale et grands titres sans empattement qui imprègnent l'interface. Celle-ci évoque le travail concentré des nuits blanches: calme, structurée et affirmée, la couleur servant uniquement de ponctuation fonctionnelle pour les appels à l'action, les états actifs et les points clés. Les surfaces sont superposées dans des tons foncés subtils avec une nuance de pourpre (#181824 → #26253b), évitant le noir pur pour une profondeur chaleureuse et non froide. Les composants présentent des formes arrondies généreuses (cartes de 20 px, boutons en forme de pilule), des ombres douces et une mise en page aérée grâce à des espaces de 10 à 16 px, plutôt que des grilles serrées. Le ton du titre est primordial: une police de 600 points, une épaisseur de 70 à 88 px et un espacement réduit de -0,02 em confèrent au texte une dimension typographique, plus proche du contenu éditorial que de l'interface SaaS.
Les sections sombres occupent toute la largeur de la page, avec des conteneurs de contenu centrés et occupant toute la largeur. La section principale, centrée verticalement, comprend un titre, un sous-titre et un appel à l'action (CTA), suivis d'une grande capture d'écran du produit qui chevauche la section suivante. Les sections suivantes alternent entre des blocs de texte centrés et des grilles de fiches. La section des avis utilise une grille à trois colonnes avec des fiches d'avis et 16 gouttières. La navigation se compose d'une unique barre supérieure avec un logo à gauche, des liens centrés et des options de connexion à droite; il n'y a ni barre latérale fixe ni méga-menu. Les gouttières généreuses entre les sections (16 gouttières) créent un rythme éditorial aéré plutôt qu'une grille de produits dense.
L'espace visuel est dominé par des captures d'écran du produit: un large cadre aux coins arrondis, présentant l'interface de l'application, occupe les sections principale et secondaire. Les photos sont minimales et servent uniquement d'avatars ou d'aperçus des contenus multimédias (par exemple, l'image du concert dans le panneau de droite de la maquette). Les logos de la barre de confiance sont des symboles blancs, plats et discrets. On ne trouve ni illustrations décoratives, ni graphismes abstraits, ni rendus 3D. La stratégie visuelle consiste à présenter le produit à grande échelle, à laisser la typographie exprimer les émotions et à utiliser le corail comme unique couleur d'accent.
Palette
Marque
- Coral Ember
#ff4a36— L'orange est utilisée comme couleur d'accent secondaire pour les détails décoratifs et pour souligner des informations ponctuelles. Elle ne doit pas être utilisée comme couleur principale pour les incitations à l'action.
Neutre
- Aubergine Canvas
#181824— L'arrière-plan de la page, la zone principale, est d'une teinte chaude et foncée qui remplace le noir pur, donnant à l'interface utilisateur un aspect stratifié plutôt que plat. - Elevated Plum
#26253b— Surfaces de cartes, champs de saisie, conteneurs de navigation: créer de la profondeur sans limite visible est encore plus simple qu’avec une toile. - Pure White
#ffffff— Titres principaux, texte des boutons, contours des icônes – contraste maximal sur fond sombre. - Fog Text
#696f81— Le texte principal, les titres secondaires et les bordures discrètes offrent un rapport de contraste de 7:1 pour une lecture confortable sur un fond couleur aubergine. - Ash Text
#8e8da0— Une couleur neutre est autorisée pour les éléments d'interface secondaires, les séparateurs et les étiquettes discrètes. Elle ne doit pas être utilisée comme couleur principale pour les appels à l'action. - Mist Highlight
#a3a3a7— Des bordures discrètes, des séparateurs et des éléments de navigation inactifs créent une tonalité neutre subtile qui se détache néanmoins sur le fond.
Typographie
de 12 à 88 px · 9 étapes
- sans-serif — remplacement: Inter · grandes lignes 400 · sans-serif - trouvé dans les données extraites mais non décrit par l'IA.
- Haffer XH SemiBold — remplacement: Inter Tight · grandes lignes 400, 600 · Police principale pour l'affichage et les titres. Elle est utilisée en taille 70 à 88 px pour les titres principaux, avec un interlignage de -0,02 em et une épaisseur de 600. L'interlignage réduit et la hauteur importante des lettres confèrent aux titres un aspect éditorial, donnant à l'interface sombre l'apparence d'une couverture de magazine plutôt que d'un tableau de bord. À remplacer par Inter Tight ou General Sans en gras.
- Jersey 10 — remplacement: Anybody · grandes lignes 400 · Police décorative de grande taille, utilisée pour les chiffres accentués et les surlignages. À utiliser avec parcimonie en très grande taille pour créer des accents typographiques. Peut être remplacée par Anybody ou Cabinet Grotesk.
Intervalles et forme
| But | Signification |
|---|---|
| Densité | moyenne |
| Étape de base | 10-16px |
| Rayon du bouton | 100px |
| Rayon de la carte | 20px |
| Ombres | ombres douces |
| Entre les sections | 80px |
| Largeur de la page | 1200px |
L'IA construira votre site web dans le style Superlist 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
- DNA — L'Observatoire de Minuit vu à travers une lentille à particules
- Abetterlou — Sparks on Saddle Leather – Une police de caractères chaude et crémeuse qui brille sur un fond noir café profond, avec des boutons ambrés dorés qui évoquent du métal chaud pressé contre la page.
- Galileo-ft — Un poste de commandement spatial avec des signaux bleu électrique
- Decide AI — Observatoire à minuit - signal de menthe
- Redis Agency — L'atelier éditorial, ouvert après les heures de bureau, est un lieu plongé dans l'obscurité où tout le travail de branding est réalisé à l'aide de polices à empattement et d'un unique radis rouge.
- Spellbook — Une salle d'audience nocturne éclairée à l'encre corail – une surface éditoriale sombre où le seul son est le chaud coup de stylo orange.
- Linear — instrument de précision de minuit
- 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.
- Hyperstudio — Le motif est gravé dans l'obsidienne. Des textes et de fines lignes encadrent un espace blanc d'un noir profond, ponctué de marques de boussole dorées indiquant le chemin.
- Air — sculpture « Ciel de minuit à travers le verre»
- Raycast — Centre de commandement de minuit, néon corail
- dope.security — Terminal de minuit avec balises violettes