Dub
Panoul de control din hârtie de orez mată al lui Link
Sistemul vizual al lui Dub are o estetică SaaS restrânsă, aproape editorială: o pânză aproape albă, ținută laolaltă de margini subțiri, mai degrabă decât de elemente proeminente, cu o tipografie monocromă densă care oferă suport structural și o singură culoare albastru strălucitor (#2563eb) care face o declarație. Suprafețele rămân plate și fără ramă la prima vedere, dar fiecare container are o margine #e5e5e5 de 1px, evocând senzația unui document tipărit. Personalitatea este obținută printr-un mic set de accente colorate de tip „pilulă” (portocaliu, verde, violet) care plutesc deasupra paletei neutre și anteturi care par încrezătoare și moderne, fără a fi stridente. Componentele sunt compacte și dense: margine de 8px, rază de card de 12px, etichete în formă de pilulă la 9999px și comenzi invizibile în loc de butoane grele și umplute.
Pagina este construită pe un layout centrat cu o lățime maximă de aproximativ 1200px. Elementul principal este un bloc de text centrat cu trei elemente plutitoare (Programe de afiliere, Analiză conversii, Linkuri scurte) poziționate orizontal deasupra unui layout mare de produs. Secțiunile sunt aranjate vertical cu margini consecvente de 64px, alternând între pânză albă și hârtie opacă #f5f5f5 pentru separarea tonală. Secțiunea de jos folosește un layout în formă de Z: textul editorial este centrat în treimea din mijloc, iar cardurile plutitoare cu interfață sunt ancorate la marginile stânga și dreapta, creând un ritm asimetric, asemănător unei reviste. Norul de logo este o grilă simplă de 5x2, centrată pe pagină. Navigarea este o bară superioară minimalistă - logo-ul în stânga, navigarea în centru, un grup de două butoane (un buton fantomă „Autentificare” + un buton umplut „Înregistrare”) în dreapta - fără un meniu fix sau mega. Aspectul tabloului de bord al ferestrei principale prezintă un aspect clasic al aplicației pe două coloane: o bară laterală fixă (similară cu 240px) + o zonă de conținut care definește densitatea informațiilor despre produs pentru vizitatori înainte ca aceștia să înceapă derularea.
Elementele vizuale sunt axate pe produs, nu pe stilul de viață. Ecranul principal este centrat pe o captură de ecran mare a tabloului de bord, reprezentând o machetă de produs din lumea reală, cu o bară laterală de navigare, un tabel de date și elemente de interfață plutitoare, dispuse ca un panou plat pe o pânză albă. Logo-urile clienților sunt afișate într-o grilă desaturată în tonuri de gri (beehiv, superpower, Chatbase etc.) pentru a recunoaște performanța lor pe rețelele sociale, lipsite de culoare pentru a permite accentului albastru unic al paginii să rămână dominant. Cardurile plutitoare ale partenerilor (profiluri mici și dale cu date despre venituri/plăți) se mișcă în jurul blocurilor de text editorial din partea de jos, creând o senzație de profunzime fără a utiliza umbre pe textul în sine. Modelul de fundal cu grilă punctată este o caracteristică emblematică: un rând subțire de puncte mici cu opacitate foarte scăzută creează textură și senzația unui sistem de design/suprafață de desen, subliniind poziționarea site-ului ca o „platformă modernă de atribuire a link-urilor”. Iconografia este minimalistă, cu contururi și umpluturi și folosește o paletă de accente (portocaliu mandarină, violet lavandă, verde mentă) pentru etichetele de caracteristici. Nu se folosesc fotografii, ilustrații sau modele 3D - interfața utilizator a produsului în sine este un limbaj vizual.
Paletă
Marca
- Electric Blue
#2563eb— Se folosește culoarea principală a mărcii — sigla, linkurile, indicatorii cheie de performanță, stările active și accentele pictogramelor. Un albastru intens pe fundal alb creează singurul aspect vizual atractiv al sistemului. - Deep Sapphire
#1e40af— Fundalul principal al butonului de acțiune, umplutura îngroșată a îndemnului la acțiune - singura culoare care denotă acțiunea - este folosită cu moderație pentru a atrage atenția.
Neutru
- Canvas White
#ffffff— Fundalul paginii, suprafața cardului, panourile pop-up sunt fundamentul absolut al fiecărui ecran. - Paper Mist
#f5f5f5— Modificări subtile de culoare la trecerea cursorului pentru carduri imbricate, panouri suplimentare și umpleri. - Ash
#e5e5e5— Marginile subțiri de pe plăci, conectorii de intrare și divizoare reprezintă linia structurală care ține sistemul laolaltă. - Smoke
#d4d4d4— Borduri mai clare pentru containerele selectate și contururi suplimentare pentru butoane. - Pebble
#c8c8c8— Borduri, contururi de control și separatoare structurale cu contrast mediu. Această culoare nu ar trebui utilizată ca și culoare principală pentru îndemnuri la acțiune. - Midnight Ink
#0a0a0a— Textul principal al butoanelor, butoanele evidențiate și textul de navigare sunt aproape negre pentru un contrast maxim.
Tipografie
de la 11 la 48px · 9 pași
- Satoshi — înlocuire: Inter (weight 500 · contururi 500 · Titluri afișate – utilizate doar pe linii de 36–48px pentru titlurile de titluri și secțiuni. Grosimea fontului – 500 (medie, nu îngroșată): Titlurile arată încrezător și modern, dar niciodată prea puternic. Proporțiile geometrice ale lui Satoshi conferă fontului un aspect ușor editorial, modern, pe care textul de la Inter nu îl poate reproduce.
- Inter — înlocuire: Inter (native) · contururi 400, 500, 600 · Textul corpului, etichetele interfeței utilizator, navigare, subtitluri și titluri minore. Inter este elementul principal, gestionând totul, de la micro-etichete de 11px la titluri secundare de 30px. O pondere de 400 este implicită pentru textul corpului, 500 pentru elementele evidențiate și etichetele butoanelor, iar 600 este rezervată pentru etichetele importante ale interfeței utilizator. 16px cu o înălțime a liniei de 1,5 este cea mai frecvent întâlnită dimensiune cu un singur pas (1220 de apariții), confirmând că 16px este dimensiunea canonică a textului corpului.
- Geist Mono — înlocuire: JetBrains Mono or IBM Plex Mono · contururi 400, 500 · Fragmente de cod, metadate tehnice și token-uri monospațiate încorporate sunt utilizate în blocuri de cod la 12–14px și în elemente mari de afișare a codului la 24px. Acest lucru asigură credibilitatea instrumentului pentru dezvoltatori, în concordanță cu poziționarea produsului Dub.
Intervale și formă
| Scop | Sens |
|---|---|
| Densitate | medie |
| Pasul de bază | 8px |
| Raza butonului | 8px |
| Raza cardului | 12px |
| Umbre | fără - margini în loc de umbre |
| Între secțiuni | 64px |
| Lățimea paginii | 1200px |
Inteligența artificială vă va construi site-ul web în stilul Dub și îl va completa
- Completează cu produse și postări prin link - Instagram, TikTok, Facebook.
- Transferați conținut de pe vechiul site - specificați doar adresa.
- Design modern pe cel mai bun motor: React ( Next.js) cu randare pe server și optimizare SEO gata de utilizare.
- Optimizare SEO complet automatizată pentru rezultatele căutării și recomandări de rețele neuronale.
Stiluri similare
- ElevenLabs — Un eseu foto în tonuri calde de crem, cu titluri subtile. Un caiet în stil Bauhaus — hârtie de culoarea cojii de ou, cerneală neagră și un singur accent violet și portocaliu pentru prezentarea produsului.
- Awesomic — Plasă de zinc editorială cu semne de punctuație portocalii care amintesc de confetti
- Monad — revistă tehnică editorială pe pergament cald
- Seline Analytics — O masă analitică liniștită pe hârtie caldă
- Notion — Un caiet de hârtie cald în soarele de la amiază
- Anthropic — O revistă științifică de teren pe pergament cald — suprafețe calme de fildeș, titluri editoriale cu serife și un singur accent de lut care apare doar atunci când este nevoie de acțiune.
- Calendly — Cerneală albastru închis pe marmură rece
- Augen Pro — Prezentarea albă a Apple prezintă un albastru electric, clinic, imponderabil, ca unic accent într-un spațiu monocrom.
- Antimetal — O cronică editorială pe hârtie crem - o dimineață liniștită la o revistă științifică, unde reținerea transmite încredere, iar serifele fac munca grea
- Perk — Varză electrică pe hârtie de copt caldă
- Ditto — Un atelier însorit care creează mostre de flori sălbatice. Suprafețe crem calde, o culoare de bază galben vibrant, cerneluri bleumarin intens, forme organice de culoare înflorind în spatele piesei.
- Officevibe — O revistă editorială pe hârtie crem-verzuie. Imaginați-vă un eseu profund despre managementul resurselor umane, prezentat ca un produs - un font cursiv serif care șoptește printr-o interfață albastră modernă.