Dub
Link's matte rijstpapier bedieningspaneel
Het visuele systeem van Dub heeft een ingetogen, bijna redactioneel SaaS-achtige esthetiek: een bijna wit canvas dat bijeengehouden wordt door dunne randen in plaats van uitstekende elementen, met dichte monochrome typografie die structurele ondersteuning biedt en een enkele helderblauwe kleur (#2563eb) die een statement maakt. Oppervlakken lijken op het eerste gezicht vlak en zonder kader, maar elke container heeft een marge van 1px (#e5e5e5), wat de indruk wekt van een geprint document. Persoonlijkheid wordt bereikt door een kleine set gekleurde "pil"-accenten (oranje, groen, paars) die boven het neutrale kleurenpalet zweven, en kopteksten die zelfverzekerd en modern aanvoelen zonder opzichtig te zijn. Componenten zijn compact en dicht: 8px tussenruimte, 12px radius voor kaarten, pilvormige labels van 9999px en onzichtbare bedieningselementen in plaats van zware, gevulde knoppen.
De pagina is opgebouwd met een gecentreerde lay-out en een maximale breedte van ongeveer 1200px. Het hoofdelement is een gecentreerd tekstblok met drie zwevende elementen (Affiliateprogramma's, Conversieanalyse, Korte links) die horizontaal boven een grote productlay-out zijn geplaatst. Secties zijn verticaal gerangschikt met een constante tussenruimte van 64px, afwisselend wit en een #f5f5f5 papiernevel voor toonverschillen. Het onderste gedeelte maakt gebruik van een Z-vormige lay-out: redactionele tekst is gecentreerd in het middelste derde deel en zwevende UI-kaarten zijn verankerd aan de linker- en rechtermarges, waardoor een asymmetrisch, tijdschriftachtig ritme ontstaat. De logowolk is een eenvoudig 5x2 raster, gecentreerd op de pagina. De navigatie bestaat uit een minimalistische bovenbalk – logo links, navigatie in het midden, een groep van twee knoppen (een transparante "Inloggen"-knop + een gevulde "Registreren"-knop) rechts – zonder vast of megamenu. De lay-out van het dashboard in het hoofdvenster toont een klassieke app-indeling met twee kolommen: een vaste zijbalk (vergelijkbaar met 240px) + een contentgebied dat de hoeveelheid productinformatie voor bezoekers bepaalt voordat ze beginnen met scrollen.
De visuele vormgeving is productgericht, niet lifestylegericht. Het hoofdscherm is gecentreerd rond een grote screenshot van een dashboard, een realistische productmockup met een zijbalknavigatie, een datatabel en zwevende UI-elementen, weergegeven als een plat paneel op een witte achtergrond. Klantlogo's worden weergegeven in een gedempte grijstinten raster (beehiv, superpower, Chatbase, etc.) om hun prestaties op sociale media te benadrukken, zonder kleur zodat het enige blauwe accent van de pagina dominant blijft. Zwevende partnerkaarten (kleine profielen en tegels met omzet-/betalingsgegevens) bewegen rond blokken redactionele tekst onderaan, waardoor een gevoel van diepte ontstaat zonder schaduwen op de tekst zelf. Het stippenrasterpatroon op de achtergrond is een kenmerkend element: een dunne rij kleine stippen met een zeer lage transparantie creëert textuur en de uitstraling van een designsysteem/tekenoppervlak, waarmee de positionering van de site als een "modern linkattributieplatform" wordt benadrukt. De iconografie is minimalistisch, met contouren en vullingen, en maakt gebruik van een accentpalet (mandarijn-oranje, lavendelpaars, mintgroen) voor de functietags. Er worden geen foto's, illustraties of 3D-modellen gebruikt; de gebruikersinterface van het product is zelf een visuele taal.
Palet
Merk
- Electric Blue
#2563eb— De primaire merkkleur – het logo, links, key performance indicators, actieve statussen en iconen – wordt gebruikt. Een diepblauw op een witte achtergrond vormt de enige visuele aantrekkingskracht van het systeem. - Deep Sapphire
#1e40af— De belangrijkste achtergrond van de actieknop, de opvallende opvulling van de call-to-action – de enige kleur die de actie aangeeft – wordt spaarzaam gebruikt om de aandacht te trekken.
Neutrale
- Canvas White
#ffffff— De pagina-achtergrond, het kaartoppervlak en de pop-uppanelen vormen de absolute basis van elk scherm. - Paper Mist
#f5f5f5— Subtiele kleurveranderingen bij het hoveren over geneste kaarten, extra panelen en opvullingen. - Ash
#e5e5e5— De dunne randen van de kaarten, ingangsconnectoren en scheidingswanden vormen de structurele lijn die het systeem bijeenhoudt. - Smoke
#d4d4d4— Scherpere randen voor geselecteerde containers en extra knopcontouren. - Pebble
#c8c8c8— Randen, controlelijnen en structurele scheidingslijnen met een gemiddeld contrast. Deze kleur mag niet als primaire kleur voor call-to-actions worden gebruikt. - Midnight Ink
#0a0a0a— De hoofdtekst van de knoppen, de gemarkeerde knoppen en de navigatietekst zijn bijna volledig zwart voor maximaal contrast.
Typografie
van 11 tot 48px · 9 stappen
- Satoshi — vervanging: Inter (weight 500 · overzichten 500 · Weergavekoppen – alleen gebruikt in regels van 36–48px voor koppen en sectietitels. Lettergewicht – 500 (medium, niet vet): De koppen zien er zelfverzekerd en modern uit, maar nooit overheersend. De geometrische proporties van Satoshi geven het lettertype een licht redactioneel, modern gevoel dat de hoofdtekst van Inter niet kan evenaren.
- Inter — vervanging: Inter (native) · overzichten 400, 500, 600 · Tekst, UI-labels, navigatie, subkoppen en kleinere koppen. Inter is het belangrijkste lettertype voor alles, van micro-labels van 11px tot secundaire koppen van 30px. Een letterdikte van 400 is de standaard voor tekst, 500 voor gemarkeerde elementen en knoplabels, en 600 is gereserveerd voor belangrijke UI-labels. 16px met een regelafstand van 1,5 is de meest voorkomende lettergrootte (1220 keer), wat bevestigt dat 16px de standaard lettergrootte voor tekst is.
- Geist Mono — vervanging: JetBrains Mono or IBM Plex Mono · overzichten 400, 500 · Codefragmenten, technische metadata en ingebedde tokens met vaste breedte worden gebruikt in codeblokken van 12-14px en in grote code-weergave-elementen van 24px. Dit waarborgt de geloofwaardigheid van de ontwikkelaarstool, in lijn met de productpositionering van Dub.
Intervallen en vorm
| Doel | Betekenis |
|---|---|
| Dikte | gemiddeld |
| Basisstap | 8px |
| Knopradius | 8px |
| Kaartradius | 12px |
| Schaduwen | geen randen in plaats van schaduwen |
| Tussen secties | 64px |
| Paginabreedte | 1200px |
AI bouwt je website in de stijl Dub en vult deze in.
- Vul het account aan met producten en berichten via de link - Instagram, TikTok, Facebook.
- Neem de inhoud van je oude website over; geef gewoon het adres op.
- Modern design op de beste engine: React ( Next.js) met server-side rendering en SEO-optimalisatie direct uit de doos.
- Volledig geautomatiseerde SEO-optimalisatie voor zoekresultaten en aanbevelingen op basis van neurale netwerken.
Vergelijkbare stijlen
- ElevenLabs — Een fotoreportage in warme crèmekleuren met subtiele titels. Een notitieboek in Bauhaus-stijl – gebroken wit papier, zwarte inkt en een enkel paars en oranje accent voor productpresentatie.
- Awesomic — Redactioneel zinkgaas met oranje accenten die aan confetti doen denken
- Monad — redactioneel technisch tijdschrift op warm perkament
- Seline Analytics — Een rustige, analytische tabel op warm papier.
- Notion — Een warm papieren notitieboekje in de middagzon.
- Anthropic — Een wetenschappelijk veldnotitieboek op warm perkamentpapier – rustige ivoorkleurige oppervlakken, redactionele koppen in schreeflettertype en een enkel klei-accent dat alleen verschijnt wanneer actie vereist is.
- Calendly — Donkerblauwe inkt op koud marmer
- Augen Pro — De witte presentatie van Apple kenmerkt zich door een klinisch, gewichtloos, elektrisch blauw als enig accent in een monochrome omgeving.
- Antimetal — Een redactioneel verslag op crèmekleurig papier – een rustige ochtend bij een wetenschappelijk tijdschrift, waar ingetogenheid vertrouwen uitstraalt en schreefletters het zware werk doen.
- Perk — Elektrisch kalk op warm perkamentpapier
- Ditto — Een zonovergoten atelier waar wilde bloemen worden geschilderd. Warme crèmekleurige oppervlakken, een levendige gele basiskleur, diep donkerblauwe inkt, organische kleurvormen die achter het werk tot bloei komen.
- Officevibe — Een redactioneel tijdschrift op warm crèmekleurig papier. Stel je een doordacht essay over HR-management voor, gepresenteerd als een product – een sierlijk schreeflettertype dat zachtjes door een moderne blauwe interface fluistert.