Seline Analytics
Un tableau analytique silencieux sur du papier chaud
Seline se détache sur un fond pierre chaleureux (#fafaf9) rehaussé d'une touche de bleu vif. Toutes les autres couleurs sont neutres et issues de la palette Tailwind Stone. Les titres sont écrits dans une police sans empattement géométrique personnalisée (roobert), d'une épaisseur de 400 et avec un espacement négatif réduit, conférant au texte une assurance décontractée, presque murmurée, qui contraste avec le style généralement affirmé des logiciels SaaS. Les éléments d'interface sont des cartes blanches plates, flottant au-dessus du fond chaud avec un léger flou de 16 px. Les bordures sont créées par de fines lignes de 1 px, couleur pierre, utilisées généreusement comme élément structurant principal, en lieu et place de séparateurs ou de panneaux imposants. La mise en page est aérée: un contenu pleine largeur est centré sur un rythme vertical généreux, avec des commandes interactives en forme de pilule, une illustration de mascotte pour la personnalité et des captures d'écran du tableau de bord comme preuves de produit. L'impression générale est analytique et éditoriale: calme, monochrome, assurée, avec l'appel à l'action bleu comme élément le plus marquant de la page grâce à la sobriété délibérée du reste.
La page occupe toute la largeur, est centrée à environ 1200 px et offre un espace vertical généreux. L'élément principal est un bloc de texte sur deux lignes, aligné à gauche, avec une phrase unique mise en évidence en bleu (« simple et efficace»), suivie d'une ligne avec deux appels à l'action (pilule bleue + pilule fantôme), puis d'une rangée de logos de partenaires en niveaux de gris, puis d'une rangée d'évaluations de confiance, et enfin d'un aperçu flottant du tableau de bord en pleine largeur, chevauchant légèrement la section suivante. En dessous de la ligne de flottaison, des rangées alternées de témoignages sont disposées dans une grille à une seule colonne, suivies de sections en pleine largeur présentant des descriptions de fonctionnalités, du texte aligné à gauche et des visuels de produits centrés. La navigation est une barre supérieure minimaliste: logo à gauche, liens de navigation centrés, connexion et appel à l'action bleu à droite. Un groupe d'avatars flottants au centre de la navigation sert à la vérification d'identité. Les espaces entre les sections sont larges (96 px) afin de créer un rythme éditorial plutôt qu'un amas d'informations dense.
Le langage visuel est dominé par des captures d'écran de l'interface utilisateur du produit: l'aperçu du tableau de bord est une photographie rendue avec un filtre de contraste en niveaux de gris (1) (0,94), qui atténue les couleurs des données pour obtenir une teinte monochrome. La seule figure humaine est un autocollant mascotte linéaire (un personnage à capuche), dessiné en SVG avec uniquement des contours, placé une fois par section comme un contrepoint ludique au contenu analytique, avec une ombre douce pour créer un effet de profondeur similaire à celui d'un autocollant. Le logo et les glyphes de la marque sont de petites étincelles/flammes noires. Il n'y a aucune photographie: ni photos de style de vie, ni photos d'équipe, ni images d'environnement. L'objet (le tableau de bord) est le protagoniste. Toutes les icônes décoratives sont des contours de 1 px, de couleur #0c0a09 ou #3ba6f1, jamais remplies.
Palette
Marque
- Cyan Signal
#3ba6f1— L'appel à l'action principal, les liens actifs et le contour des icônes de la marque sont les seuls éléments de couleur présents sur la page, utilisés avec parcimonie pour attirer l'attention sur l'action. - Cyan Edge
#3398e1— Le bleu sert à mettre en évidence les contours des actions, les libellés des liens et les éléments interactifs. Il ne doit pas être utilisé comme couleur principale pour les appels à l'action.
Neutre
- Ink Black
#0c0a09— Les titres principaux, le texte principal mis en évidence et les icônes expressives sont d'une couleur chaude, presque noire. - Stone Canvas
#fafaf9— Le fond de la page est d'une teinte chaude et crémeuse qui évoque le papier plutôt que le blanc d'un écran. - Pure White
#ffffff— Par défaut, les surfaces de la carte, les panneaux en relief et les champs de saisie sont plats et sans ombre. - Stone Border
#e8e6e5— Les bordures fines des cartes, de la navigation et des champs de saisie constituent l'élément structurel principal, et non des séparateurs. - Stone Muted
#d6d3d1— Cadres supplémentaires, nuances de fond subtiles, séparateurs décoratifs. - Ash Gray
#a8a29e— Texte d'aide, contours des icônes, états désactivés - lisibles mais inactifs.
Typographie
de 10 à 52 px · 5 étapes
- Roobert — remplacement: Inter Tight or Satoshi · grandes lignes 400, 500 · La police utilisée pour les titres et la mise en page est une sans-serif géométrique unique, caractérisée par un espacement négatif minimal entre les lettres (-0,025 em à 32 px, -0,021 em à 52 px). Son épaisseur de 400 x 52 px est sa signature: originale, subtile, mais affirmée et discrète. Les titres s’intègrent parfaitement sans être imposants.
- Inter — remplacement: Inter · grandes lignes 400, 500, 600 · La police principale pour le corps du texte, la navigation, l'interface utilisateur et les titres est une police neutre et universelle pour tous les textes hors écran. La taille prédominante pour le corps du texte est de 14 px, avec une graisse de 400 et un interligne de 1,64 (fréquence: 1 174). Un espacement positif entre les lettres (0,004 em) pour les petites tailles garantit la lisibilité des interfaces utilisateur denses.
Intervalles et forme
| But | Signification |
|---|---|
| Densité | spacieux |
| Étape de base | 8px |
| Rayon du bouton | 9999px |
| Rayon de la carte | 10px |
| Ombres | ombres douces |
| Entre les sections | 96px |
| Largeur de la page | 1200px |
L'IA construira votre site web dans le style Seline Analytics 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
- Mollie — Un comptoir en cachemire, un registre sombre. Prévoyez un large espace blanc autour du texte noir pour la mise en page, puis mettez en valeur les produits avec des tons crème chauds, des bruns expresso et des photos illustrant les moyens de paiement.
- Kagi — Une salle de lecture séparée. Créer un espace blanc ouvert autour d'un texte en gras couleur graphite, en utilisant de subtiles touches de violet et des surfaces aux tons pastel chauds pour rompre la tranquillité.
- Milanote — Milanote est un studio de création dédié. Créez des pages de style galerie éditoriale à l'aide de panneaux visuels flottants: murs encadrés de noir, espace d'affichage blanc et captures d'écran qui ressemblent à de véritables objets avec une profondeur subtile.
- Co2 — Un atlas climatique sous la lumière hivernale. Créez des pages comme un paysage documentaire aérien, où les titres à empattement, les données codées par catégorie et les images glacées mettent en valeur de larges marges blanches.
- GitButler — Du turquoise en fin de texte. Une combinaison de titres à empattements contrastés, de grilles techniques subtiles, de surfaces graphite chaudes et d'une discrète touche de turquoise.
- 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
- 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