Dub
Linkova upravljačka ploča od mat rižinog papira
Dubov vizualni sustav ima suzdržanu, gotovo uredničku SaaS estetiku: gotovo bijelo platno koje drže tanki obrubi, a ne izbočeni elementi, s gustom monokromatskom tipografijom koja pruža strukturnu potporu i jednom jarko plavom bojom (#2563eb) koja ostavlja dojam. Površine na prvi pogled ostaju ravne i bez okvira, ali svaki spremnik ima marginu od 1px #e5e5e5, evocirajući osjećaj ispisanog dokumenta. Osobnost se postiže malim skupom obojenih "pilula" akcenata (narančasta, zelena, ljubičasta) koji lebde iznad neutralne palete i zaglavljima koja djeluju samouvjereno i moderno, a da nisu blještava. Komponente su kompaktne i guste: žljebovi od 8px, radijus kartice od 12px, oznake u obliku pilule na 9999px i nevidljive kontrole umjesto teških, ispunjenih gumba.
Stranica je izgrađena na centriranom rasporedu s maksimalnom širinom od približno 1200px. Glavni element je centriran tekstualni blok s tri plutajuća elementa (Partnerski programi, Analitika konverzija, Kratke poveznice) postavljena vodoravno iznad velikog rasporeda proizvoda. Odjeljci su raspoređeni okomito s konzistentnim rubovima od 64px, izmjenjujući se između bijelog platna i papirnate magle #f5f5f5 za tonsko odvajanje. Donji dio koristi raspored u obliku slova Z: urednički tekst je centriran u srednjoj trećini, a plutajuće UI kartice su usidrene na lijevoj i desnoj margini, stvarajući asimetrični ritam nalik časopisu. Logotip u obliku oblaka je jednostavna mreža 5x2, centriran na stranici. Navigacija je minimalistička gornja traka - logotip s lijeve strane, navigacija u sredini, grupa od dva gumba (gumb "Prijava" + ispunjeni gumb "Registracija") s desne strane - bez fiksnog ili mega-izbornika. Izgled nadzorne ploče glavnog prozora prikazuje klasičan izgled aplikacije s dva stupca: fiksna bočna traka (slična 240px) + područje sadržaja koje definira gustoću informacija o proizvodu za posjetitelje prije nego što počnu pomicati stranicu.
Vizuali su usmjereni na proizvod, a ne na stil života. Glavni zaslon centriran je na velikoj snimci zaslona nadzorne ploče, koja predstavlja maketu proizvoda iz stvarnog svijeta s bočnom navigacijom, tablicom podataka i plutajućim elementima korisničkog sučelja, postavljenim kao ravna ploča na bijelom platnu. Logotipi klijenata prikazani su u nezasićenoj mreži sivih tonova (košnica, supermoć, Chatbase itd.) kako bi se naglasila njihova učinkovitost na društvenim mrežama, bez boje kako bi jedini plavi naglasak stranice ostao dominantan. Plutajuće kartice partnera (mali profili i pločice s podacima o prihodima/plaćanjima) pomiču se oko blokova uredničkog teksta na dnu, stvarajući osjećaj dubine bez upotrebe sjena na samom tekstu. Uzorak točkaste mreže u pozadini je prepoznatljiva značajka: tanki red malih točaka s vrlo niskom neprozirnošću stvara teksturu i osjećaj dizajnerskog sustava/površine za crtanje, naglašavajući pozicioniranje web-mjesta kao "moderne platforme za atribuciju poveznica". Ikonografija je minimalna, s obrisima i ispunama, te koristi paletu naglasaka (narančasta boja mandarina, ljubičasta boja lavande, zelena boja mente) za oznake značajki. Ne koriste se fotografije, ilustracije ili 3D modeli - samo korisničko sučelje proizvoda je vizualni jezik.
Paleta
Robna marka
- Electric Blue
#2563eb— Koristi se primarna boja brenda - logotip, poveznice, ključni pokazatelji učinkovitosti, aktivna stanja i naglasci ikona. Bogata plava boja na bijeloj pozadini stvara jedinu vizualnu privlačnost sustava. - Deep Sapphire
#1e40af— Glavna pozadina gumba za akciju, podebljano ispunjavanje poziva na akciju - jedina boja koja označava akciju - koristi se štedljivo kako bi se privukla pozornost.
Neutralno
- Canvas White
#ffffff— Pozadina stranice, površina kartice, skočni paneli su apsolutni temelj svakog ekrana. - Paper Mist
#f5f5f5— Suptilne promjene boje prilikom zadržavanja pokazivača miša za ugniježđene kartice, dodatne panele i ispune. - Ash
#e5e5e5— Tanki rubovi na karticama, ulaznim konektorima i razdjelnicima su strukturna linija koja drži sustav na okupu. - Smoke
#d4d4d4— Oštriji obrubi za odabrane spremnike i dodatni obrisi gumba. - Pebble
#c8c8c8— Obrubi, kontrolni obrisi i strukturni razdjelnici sa srednjim kontrastom. Ova se boja ne smije koristiti kao primarna boja za pozive na akciju. - Midnight Ink
#0a0a0a— Glavni tekst gumba, istaknuti gumbi i navigacijski tekst gotovo su crni radi maksimalnog kontrasta.
Tipografija
od 11 do 48px · 9 koraka
- Satoshi — zamjena: Inter (weight 500 · obrisi 500 · Prikaz naslova – koristi se samo u retcima od 36–48 piksela za naslove i naslove odjeljaka. Debljina fonta – 500 (srednje, ne podebljano): Naslovi izgledaju samouvjereno i moderno, ali nikada previše nametljivo. Satoshijeve geometrijske proporcije daju fontu pomalo urednički, moderan osjećaj koji Interov glavni tekst ne može replicirati.
- Inter — zamjena: Inter (native) · obrisi 400, 500, 600 · Tekst sadržaja, oznake korisničkog sučelja, navigacija, podnaslovi i sporedni naslovi. Inter je primarni radni konj, koji obrađuje sve od mikro-oznaka od 11px do sekundarnih naslova od 30px. Težina od 400 je zadana vrijednost za tekst sadržaja, 500 za istaknute elemente i oznake gumba, a 600 je rezervirano za važne oznake korisničkog sučelja. 16px s visinom retka od 1,5 je najčešće susrećena veličina u jednom koraku (1220 pojavljivanja), što potvrđuje da je 16px kanonska veličina teksta sadržaja sadržaja.
- Geist Mono — zamjena: JetBrains Mono or IBM Plex Mono · obrisi 400, 500 · Isječci koda, tehnički metapodaci i ugrađeni tokeni s jednostrukim razmakom koriste se u blokovima koda veličine 12–14px i u velikim elementima za prikaz koda veličine 24px. To osigurava vjerodostojnost alata za razvojne programere, u skladu s pozicioniranjem proizvoda tvrtke Dub.
Intervali i forma
| Svrha | Značenje |
|---|---|
| Gustoća | prosjek |
| Osnovni korak | 8px |
| Radijus gumba | 8px |
| Radijus kartice | 12px |
| Sjene | ne - obrubi umjesto sjena |
| Između odjeljaka | 64px |
| Širina stranice | 1200px |
Umjetna inteligencija će izraditi vašu web stranicu u Dub stilu i ispuniti je
- Popunite proizvodima i objavama putem poveznice - Instagram, TikTok, Facebook.
- Prenesite sadržaj sa svoje stare web-lokacije - samo navedite adresu.
- Moderan dizajn na najboljem engineu: React ( Next.js) s renderiranjem na serveru i SEO optimizacijom odmah po instalaciji.
- Potpuno automatizirana SEO optimizacija za rezultate pretraživanja i preporuke neuronskih mreža.
Slični stilovi
- ElevenLabs — Foto esej u toplim krem tonovima s decentnim naslovima. Bilježnica u stilu Bauhausa - papir boje ljuske jajeta, crna tinta i jedan ljubičasti i narančasti naglasak za izlaganje proizvoda.
- Awesomic — Urednička cinkova mreža s narančastim interpunkcijskim znakovima koji podsjećaju na konfete
- Monad — urednički tehnički časopis na toplom pergamentu
- Seline Analytics — Tihi analitički stol na toplom papiru
- Notion — Topla papirnata bilježnica na podnevnom suncu
- Anthropic — Znanstveni terenski časopis o toplom pergamentu - mirne površine boje slonovače, serifirani urednički naslovi i jedan glineni naglasak koji se pojavljuje samo kada je potrebna akcija.
- Calendly — Tamnoplava tinta na hladnom mramoru
- Augen Pro — Appleova bijela prezentacija sadrži kliničku, bestežinu, električno plavu boju kao jedini naglasak u monokromatskom prostoru.
- Antimetal — Uvodnik na krem papiru - mirno jutro u znanstvenom časopisu, gdje suzdržanost prenosi samopouzdanje, a serifi obavljaju teški posao
- Perk — Električna limeta na toplom papiru za pečenje
- Ditto — Suncem obasjana radionica u kojoj se izrađuju uzorci divljeg cvijeća. Tople kremaste površine, živahna žuta osnovna boja, tamnoplave tinte, organski oblici boja koji cvjetaju iza djela.
- Officevibe — Uvodnik časopisa na toplom krem papiru. Zamislite promišljen esej o upravljanju ljudskim resursima, predstavljen kao proizvod - kurzivni serifni font koji šapuće kroz moderno plavo sučelje.