Subframe
Eine grafische Zeichnung auf warmem Pergament. Designerpapier, bei dem jeder Strich entweder Graphit oder Radiergummi ist, niemals Farbe – Tiefe wird durch Linienstärke und spärliche Serifen erzielt.
Subframe ist ein monochromer Designer-Arbeitsbereich: eine warme, cremige Leinwand, graphitschwarze Tinte und der völlige Verzicht auf Farbakzente. Die gesamte Benutzeroberfläche wirkt wie ein einziges Material – Papier, Bleistift und Schatten – mit einem markanten typografischen Akzent: eine elegante Serifenschrift (Instrument Serif) im Kontrast zu einer systematischen serifenlosen Schrift (Inter), die den Überschriften redaktionelle Gewichtung verleiht. Die Oberflächen sind flach und eingefasst statt erhaben; Tiefe wird durch dünne Trennlinien in #e5e7eb und hervorgehobene Bereiche auf dunklen Steuerelementen anstelle von Schatten erzeugt. Die Dichte ist großzügig: ein breiter vertikaler Rhythmus (48–64 Pixel Abstand zwischen den Abschnitten), zentrierte, vollflächige Layouts und großzügiger Weißraum um den Text. Die einzige Farbe ist der Kontrast zwischen fast Weiß und fast Schwarz, wodurch der dunkle Button zum auffälligsten Element auf jeder Seite wird und die Leiste mit Partner-Markenlogos in Grautönen das einzige dekorative visuelle Element darstellt.
Zentrierte, bildschirmfüllende Layouts (1200px) mit großzügigem vertikalem Rhythmus. Das Hauptelement ist ein einzelner, zentrierter Block: ein dunkles, segmentiertes Steuerelement oben, eine große Überschrift „Inter“, eine einzeilige Unterüberschrift und zwei nebeneinanderliegende Schaltflächen (gefüllt + transparent) – kein Seitenbild, keine Layoutunterbrechung. Unterhalb des Hauptelements befindet sich ein zentrierter, grauer Logostreifen. Jeder nachfolgende Abschnitt folgt demselben Muster: ein linksbündiger Titel- und Unterüberschriftenblock, dann ein bildschirmfüllender Produktpräsentationsrahmen mit 48–64px Abstand zwischen den Abschnitten. Die Navigation ist minimalistisch: eine obere Leiste mit zentrierten Links und rechtsbündigen Aktionen, keine Seitenleiste, kein Mega-Menü. Die Seite liest sich von oben nach unten wie eine Reihe zentrierter Aussagen, denen jeweils viel Raum eingeräumt wird – das Layout wirkt eher wie ein redaktionelles Portfolio als eine übersichtliche Produktseite.
Das visuelle Design ist minimalistisch und funktional. Das System nutzt zwei Darstellungsmodi: (1) Eingerahmte Produkt-Screenshots und UI-Mockups in Rahmen mit einem Radius von 24 Pixeln zeigen die tatsächlichen Interface-Komponenten (Tabellen, Schaltflächen, Formulare) in derselben monochromen Farbpalette, wodurch die Screenshots nahtlos in die Seite integriert wirken; (2) eine einzelne Leiste mit grauen Partnerlogos dient als Social Proof und wird flach, ohne Farbe oder Rahmen, dargestellt. Es gibt keine Lifestyle-Fotos, abstrakten Farbverläufe oder 3D-Renderings. Das einzige illustrative Element ist eine dunkle Produktkachel mit einem Markensymbol auf warmgrauem Hintergrund – sie wird als Produktdemonstration und nicht als Dekoration wahrgenommen. Alle Bilder sind in ein textbasiertes Layout eingebettet, in dem der Text die visuelle Wirkung erzielt.
Palette
Neutral
- Page Canvas
#fafafa— Der Seitenhintergrund, die Postkarte auf Leinwand, der helle Text auf dunklen Oberflächen – eine warme weiße Farbe, die dem gesamten monochromen System zugrunde liegt. - Hairline Border
#e5e7eb— Trennlinien, Kartenränder, Bildrahmen, Symbolumrisse – die am häufigsten verwendete Umrissart im System definiert die räumliche Struktur. - Card Surface
#ededed— Der erhöhte Hintergrund für die Karten, eine zusätzliche Fläche, befindet sich eine Stufe über der Leinwand und erzeugt so eine Gruppierung ohne Schatten. - Divider Mid
#dadada— Mitteltontrenner und Übergänge zwischen Abschnitten - Graphite
#242424— Hochkontrastige neutrale Füllfarbe für primäre Schaltflächen auf hellen Oberflächen. - Ink Black
#171717— Fließtext, Überschriften, Symbolumrisse – etwas kühler als Graphite, eher für Typografie als für Oberflächen geeignet.
Typografie
von 12 auf 128 Pixel · 7 Schritte
- Inter — Ersatz: Inter (Google Fonts) · Umrisse 500, 600, 700 · Eine serifenlose Systemoberfläche – Navigation, Fließtext, Schaltflächen, Unterüberschriften und Abschnittsüberschriften. Schriftstärke: 500 pt für Fließtext und Steuerelemente, 600 pt für Unterüberschriften und Navigationselemente sowie 700 pt für Abschnittsüberschriften. Der starke negative Buchstabenabstand komprimiert geometrische Formen in jeder Größe und verleiht der Oberfläche ein kompaktes, technisches Erscheinungsbild.
- Instrument Serif — Ersatz: Playfair Display · Umrisse 400 · Eine Serifenschrift, die exklusiv für Überschriften und redaktionelle Inhalte entwickelt wurde. Ihre Strichstärke 400 und der Buchstabenabstand von -0,025em erzeugen einen eleganten, kursiven Look, der im Kontrast zur industriellen Geometrie von Inter steht – eine charakteristische Technik: ein einzelnes Wort oder eine Phrase mit Serifen auf einer serifenlosen Seite, die eher als visuelle Interpunktion denn als Überschriftenstil dient.
- Fragment Mono — Ersatz: JetBrains Mono · Umrisse 400 · Das Symbol „mono“ wird für Inline-Code-ähnliche Elemente, Tag-Beschriftungen und technische Hinweise verwendet. Es wird sparsam eingesetzt und erscheint in Funktionslisten und Inline-Anmerkungen, wenn das Designtool darauf hinweisen möchte, dass es sich um Maschinenausgabe handelt.
Intervalle und Form
| Zweck | Bedeutung |
|---|---|
| Dichte | Durchschnitt |
| Grundlegender Schritt | 8px |
| Radius der Schaltfläche | 16px |
| Kartenradius | 24px |
| Schatten | Nein – Ränder statt Schatten |
| Zwischen den Abschnitten | 64px |
| Seitenbreite | 1200px |
KI erstellt Ihre Website im Subframe -Stil und füllt sie aus.
- Teile deine Produkte und Beiträge über den Link – Instagram, TikTok, Facebook.
- Übertragen Sie Inhalte von Ihrer alten Website – geben Sie einfach die Adresse an.
- Modernes Design auf der besten Plattform: React ( Next.js) mit serverseitigem Rendering und SEO-Optimierung direkt nach der Installation.
- Vollautomatisierte SEO-Optimierung für Suchergebnisse und Empfehlungen durch neuronale Netze.
Ähnliche Stile
- monopo saigon — Ein flüssiges, irisierendes Leuchten hinter der redaktionellen Stille – eine monochrome Bildergalerie, die auf geschmolzenem Licht schwebt
- Hyer Aviation — Dämmerung im Cockpit über Pergament. Der blasse Morgenhimmel trifft auf das rumpfgroße Serifenlogo, und ein einzelner warmer Tonakzent durchbricht die monochrome Zurückhaltung.
- OFF+BRAND. — Schimmernde Kugel auf warmem Pergament
- Seed — ein lebender Organismus unter Laborglas
- Eindhoven Design District — Editorial Brutalismus auf weißem Papier ist ein städtisches Gestaltungsmanifest, ausgeführt in Großdruck, mit minimaler Fotografie und absoluter Zurückhaltung.
- Miranda — Klassische Breitformatschrift auf hellcremefarbenem Hintergrund – ein Zeitungsartikel für das digitale Zeitalter
- Monocle — Eine hochwertige, großformatige Zeitung auf cremefarbenem Papier. Ein sorgfältig zusammengestelltes Editorial, in dem jede Kolumne ihren Platz verdient und nur eine einzige Farbe auf der Seite verwendet wird.
- Agencja brandingowa — Eine redaktionelle Galerie in Weißtönen mit Typografie in schwarzer Tinte
- Websmith Studio — Morgenlicht auf cremefarbenem Papier
- Aspelin Reitan — Architekturarchiv bei Kerzenlicht – Die Seite sieht aus wie ein Portfolio von gebauten Räumen, die an einer warmen cremefarbenen Wand befestigt sind, wobei über jedem Bild eine einzelne Zeile weißen Textes über die gesamte Seitenbreite schwebt.
- Public — Ein monochromer Leitartikel auf kaltem Marmor – fast eine monochrome Leinwand, bei der eine 300-Punkt-Serifenschrift und ein einzelner violetter Akzent die gesamte Farbarbeit übernehmen.
- Motto — Ein typografischer Monolith auf Papier – eine einzige, selbstbewusste Stimme, die sich auf schneeweißem Papier verkündet.