Dub
Link's mattes Reispapier-Bedienfeld
Das visuelle System von Dub zeichnet sich durch eine zurückhaltende, fast redaktionelle SaaS-Ästhetik aus: Eine nahezu weiße Fläche, die von schmalen Rändern statt hervorstehenden Elementen zusammengehalten wird, mit dichter, monochromer Typografie, die für Struktur sorgt, und einem einzelnen, leuchtenden Blau (#2563eb), das Akzente setzt. Die Oberflächen wirken auf den ersten Blick flach und rahmenlos, doch jeder Container besitzt einen 1 Pixel breiten Rand (#e5e5e5), der an ein gedrucktes Dokument erinnert. Charakter wird durch wenige farbige Akzente in Pillenform (Orange, Grün, Lila) erzielt, die über der neutralen Farbpalette schweben, sowie durch Überschriften, die selbstbewusst und modern wirken, ohne aufdringlich zu sein. Die Komponenten sind kompakt und dicht angeordnet: 8 Pixel breite Abstände, 12 Pixel Kartenradius, pillenförmige Beschriftungen mit 9999 Pixeln Breite und unsichtbare Steuerelemente anstelle von wuchtigen, gefüllten Schaltflächen.
Die Seite basiert auf einem zentrierten Layout mit einer maximalen Breite von ca. 1200 Pixeln. Das Hauptelement ist ein zentrierter Textblock mit drei horizontal angeordneten Elementen (Affiliate-Programme, Conversion-Analyse, Kurzlinks) über einem großen Produktlayout. Die Abschnitte sind vertikal mit einheitlichen 64-Pixel-Abständen angeordnet und wechseln zwischen weißem Hintergrund und einem dünnen Papierschleier (#f5f5f5) zur Tonwerttrennung. Der untere Bereich ist Z-förmig gestaltet: Der redaktionelle Text ist im mittleren Drittel zentriert, während die schwebenden UI-Karten am linken und rechten Rand verankert sind. Dadurch entsteht ein asymmetrischer, zeitschriftenartiger Rhythmus. Die Logo-Cloud ist ein einfaches 5x2-Raster, zentriert auf der Seite. Die Navigation besteht aus einer minimalistischen oberen Leiste – Logo links, Navigation in der Mitte, zwei Schaltflächen (eine angedeutete „Anmelden“-Schaltfläche und eine ausgefüllte „Registrieren“-Schaltfläche) rechts – ohne festes Menü oder Mega-Menü. Das Dashboard-Layout des Hauptfensters zeigt ein klassisches zweispaltiges App-Layout: eine feste Seitenleiste (ähnlich wie bei 240px) + einen Inhaltsbereich, der die Dichte der Produktinformationen für die Besucher festlegt, bevor diese mit dem Scrollen beginnen.
Die Visualisierungen sind produktorientiert, nicht lifestyle-orientiert. Der Hauptbildschirm zeigt einen großen Screenshot eines Dashboards, der ein reales Produktmodell mit Seitenleistennavigation, Datentabelle und schwebenden UI-Elementen darstellt. Die Anordnung erfolgt als flaches Panel auf weißem Hintergrund. Kundenlogos (z. B. beehiv, superpower, Chatbase) werden in einem entsättigten Graustufenraster angezeigt, um ihre Social-Media-Performance hervorzuheben. Die Farbgebung wurde bewusst reduziert, damit der einzelne blaue Akzent der Seite dominant bleibt. Schwebende Partnerkarten (kleine Profile und Kacheln mit Umsatz-/Zahlungsdaten) bewegen sich um redaktionelle Textblöcke am unteren Rand und erzeugen so Tiefe, ohne dass der Text selbst Schatten wirft. Das gepunktete Rastermuster im Hintergrund ist ein charakteristisches Merkmal: Eine dünne Reihe kleiner Punkte mit sehr geringer Deckkraft erzeugt Textur und vermittelt die Anmutung eines Designsystems oder einer Zeichenfläche. Dies unterstreicht die Positionierung der Website als „moderne Plattform für Link-Attribution“. Die Symbolik ist minimalistisch gehalten, mit Konturen und Füllungen, und verwendet eine Akzentpalette (Mandarinenorange, Lavendelviolett, Mintgrün) für Funktionsbezeichnungen. Es werden keine Fotos, Illustrationen oder 3D-Modelle verwendet – die Benutzeroberfläche des Produkts selbst ist eine visuelle Sprache.
Palette
Marke
- Electric Blue
#2563eb— Die primäre Markenfarbe – Logo, Links, Leistungskennzahlen, aktive Zustände und Symbolakzente – wird verwendet. Ein sattes Blau auf weißem Hintergrund bildet die einzige visuelle Attraktivität des Systems. - Deep Sapphire
#1e40af— Der Haupthintergrund des Aktionsbuttons, die fette Füllung des Handlungsaufrufs – die einzige Farbe, die die Aktion kennzeichnet – wird sparsam eingesetzt, um Aufmerksamkeit zu erregen.
Neutral
- Canvas White
#ffffff— Seitenhintergrund, Kartenoberfläche und Pop-up-Panels bilden die absolute Grundlage jedes Bildschirms. - Paper Mist
#f5f5f5— Subtile Farbänderungen beim Hovern für verschachtelte Karten, zusätzliche Panels und Füllungen. - Ash
#e5e5e5— Die dünnen Ränder der Karten, Eingangsanschlüsse und Trennwände bilden die strukturelle Linie, die das System zusammenhält. - Smoke
#d4d4d4— Schärfere Konturen für ausgewählte Container und zusätzliche Schaltflächenumrisse. - Pebble
#c8c8c8— Rahmen, Konturen und Trennlinien mit mittlerem Kontrast. Diese Farbe sollte nicht als Hauptfarbe für Handlungsaufforderungen verwendet werden. - Midnight Ink
#0a0a0a— Der Haupttext der Schaltflächen, die hervorgehobenen Schaltflächen und der Navigationstext sind fast schwarz, um einen maximalen Kontrast zu erzielen.
Typografie
von 11 auf 48 Pixel · 9 Schritte
- Satoshi — Ersatz: Inter (weight 500 · Umrisse 500 · Überschriften – nur in 36–48 Pixel langen Zeilen für Überschriften und Abschnittstitel verwendet. Schriftstärke – 500 (mittel, nicht fett): Überschriften wirken selbstbewusst und modern, aber nie aufdringlich. Satoshis geometrische Proportionen verleihen der Schriftart eine leicht redaktionelle, moderne Anmutung, die der Fließtext von Inter nicht erreichen kann.
- Inter — Ersatz: Inter (native) · Umrisse 400, 500, 600 · Fließtext, UI-Beschriftungen, Navigation, Zwischenüberschriften und Unterüberschriften. Die Schriftart „Inter“ ist die primäre Arbeitsgrundlage und verarbeitet alles von 11-Pixel-Mikrolabels bis hin zu 30-Pixel-Unterüberschriften. Die Standardstärke für Fließtext beträgt 400, für hervorgehobene Elemente und Schaltflächenbeschriftungen 500 und für wichtige UI-Beschriftungen 600. 16 Pixel mit einer Zeilenhöhe von 1,5 ist die am häufigsten verwendete Schriftgröße (1220 Vorkommen) und bestätigt, dass 16 Pixel die Standardgröße für Fließtext ist.
- Geist Mono — Ersatz: JetBrains Mono or IBM Plex Mono · Umrisse 400, 500 · Code-Snippets, technische Metadaten und eingebettete Monospace-Tokens werden in Codeblöcken mit einer Größe von 12–14 Pixeln und in großen Code-Anzeigeelementen mit einer Größe von 24 Pixeln verwendet. Dies gewährleistet die Glaubwürdigkeit des Entwicklertools und entspricht der Produktpositionierung von Dub.
Intervalle und Form
| Zweck | Bedeutung |
|---|---|
| Dichte | Durchschnitt |
| Grundlegender Schritt | 8px |
| Radius der Schaltfläche | 8px |
| Kartenradius | 12px |
| Schatten | Nein – Ränder statt Schatten |
| Zwischen den Abschnitten | 64px |
| Seitenbreite | 1200px |
KI erstellt Ihre Website im Dub -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
- ElevenLabs — Eine Fotostrecke in warmen Cremetönen mit dezenten Überschriften. Ein Notizbuch im Bauhaus-Stil – eierschalenfarbenes Papier, schwarze Tinte und ein einzelner violetter und orangefarbener Akzent zur Produktpräsentation.
- Awesomic — Redaktionelles Zinkgewebe mit orangefarbenen Satzzeichen, die an Konfetti erinnern
- Monad — redaktionelles Fachjournal auf warmem Pergament
- Seline Analytics — Ein ruhiger analytischer Tisch auf warmem Papier
- Notion — Ein warmes Notizbuch aus Papier in der Mittagssonne
- Anthropic — Ein wissenschaftliches Feldtagebuch auf warmem Pergament – ruhige elfenbeinfarbene Oberflächen, serifenbesetzte Überschriften und ein einzelner Akzent in Lehmfarbe, der nur dann erscheint, wenn Handlungsbedarf besteht.
- Calendly — Dunkelblaue Tinte auf kaltem Marmor
- Augen Pro — Apples weiße Präsentation zeichnet sich durch ein klinisch-schwereloses, elektrisches Blau als einzigen Akzent in einem monochromen Raum aus.
- Antimetal — Ein redaktioneller Bericht auf cremefarbenem Papier – ein ruhiger Morgen in einer wissenschaftlichen Zeitschrift, wo Zurückhaltung Selbstvertrauen vermittelt und Serifen die Hauptarbeit leisten.
- Perk — Elektrisches Limettengrün auf warmem Pergamentpapier
- Ditto — Eine sonnendurchflutete Werkstatt, in der Wildblumenmuster entstehen. Warme cremefarbene Oberflächen, ein leuchtendes Gelb als Grundfarbe, tiefblaue Tinten, organische Farbformen, die hinter dem Werk erblühen.
- Officevibe — Ein redaktionelles Magazin auf warmem, cremefarbenem Papier. Stellen Sie sich einen tiefgründigen Essay über Personalmanagement vor, präsentiert wie ein Produkt – eine geschwungene Serifenschrift, die durch eine moderne blaue Benutzeroberfläche flüstert.