Dub
Linkova kontrolna ploča od mat rižinog papira
Dubov vizualni sistem ima suzdržanu, gotovo uredničku SaaS estetiku: gotovo bijelo platno koje drže tanki okviri, a ne izbočeni elementi, s gustom monokromatskom tipografijom koja pruža strukturnu podršku i jednom jarko plavom bojom (#2563eb) koja ostavlja utisak. Površine na prvi pogled ostaju ravne i bez okvira, ali svaki kontejner ima marginu od 1px #e5e5e5, evocirajući osjećaj štampanog dokumenta. Individualnost se postiže malim skupom obojenih "pilula" akcenata (narandžasta, zelena, ljubičasta) koji lebde iznad neutralne palete i zaglavlja 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 dugmadi.
Stranica je izgrađena na centriranom rasporedu s maksimalnom širinom od približno 1200px. Glavni element je centrirani tekstualni blok s tri plutajuća elementa (Partnerski programi, Analitika konverzija, Kratki linkovi) postavljena horizontalno iznad velikog rasporeda proizvoda. Odjeljci su raspoređeni vertikalno s konzistentnim rubovima od 64px, naizmjenično između bijelog platna i #f5f5f5 papirne izmaglice 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 sličan časopisu. Logo oblak je jednostavna mreža 5x2, centrirana na stranici. Navigacija je minimalistička gornja traka - logo s lijeve strane, navigacija u sredini, grupa od dva dugmeta (dugme "Prijava" + popunjeno dugme "Registracija") s desne strane - bez fiksnog ili mega-menija. Glavni prikaz kontrolne ploče prikazuje klasičan izgled aplikacije s dvije kolone: 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 skrolati.
Vizuali su fokusirani na proizvod, a ne na stil života. Sredina početne stranice je veliki snimak ekrana kontrolne ploče, koji predstavlja maketu proizvoda iz stvarnog svijeta s bočnom navigacijom, tabelom podataka i plutajućim UI elementima - 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 naglasio njihov učinak na društvenim mrežama, bez boje kako bi se omogućilo da jedini plavi akcenat stranice ostane dominantan. Plutajuće kartice partnera (mali profili i pločice s podacima o prihodima/plaćanjima) kreću se oko blokova uredničkog teksta na dnu, stvarajući osjećaj dubine bez upotrebe sjena na samom tekstu. Uzorak isprekidane mreže u pozadini je prepoznatljiva karakteristika: tanki red malih tačaka s vrlo niskom neprozirnošću stvara teksturu i osjećaj dizajnerskog sistema/površine za crtanje, naglašavajući pozicioniranje stranice kao "moderne platforme za atribuciju linkova". Ikonografija je minimalna, s obrisima i ispunama, te koristi paletu akcenta (narandžasta, ljubičasta lavanda, zelena menta) za oznake funkcija. Ne koriste se fotografije, ilustracije ili 3D modeli – sam korisnički interfejs proizvoda je vizuelni jezik.
Paleta
Brend
- Electric Blue
#2563eb— Koristi se primarna boja brenda - logo, linkovi, ključni indikatori performansi, aktivna stanja i akcenti ikona. Bogata plava boja na bijeloj pozadini stvara jedinu vizuelnu privlačnost sistema. - Deep Sapphire
#1e40af— Glavna pozadina dugmeta za akciju, podebljano ispunjavanje poziva na akciju - jedina boja koja označava akciju - koristi se štedljivo kako bi se privukla pažnja.
Neutralno
- Canvas White
#ffffff— Pozadina stranice, površina kartice, iskačući paneli su apsolutna osnova 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— Tanke ivice na karticama, ulaznim konektorima i pregradama su strukturna linija koja drži sistem na okupu. - Smoke
#d4d4d4— Oštrije ivice za odabrane kontejnere i dodatni obrisi dugmadi. - Pebble
#c8c8c8— Okviri, konture kontrola i strukturni razdjelnici sa srednjim kontrastom. Ova boja se ne bi trebala koristiti kao primarna boja za pozive na akciju. - Midnight Ink
#0a0a0a— Glavni tekst dugmadi, istaknuta dugmad i tekst za navigaciju su gotovo crni radi maksimalnog kontrasta.
Tipografija
od 11 do 48px · 9 koraka
- Satoshi — zamjena: Inter (weight 500 · obrisi 500 · Prikaz naslova – koristi se samo u redovima od 36–48px za naslove i naslove odjeljaka. Debljina fonta – 500 (srednja, ne podebljana): 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 interfejsa, 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 dugmadi, a 600 je rezervirano za važne oznake korisničkog interfejsa. 16px s visinom linije od 1,5 je najčešće korištena veličina s jednim korakom (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. Ovo osigurava kredibilitet alata za razvojne programere, u skladu s pozicioniranjem proizvoda kompanije Dub.
Intervali i forma
| Svrha | Značenje |
|---|---|
| Gustoća | prosjek |
| Osnovni korak | 8px |
| Radijus dugmeta | 8px |
| Radijus kartice | 12px |
| Sjene | ne - okviri umjesto sjena |
| Između sekcija | 64px |
| Širina stranice | 1200px |
Vještačka inteligencija će izgraditi vašu web stranicu u Dub stilu i popuniti je
- Popunite proizvodima i objavama putem linka - Instagram, TikTok, Facebook.
- Prenesite sadržaj sa vaše stare stranice - samo navedite adresu.
- Moderan dizajn na najboljem engine-u: React ( Next.js) sa serverskim renderovanjem i SEO optimizacijom odmah po instalaciji.
- Potpuno automatizirana SEO optimizacija za rezultate pretrage i preporuke neuronskih mreža.
Slični stilovi
- ElevenLabs — Foto esej u toplim krem tonovima sa suptilnim naslovima. Bilježnica u stilu Bauhausa - papir boje ljuske jajeta, crna tinta i jedan ljubičasti i narandžasti akcenat za izlaganje proizvoda.
- Awesomic — Urednička cinkova mreža s narandžastim interpunkcijskim znakovima koji podsjećaju na konfete
- Monad — urednički tehnički časopis na toplom pergamentu
- Seline Analytics — Tihi analitički sto na toplom papiru
- Notion — Topla papirna sveska na podnevnom suncu
- Anthropic — Naučni časopis s terena o toplom pergamentu - mirne površine boje slonovače, serifirani urednički naslovi i jedan glineni akcenat 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 akcenat u monohromatskom prostoru.
- Antimetal — Uvodnik na krem papiru - tiho jutro u naučnom časopisu, gdje suzdržanost prenosi samopouzdanje, a serifi obavljaju teški posao.
- Perk — Električni limet na toplom pergament papiru
- 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 moderni plavi interfejs.