Steep
Analyse des polices à empattements sur papier chaud
Steep présente les analyses comme du contenu éditorial: des titres en police serif Signifier flottent au-dessus d'un fond blanc quasi monochrome, rehaussé d'une touche de pêche chaleureuse (#fbe1d1) qui souligne l'ensemble monochrome. La page se lit comme une double page de magazine produit: police cursive de grande taille, espacement généreux pour le texte, grandes cartes aux bords arrondis de 24 px et commandes en forme de pilule parfaitement intégrées. Les éléments semblent légers et aérés: les ombres sont discrètes, les bordures fines et la couleur sert à mettre en valeur des fonctionnalités (encadré pêche, lettrage brun foncé sur fond pêche). Les interfaces produit (tableaux régionaux, diagrammes d'activation, générateurs d'IA) sont présentées comme des éléments flottants autour de l'en-tête, et non intégrées à la structure du tableau de bord.
La mise en page a une largeur maximale de 1200 px, centrée, les sections principales occupant presque toute la largeur de la page tout en restant dans leur conteneur. La mise en page principale présente un titre centré avec une grande police à empattements, un sous-titre et deux boutons en forme de pilule, entourés de quatre fiches de description de produit flottantes (tableau régional en haut à gauche, fiche d'enregistrement à droite, schéma d'activation en bas à gauche, éditeur IA en bas au centre) qui se superposent à un fond blanc à des décalages variables. Les sections alternent entre les fonds Blanc Papier et Gris Brume, créant un rythme apaisant sans contraste marqué. Les sections de fonctionnalités utilisent une mise en page à deux colonnes de texte et d'interface utilisateur avec de larges gouttières verticales de 80 px. La navigation est assurée par une unique barre supérieure transparente (sans fond, bordure ni ombre) avec le logo à gauche, les liens de navigation au centre et deux appels à l'action (lien texte + bouton en forme de pilule rempli) à droite. La densité globale de la mise en page est aérée: la page « respire» entre les sections et le contenu ne s'entasse jamais sur les bords.
Le design visuel est axé sur le produit, et non sur le style de vie: des éléments d’interface flottants (tableaux régionaux avec des données sur cinq lignes, graphiques linéaires montrant les activations d’août à novembre, anneaux de progression radiaux, champs de saisie IA) sont disposés comme des captures d’écran recadrées autour des titres. On n’y trouve ni photographies, ni illustrations, ni graphismes abstraits. Tous les éléments visuels du produit sont placés sur des cartes flottantes blanches aux bordures fines et aux ombres discrètes. Les avatars circulaires comportent un petit indicateur directionnel, un motif visuel signalant une interaction en temps réel. La composition principale est un collage de texte et d’interface, plutôt qu’un titre centré accompagné d’une photo d’illustration.
Palette
Neutre
- Ink Black
#17191c— Le texte principal, le fond rempli des boutons et le logo de navigation sont les seules surfaces sombres du système; tous les appels à l’action et les titres du texte principal apparaissent sur ce fond presque noir. - Paper White
#ffffff— La toile de la page, le texte des boutons et les surfaces en relief de la carte constituent la tonalité de fond dominante, comportant environ 76 points de fréquence. - Mist Gray
#f2f2f3— Surfaces des cartes, arrière-plans supplémentaires, remplissage des champs de saisie — une couche invisible sous le papier pour le contenu intégré. - Fog White
#fafafb— Un arrière-plan de page supplémentaire pour alterner les sections et les surfaces au survol de la souris – un cran au-dessus du papier pour créer de subtiles variations de rayures. - Slate Gray
#777b86— Couleur des liens, texte auxiliaire discret, texte de pied de page: un gris froid et désaturé placé entre le texte principal et le texte qui ne peut pas être inclus. - Ash Gray
#979799— Étiquettes supplémentaires, balises de catégorie (Marketing, Finance, Ventes) - une teinte plus claire que la couleur du lien.
Typographie
de 15 à 90 px · 8 étapes
- Signifier — remplacement: GT Sectra · grandes lignes 400 · Une police à empattements pour les titres et les en-têtes — utilisée exclusivement pour H1/H2 en trois tailles; le poids de la police reste à 400 (régulier) à toutes les échelles, un choix signature: une police à empattements chuchote plutôt que de crier comme une police en gras.
- Sohne — remplacement: Inter · grandes lignes 400, 430, 450, 480, 500 · Les polices principales, d'interface et de navigation sont polyvalentes, couvrant tout, des métadonnées aux sous-titres; les graisses semi-échelonnées (430, 450, 480) créent une hiérarchie subtile sans passer au gras.
Intervalles et forme
| But | Signification |
|---|---|
| Densité | moyenne |
| Étape de base | 8px |
| Rayon du bouton | 9999px |
| Rayon de la carte | 24px |
| Ombres | non - des bordures à la place des ombres |
| Entre les sections | 80px |
| Largeur de la page | 1200px |
L'IA construira votre site web dans le style Steep 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
- Newformcap — Journal éditorial dans les vestiaires
- Claude — Un objet imprimé sur un parchemin chaud – de l’encre sur du papier d’os, l’argile comme unique touche de couleur
- 11x– Digital workers — Un désert éditorial cinématographique: des photographies panoramiques du paysage contrastant avec des titres monumentaux à empattements, dignes d’une double page de magazine de luxe.
- Revolut — Une œuvre éditoriale monochrome basée sur une photographie de nuages — encre blanche, boutons de pilulier, une unique bande bleue dans un monde autrement en nuances de gris.
- Scheduling — Encre éditoriale sur papier crème
- Titan — archive monochrome aux tons chauds
- Programa — Un studio de design suisse à midi. Le mur blanc de la galerie est éclairé par une simple lampe de table jaune; tout est dans des tons de gris jusqu’à ce qu’un bouton, une icône ou un détail attire le regard, et alors cette unique touche de jaune définit toute la pièce.
- Sana Agents — Paillettes de citron vert sur fond blanc dans un éditorial
- Visual — Samizdat éditorial chaleureux. Papier crème, affiches à empattements, annotations marginales monochromes, un marqueur jaune.
- Midday — Brochure éditoriale sur vélin - Titre à empattements de 72 px sur fond pierre chaude, texte courant sans empattements avec espacement, commandes en forme de pilule, sans ombres
- Chat for impact — Une clinique vert forêt avec des chambres aux couleurs pastel
- Handhold — Un parchemin chaud sous des empattements à peine audibles — une double page éditoriale, composée à la main sans bruit chromatique, où la plus fine police à empattements de 200 points transmet toute la voix