Dub
Links kontrolpanel med mat rispapir
Dubs visuelle system har en tilbageholdende, næsten redaktionel SaaS-æstetik: et næsten hvidt lærred holdt sammen af tynde kanter i stedet for fremspringende elementer, med tæt monokrom typografi, der giver strukturel støtte, og en enkelt klar blå farve (#2563eb), der skaber et statement. Overfladerne forbliver flade og rammeløse ved første øjekast, men hver beholder har en 1px #e5e5e5 margen, der fremkalder følelsen af et trykt dokument. Personlighed opnås gennem et lille sæt farvede "pille"-accenter (orange, grøn, lilla), der svæver over den neutrale palet, og overskrifter, der føles selvsikre og moderne uden at være prangende. Komponenterne er kompakte og tætte: 8px indløbsmarginer, 12px kortradius, pilleformede etiketter på 9999px og usynlige kontroller i stedet for tunge, fyldte knapper.
Siden er bygget på et centreret layout med en maksimal bredde på cirka 1200px. Hovedelementet er en centreret tekstblok med tre flydende elementer (Affilierede programmer, Konverteringsanalyser, Korte links) placeret vandret over et stort produktlayout. Sektionerne er arrangeret lodret med ensartede 64px-marginer, der skifter mellem hvidt lærred og #f5f5f5 papirdis for toneadskillelse. Den nederste sektion bruger et Z-formet layout: redaktionel tekst er centreret i den midterste tredjedel, og flydende brugergrænsefladekort er forankret i venstre og højre margin, hvilket skaber en asymmetrisk, magasinlignende rytme. Logo-skyen er et simpelt 5x2-gitter, centreret på siden. Navigationen er en minimalistisk toplinje - logo til venstre, navigation i midten, en gruppe af to knapper (en skyggeknap "Login" + en udfyldt "Registrer"-knap) til højre - uden en fast eller mega-menu. Hovedvinduets dashboardlayout viser et klassisk applayout med to kolonner: en fast sidebjælke (svarende til 240px) + et indholdsområde, der definerer tætheden af produktinformation for besøgende, før de begynder at scrolle.
Visualerne er produktfokuserede, ikke livsstilsfokuserede. Hovedskærmen er centreret omkring et stort dashboard-skærmbillede, der repræsenterer en produktmockup fra den virkelige verden med en sidebjælke-navigation, datatabel og flydende brugergrænsefladeelementer, der er lagt ud som et fladt panel på et hvidt lærred. Klientlogoer vises i et umættet gråtonegitter (beehiv, superpower, Chatbase osv.) for at anerkende deres præstation på sociale medier, fjernet fra farver for at tillade sidens enkelte blå accent at forblive dominerende. Flydende partnerkort (små profiler og felter med omsætnings-/betalingsdata) bevæger sig rundt om blokke af redaktionel tekst i bunden, hvilket skaber en følelse af dybde uden brug af skygger på selve teksten. Baggrundsmønsteret med stiplet gitter er et signaturtræk: en tynd række af små prikker med meget lav opacitet skaber tekstur og følelsen af et designsystem/tegneoverflade, der understreger webstedets positionering som en "moderne linkattributionsplatform". Ikonografien er minimal med konturer og udfyldninger og bruger en accentpalet (mandarinorange, lavendellilla, mintgrøn) til funktionstags. Der anvendes ingen fotografier, illustrationer eller 3D-modeller – selve produktets brugergrænseflade er et visuelt sprog.
Palet
Mærke
- Electric Blue
#2563eb— Den primære brandfarve – logoet, links, nøgleindikatorer, aktive tilstande og ikonaccenter – bruges. En fyldig blå farve på en hvid baggrund skaber systemets eneste visuelle appel. - Deep Sapphire
#1e40af— Handlingsknappens primære baggrund, den fede udfyldning af opfordringen til handling – den eneste farve, der angiver handlingen – bruges sparsomt for at tiltrække opmærksomhed.
Neutral
- Canvas White
#ffffff— Sidebaggrund, kortoverflade og pop op-paneler er det absolutte fundament for enhver skærm. - Paper Mist
#f5f5f5— Subtile ændringer i overfladefarven for indlejrede kort, ekstra paneler og udfyldninger ved musepekeren. - Ash
#e5e5e5— De tynde kanter på kortene, indgangsstikkene og skillevæggene er den strukturelle linje, der holder systemet sammen. - Smoke
#d4d4d4— Skarpere rammer for valgte containere og yderligere knapkonturer. - Pebble
#c8c8c8— Kanter, kontrolkonturer og strukturelle skillevægge med medium kontrast. Denne farve bør ikke bruges som primærfarve til opfordringer til handling. - Midnight Ink
#0a0a0a— Hovedteksten på knapperne, de fremhævede knapper og navigationsteksten er næsten sorte for at opnå maksimal kontrast.
Typografi
fra 11 til 48px · 9 trin
- Satoshi — udskiftning: Inter (weight 500 · konturer 500 · Vis overskrifter – bruges kun i linjer på 36-48px til overskrifter og sektionstitler. Skriftvægt – 500 (medium, ikke fed): Overskrifterne ser selvsikre og moderne ud, men aldrig overvældende. Satoshis geometriske proportioner giver skrifttypen et let redaktionelt, moderne præg, som Inters brødtekst ikke kan genskabe.
- Inter — udskiftning: Inter (native) · konturer 400, 500, 600 · Brødtekst, brugergrænsefladeetiketter, navigation, underoverskrifter og mindre overskrifter. Inter er den primære arbejdshest og håndterer alt fra 11px mikroetiketter til 30px sekundære overskrifter. Standardvægten er 400 for brødtekst, 500 for fremhævede elementer og knapetiketter, og 600 er reserveret til vigtige brugergrænsefladeetiketter. 16px med en linjehøjde på 1,5 er den hyppigst forekommende størrelse i et enkelt trin (1220 forekomster), hvilket bekræfter, at 16px er den kanoniske størrelse for brødtekst.
- Geist Mono — udskiftning: JetBrains Mono or IBM Plex Mono · konturer 400, 500 · Kodestykker, tekniske metadata og indlejrede monospaced tokens bruges i kodeblokke med 12-14px og i store kodevisningselementer med 24px. Dette sikrer udviklerværktøjets troværdighed, hvilket stemmer overens med Dubs produktpositionering.
Intervaller og form
| Formål | Mening |
|---|---|
| Tæthed | gennemsnit |
| Grundlæggende trin | 8px |
| Knapradius | 8px |
| Kortradius | 12px |
| Skygger | ingen grænser i stedet for skygger |
| Mellem sektioner | 64px |
| Sidebredde | 1200px |
AI vil bygge din hjemmeside i Dub -stil og udfylde den
- Fyld med produkter og opslag via linket - Instagram, TikTok, Facebook.
- Overfør indhold fra dit gamle websted – angiv blot adressen.
- Moderne design på den bedste søgemotor: React ( Next.js) med serverrendering og SEO-optimering lige fra starten.
- Fuldautomatiseret SEO-optimering til søgeresultater og anbefalinger til neurale netværk.
Lignende stilarter
- ElevenLabs — Et fotoessay i varme cremefarvede toner med diskrete overskrifter. En notesbog i Bauhaus-stil – æggeskalsfarvet papir, sort blæk og en enkelt lilla og orange accent til produktpræsentation.
- Awesomic — Redaktionelt zinknet med orange tegnsætningstegn, der minder om konfetti
- Monad — redaktionelt teknisk tidsskrift på varmt pergament
- Seline Analytics — Et stille analysebord på varmt papir
- Notion — En varm papirnotesbog i middagssolen
- Anthropic — Et videnskabeligt felttidsskrift på varmt pergament – rolige elfenbensfarvede overflader, seriferede redaktionelle overskrifter og en enkelt leraccent, der kun vises, når handling er nødvendig.
- Calendly — Mørkeblå blæk på kold marmor
- Augen Pro — Apples hvide præsentation har en klinisk, vægtløs, elektrisk blå farve som den eneste accent i et monokromt rum.
- Antimetal — En redaktionel krønike på cremefarvet papir – en stille morgen i et videnskabeligt tidsskrift, hvor tilbageholdenhed udstråler selvtillid, og seriffer klarer det hårde arbejde.
- Perk — Elektrisk lime på varmt pergamentpapir
- Ditto — Et solbelyst værksted, der skaber prøver af vilde blomster. Varme cremefarvede overflader, en levende gul bundfarve, dyb marineblå blæk, organiske farveformer, der blomstrer bag værket.
- Officevibe — Et redaktionelt magasin på varmt cremefarvet papir. Forestil dig et tankevækkende essay om HR-ledelse, præsenteret som et produkt – en kursiv serif-skrifttype, der hvisker gennem en moderne blå brugerflade.