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.
Subframe est un espace de travail monochrome pour les designers: une toile chaude et crémeuse, une encre noire graphite et une absence totale d’accents chromatiques. L’interface entière est perçue comme un matériau unique – papier, crayon et ombre – avec une touche typographique audacieuse: une police serif raffinée (Instrument Serif) contrastant avec une police sans serif systématique (Inter), conférant une certaine gravité aux titres. Les surfaces sont plates et encadrées, non en relief; la profondeur est obtenue par de fines séparations en #e5e7eb et des surlignages sur les commandes sombres, plutôt que par des ombres. La densité est généreuse: un rythme vertical ample (48 à 64 px d’espacement entre les sections), des mises en page centrées en pleine largeur et un espace blanc important autour du texte. La seule couleur est le contraste entre le blanc cassé et le noir foncé, faisant du bouton sombre l’élément le plus marquant de chaque page et de la bande de logos des marques partenaires en tons de gris le seul élément visuel décoratif.
Mise en page centrée et pleine largeur (1200 px) avec un rythme vertical généreux. L'élément principal est un bloc unique et centré: un panneau de contrôle sombre et segmenté en haut, un grand titre « Inter», un sous-titre sur une seule ligne et deux boutons adjacents (l'un plein et l'autre translucide) – sans image latérale ni rupture de mise en page. En dessous de l'élément principal se trouve une bande logo en niveaux de gris centrée. Chaque section suivante suit le même modèle: un bloc titre et sous-titre aligné à gauche, puis un cadre pleine largeur présentant le produit, avec un espacement de 48 à 64 px entre les sections. La navigation est minimaliste: une barre supérieure avec des liens centrés et des actions alignées à droite, sans barre latérale ni méga-menu. La page se lit de haut en bas comme une série d'énoncés centrés, chacun bénéficiant d'un espace suffisant – la mise en page évoque davantage un portfolio éditorial qu'une page produit chargée.
Le design visuel est minimaliste et fonctionnel. Le système utilise deux modes d'affichage: (1) des captures d'écran de produits et des maquettes d'interface utilisateur encadrées dans des cadres de 24 px de rayon. Elles affichent les composants d'interface (tableaux, boutons, formulaires) rendus dans la même palette monochrome, ce qui permet une intégration parfaite des captures d'écran à la page; (2) une simple bande de logos de partenaires en niveaux de gris sert de preuve sociale. Ces logos sont rendus plats, sans couleur ni conteneur. On ne trouve ni photos lifestyle, ni dégradés abstraits, ni rendus 3D. Le seul élément illustratif est une vignette de produit sombre, centrée sur un fond gris chaud avec une icône de marque. Elle est perçue comme une démonstration du produit, et non comme un élément décoratif. Toutes les images sont intégrées à une mise en page textuelle, où le texte porte l'attention visuelle.
Palette
Neutre
- Page Canvas
#fafafa— Le fond de la page, la carte postale sur toile, le texte clair sur fond sombre – une couleur blanc chaud qui sous-tend tout le système monochrome. - Hairline Border
#e5e7eb— Séparateurs, bordures de cartes, cadres d'images, contours d'icônes - le type de contour le plus fréquemment utilisé dans le système, définit la structure spatiale. - Card Surface
#ededed— Le fond surélevé des cartes, une surface supplémentaire, est situé légèrement au-dessus de la toile, créant ainsi un ensemble sans ombres. - Divider Mid
#dadada— Séparateurs de tons moyens et transitions entre les sections - Graphite
#242424— Remplissage neutre à contraste élevé pour les boutons principaux sur les surfaces claires. - Ink Black
#171717— Texte courant, titres, contours d'icônes: un peu plus froid que Graphite, utilisé pour la typographie plutôt que pour les surfaces.
Typographie
de 12 à 128 px · 7 étapes
- Inter — remplacement: Inter (Google Fonts) · grandes lignes 500, 600, 700 · Interface système en caractères sans empattement: navigation, texte courant, boutons, sous-titres et titres de section. Grammage: 500 pour le texte courant et les commandes, 600 pour les sous-titres et les accents de navigation, et 700 pour les titres de section. Un espacement négatif important entre les lettres comprime les formes géométriques, quelle que soit leur taille, conférant à l’interface un aspect concis et technique.
- Instrument Serif — remplacement: Playfair Display · grandes lignes 400 · Une police à empattements conçue exclusivement pour les titres et le contenu éditorial. Son épaisseur de 400 et son espacement de -0,025 em créent un aspect élégant et italique qui contraste avec la géométrie industrielle d'Inter. Une technique signature: un seul mot ou une seule expression à empattements au sein d'une page sans empattements, servant de ponctuation visuelle plutôt que de style de titre.
- Fragment Mono — remplacement: JetBrains Mono · grandes lignes 400 · L'accent mono est utilisé pour les éléments de code en ligne, les étiquettes de balises et les légendes techniques. Il est employé avec parcimonie, notamment dans les listes de fonctions et les annotations en ligne où l'outil de conception souhaite indiquer « ceci est une sortie machine».
Intervalles et forme
| But | Signification |
|---|---|
| Densité | moyenne |
| Étape de base | 8px |
| Rayon du bouton | 16px |
| Rayon de la carte | 24px |
| 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 Subframe 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
- monopo saigon — Une lueur liquide et irisée derrière le silence éditorial — une galerie éditoriale monochrome flottant sur une lumière en fusion
- 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.
- 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é.