Stripe
Un livre de comptes écrit à l'encre indigo sur du verre dépoli
Stripe utilise un langage visuel quasi monochrome pour ses instruments financiers: un fond blanc doux et épuré, des titres bleu foncé, une absence quasi totale d’éléments chromés décoratifs et une unique teinte indigo vif (#533afd) pouvant parfaitement servir de contour pour un bouton, un lien ou une icône. La typographie est d’une finesse exceptionnelle, avec une épaisseur de 300 points – même à 56 px – ce qui lui confère une élégance discrète, loin de toute ostentation institutionnelle; l’espacement des lettres diminue fortement avec la taille du texte. Les boutons sont petits, carrés (4 px) et arborent un remplissage violet ou un contour violet très fin. Le système se passe totalement d’ombres; la profondeur est obtenue par la variation des teintes de fond (blanc → #f8fafd → #e5edf5 → nuances de violet), et non par un effet de relief. L’interface entière se comporte comme un livre de comptes ou un terminal: informations denses, lignes claires, espacement important entre les sections et apparition de la couleur uniquement lorsqu’une action est requise.
La largeur maximale est d'environ 1320 px pour une colonne de contenu centrée sur fond blanc. L'élément principal est un bloc de texte aligné à gauche (56 px) avec deux appels à l'action en dessous. Aucune image n'est présente: la typographie est l'élément central. Les sections sont disposées verticalement avec des gouttières de 96 px et des séparateurs de 1 px (#e5edf5). Il n'y a pas d'alternance de bandes claires et foncées. Chaque section suit un schéma répétitif: un titre court en majuscules (couleur fumée, 12 px), suivi d'un titre de section de 32 à 48 px, puis d'un paragraphe de 22 px, puis d'une grille de fiches produits (3 colonnes sur ordinateur) ou d'un bloc de texte sur 2 colonnes avec un visuel. Les logos des clients apparaissent dans une fine bande verticale, alignée à gauche. Le pied de page est une large bande (#f8fafd) avec des listes de liens sur plusieurs colonnes. Le rythme général est lent, mesuré et principalement textuel: la densité d'informations est faible, malgré la longueur de défilement importante.
L'imagerie est sobre et de style documentaire. Les photos pleine page n'apparaissent que dans les sections consacrées aux études de cas (par exemple, les photographies aériennes du trafic pour Hertz), prises en plongée ou sous des angles spectaculaires, en couleurs naturelles – sans bichromie ni traitement des couleurs. Des captures d'écran de l'interface utilisateur du produit sont utilisées dans les fiches de présentation, avec des angles nets et des bordures claires, sans cadre d'appareil. Les logos des partenaires sont affichés dans leurs couleurs d'origine, sans aucun cadre. Il n'y a ni illustrations, ni rendus 3D, ni éléments graphiques abstraits décoratifs. Les icônes sont uniformes: épaisseur de trait 1 ou 2 sur fond blanc, avec des formes géométriques (chevrons, flèches, coches, symboles de document). La page est principalement composée de texte et d'espace blanc; les images occupent moins de 3 % de la surface visuelle totale.
Palette
Marque
- Indigo Ink
#533afd— La couleur violette est utilisée pour les boutons remplis, les états de navigation sélectionnés et les moments de conversion déclenchés par le focus. - Indigo Hover
#7389ff— Le violet sert à mettre en évidence les liens, les balises et les courtes phrases. Il ne doit pas être utilisé comme couleur principale pour les appels à l'action.
Neutre
- Midnight Ink
#061b31— Le titre principal et le corps du texte sont d'une couleur foncée, presque noire, avec une teinte bleu froid, qui sert de base à l'ensemble du système de polices. - Slate
#64748d— Le texte gris met en évidence les liens, les étiquettes et les courtes phrases. - Steel
#50617a— Des textes complémentaires et des documents d'accompagnement sont placés entre les tons ardoise et violet foncé utilisés sur les sous-licences. - Smoke
#839bc8— Pour les grands titres décoratifs et le texte qui les accompagne, une teinte violette discrète est utilisée – jamais dans le corps du texte. - Pure White
#ffffff— La page et les surfaces en relief des cartes; le fond par défaut par rapport auquel tout le reste est mesuré. - Mist
#f8fafd— Le fond du pied de page et le séparateur de section présentent une teinte froide et subtile qui sépare les zones sans bordure visible.
Typographie
de 12 à 56 px · 9 étapes
- sohne-var — remplacement: Inter Tight (variable · grandes lignes 300, 400 · La seule police utilisée dans toute l'interface sert aux titres, au corps du texte, à la navigation, aux boutons et aux étiquettes. La graisse 300 reste prédominante même à une taille d'écran de 56 px, ce qui constitue une caractéristique distinctive: les titres sont discrets plutôt qu'ostentatoires, affirmant ainsi leur autorité par la sobriété plutôt que par le volume. La graisse 400 n'apparaît qu'entre 14 et 16 px pour la navigation et les boutons, où une épaisseur de trait supplémentaire est nécessaire pour une meilleure lisibilité à petite taille.
Intervalles et forme
| But | Signification |
|---|---|
| Densité | spacieux |
| Étape de base | 8px |
| Rayon du bouton | 4px |
| Rayon de la carte | 4px |
| Ombres | non - des bordures à la place des ombres |
| Entre les sections | 96px |
| Largeur de la page | 1320px |
L'IA construira votre site web dans le style Stripe 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
- Ui — Plan clinique sur papier mat
- monopo saigon — Une lueur liquide et irisée derrière le silence éditorial — une galerie éditoriale monochrome flottant sur une lumière en fusion
- Ventriloc — Un observatoire éditorial de données sur papier chaud – une simple braise orange soulignant la précision monochrome
- Hyer Aviation — Au crépuscule, le ciel pâle de l'aube se fond dans le cockpit, tandis que le logo à empattements, de la taille du fuselage, se mêle à la pâleur du ciel. Une unique touche de couleur argile chaude vient rompre la monotonie monochrome.
- Family — Une illustration tirée d'un conte de fées sur du parchemin crème
- OFF+BRAND. — Sphère irisée sur parchemin chaud
- Geniestudio — Un carnet à lumière douce du jour, du genre avec de larges marges et un trait de stylo épais.
- xAI — Laboratoire de crème chaude avec pilule noire
- Seed — un organisme vivant sous verre de laboratoire
- Cosmos — Un mur de galerie recouvert de lin et orné de photos Polaroid.
- Cal — Une praticité monochrome, une approche humaine. Un système qui privilégie la clarté et la fonctionnalité grâce à une palette noir et blanc stricte, adoucie par une typographie conviviale et des formes arrondies.
- T1 Energy — Le dessin d'une usine de production sur un parchemin chaud est une scène monochrome et paisible où l'échelle industrielle et une typographie subtile incarnent l'ensemble de la marque.