Substack
De l'encre orange sur le bureau de la rédaction
Substack ressemble à un tableau de bord de salle de rédaction bien rodé: une toile blanche, un texte aux tons chauds, presque noir, et une unique touche orange vif marquant chaque étape de la création de contenu. La hiérarchie visuelle repose sur la densité plutôt que sur la décoration: de fines lignes grises séparent les éléments du flux, les avatars sont petits, les métadonnées discrètes, et le regard du lecteur est naturellement attiré par l’appel à l’action orange, le logo orange, le lien « S’abonner» orange et le bouton « Créer» orange. Les surfaces restent plates et épurées – pas d’ombres portées, pas d’éléments chromés – laissant la typographie (un élément d’interface utilisateur chromé compact associé à une police de titres à empattements personnalisée) porter l’essentiel du message éditorial. Le style caractéristique se caractérise par des éléments chromés sobres et des touches de couleur vive et monochrome: une application de lecture qui ressemble à un outil de publication.
Mise en page à trois colonnes pour ordinateur: une barre latérale gauche fixe (environ 200 px, navigation avec icônes et libellés, fixe), un flux central (largeur maximale d'environ 600 px, liste d'articles à défilement vertical) et une barre latérale droite fixe (environ 300 px, recherche, recommandations et inscription). Le flux central constitue le cœur éditorial: pas de fiches, simplement des articles empilés les uns sur les autres, séparés par de fins séparateurs et un espacement de 32 px entre les sections. La bannière principale se trouve en haut du flux, sous la forme d'une fiche unique occupant toute la largeur. La barre latérale gauche contient le logo de la marque (un symbole orange avec des lignes superposées), six éléments de navigation et un bouton orange « Créer» occupant toute la largeur, en bas. La barre latérale droite contient un champ de recherche, une fiche d'inscription et une liste « À lire ensuite». La navigation est minimaliste: pas de barre supérieure, pas de fil d'Ariane; la barre latérale fait office de navigation. La densité du contenu est élevée: les publications utilisent des métadonnées de 12 à 13 px et un texte de 15 à 19 px, créant un rythme semblable à celui d’un journal plutôt qu’à celui d’une grille de cartes de marché.
Les photos sont du contenu généré par les utilisateurs (avatars des auteurs, vignettes et images des articles); Substack ne fournit pas ses propres photos décoratives. La carte principale utilise un dégradé turquoise-vert avec des éléments illustratifs abstraits (formes géométriques, objets stylisés comme des stylos et des notes) en arrière-plan. Les vignettes des articles dans la barre latérale droite sont petites (64 px), encadrées par un rayon de 8 px et servent d’aperçu de la liste de lecture. Le langage visuel global est textuel: l’interface est une toile de lecture et les images servent de petits points d’ancrage visuels plutôt que de créer une ambiance.
Palette
Marque
- Signal Orange
#ff6719— 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
- Ink
#363737— Corps du texte — le texte principal, les titres, les titres des articles, les horodatages et les noms des auteurs; une couleur chaude, presque noire, au lieu du noir pur #000 pour une lecture plus facile. - Paper
#ffffff— La zone de dessin de la page, les surfaces des cartes, les champs de saisie et l'arrière-plan de navigation sont les surfaces dominantes qui occupent la grande majorité de l'interface. - Charcoal
#232525— Survol de la souris pour afficher du texte supplémentaire et des liens avec des niveaux de sélection élevés; plus précis que le mode Ink pour les blocs de code et les blocs de sélection. - Stone
#777777— 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. - Ash
#b6b6b6— Lignes de bordure fines, contours de boutons, contours d'icônes, bordures sur les commandes désactivées. - Mist
#c8c8c8— Lignes de séparation, fond discret pour les icônes, remplissage des cellules vides sous forme de squelette.
Typographie
de 12 à 32 px · 5 étapes
- system-ui — remplacement: -apple-system · grandes lignes 400, 500, 600 · La police principale de l'interface utilisateur et du texte courant est utilisée pour les libellés de navigation, les boutons, les messages, les métadonnées, les champs de saisie et tous les éléments d'interface. Des tailles compactes de 12 à 13 px pour les métadonnées et de 15 à 19 px pour le texte courant donnent l'impression d'un flux d'actualités dense. La graisse est de 400 pour le texte courant, 500 pour les éléments de navigation et les libellés des boutons, et 600 pour les titres des messages mis en évidence et les titres de section.
- Cahuenga — remplacement: Charter · grandes lignes 500 · Une police de caractères serif décorative emblématique, idéale pour les titres de produits (encadrés, fiches d'inscription, texte principal). Son épaisseur moyenne et son interlignage léger lui confèrent une allure distinguée sans alourdir l'ensemble; c'est la seule police qui, outre la couleur orange, symbolise l'identité de Substack.
- Spectral — remplacement: Charter · grandes lignes 400 · Une police à empattements pour les articles longs, utilisée dans les salles de lecture et les flux d'actualités afin d'améliorer la lisibilité des contenus éditoriaux. Un interlignage légèrement plus serré (1,20) assure un confort de lecture optimal tout en conservant la concision propre aux salles de rédaction.
Intervalles et forme
| But | Signification |
|---|---|
| Densité | dense |
| Étape de base | 8px |
| Rayon du bouton | 9999px |
| Rayon de la carte | 12px |
| Ombres | non - des bordures à la place des ombres |
| Entre les sections | 32px |
| Largeur de la page | 1200px |
L'IA construira votre site web dans le style Substack 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
- ElevenLabs — Un reportage photo aux tons crème chauds, avec des titres discrets. Un carnet de style Bauhaus: papier couleur coquille d’œuf, encre noire et une touche de violet et d’orange pour la présentation du produit.
- Awesomic — Grille éditoriale en zinc avec des signes de ponctuation orange évoquant des confettis
- Monad — revue technique éditoriale sur parchemin chaud
- Dub — Panneau de commande en papier de riz mat de Link
- Seline Analytics — Un tableau analytique silencieux sur du papier chaud
- Notion — Un carnet en papier chaud sous le soleil de midi
- Anthropic — Un journal de terrain scientifique sur vélin aux tons chauds — des surfaces ivoire apaisantes, des titres éditoriaux à empattements et une unique touche d'argile qui n'apparaît que lorsque l'action est nécessaire.
- Calendly — Encre bleu foncé sur marbre froid
- Augen Pro — La présentation blanche d'Apple met en valeur un bleu électrique clinique et aérien comme unique accent dans un espace monochrome.
- Antimetal — Chronique éditoriale sur papier crème – une matinée paisible dans une revue scientifique, où la sobriété inspire confiance et où les empattements font tout le travail.
- Perk — Chaux électrique sur papier sulfurisé chaud
- Ditto — Un atelier baigné de soleil, où sont créés des échantillons de fleurs sauvages. Des surfaces crème chaudes, une base jaune éclatante, des encres bleu marine profond, des formes organiques aux couleurs chatoyantes qui s'épanouissent en arrière-plan.