Dub
U pannellu di cuntrollu di carta di risu opaca di Link
U sistema visuale di Dub hà un'estetica SaaS ritenuta, guasi editoriale: una tela quasi bianca tenuta inseme da bordi fini invece di elementi sporgenti, cù una tipografia monocromatica densa chì furnisce supportu strutturale è un unicu culore turchinu brillanti (#2563eb) chì face una dichjarazione. E superfici restanu piatte è senza cornice à prima vista, ma ogni cuntainer hà un margine di 1px #e5e5e5, chì evoca a sensazione di un documentu stampatu. A personalità hè ottenuta attraversu un picculu inseme di accenti "pillola" culurati (aranciu, verde, viola) chì flottanu sopra a paleta neutra, è intestazioni chì si sentenu sicure è muderne senza esse vistose. I cumpunenti sò compatti è densi: grondaie di 8px, raghju di carta di 12px, etichette in forma di pillola à 9999px, è cuntrolli invisibili invece di buttoni pesanti è pieni.
A pagina hè custruita annantu à un layout centratu cù una larghezza massima di circa 1200px. L'elementu principale hè un bloccu di testu centratu cù trè elementi flottanti (Programmi di Affiliazione, Analitica di Cunversione, Ligami Corti) pusizionati orizzontalmente sopra un grande layout di produttu. E sezioni sò disposte verticalmente cù gutter di 64px consistenti, alternendu trà tela bianca è foschia di carta #f5f5f5 per a separazione tonale. A sezione inferiore usa un layout in forma di Z: u testu editoriale hè centratu in u terzu mediu, è e carte UI flottanti sò ancorate à i margini sinistro è destro, creendu un ritmu asimmetricu, simile à una rivista. A nuvola di u logò hè una semplice griglia 5x2, centrata annantu à a pagina. A navigazione hè una barra superiore minimalista - logò à manca, navigazione in u centru, un gruppu di dui buttoni (un buttone fantasma "Login" + un buttone pienu "Registrazione") à diritta - senza un menu fissu o mega-menu. U layout di u dashboard di a finestra principale presenta un layout classicu di l'applicazione à duie colonne: una barra laterale fissa (simile à 240px) + una zona di cuntenutu chì definisce a densità di l'infurmazioni di u produttu per i visitatori prima ch'elli cumincianu à scorrere.
I visuali sò focalizzati nantu à u pruduttu, micca nantu à u stile di vita. U schermu principale hè centratu annantu à una grande screenshot di u dashboard, chì rapprisenta un mockup di pruduttu di u mondu reale cù una navigazione laterale, una tabella di dati è elementi di l'interfaccia utente fluttuanti, disposti cum'è un pannellu pianu nantu à una tela bianca. I loghi di i clienti sò visualizati in una griglia desaturata in scala di grigi (beehiv, superpower, Chatbase, ecc.) per ricunnosce a so prestazione nantu à i social media, spogliati di culore per permette à l'unicu accentu blu di a pagina di rimanere dominante. E carte di partenarii fluttuanti (picculi profili è piastrelle cù dati di ricavi / pagamentu) si movenu intornu à blocchi di testu editoriale in fondu, creendu un sensu di prufundità senza l'usu di ombre nantu à u testu stessu. U mudellu di fondu di a griglia punteggiata hè una caratteristica distintiva: una fila fina di picculi punti cù una opacità assai bassa crea una struttura è a sensazione di un sistema di cuncepimentu / superficia di disegnu, enfatizendu u pusizionamentu di u situ cum'è una "piattaforma muderna di attribuzione di ligami". L'iconografia hè minimale, cù contorni è riempimenti, è usa una paleta di accenti (aranciu mandarino, viola lavanda, verde menta) per i tag di funzione. Nisuna fotografia, illustrazioni o mudelli 3D sò aduprati - l'interfaccia utente di u pruduttu stessa hè un linguaghju visuale.
Paletta
Marca
- Electric Blue
#2563eb— U culore principale di a marca - u logu, i ligami, l'indicatori chjave di prestazione, i stati attivi è l'accenti di l'icone - hè adupratu. Un turchinu riccu nantu à un fondu biancu crea l'unicu attrazione visuale di u sistema. - Deep Sapphire
#1e40af— U sfondate principale di u buttone d'azzione, u riempimentu in neru di a chjama à l'azzione - l'unicu culore chì denota l'azzione - hè adupratu cù parsimonia per attirà l'attenzione.
Neutru
- Canvas White
#ffffff— U fondu di a pagina, a superficia di a carta, i pannelli pop-up sò a basa assoluta di ogni schermu. - Paper Mist
#f5f5f5— Cambiamenti di culore suttili à u survolà per e carte annidate, i pannelli supplementari è i riempimenti. - Ash
#e5e5e5— I bordi fini di e carte, i connettori d'entrata è i divisori sò a linea strutturale chì tene inseme u sistema. - Smoke
#d4d4d4— Bordi più netti per i cuntenitori selezziunati è contorni di buttoni supplementari. - Pebble
#c8c8c8— Bordi, contorni di cuntrollu è divisori strutturali cù cuntrastu mediu. Stu culore ùn deve esse adupratu cum'è culore primariu per e chjame à l'azzione. - Midnight Ink
#0a0a0a— U testu principale di i buttoni, i buttoni evidenziati è u testu di navigazione sò guasi neri per un cuntrastu massimu.
Tipografia
da 11 à 48px · 9 passi
- Satoshi — rimpiazzamentu: Inter (weight 500 · contorni 500 · Titoli di visualizazione - usati solu in linee di 36-48px per i tituli di tituli è di sezioni. Pesu di u carattere - 500 (mediu, micca neru): I tituli parenu sicuri è muderni, ma mai eccessivi. E proporzioni geometriche di Satoshi danu à u caratteru tipograficu un aspettu mudernu ligeramente editoriale chì u corpu di u testu di Inter ùn pò micca replicà.
- Inter — rimpiazzamentu: Inter (native) · contorni 400, 500, 600 · Corpu di testu, etichette di l'interfaccia utente, navigazione, sottotitoli è tituli minori. Inter hè u principale cavallu di battaglia, chì gestisce tuttu, da microetichette di 11px à tituli secundarii di 30px. Un pesu di 400 hè u valore predefinitu per u corpu di testu, 500 per l'elementi evidenziati è l'etichette di i buttoni, è 600 hè riservatu per l'etichette impurtanti di l'interfaccia utente. 16px cù una altezza di linea di 1,5 hè a dimensione à passu unicu più frequente (1220 occorrenze), cunfermendu chì 16px hè a dimensione canonica di u corpu di testu.
- Geist Mono — rimpiazzamentu: JetBrains Mono or IBM Plex Mono · contorni 400, 500 · I frammenti di codice, i metadati tecnichi è i gettoni monospaziati integrati sò aduprati in blocchi di codice à 12-14px è in grandi elementi di visualizazione di codice à 24px. Questu assicura a credibilità di u strumentu di sviluppu, coerente cù u pusizionamentu di u produttu di Dub.
Intervalli è forma
| Scopu | Significatu |
|---|---|
| Densità | mediu |
| Passu basicu | 8px |
| Raggiu di u buttone | 8px |
| Raggiu di a carta | 12px |
| Ombre | nò - bordi invece di ombre |
| Trà e sezioni | 64px |
| Larghezza di a pagina | 1200px |
L'IA custruisce u vostru situ web in stile Dub è u riempirà
- Riempite cù prudutti è publicazioni via u ligame - Instagram, TikTok, Facebook.
- Trasferisce u cuntenutu da u vostru vechju situ - basta à specificà l'indirizzu.
- Design mudernu nant'à u megliu mutore: React ( Next.js) cù rendering di u servitore è ottimizazione SEO pronta per l'usu.
- Ottimizazione SEO cumpletamente automatizata per i risultati di ricerca è e raccomandazioni di rete neurale.
Stili simili
- ElevenLabs — Un saggio fotograficu in toni caldi di crema cù tituli suttili. Un quaderno in stile Bauhaus - carta culurata cum'è un gusciu d'ovu, inchiostru neru è un unicu accentu viola è aranciu per a presentazione di u pruduttu.
- Awesomic — Maglia di zincu editoriale cù segni di punteggiatura aranciu chì ricordanu i confetti
- Monad — rivista tecnica editoriale nantu à pergamena calda
- Seline Analytics — Una tavula analitica tranquilla nantu à carta calda
- Notion — Un quaderno di carta calda à u sole di meziornu
- Anthropic — Una rivista scientifica di campu nantu à pergamena calda - superfici d'avorio calme, tituli editoriali serifati è un unicu accentu d'argilla chì appare solu quandu hè necessaria un'azione.
- Calendly — Inchiostru turchinu scuru nantu à u marmaru fretu
- Augen Pro — A presentazione bianca d'Apple presenta un turchinu elettricu clinicu, senza pesu cum'è unicu accentu in un spaziu monocromu.
- Antimetal — Una cronaca editoriale nantu à carta crema - una matina tranquilla in una rivista scientifica, induve a moderazione trasmette fiducia è i serif facenu u travagliu pesante.
- Perk — Calce elettrica nantu à carta pergamena calda
- Ditto — Un attellu illuminatu da u sole chì crea campioni di fiori salvatichi. Superfici crema calde, un culore di basa giallu vibrante, inchiostri blu marinu scuru, forme di culore organiche chì fiuriscenu daretu à l'opera.
- Officevibe — Una rivista editoriale nantu à carta di culore crema calda. Imaginate un saggio riflessivu nantu à a gestione di e risorse umane, presentatu cum'è un pruduttu - un carattere serif cursivu chì sussurra attraversu una interfaccia blu muderna.