Notion
Un carnet en papier chaud sous le soleil de midi
L'interface de Notion évoque un carnet de notes papier bien-aimé, baigné de lumière: une toile chaude et crémeuse (#f6f5f4) qui offre une sensation tactile plutôt qu'aseptisée, une typographie sans empattement généreuse qui confère une profondeur éditoriale aux textes, et une utilisation parcimonieuse de la couleur comme une ponctuation: des touches pêche soulignent les verbes, un bleu unique ancre l'action principale, et une palette de teintes d'accentuation (corail, ambre, bleu ciel, minuit) colore les fonds des cartes comme des autocollants. Les cartes sont disposées sur une toile aux bordures et coins fins – sans ombres ni chrome – à l'image des pages lignées d'un carnet Moleskine. L'animation est ludique et dynamique, avec des transitions fluides à 200 ms et des animations de personnages souples qui donnent vie à l'interface sans être superflues.
Centrée, la largeur maximale est limitée à environ 1440 px. L'élément principal est une pile centrée: une rangée de symboles → un grand titre sur deux lignes avec une pastille colorée intégrée → un sous-titre → une rangée de deux boutons d'appel à l'action → une grande maquette d'interface utilisateur du produit. Sous l'élément principal, des sections alternent entre des grilles de cartes blanches et des panneaux d'accentuation en couleur. Le mur de logos est une grille centrée sur une seule ligne de logos de partenaires en niveaux de gris. Les blocs de fonctionnalités utilisent une mise en page à deux colonnes (texte à gauche, panneau coloré à droite), alternant de gauche à droite entre les sections. La section « Posez vos questions à vos assistants à la demande» utilise une grille de cartes 2x2, où la carte du haut occupe toute la largeur et la rangée du bas est divisée en deux colonnes égales. Les gouttières entre les sections sont généreuses (environ 80 px), créant un rythme vertical harmonieux. La navigation est une barre supérieure fixe de 64 px de haut avec des éléments de navigation centrés et des boutons d'action alignés à droite.
Les illustrations sont primordiales, aucune photo n'est utilisée. Le langage visuel repose sur des symboles illustrés et épurés (cercles colorés de 2 px aux bords arrondis), des éléments décoratifs abstraits (gribouillis dessinés à la main, paillettes, flèches, formes florales) et des maquettes de l'interface utilisateur du produit. Dans la fenêtre principale, les symboles apparaissent sous forme d'une rangée horizontale de sept avatars et sont disséminés sur la page comme une ponctuation ludique. Les captures d'écran du produit sont les seuls éléments visuels « réels»: elles présentent l'interface Notion (tableaux Kanban, vues de documents, panneaux d'agents IA) avec l'ensemble de ses éléments et des données réelles. La maquette du produit dans la fenêtre principale est grande, centrée et projette une ombre unique qui la sépare de la zone de travail. Aucune photo de style de vie, aucune image libre de droits, aucun rendu 3D abstrait.
Palette
Marque
- Notion Blue
#0075de— L'élément principal qui remplit le bouton d'appel à l'action (CTA), un accent dans la navigation active, les boutons d'action remplis sont le seul schéma de couleurs dans un système presque monochrome qui est suffisamment saturé pour être perçu comme un interrupteur.
Neutre
- Paper Warmth
#f6f5f4— La toile de la page, l'arrière-plan de la fenêtre principale et l'arrière-plan de la section sont tous de couleurs chaudes, légèrement beiges, qui confèrent au système une sensation tactile et analogique. - Pure White
#ffffff— Surfaces des cartes, panneaux en relief, fond avec logo, texte contrasté sur cartes foncées. - Ink Black
#000000— Texte principal, liens de navigation, titres - utilisés avec une transparence différente (100 %, 95 %, 90 %, 60 %, 40 %, 20 %) pour construire une hiérarchie sans ajouter de nouvelles couleurs. - Charcoal
#111111— Une option de texte foncé pour les zones d'interface utilisateur où le noir pur serait trop agressif. - Stone
#757575— Texte de navigation secondaire, texte d'aide discret, étiquettes des boutons désactivées - transparence de l'encre à 60 % - Graphite
#615d59— Le texte principal présente une tonalité chaude – gris brunâtre – qui s'harmonise avec le fond chaud.
Typographie
de 12 à 96 px · 10 étapes
- NotionInter — remplacement: Inter · grandes lignes 400, 500, 600, 700 · La police sans empattement principale est une police humaniste géométrique aux nuances subtiles, utilisée en taille 400 pour le corps du texte, 500 pour la navigation et l'interface utilisateur, et 600 à 700 pour les titres. L'échelle de police utilise un espacement négatif marqué entre les lettres aux grandes tailles (-4,6 px à 96 px, -2 px à 72 px), ce qui confère aux titres une apparence plus compacte et affirmée, plutôt qu'aérée.
- Lyon Text — remplacement: Source Serif Pro · grandes lignes 400 · La police à empattements éditoriale, réservée à certaines sections du texte principal et à leurs introductions, est utilisée avec parcimonie (quatre fois) pour conférer à la typographie une épaisseur littéraire, à l'instar d'une citation dans la mise en page d'un magazine. Elle fonctionne comme un accent systémique plutôt que comme une hiérarchie parallèle.
Intervalles et forme
| But | Signification |
|---|---|
| Densité | moyenne |
| Étape de base | 8px |
| Rayon du bouton | 8px |
| Rayon de la carte | 12px |
| Ombres | non - des bordures à la place des ombres |
| Entre les sections | 80px |
| Largeur de la page | 1440px |
L'IA construira votre site web dans le style Notion 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
- 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.
- Officevibe — Un magazine éditorial imprimé sur un papier couleur crème chaleureuse. Imaginez un essai approfondi sur la gestion des ressources humaines, présenté comme un produit: une police à empattements cursive se dévoilant discrètement sur une interface bleue moderne.