Dub
Links kontrollpanel for matt rispapir
Dubs visuelle system har en behersket, nesten redaksjonell SaaS-estetikk: et nesten hvitt lerret holdt sammen av tynne rammer i stedet for utstående elementer, med tett monokrom typografi som gir strukturell støtte og en enkelt lys blå farge (#2563eb) som utgjør et statement. Overflatene forblir flate og rammeløse ved første øyekast, men hver beholder har en 1px #e5e5e5-marg, som fremkaller følelsen av et trykt dokument. Personlighet oppnås gjennom et lite sett med fargede "pille"-aksenter (oransje, grønn, lilla) som flyter over den nøytrale paletten, og overskrifter som føles selvsikre og moderne uten å være prangende. Komponentene er kompakte og tette: 8px innre marginer, 12px kortradius, pilleformede etiketter på 9999px og usynlige kontroller i stedet for tunge, fylte knapper.
Siden er bygget på et sentrert oppsett med en maksimal bredde på omtrent 1200 piksler. Hovedelementet er en sentrert tekstblokk med tre flytende elementer (Affiliate-programmer, Konverteringsanalyse, Korte lenker) plassert horisontalt over et stort produktoppsett. Seksjonene er ordnet vertikalt med konsistente 64 pikslers innbindingsmarger, vekslende mellom hvitt lerret og #f5f5f5 papirdis for toneseparasjon. Den nederste delen bruker et Z-formet oppsett: redaksjonell tekst er sentrert i den midterste tredjedelen, og flytende brukergrensesnittkort er forankret til venstre og høyre marg, noe som skaper en asymmetrisk, magasinlignende rytme. Logo-skyen er et enkelt 5x2-rutenett, sentrert på siden. Navigasjonen er en minimalistisk topplinje – logo til venstre, navigasjon i midten, en gruppe med to knapper (en skyggefull "Logg inn"-knapp + en fylt "Registrer"-knapp) til høyre – uten en fast eller mega-meny. Hovedvinduets dashbordoppsett viser et klassisk appoppsett med to kolonner: en fast sidefelt (tilsvarende 240 piksler) + et innholdsområde som definerer tettheten av produktinformasjon for besøkende før de begynner å bla.
Det visuelle er produktfokusert, ikke livsstilsfokusert. Hovedskjermen er sentrert rundt et stort dashbordskjermbilde, som representerer en produktmodell fra den virkelige verden med sidefeltnavigasjon, datatabell og flytende brukergrensesnittelementer, lagt ut som et flatt panel på et hvitt lerret. Klientlogoer vises i et umettet gråtonenett (bikube, superkraft, Chatbase osv.) for å anerkjenne deres ytelse på sosiale medier, strippet for farge for å la den enkle blå aksenten på siden forbli dominerende. Flytende partnerkort (små profiler og fliser med inntekts-/betalingsdata) beveger seg rundt blokker med redaksjonell tekst nederst, og skaper en følelse av dybde uten bruk av skygger på selve teksten. Bakgrunnsmønsteret med stiplet rutenett er et signaturtrekk: en tynn rad med små prikker med svært lav opasitet skaper tekstur og følelsen av et designsystem/tegneflate, og understreker nettstedets posisjonering som en "moderne lenkeattribusjonsplattform". Ikonografien er minimal, med konturer og fyll, og bruker en aksentpalett (mandarinoransje, lavendellilla, mintgrønn) for funksjonstagger. Ingen fotografier, illustrasjoner eller 3D-modeller brukes – selve produktets brukergrensesnitt er et visuelt språk.
Palett
Merke
- Electric Blue
#2563eb— Merkefargen som brukes – logoen, lenker, viktige ytelsesindikatorer, aktive tilstander og ikonaksenter. En rik blåfarge på hvit bakgrunn skaper systemets eneste visuelle appell. - Deep Sapphire
#1e40af— Hovedbakgrunnen til handlingsknappen, den fet skriften i handlingsoppfordringen – den eneste fargen som angir handlingen – brukes sparsomt for å tiltrekke seg oppmerksomhet.
Nøytral
- Canvas White
#ffffff— Sidebakgrunn, kortoverflate og popup-paneler er det absolutte grunnlaget for enhver skjerm. - Paper Mist
#f5f5f5— Subtile overflatefargeendringer for nestede kort, ekstra paneler og fyll når man holder musepekeren over dem. - Ash
#e5e5e5— De tynne kantene på kortene, inngangskontaktene og skilleveggene er den strukturelle linjen som holder systemet sammen. - Smoke
#d4d4d4— Skarpere rammer for valgte beholdere og ekstra knappekonturer. - Pebble
#c8c8c8— Kanter, kontrollkonturer og strukturelle skillevegger med middels kontrast. Denne fargen skal ikke brukes som primærfarge for handlingsfremmende oppfordringer. - Midnight Ink
#0a0a0a— Hovedteksten på knappene, uthevede knapper og navigasjonsteksten er nesten svart for maksimal kontrast.
Typografi
fra 11 til 48 piksler · 9 trinn
- Satoshi — erstatning: Inter (weight 500 · omriss 500 · Visningsoverskrifter – brukes kun i linjer på 36–48 piksler for overskrifter og seksjonstitler. Skriftvekt – 500 (middels, ikke fet): Overskriftene ser selvsikre og moderne ut, men aldri overveldende. Satoshis geometriske proporsjoner gir skrifttypen et litt redaksjonelt, moderne preg som Inters brødtekst ikke kan gjenskape.
- Inter — erstatning: Inter (native) · omriss 400, 500, 600 · Brødtekst, brukergrensesnittetiketter, navigasjon, underoverskrifter og mindre overskrifter. Inter er den primære arbeidshesten og håndterer alt fra 11 pikslers mikroetiketter til 30 pikslers sekundære overskrifter. Standardvekten er 400 for brødtekst, 500 for uthevede elementer og knappetiketter, og 600 er reservert for viktige brukergrensesnittetiketter. 16 piksler med en linjehøyde på 1,5 er den vanligste størrelsen for enkelttrinn (1220 forekomster), noe som bekrefter at 16 piksler er den kanoniske størrelsen for brødtekst.
- Geist Mono — erstatning: JetBrains Mono or IBM Plex Mono · omriss 400, 500 · Kodebiter, tekniske metadata og innebygde monospaced-tokens brukes i kodeblokker med 12–14 piksler og i store kodevisningselementer med 24 piksler. Dette sikrer utviklerverktøyets troverdighet, i samsvar med Dubs produktposisjonering.
Intervaller og form
| Hensikt | Betydning |
|---|---|
| Tetthet | gjennomsnittlig |
| Grunnleggende trinn | 8px |
| Knapperadius | 8px |
| Kortradius | 12px |
| Skygger | ingen grenser i stedet for skygger |
| Mellom seksjoner | 64px |
| Sidebredde | 1200px |
AI vil bygge nettstedet ditt i Dub -stil og fylle det
- Fyll på med produkter og innlegg via lenken - Instagram, TikTok, Facebook.
- Overfør innhold fra det gamle nettstedet ditt – bare oppgi adressen.
- Moderne design på den beste søkemotoren: React ( Next.js) med serverrendering og SEO-optimalisering rett ut av boksen.
- Helautomatisk SEO-optimalisering for søkeresultater og anbefalinger fra nevrale nettverk.
Lignende stiler
- ElevenLabs — Et fotoessay i varme kremfarger med diskré overskrifter. En notatbok i Bauhaus-stil – eggeskallfarget papir, svart blekk og en enkelt lilla og oransje aksent for produktfremvisning.
- Awesomic — Redaksjonelt sinknett med oransje tegnsettingstegn som minner om konfetti
- Monad — redaksjonell teknisk tidsskrift på varmt pergament
- Seline Analytics — Et stille analytisk bord på varmt papir
- Notion — En varm papirnotatbok i middagssolen
- Anthropic — Et vitenskapelig felttidsskrift på varmt vellum – rolige elfenbensfargede overflater, seriferte redaksjonelle overskrifter og en enkelt leireaksent som bare dukker opp når handling er nødvendig.
- Calendly — Mørkeblått blekk på kald marmor
- Augen Pro — Apples hvite presentasjon har en klinisk, vektløs, elektrisk blåfarge som eneste aksent i et monokromt rom.
- Antimetal — En redaksjonell krønike på kremfarget papir – en stille morgen i et vitenskapelig tidsskrift, hvor tilbakeholdenhet formidler selvtillit og seriffer gjør det tunge arbeidet
- Perk — Elektrisk lime på varmt bakepapir
- Ditto — Et solfylt verksted som lager prøver av villblomster. Varme kremfargede overflater, en livlig gul grunnfarge, dyp marineblå blekk, organiske fargeformer som blomstrer bak verket.
- Officevibe — Et redaksjonelt magasin på varmt kremfarget papir. Se for deg et tankevekkende essay om HR-ledelse, presentert som et produkt – en kursiv serif-skrift som hvisker gjennom et moderne blått grensesnitt.