Chaque histoire a sa propre échelle
TEXT.H1En-tête de premier niveau
Taille H1 à l’intérieur de la zone de texte. Le titre de la page est présenté avec un en-tête séparé — ses options sont indiquées ci-dessous.
Style Guide
Un catalogue de styles pour les publications : typographie, images, galeries, cartes, vidéos et en-têtes. Comparez les exemples, choisissez un style et copiez sa commande pour le chat. Chaque exemple possède un code permanent : indiquez-le avec son emplacement dans l’article pour mettre en forme le passage ou l’image souhaités.
Parfois « un peu plus large » signifie 800 pixels, et parfois presque tout l’écran. Ici, vous pouvez pointer du doigt l’option souhaitée et copier son code. Les mots avaient finalement une taille commune.
Sélectionnez un échantillon, copiez la commande et spécifiez un emplacement dans le matériau. Chaque technique possède un code constant : QUOTE.RULE, IMAGE.WIDE ou, par exemple, GALLERY.TWO-ONE.
Texte et rythme
TEXT.H2Titre de la section
Une nouvelle pensée prend un départ notable. C’est le niveau principal de l’article.
Le titre donne la direction du texte
TEXT.H3Sous-titre
La section s’est agrandie — divisons-la en parties compréhensibles.
Vous pouvez maintenant voir les détails
TEXT.H4Petit sous-titre
Un autre niveau où sans lui il est plus difficile pour le lecteur de s’y retrouver.
Une légère torsion dans la section
TEXT.H5En-tête compact
Niveau supplémentaire rare. Ne remplace pas les sécrétions grasses normales.
Clarification tranquille
TEXT.H6Le plus petit en-tête
Le dernier niveau de la hiérarchie ; dans la plupart des articles, nous n’y arrivons pas.
La dernière étape
TEXT.PARAGRAPHParagraphe régulier
La base de l’article. Ici, le texte peut calmement expliquer, connecter et raconter.
Le design fonctionne lorsque vous cessez de le remarquer. Le paragraphe conserve une largeur de ligne confortable, le lien connaît sa place et le titre suivant apparaît exactement quand il est temps de changer de sujet.
TEXT.BOLDÉcoulement huileux
Mettez en surbrillance un mot important tout en conservant un paragraphe normal.
Ce qui est important dans cette phrase, c’est une solution. Le reste des mots n’a pas besoin d’être prononcé plus fort.
TEXT.UNDERLINESouligner
Un petit truc à l’intérieur de la ligne. Chaque sélection a sa propre tâche.
Exemple : fragment souligné
TEXT.STRIKEBarré
Un petit truc à l’intérieur de la ligne. Chaque sélection a sa propre tâche.
Exemple : ancienne formulation
TEXT.CODECode en ligne
Un petit truc à l’intérieur de la ligne. Chaque sélection a sa propre tâche.
Exemple : image.wide
TEXT.SUPExposant
Un petit truc à l’intérieur de la ligne. Chaque sélection a sa propre tâche.
Superficie — m2
TEXT.SUBIndice
Un petit truc à l’intérieur de la ligne. Chaque sélection a sa propre tâche.
Formule — H2O
TEXT.LINKLien texte
Le lien régulier reste partie de l’offre.
Lorsque vous avez besoin d’un ensemble de couleurs et de boutons, ouvrez Système de design.
QUOTE.RULECitation avec filet vertical
Geist Mono et bande verticale. Met en évidence une idée tout en conservant la largeur du texte.
Une bonne citation laisse au lecteur une pensée et le design ne fait que le travail de la mettre en valeur.
QUOTE.ACCENTCitation d’accent
Grande ligne sans rayure. Pour une introduction ou une réflexion qui mérite qu’on s’y attarde.
Le lecteur remarque d’abord le rythme. Et puis… ce qu’ils voulaient lui dire.
LIST.BULLETListe à puces
Plusieurs pensées égales, dont des points imbriqués.
- Nous choisissons d’abord le sens
- Ensuite — le formulaire
- Largeur
- Rythme et accents
- Ensuite on regarde le résultat
LIST.NUMBERListe numérotée
L’ordre est important : étapes, séquence, cohérence.
- Trouver un exemple dans le catalogue
- Copiez son code
- Indiquer le lieu de publication
TEXT.DIVIDERSéparateur
Une pause entre les parties d’une histoire sans nouveau titre.
TEXT.CODE-BLOCKBloc de code
Les commandes et les exemples ont leur propre place.
Стиль: IMAGE.WIDE
Пропорция: RATIO.4X5
Место: после второго абзаца
Текст: без измененийTEXT.TABLETableau
Lorsque plusieurs options sont plus faciles à comparer côte à côte.
| Tâche | Mise en forme |
|---|---|
| Mettre en évidence une pensée | Citation avec filet vertical |
| Afficher l’épisode | Galerie |
| Continuer la conversation | Carte avec lien |
Proportions
Pour les nouveaux matériaux, nous conservons cinq préréglages principaux : 9:16, 16:9, 4:5, 5:4 et 1:1. Le reste sont des options supplémentaires pour la photographie et les aperçus. La proportion est la forme source ; « normal / large / pleine largeur » - taille du bloc sur la page.
Pour Instagram, on distingue les flux photos et les vidéos verticales. 9h16 préparation pour les Stories/Reels ; pour le ruban photo, le portrait de base est 4:5. Les formats d’application, d’API et de publicité peuvent varier. Pour le blog, toutes ces proportions sont conservées sans recadrage ; Avant de passer à Instagram, nous sélectionnons le préréglage approprié pour un emplacement spécifique.
RATIO.9X169:16
Écran vertical · 1080 × 1920. Toile principale pour les histoires et les bobines. Pour la photo dans le flux, vous aurez besoin d’un cadre séparé.
RATIO.16X916:9
Vidéo horizontale · 1920 × 1080. Idéal pour YouTube, les screencasts et les illustrations larges.
RATIO.4X54:5
Portrait · 1080 × 1350. Le format vertical principal pour les photos et les cartes à bandes.
RATIO.5X45:4
Cadre horizontal calme · 1350 × 1080. La même paire de côtés, pivotée de 90°.
RATIO.1X11:1
Carré · 1080 × 1080. Carte universelle, couverture ou tracé compact.
RATIO.3X43:4
Portrait supplémentaire · 1080 × 1440. Enregistrer en tant que préréglage distinct ; Nous vérifions la compatibilité d’une méthode de téléchargement spécifique sur Instagram avant sa sortie.
RATIO.4X34:3
Cadre horizontal classique · 1440 × 1080. Idéal pour les photographies et les diagrammes détaillés.
RATIO.3X23:2
Cadre photographique horizontal · 1620 × 1080. Format naturel de nombreux appareils photo.
RATIO.2X32:3
Photo verticale · 1080 × 1620. La photo entière est enregistrée pour le blog ; Pour le flux Instagram, nous préparons un recadrage séparé au format 4:5.
RATIO.191X1001.91:1
Carte large · 1910 × 1000 ou 1200 × 630 avec presque le même ratio. Utile pour les aperçus de liens.
Images
IMAGE.REGULARImage normale
Reste dans la colonne texte : maximum 800 px.
IMAGE.WIDEImage large
S’étend au-delà du texte mais conserve les marges latérales. Maximum 1400 px.
IMAGE.FULLPleine largeur
Atteint les bords de la zone de publication. La barre latérale reste en place.
IMAGE.CAPTIONLégende sous l’image
La légende est une ligne distincte sous l’image. Il n’y a pas de point final ; alt décrit l’image pour ceux qui ne peuvent pas la voir.
Galeries
De une à trois images d’affilée. La galerie a une légende commune ; Chaque image a son propre alt. Les étiquettes individuelles ne sont pas affichées dans la grille actuelle. Au téléphone, les lignes peuvent être réorganisées selon les règles du sujet.
GALLERY.TWODeux à proximité
La largeur totale de la rangée, les proportions originales et une légende pour toute la série. L’ordre des images est commun à toutes les langues.
GALLERY.THREETrois à proximité
La largeur totale de la rangée, les proportions originales et une légende pour toute la série. L’ordre des images est commun à toutes les langues.
GALLERY.TWO-TWODeux plus deux
La largeur totale de la rangée, les proportions originales et une légende pour toute la série. L’ordre des images est commun à toutes les langues.
GALLERY.TWO-ONEDeux en haut, un en bas
La largeur totale de la rangée, les proportions originales et une légende pour toute la série. L’ordre des images est commun à toutes les langues.
GALLERY.ONE-TWOUn en haut, deux en bas
La largeur totale de la rangée, les proportions originales et une légende pour toute la série. L’ordre des images est commun à toutes les langues.
GALLERY.MIXEDDifférentes proportions dans une série
La largeur totale de la rangée, les proportions originales et une légende pour toute la série. L’ordre des images est commun à toutes les langues.
GALLERY.REGULARGalerie par largeur de texte
La même technique, rassemblée dans une chronique régulière.
GALLERY.FULLGalerie pleine largeur
La série atteint les limites de la zone de publication.
Cartes
Voici toutes les cartes trouvées dans les publications actuelles et les options de thèmes prêtes à l’emploi étiquetées séparément. De nouvelles inscriptions expliquent la technique elle-même, les images sont remplacées par des espaces réservés.
CARD.BOOKMARKCarte de lien
Quand un lien mérite une petite couverture, un titre et une explication.
CARD.CALLOUTNote en encadré
Un fond gris sépare la clarification de l’histoire principale.
Une petite précision. Tous les commentaires n’ont pas besoin d’une nouvelle section : parfois, une bulle qui reste à côté du paragraphe souhaité suffit.
CARD.FILEFichier à télécharger
Titre, explication et le fichier lui-même en un seul bloc.
CARD.BUTTONBouton dans le texte
Une action distincte lorsqu’un lien régulier ne suffit pas.
CARD.CTA.MINIMAL-IMAGECTA compact avec image
L’option se retrouve déjà dans les publications. Le texte et l’image ici sont remplacés par des échantillons pédagogiques.
Ici, l’histoire s’arrête et suggère la prochaine étape. L’image soutient l’idée et le bouton vous indique clairement où aller.
Sélectionnez l’étape suivante
CARD.CTA.MINIMALCTA compact sans image
L’option se retrouve déjà dans les publications. Le texte et l’image ici sont remplacés par des échantillons pédagogiques.
Ici, l’histoire s’arrête et suggère la prochaine étape. L’image soutient l’idée et le bouton vous indique clairement où aller.
Sélectionnez l’étape suivante
CARD.CTA.IMMERSIVEGrand CTA avec image
L’option se retrouve déjà dans les publications. Le texte et l’image ici sont remplacés par des échantillons pédagogiques.
Exemple de mise en forme
Ici, l’histoire s’arrête et suggère la prochaine étape. L’image soutient l’idée et le bouton vous indique clairement où aller.
Sélectionnez l’étape suivante
CARD.CTA.CENTEREDGrand CTA au centre
L’option se retrouve déjà dans les publications. Le texte et l’image ici sont remplacés par des échantillons pédagogiques.
Exemple de mise en forme
Ici, l’histoire s’arrête et suggère la prochaine étape. L’image soutient l’idée et le bouton vous indique clairement où aller.
Sélectionnez l’étape suivante
CARD.HEADER-SPLITGrande bannière avec image sur le côté
Deux champs : illustration et message court. L’option pleine largeur est déjà utilisée dans le blog.
Cette pensée a sa propre couverture
Un gros bloc change le tempo de la page. C’est ici que vous pouvez présenter un projet ou terminer une histoire avec une phrase claire.
Voir l’exempleCARD.TOGGLEBloc déroulant
La question courte est immédiatement visible. Cliquez dessus pour révéler la réponse détaillée.
Que peut-on cacher sous la divulgation ?
Un ajout qui n’est pas utile à tous les lecteurs : une composition détaillée, une explication ou une longue réponse.
CARD.PRODUCTFiche produit
Conception de thème prête. Non utilisé dans les publications actuelles ; Nous ajoutons des prix et des notes uniquement sur la base de données réelles.
Le nom du produit sera ici
Voici une brève description. L’échantillon montre la composition sans prix ni note fictifs.
CARD.BUTTON.CENTERBouton central
La même action, située au centre de la colonne.
CARD.BUTTON.SECONDARYBouton calme
Action secondaire avec conception secondaire.
CARD.CALLOUT.ACCENTEncadré de couleur accentuée
Un trait coloré met la note en évidence. Le texte garde le fond de la page, sans forme de bouton.
Il y a ici une mise en garde importante. La légende la maintient proche de la pensée à laquelle elle se rapporte.
CARD.CTA.WHITECTA sur fond blanc
Version allégée de la carte ; La couleur est également perceptible dans un thème sombre.
La prochaine étape peut être suggérée sereinement. Il suffit d’une brève explication et d’un lien clair.
Exemple ouvert
CARD.HEADER.ACCENTBannière avec couleur d’accent
Une pause compacte avec un grand titre et une touche de couleur.
Pause visible
Un accent fort entre deux parties calmes du texte
CARD.SIGNUPCarte d’abonnement
Concevoir un formulaire à partir d’un thème. Dans le catalogue, les champs sont désactivés : la connexion mailing est sélectionnée séparément.
Une bonne histoire a une suite
Ici vous pouvez inviter le lecteur à s’abonner aux publications suivantes
CARD.CALLOUT.EMOJILégende Emoji
L’emoji de gauche donne l’intonation, le texte de droite révèle l’idée.
💡
Ici, vous pouvez laisser une trouvaille, un conseil ou une clarification importante. La petite note a aussi une voix.
CARD.CALLOUT.BLUELégende bleue
Couleur prête à l’emploi de la palette thématique. La couleur d’arrière-plan et les emoji peuvent être sélectionnés séparément.
🌊
Une légende bleue met en évidence une courte pensée. Choisissez une teinte qui convient à l’ambiance du matériau.
CARD.CALLOUT.GREENLégende verte
Couleur prête à l’emploi de la palette thématique. La couleur d’arrière-plan et les emoji peuvent être sélectionnés séparément.
🌱
Un ballon vert met en évidence une courte pensée. Choisissez une teinte qui convient à l’ambiance du matériau.
CARD.CALLOUT.YELLOWLégende jaune
Couleur prête à l’emploi de la palette thématique. La couleur d’arrière-plan et les emoji peuvent être sélectionnés séparément.
☀️
Une légende jaune met en évidence une courte pensée. Choisissez une teinte qui convient à l’ambiance du matériau.
CARD.CALLOUT.REDLégende rouge
Couleur prête à l’emploi de la palette thématique. La couleur d’arrière-plan et les emoji peuvent être sélectionnés séparément.
📍
Un ballon rouge met en évidence une courte pensée. Choisissez une teinte qui convient à l’ambiance du matériau.
CARD.CALLOUT.PINKLégende rose
Couleur prête à l’emploi de la palette thématique. La couleur d’arrière-plan et les emoji peuvent être sélectionnés séparément.
🌸
Un ballon rose met en évidence une courte pensée. Choisissez une teinte qui convient à l’ambiance du matériau.
CARD.CALLOUT.PURPLELégende violette
Couleur prête à l’emploi de la palette thématique. La couleur d’arrière-plan et les emoji peuvent être sélectionnés séparément.
🔮
Une légende violette met en évidence une courte pensée. Choisissez une teinte qui convient à l’ambiance du matériau.
CARD.CALLOUT.WHITEChef de lumière
Couleur prête à l’emploi de la palette thématique. La couleur d’arrière-plan et les emoji peuvent être sélectionnés séparément.
💭
Une légende de couleur claire met en évidence une courte pensée. Choisissez une teinte qui convient à l’ambiance du matériau.
Vidéo
VIDEO.FILE.PORTRAITVidéo verticale
Dossier 9:16, colonne régulière. La vidéo est lancée par le lecteur lui-même.
VIDEO.FILE.LANDSCAPEVidéo horizontale
Fichier 16:9 au format large. Convient pour le screencasting et la démonstration d’interface.
VIDEO.FILE.FULLVidéo pleine largeur
Le même fichier aux bords de la zone de publication. La taille du bloc ne modifie pas le rapport hauteur/largeur de la vidéo.
VIDEO.FILE.SQUAREVidéo carrée
Véritable dossier carré de la publication. Il n’est pas nécessaire de le couper pour obtenir un carré.
VIDEO.LOOP.MUTEDBoucle sans son
La vidéo est en boucle et en sourdine. Le répertoire se lance en cliquant ; la lecture automatique d’un article est spécifiée sous la forme d’une commande distincte.
Contenus intégrés et audio
EMBED.YOUTUBEYouTube dans la publication
Utilise un lien réel provenant d’une publication de design et d’immobilier. Si la vidéo n’est pas disponible, vous pouvez toujours accéder à la source.
EMBED.INSTAGRAMPublication Instagram
L’intégration native Instagram et la vidéo sauvegardée sur le CDN du site. Changez d’onglet pour comparer les deux versions.
AUDIO.PLAYERAudio
Le design de la carte audio est dans le sujet ; Aucun fichier audio n’a été trouvé dans la bibliothèque publiée. Il s’agit d’un lecteur d’échantillons sans enregistrement.
En-têtes et listes de publications
Sept options d’en-tête correspondent à la liste générale des modèles de site et à l’éditeur actuel. La modification de l’en-tête ne modifie pas le texte, l’ordre des blocs ou les versions linguistiques. Les paramètres de matériau sont enregistrés en tant que brouillon ; la publication est effectuée séparément.
L’exemple en plein écran est affiché dans une fenêtre distincte au sein du répertoire afin que ses styles d’arrière-plan et de navigation ne modifient pas l’intégralité de la page Guide de style.
POST.HEADER.STANDARDTitre au-dessus de l’image
Le titre et la description précèdent l’image de couverture, qui conserve ses proportions.
Deux heures au café : construire une veille industrielle avec ChatGPT et Codex
En deux heures dans un café de Dubaï, Anna, ma « conseillère secrète », et moi sommes passés de l’idée au produit B2B : logique et données avec ChatGPT, service web avec Codex, production avec Cloudflare
Alexandre Nevsky
Designer et créateur avec l’IA
AI Designer & Builder à Dubaï. Je conçois et crée des produits numériques avec l’IA. J’écris sur le design, la technologie, l’immobilier et la vie de famille
POST.HEADER.LEFTImage de couverture à gauche
L’image de couverture est à gauche, le titre et la description à droite. Le thème réorganise ces éléments sur les écrans étroits.
Deux heures au café : construire une veille industrielle avec ChatGPT et Codex
En deux heures dans un café de Dubaï, Anna, ma « conseillère secrète », et moi sommes passés de l’idée au produit B2B : logique et données avec ChatGPT, service web avec Codex, production avec Cloudflare
Alexandre Nevsky
Designer et créateur avec l’IA
AI Designer & Builder à Dubaï. Je conçois et crée des produits numériques avec l’IA. J’écris sur le design, la technologie, l’immobilier et la vie de famille
POST.HEADER.RIGHTImage de couverture à droite
Le titre et la description sont à gauche, l’image de couverture à droite. Le thème réorganise ces éléments sur les écrans étroits.
Deux heures au café : construire une veille industrielle avec ChatGPT et Codex
En deux heures dans un café de Dubaï, Anna, ma « conseillère secrète », et moi sommes passés de l’idée au produit B2B : logique et données avec ChatGPT, service web avec Codex, production avec Cloudflare
Alexandre Nevsky
Designer et créateur avec l’IA
AI Designer & Builder à Dubaï. Je conçois et crée des produits numériques avec l’IA. J’écris sur le design, la technologie, l’immobilier et la vie de famille
POST.HEADER.TOPImage au-dessus du titre
L’image de couverture précède le titre et la description et conserve ses proportions.
Deux heures au café : construire une veille industrielle avec ChatGPT et Codex
En deux heures dans un café de Dubaï, Anna, ma « conseillère secrète », et moi sommes passés de l’idée au produit B2B : logique et données avec ChatGPT, service web avec Codex, production avec Cloudflare
Alexandre Nevsky
Designer et créateur avec l’IA
AI Designer & Builder à Dubaï. Je conçois et crée des produits numériques avec l’IA. J’écris sur le design, la technologie, l’immobilier et la vie de famille
POST.HEADER.WIDEImage large sous le titre
Le titre et la description restent dans la colonne de texte ; une large image de couverture s’affiche en dessous.
Deux heures au café : construire une veille industrielle avec ChatGPT et Codex
En deux heures dans un café de Dubaï, Anna, ma « conseillère secrète », et moi sommes passés de l’idée au produit B2B : logique et données avec ChatGPT, service web avec Codex, production avec Cloudflare
Alexandre Nevsky
Designer et créateur avec l’IA
AI Designer & Builder à Dubaï. Je conçois et crée des produits numériques avec l’IA. J’écris sur le design, la technologie, l’immobilier et la vie de famille
POST.HEADER.TEXT-ONLYTexte seul
L’en-tête contient le titre et la description. L’image de couverture est masquée, sans être supprimée du contenu.
Deux heures au café : construire une veille industrielle avec ChatGPT et Codex
En deux heures dans un café de Dubaï, Anna, ma « conseillère secrète », et moi sommes passés de l’idée au produit B2B : logique et données avec ChatGPT, service web avec Codex, production avec Cloudflare
Alexandre Nevsky
Designer et créateur avec l’IA
AI Designer & Builder à Dubaï. Je conçois et crée des produits numériques avec l’IA. J’écris sur le design, la technologie, l’immobilier et la vie de famille
POST.HEADER.FULLSCREENCouverture plein écran
L’image de couverture remplit la hauteur de l’écran. Le titre et la description se superposent à l’image, assombrie pour faciliter la lecture.
POST.CARD.VERTICALCarte postale verticale
Image de couverture en haut, puis titre, description et métadonnées.
Comment la largeur change de rythme
La couverture, le titre et la brève description fonctionnent ensemble. Il s’agit d’une véritable carte issue d’un modèle de blog.
POST.CARD.HORIZONTALCarte postale horizontale
La couverture est à côté de la description. Pour une liste compacte.
Comment la largeur change de rythme
La couverture, le titre et la brève description fonctionnent ensemble. Il s’agit d’une véritable carte issue d’un modèle de blog.
POST.FEED.THREEAlimentation à trois colonnes
Composition native utilisée sur la page principale. Les colonnes s’adaptent à la largeur disponible.
Comment la largeur change de rythme
La couverture, le titre et la brève description fonctionnent ensemble. Il s’agit d’une véritable carte issue d’un modèle de blog.
Un épisode — différents plans
La couverture, le titre et la brève description fonctionnent ensemble. Il s’agit d’une véritable carte issue d’un modèle de blog.
Où mène la prochaine histoire ?
La couverture, le titre et la brève description fonctionnent ensemble. Il s’agit d’une véritable carte issue d’un modèle de blog.
POST.FEED.LISTListe des flux
Composition thématique prête. Sur un écran étroit, le nombre de colonnes est réduit.
Comment la largeur change de rythme
La couverture, le titre et la brève description fonctionnent ensemble. Il s’agit d’une véritable carte issue d’un modèle de blog.
Un épisode — différents plans
La couverture, le titre et la brève description fonctionnent ensemble. Il s’agit d’une véritable carte issue d’un modèle de blog.
Où mène la prochaine histoire ?
La couverture, le titre et la brève description fonctionnent ensemble. Il s’agit d’une véritable carte issue d’un modèle de blog.
POST.FEED.GRID-VERTICALGrille de cartes verticales
Composition thématique prête. Sur un écran étroit, le nombre de colonnes est réduit.
Comment la largeur change de rythme
La couverture, le titre et la brève description fonctionnent ensemble. Il s’agit d’une véritable carte issue d’un modèle de blog.
Un épisode — différents plans
La couverture, le titre et la brève description fonctionnent ensemble. Il s’agit d’une véritable carte issue d’un modèle de blog.
Où mène la prochaine histoire ?
La couverture, le titre et la brève description fonctionnent ensemble. Il s’agit d’une véritable carte issue d’un modèle de blog.
POST.FEED.GRID-HORIZONTALGrille de cartes horizontales
Composition thématique prête. Sur un écran étroit, le nombre de colonnes est réduit.
Comment la largeur change de rythme
La couverture, le titre et la brève description fonctionnent ensemble. Il s’agit d’une véritable carte issue d’un modèle de blog.
Un épisode — différents plans
La couverture, le titre et la brève description fonctionnent ensemble. Il s’agit d’une véritable carte issue d’un modèle de blog.
Où mène la prochaine histoire ?
La couverture, le titre et la brève description fonctionnent ensemble. Il s’agit d’une véritable carte issue d’un modèle de blog.
@nevsky_alexander
Sur Instagram, Dubaï au-delà de la carte postale : la famille, la ville, les trouvailles et la vie entre deux projets. Sur Threads, des réflexions à voix haute sur le design et l’IA. Sur YouTube, des vidéos qui ont besoin de plus de place qu’une story. Retrouvez-moi là où vous vous sentez bien, et gardons le contact