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
- 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
- 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.