Vercel
Terminal imprimé sur papier blanc
Le système graphique Vercel est un exercice de monochrome rigoureux: un fond quasi blanc (#fafafa), des caractères noirs, des bordures fines et une absence totale de couleurs décoratives. Le langage visuel évoque un terminal de développeur imprimé: la police Geist Sans est à peine lisible à l’échelle « héroïque» (400-450 g/m², espacement de -0,06 em), tandis que Geist Mono utilise des capitales de 11 à 13 px pour les étiquettes, les métadonnées et les exemples de code. Les boutons sont des rectangles nets de 6 px de rayon ou des formes noires sur fond blanc ou blanches sur fond noir. Le système mise sur le contraste et la hiérarchie typographique plutôt que sur la couleur, utilisant le symbole triangulaire (▲) et un logotype sur deux lignes comme seuls éléments de marque. Les surfaces se superposent dans l’ordre #fafafa → #ebebeb → #171717, créant de la profondeur par la variation des valeurs tonales plutôt que par l’ombre ou la couleur. Chaque élément est construit sur une grille de 4px avec une densité compacte, ce qui donne une interface rappelant le carnet d'un ingénieur: précise, fonctionnelle et n'ayant pas peur des espaces blancs.
Le conteneur mesure 1280 px de large, est centré et dispose d'une marge horizontale généreuse (24 à 48 px). Le bloc principal utilise une composition asymétrique à trois zones: un grand titre à gauche, un logo centré et un bandeau à droite. En dessous, le contenu est organisé en bandes alternées: une bande pleine largeur avec le logo du client, suivie d'une section « Agent Creators» sur deux colonnes avec le titre à gauche et une présentation produit à droite, puis d'une grille de trois fiches présentant les fonctionnalités. Les sections sont séparées par des gouttières verticales de 96 à 128 px, sans séparateurs ni décalages d'arrière-plan. La navigation est un panneau fixe unique de 64 px avec un arrière-plan flou. Les grilles de fiches utilisent systématiquement une mise en page à deux ou trois colonnes avec des gouttières de 16 à 24 px. La densité globale est compacte: le texte est facile à lire, l'espace blanc est suffisant, mais la taille de la police et des composants empêche la page de paraître aérée.
Les images sont épurées et toujours fonctionnelles. L'élément visuel principal est le triangle noir (▲), un logo géométrique qui apparaît comme une silhouette flottante à l'échelle « capitale». Les logos des clients sur la bande de démonstration utilisent leurs logotypes respectifs en niveaux de gris. Les maquettes de produits (interface de chat de Notion, sortie du terminal CLI, carte d'identité) sont intégrées sous forme de captures d'écran en mode clair dans des cartes encadrées. Il n'y a ni photographies, ni illustrations, ni éléments 3D: le système est composé uniquement de typographie et de formes géométriques sur fond blanc.
Palette
Neutre
- Obsidian
#171717— Les titres principaux, les bordures de navigation, le remplissage sombre des boutons et les marqueurs de liste sont presque tous noirs, évitant ainsi une dureté et une saturation criarde. - Paper White
#fafafa— La page, la surface des cartes, le remplissage lumineux des boutons: c'est le fond standard sur lequel tout le reste se situe. - Pure White
#ffffff— Surfaces de cartes en relief, encarts, champs de saisie. - Hairline
#ebebeb— Les bordures de 1 px des boutons, liens et cartes sont visibles à des niveaux de zoom élevés, mais invisibles à des niveaux de zoom faibles. - Ash
#c9c9c9— Texte désactivé, étiquettes atténuées, filigranes de marque dans les logos des clients. - Smoke
#a8a8a8— Texte secondaire, texte d'espace réservé, remplissage discret des icônes.
Typographie
de 11 à 64 px · 6 étapes
- Geist Sans — remplacement: Inter · grandes lignes 400, 450, 500 · La police principale de l'interface et des titres est une police sans empattement géométrique personnalisée de Vercel, avec un espacement réduit entre les lettres pour les grandes tailles (-0,06 em à 56-64 px, -0,05 em à 30 px). Pour les titres en haut de page, une graisse de 450 a été choisie: plus épaisse que Light mais plus légère que Semi-Bold, elle confère un ton affirmé sans être imposant.
- Geist Mono — remplacement: JetBrains Mono · grandes lignes 400, 500, 600 · Police secondaire à chasse fixe pour les légendes, les blocs de code, les panneaux de sortie de l'interface de ligne de commande, les métadonnées et le texte en majuscules. La combinaison 8 px/600 px/majuscules permet un placement précis des petits logotypes. L'espacement important entre les lettres (0,071 em) dans la version à chasse fixe offre un espace suffisant pour le texte en majuscules.
Intervalles et forme
| But | Signification |
|---|---|
| Densité | dense |
| Étape de base | 12px |
| Rayon du bouton | 6px |
| Rayon de la carte | 6px |
| Ombres | non - des bordures à la place des ombres |
| Entre les sections | 96-128px |
| Largeur de la page | 1280px |
L'IA construira votre site web dans le style Vercel 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
- Headspace — Un coin bien-être ensoleillé sur du papier chaud
- WHOOP — Laboratoire de performance à minuit - tables de laboratoire blanches sous un vide théâtral noir, une unique impulsion électrique violette
- Together AI — console de recherche sur le papier glaciaire
- v0 by Vercel — Dessin au tour. Précision et fonctionnalité sont primordiales, chaque élément ayant une fonction précise sur une surface propre et techniquement parfaite.
- Dovetail — Un plan sous une lune noire — des lignes graphiques à peine visibles, une police blanche, une étincelle violette
- Glideapps — Table à dessin monochrome avec une touche de turquoise électrique
- Timescale — Dessin technique sur papier millimétré chaud
- UGLYCASH — Un carnet recouvert d'autocollants, imprimé sur du papier couleur crème, dégage l'ambiance d'une fintech audacieuse et maximaliste qui affiche fièrement son chaos.
- Sprout Social — Une pousse verte sur une ardoise noire. Une touche de couleur vive sur une toile monochrome stricte, dont la couleur n'est utilisée que pour l'action, avec une police géométrique affirmée servant de repères.
- Krea — galerie noir à minuit
- Evergreen — Serre solaire sur papier lin
- Factory — Le terminal de la « salle de guerre» à minuit. L'« usine» est un panneau de contrôle noir austère où une simple carte blanche apparaît comme un ordre éclairé par une lampe torche; le seul objet dans la pièce est le travail lui-même.