Dub
Links kontrollpanel för matt rispapper
Dubs visuella system har en återhållsam, nästan redaktionell SaaS-estetik: en nästan vit duk som hålls samman av tunna kanter snarare än utskjutande element, med tät monokrom typografi som ger strukturellt stöd och en enda klarblå färg (#2563eb) som gör ett uttalande. Ytorna förblir plana och ramlösa vid första anblicken, men varje behållare har en 1px #e5e5e5-marginal, vilket framkallar känslan av ett tryckt dokument. Personlighet uppnås genom en liten uppsättning färgade "piller"-accenter (orange, grönt, lila) som svävar ovanför den neutrala paletten, och rubriker som känns självsäkra och moderna utan att vara flashiga. Komponenterna är kompakta och täta: 8px hängrännor, 12px kortradie, pillerformade etiketter på 9999px och osynliga kontroller istället för tunga, fyllda knappar.
Sidan är byggd med en centrerad layout med en maximal bredd på cirka 1200 pixlar. Huvudelementet är ett centrerat textblock med tre flytande element (Affiliateprogram, Konverteringsanalys, Korta länkar) placerade horisontellt ovanför en stor produktlayout. Sektionerna är arrangerade vertikalt med konsekventa 64px-rännor, alternerande mellan vit duk och #f5f5f5 pappersdis för tonseparation. Den nedre sektionen använder en Z-formad layout: redaktionell text är centrerad i den mellersta tredjedelen, och flytande UI-kort är förankrade i vänster och höger marginal, vilket skapar en asymmetrisk, tidningsliknande rytm. Logotypmolnet är ett enkelt 5x2-rutnät, centrerat på sidan. Navigeringen är en minimalistisk övre bar – logotyp till vänster, navigering i mitten, en grupp med två knappar (en spökknapp "Logga in" + en fylld "Registrera"-knapp) till höger – utan en fast eller megameny. Huvudfönstrets instrumentpanelslayout visar en klassisk applayout med två kolumner: en fast sidofält (liknande 240px) + ett innehållsområde som definierar tätheten av produktinformation för besökare innan de börjar skrolla.
Grafiken är produktfokuserad, inte livsstilsfokuserad. Huvudskärmen är centrerad kring en stor skärmdump av instrumentpanelen, som representerar en verklig produktmodell med sidofältsnavigering, datatabell och flytande UI-element, utformade som en platt panel på en vit duk. Kundlogotyper visas i ett desaturerat gråskalenät (beehiv, superpower, Chatbase, etc.) för att uppmärksamma deras prestanda på sociala medier, avskalade för att låta sidans enda blå accent förbli dominerande. Flytande partnerkort (små profiler och paneler med intäkts-/betalningsdata) rör sig runt block av redaktionell text längst ner, vilket skapar en känsla av djup utan att använda skuggor på själva texten. Det prickade rutnätsmönstret i bakgrunden är ett signaturfunktion: en tunn rad med små prickar med mycket låg opacitet skapar textur och känslan av ett designsystem/rityta, vilket betonar webbplatsens positionering som en "modern länkattributionsplattform". Ikonografin är minimal, med konturer och fyllningar, och använder en accentpalett (mandarinorange, lavendellila, mintgrön) för funktionstaggar. Inga fotografier, illustrationer eller 3D-modeller används – själva produktens användargränssnitt är ett visuellt språk.
Palett
Stämpla
- Electric Blue
#2563eb— Den primära varumärkesfärgen – logotypen, länkar, nyckeltal, aktiva tillstånd och ikonaccenter – används. En fyllig blå färg på vit bakgrund skapar systemets enda visuella attraktionskraft. - Deep Sapphire
#1e40af— Åtgärdsknappens huvudbakgrund, den fetstilta fyllningen i uppmaningen till handling – den enda färgen som anger åtgärden – används sparsamt för att dra till sig uppmärksamhet.
Neutral
- Canvas White
#ffffff— Sidbakgrund, kortyta och popup-paneler är den absoluta grunden för varje skärm. - Paper Mist
#f5f5f5— Subtila ytfärgsförändringar för kapslade kort, ytterligare paneler och fyllningar vid muspekning. - Ash
#e5e5e5— De tunna kanterna på korten, ingångskontakterna och avdelarna är den strukturella linjen som håller ihop systemet. - Smoke
#d4d4d4— Skarpare kantlinjer för valda behållare och ytterligare knappkonturer. - Pebble
#c8c8c8— Kantlinjer, kontrollkonturer och strukturella avdelare med medelhög kontrast. Denna färg bör inte användas som primärfärg för uppmaningar till handling. - Midnight Ink
#0a0a0a— Huvudtexten för knappar, markerade knappar och navigeringstext är nästan svart för maximal kontrast.
Typografi
från 11 till 48px · 9 steg
- Satoshi — ersättning: Inter (weight 500 · konturer 500 · Visa rubriker – används endast i rader på 36–48 pixlar för rubriker och avsnittstitlar. Teckenvikt – 500 (medium, inte fetstil): Rubrikerna ser självsäkra och moderna ut, men aldrig överväldigande. Satoshis geometriska proportioner ger typsnittet en något redaktionell, modern känsla som Inters brödtext inte kan replikera.
- Inter — ersättning: Inter (native) · konturer 400, 500, 600 · Brödtext, UI-etiketter, navigering, underrubriker och mindre rubriker. Inter är den primära arbetshästen och hanterar allt från 11px mikroetiketter till 30px sekundära rubriker. Standardvikten är 400 för brödtext, 500 för markerade element och knappetiketter, och 600 är reserverad för viktiga UI-etiketter. 16px med en radhöjd på 1,5 är den vanligaste storleken för enskilda steg (1220 förekomster), vilket bekräftar att 16px är den kanoniska storleken för brödtext.
- Geist Mono — ersättning: JetBrains Mono or IBM Plex Mono · konturer 400, 500 · Kodavsnitt, tekniska metadata och inbäddade monospaced-tokens används i kodblock med 12–14 pixlar och i stora kodvisningselement med 24 pixlar. Detta säkerställer utvecklarverktygets trovärdighet, i linje med Dubs produktpositionering.
Intervaller och form
| Ändamål | Menande |
|---|---|
| Densitet | genomsnitt |
| Grundläggande steg | 8px |
| Knappradie | 8px |
| Kortradie | 12px |
| Skuggor | inga gränser istället för skuggor |
| Mellan sektioner | 64px |
| Sidbredd | 1200px |
AI kommer att bygga din webbplats i Dub -stil och fylla den
- Fyll på med produkter och inlägg via länken - Instagram, TikTok, Facebook.
- Överför innehåll från din gamla webbplats – ange bara adressen.
- Modern design på den bästa sökmotorn: React ( Next.js) med serverrendering och SEO-optimering direkt ur lådan.
- Helautomatisk SEO-optimering för sökresultat och rekommendationer för neurala nätverk.
Liknande stilar
- ElevenLabs — En fotoessä i varma krämfärgade toner med diskreta rubriker. En anteckningsbok i Bauhaus-stil – äggskalfärgat papper, svart bläck och en enda lila och orange accentfärg för produktpresentation.
- Awesomic — Redaktionellt zinknät med orange skiljetecken som påminner om konfetti
- Monad — redaktionell teknisk tidskrift på varmt pergament
- Seline Analytics — Ett tyst analysbord på varmt papper
- Notion — En varm pappersbok i middagssolen
- Anthropic — En vetenskaplig fälttidskrift på varmt vellum – lugna elfenbensfärgade ytor, serifferade redaktionella rubriker och en enda leraccent som bara dyker upp när handling behövs.
- Calendly — Mörkblått bläck på kall marmor
- Augen Pro — Apples vita presentation har en klinisk, viktlös, elektrisk blå nyans som enda accent i ett monokromt utrymme.
- Antimetal — En redaktionell krönika på krämfärgat papper – en lugn morgon i en vetenskaplig tidskrift, där återhållsamhet förmedlar självförtroende och seriffer gör det tunga arbetet.
- Perk — Elektrisk lime på varmt bakplåtspapper
- Ditto — En solbelyst workshop som skapar prover av vildblommor. Varma krämfärgade ytor, en livfull gul basfärg, djupt marinblått tryckfärg, organiska färgformer som blommar bakom verket.
- Officevibe — En redaktionell tidskrift på varmt krämfärgat papper. Föreställ dig en tankeväckande essä om HR-ledning, presenterad som en produkt – ett kursivt serif-typsnitt som viskar genom ett modernt blått gränssnitt.