Dub
Panneau de commande en papier de riz mat de Link
L'esthétique visuelle de Dub se caractérise par une sobriété presque éditoriale, évoquant le style SaaS: un canevas quasi blanc, structuré par de fines bordures plutôt que par des éléments saillants, avec une typographie monochrome dense assurant la structure et une touche de bleu vif (#2563eb) qui affirme le style. Les surfaces paraissent plates et sans cadre au premier abord, mais chaque conteneur possède une marge de 1 px (#e5e5e5), rappelant l'aspect d'un document imprimé. La personnalité est apportée par quelques accents colorés en forme de pilule (orange, vert, violet) qui se détachent sur la palette neutre, et par des titres à la fois modernes et affirmés, sans être ostentatoires. Les composants sont compacts et denses: gouttières de 8 px, rayon des cartes de 12 px, étiquettes en forme de pilule à 9999 px et commandes invisibles remplaçant les boutons imposants.
La page est construite sur une mise en page centrée d'une largeur maximale d'environ 1200 px. L'élément principal est un bloc de texte centré, surmontant horizontalement trois éléments flottants (Programmes d'affiliation, Analyse des conversions, Liens courts) positionnés au-dessus d'une grande fiche produit. Les sections sont disposées verticalement avec des gouttières constantes de 64 px, alternant entre un fond blanc et un effet papier #f5f5f5 pour une séparation tonale. La partie inférieure utilise une mise en page en Z: le texte éditorial est centré au milieu, et les vignettes d'interface utilisateur flottantes sont ancrées aux marges gauche et droite, créant un rythme asymétrique, à la manière d'un magazine. Le logo est une simple grille 5x2, centrée sur la page. La navigation se compose d'une barre supérieure minimaliste: logo à gauche, navigation au centre, et un groupe de deux boutons (un bouton « Connexion» fantôme et un bouton « Inscription» plein) à droite, sans menu fixe ni méga-menu. La mise en page du tableau de bord de la fenêtre principale présente une disposition classique d'application à deux colonnes: une barre latérale fixe (environ 240 px) + une zone de contenu qui définit la densité des informations sur le produit pour les visiteurs avant qu'ils ne commencent à faire défiler.
L'esthétique est axée sur le produit, et non sur le style de vie. L'écran principal est centré sur une capture d'écran d'un grand tableau de bord, représentant une maquette de produit réaliste avec une barre de navigation latérale, un tableau de données et des éléments d'interface flottants, le tout disposé en panneau plat sur fond blanc. Les logos des clients sont affichés dans une grille en niveaux de gris désaturés (beehiv, superpower, Chatbase, etc.) pour souligner leur performance sur les réseaux sociaux. Dépourvus de couleur, ils laissent la couleur bleue dominante de la page s'exprimer pleinement. Des fiches partenaires flottantes (petits profils et vignettes avec données de revenus/paiements) se déplacent autour de blocs de texte en bas de page, créant une impression de profondeur sans ombres portées. Le motif de fond en grille pointillée est une signature visuelle: une fine rangée de petits points à très faible opacité crée une texture et évoque un système de conception/une surface de dessin, renforçant le positionnement du site comme « plateforme moderne d'attribution de liens». L'iconographie est minimaliste, avec des contours et des remplissages, et utilise une palette d'accents (orange mandarine, violet lavande, vert menthe) pour les balises de fonctionnalités. Aucune photographie, illustration ou modélisation 3D n'est utilisée: l'interface utilisateur du produit est elle-même un langage visuel.
Palette
Marque
- Electric Blue
#2563eb— La couleur principale de la marque — logo, liens, indicateurs clés de performance, états actifs et accents des icônes — est utilisée. Un bleu profond sur fond blanc constitue le seul attrait visuel du système. - Deep Sapphire
#1e40af— La couleur de fond principale du bouton d'action, le remplissage en gras de l'appel à l'action (la seule couleur indiquant l'action), est utilisée avec parcimonie pour attirer l'attention.
Neutre
- Canvas White
#ffffff— L'arrière-plan de la page, la surface de la carte et les panneaux contextuels constituent la base absolue de chaque écran. - Paper Mist
#f5f5f5— Changements subtils de couleur au survol pour les cartes imbriquées, les panneaux supplémentaires et les remplissages. - Ash
#e5e5e5— Les fines bordures des cartes, des connecteurs d'entrée et des séparateurs constituent la ligne structurelle qui assure la cohésion du système. - Smoke
#d4d4d4— Bordures plus nettes pour certains conteneurs et contours de boutons supplémentaires. - Pebble
#c8c8c8— Bordures, contours de contrôle et séparateurs structurels à contraste moyen. Cette couleur ne doit pas être utilisée comme couleur principale pour les appels à l'action. - Midnight Ink
#0a0a0a— Le texte principal des boutons, les boutons mis en évidence et le texte de navigation sont presque noirs pour un contraste maximal.
Typographie
de 11 à 48 px · 9 étapes
- Satoshi — remplacement: Inter (weight 500 · grandes lignes 500 · Titres d'affichage – utilisés uniquement sur des lignes de 36 à 48 px pour les titres de section et les en-têtes. Graisse – 500 (moyenne, non grasse): les titres affichent une allure moderne et affirmée, sans jamais être imposants. Les proportions géométriques de Satoshi confèrent à la police une touche éditoriale et moderne que le texte courant d'Inter ne parvient pas à reproduire.
- Inter — remplacement: Inter (native) · grandes lignes 400, 500, 600 · Le corps du texte, les étiquettes d'interface, la navigation, les sous-titres et les titres secondaires sont gérés par la police Inter, qui prend en charge tous les éléments, des micro-étiquettes de 11 px aux titres secondaires de 30 px. La valeur par défaut est de 400 pour le corps du texte, 500 pour les éléments mis en évidence et les étiquettes des boutons, et 600 pour les étiquettes d'interface importantes. La taille de 16 px avec un interligne de 1,5 est la plus fréquente (1 220 occurrences), ce qui confirme que 16 px est la taille standard pour le corps du texte.
- Geist Mono — remplacement: JetBrains Mono or IBM Plex Mono · grandes lignes 400, 500 · Des extraits de code, des métadonnées techniques et des jetons à chasse fixe intégrés sont utilisés dans les blocs de code de 12 à 14 px et dans les éléments d'affichage de code de grande taille à 24 px. Cela garantit la crédibilité de l'outil de développement, conformément au positionnement produit de Dub.
Intervalles et forme
| But | Signification |
|---|---|
| Densité | moyenne |
| Étape de base | 8px |
| Rayon du bouton | 8px |
| Rayon de la carte | 12px |
| Ombres | non - des bordures à la place des ombres |
| Entre les sections | 64px |
| Largeur de la page | 1200px |
L'IA construira votre site web dans le style Dub 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
- Seline Analytics — Un tableau analytique silencieux sur du papier chaud
- 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.