monopo saigon
Une lueur liquide et irisée derrière le silence éditorial — une galerie éditoriale monochrome flottant sur une lumière en fusion
Monopo Saigon s'appuie sur une discipline monochrome radicale: un noir et blanc pur, rehaussé de subtiles nuances de gris, enveloppant une imposante police Roobert qui semble respirer sur des toiles occupant toute la largeur de la page. Le contraste caractéristique réside dans la rigueur éditoriale (angles nets pour la navigation et les liens, abondante aération, rythme basé sur 4 px) et un geste expressif unique: des boutons de 75 px de rayon qui flottent comme un liquide au-dessus des images. Les principaux éléments graphiques gravitent autour d'atmosphères chromatiques fluides et irisées (les verts se fondent dans l'ambre puis dans un bordeaux profond), tandis que l'interface elle-même ne prend jamais de teinte unique, créant l'impression d'une galerie éditoriale en noir et blanc flottant au-dessus d'un fleuve de lumière liquide. La police de caractères donne le ton: une version 300 lignes à 78 px murmure, une version 400 lignes à 225 px remplit l'espace d'affichage, et une version 400 lignes à 11 px définit avec assurance et minimalisme tout le reste. Le mouvement est expressif mais patient — courbes d'anticrénelage cubiques-bézier(0,19, 1, 0,22, 1), s'étirant jusqu'à 1,25 s, transitions de transformation, permettant aux éléments de glisser plutôt que de s'arrêter brusquement.
La mise en page est centrée sur une largeur maximale de 1078 px, avec des sections d'accueil sombres s'étendant sur toute la largeur de la page et dépassant du conteneur. Ces sections occupent tout l'espace d'affichage: un titre monumental centré (« United, Unbound») surplombe un contenu multimédia scintillant, une navigation minimaliste flotte en haut et une icône rotative unique occupe le bas à gauche. Les sections de texte suivent un rythme éditorial aéré: de larges espaces de 46 px entre les sections créent une respiration entre les blocs, alternant rayures blanches et sombres (noires avec texte blanc). La mise en page du contenu est asymétrique: l'alternance texte à gauche/image à droite et image à gauche/texte à droite prédomine, sans blocs centrés en dehors des sections d'accueil. Les grilles de cartes sont affichées sous forme de listes de projets à une seule colonne plutôt qu'à plusieurs colonnes: chaque projet occupe toute la largeur avec sa propre image et son titre. La navigation se compose d'une barre supérieure transparente avec le logo à gauche, la localisation au centre et un menu à droite; aucune modification de couleur permanente, aucune ombre, juste un bouton « Enregistrer» invisible. En bas de page figure un bloc d'adresses compact à trois colonnes (Tokyo, Saigon, Londres) avec un texte discret. Globalement, le style éditorial est celui d'un magazine numérique.
Le visuel est théâtral et unique: l’écran principal est dominé par une texture massive, irisée et fluide – des teintes vertes organiques se fondant dans l’ambre et le bordeaux, comme de l’huile sur l’eau ou du verre en fusion. On a l’impression d’un contenu multimédia atmosphérique occupant tout l’écran, peut-être une vidéo ou une toile créée avec des shaders, et perçu comme un instant sensoriel unique plutôt que comme un motif répétitif. Les démos du projet utilisent des photographies éditoriales intimistes (gros plans de produits, images promotionnelles) présentées sans cadre ni bordure – l’image est le contenu. Il n’y a pas d’illustrations, pas d’icônes autres que de minuscules glyphes d’interface utilisateur, pas de formes décoratives. L’iconographie est minimale, voire absente; une icône de texte circulaire rotative sert d’unique ornement typographique au système. Densité globale: le texte domine par un seul geste visuel en grand format, suivi de longs passages éditoriaux apaisants de typographie et d’images de produits.
Palette
Marque
- Iridescent Fade
#a02d25— L'accent chromatique n'apparaît que dans la transition du dégradé; la teinte bordeaux fondue qui forme la base de l'atmosphère irisée n'est pas utilisée dans les commandes de l'interface.
Neutre
- Obsidian
#000000— Texte principal, contour SVG, remplissage du texte principal - le noir pur contient toutes les informations et éléments graphiques au premier plan. - Paper
#ffffff— Utilisez un texte clair sur fond sombre, des légendes inversées et des titres à fort contraste. Évitez d'utiliser un texte clair comme couleur principale pour les appels à l'action. - Inkstone
#181818— Le texte principal du pied de page et les titres supplémentaires sont d'un noir discret pour faciliter la lecture des textes longs. - Felt Gray
#6d6d6d— Textes auxiliaires, blocs d'adresses, textes juridiques – des annotations discrètes qui s'effacent sans être remarquées, sans pour autant disparaître complètement. - Slate Pill
#636363— Le fond neutre du bouton est le seul remplissage uni utilisé pour les actions telles que Accepter. - Ash Mist
#9a9a9a— Une teinte neutre, de tonalité moyenne, pour les surfaces à faible visibilité ou à faible contraste dans un ensemble de surfaces.
Typographie
de 12 à 225 px · 9 étapes
- Roobert — remplacement: Inter or Söhne — both share Roobert's geometric-humanist balance and clean aperture · grandes lignes 300, 400, 600 · La police principale est utilisée pour tous les textes d'interface, la navigation, les titres, le corps du texte, les listes et les pieds de page. Cette police sans empattement, conçue sur mesure, allie clarté géométrique et chaleur humaine; sa large gamme de graisses (de 300 Whisper à 600 Anchor) lui confère une grande adaptabilité, des titres les plus imposants aux notes les plus subtiles.
- Raleway — remplacement: Montserrat or Jost · grandes lignes 400 · Utilisé uniquement dans certains contextes de titres où une police sans empattement plus élégante et étroite offre un contraste – rarement utilisée comme contrepoint à une police Robert plus audacieuse.
- system-ui — remplacement: Inter · grandes lignes 400 · Micro-étiquettes d'interface, texte du bandeau de cookies, petite police: l'option de repli par défaut du navigateur, garantissant une lisibilité optimale même dans les moindres détails, sans nécessiter de police personnalisée.
Intervalles et forme
| But | Signification |
|---|---|
| Densité | dense |
| Étape de base | 14px |
| Rayon du bouton | 75px |
| Rayon de la carte | 0px |
| Ombres | non - des bordures à la place des ombres |
| Entre les sections | 46px |
| Largeur de la page | 1078px |
L'IA construira votre site web dans le style monopo saigon 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
- 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.
- OFF+BRAND. — Sphère irisée sur parchemin chaud
- Seed — un organisme vivant sous verre de laboratoire
- Eindhoven Design District — Le brutalisme éditorial sur papier blanc est un manifeste de design municipal, exécuté en gros caractères, avec une photographie minimale et une retenue absolue.
- Subframe — Un dessin graphique sur parchemin chaud. Papier de créateur, où chaque trait est soit au graphite, soit à la gomme, jamais à la peinture; la profondeur est obtenue par l’épaisseur du trait et la rareté des empattements.
- Miranda — Typographie classique grand format sur fond crème clair — un éditorial de journal adapté à l'ère numérique
- Monocle — Un journal grand format de haute qualité, imprimé sur papier couleur crème. Une éditoriale soigneusement élaborée, où chaque rubrique a toute sa place et où une seule couleur significative apparaît sur la page.
- Agencja brandingowa — Une galerie éditoriale en tons blancs avec une typographie à l'encre noire
- Websmith Studio — Lumière du matin sur papier crème
- Aspelin Reitan — Archives architecturales à la lueur des bougies – La page ressemble à un portfolio d'espaces construits, épinglé sur un mur couleur crème chaleureuse, avec une simple ligne de texte blanc flottant au-dessus de chaque image sur toute la largeur de la page.
- Public — Un éditorial monochrome sur fond de marbre froid – presque une toile monochrome, avec une police à empattements de 300 points et une unique touche de violet qui assure toute la couleur.
- Motto — Un monolithe typographique sur papier – une voix unique et assurée s'affirmant sur du papier d'un blanc immaculé.