Dub
Pannello di controllo in carta di riso opaca di Link
Il sistema visivo di Dub presenta un'estetica SaaS sobria, quasi editoriale: una tela quasi bianca, tenuta insieme da bordi sottili anziché da elementi sporgenti, con una tipografia monocromatica densa che fornisce supporto strutturale e un singolo colore blu brillante (#2563eb) che spicca. Le superfici appaiono piatte e senza cornice a prima vista, ma ogni contenitore ha un margine di 1px #e5e5e5, che evoca l'aspetto di un documento stampato. La personalità è data da un piccolo set di accenti colorati a forma di "pillola" (arancione, verde, viola) che fluttuano sopra la palette neutra e da intestazioni che risultano sicure e moderne senza essere appariscenti. I componenti sono compatti e densi: spaziatura tra gli elementi di 8px, raggio delle schede di 12px, etichette a forma di pillola a 9999px e controlli invisibili al posto di pulsanti pesanti e pieni.
La pagina è costruita su un layout centrato con una larghezza massima di circa 1200px. L'elemento principale è un blocco di testo centrato con tre elementi flottanti (Programmi di affiliazione, Analisi delle conversioni, Link brevi) posizionati orizzontalmente sopra un ampio layout di prodotto. Le sezioni sono disposte verticalmente con margini uniformi di 64px, alternando tra sfondo bianco e una sfumatura di carta #f5f5f5 per una separazione tonale. La sezione inferiore utilizza un layout a forma di Z: il testo editoriale è centrato nel terzo centrale e le schede UI flottanti sono ancorate ai margini sinistro e destro, creando un ritmo asimmetrico, simile a quello di una rivista. Il logo è una semplice griglia 5x2, centrata sulla pagina. La navigazione è costituita da una barra superiore minimalista: logo a sinistra, navigazione al centro, un gruppo di due pulsanti (un pulsante "Accedi" invisibile + un pulsante "Registrati" pieno) a destra, senza menu fisso o mega-menu. Il layout della dashboard della finestra principale presenta un classico layout a due colonne per le app: una barra laterale fissa (di circa 240 pixel) e un'area di contenuto che definisce la densità delle informazioni sui prodotti per i visitatori prima che inizino a scorrere la pagina.
L'aspetto grafico è incentrato sul prodotto, non sullo stile di vita. La schermata principale è centrata su un'ampia schermata di dashboard, che rappresenta un mockup di prodotto reale con una barra di navigazione laterale, una tabella dati ed elementi UI fluttuanti, disposti come un pannello piatto su uno sfondo bianco. I loghi dei clienti sono visualizzati in una griglia di grigi desaturata (beehiv, superpower, Chatbase, ecc.) per evidenziare le loro performance sui social media, privi di colore per consentire al singolo accento blu della pagina di rimanere dominante. Le schede partner fluttuanti (piccoli profili e riquadri con dati su ricavi/pagamenti) si muovono attorno a blocchi di testo editoriale nella parte inferiore, creando un senso di profondità senza l'uso di ombre sul testo stesso. Il motivo a griglia punteggiata è un elemento distintivo: una sottile fila di piccoli punti con un'opacità molto bassa crea texture e l'aspetto di un sistema di design/superficie di disegno, enfatizzando il posizionamento del sito come "moderna piattaforma di attribuzione dei link". L'iconografia è minimale, con contorni e riempimenti, e utilizza una palette di colori d'accento (arancione mandarino, viola lavanda, verde menta) per i tag delle funzionalità. Non vengono utilizzate fotografie, illustrazioni o modelli 3D: l'interfaccia utente del prodotto è di per sé un linguaggio visivo.
Tavolozza
Marca
- Electric Blue
#2563eb— Viene utilizzato il colore principale del marchio: il logo, i link, gli indicatori chiave di prestazione, gli stati attivi e gli elementi decorativi delle icone. Un blu intenso su sfondo bianco costituisce l'unico elemento visivamente accattivante del sistema. - Deep Sapphire
#1e40af— Lo sfondo principale del pulsante di azione, il riempimento in grassetto della call to action (l'unico colore che indica l'azione) è usato con parsimonia per attirare l'attenzione.
Neutro
- Canvas White
#ffffff— Lo sfondo della pagina, la superficie della scheda e i pannelli a comparsa sono le fondamenta assolute di ogni schermata. - Paper Mist
#f5f5f5— Lievi cambiamenti di colore al passaggio del mouse per le schede annidate, i pannelli aggiuntivi e i riempimenti. - Ash
#e5e5e5— I sottili bordi delle schede, dei connettori di ingresso e dei divisori costituiscono la linea strutturale che tiene insieme il sistema. - Smoke
#d4d4d4— Bordi più definiti per i contenitori selezionati e contorni aggiuntivi per i pulsanti. - Pebble
#c8c8c8— Bordi, contorni di controllo e divisori strutturali con contrasto medio. Questo colore non deve essere utilizzato come colore principale per le call to action. - Midnight Ink
#0a0a0a— Il testo principale dei pulsanti, i pulsanti evidenziati e il testo di navigazione sono quasi neri per garantire il massimo contrasto.
Tipografia
da 11 a 48px · 9 passaggi
- Satoshi — sostituzione: Inter (weight 500 · contorni 500 · Intestazioni visualizzate – utilizzate solo in righe da 36 a 48 px per intestazioni e titoli di sezione. Peso del carattere – 500 (medio, non grassetto): le intestazioni appaiono sicure e moderne, ma mai eccessive. Le proporzioni geometriche di Satoshi conferiscono al carattere un tocco leggermente editoriale e moderno che il corpo del testo di Inter non riesce a replicare.
- Inter — sostituzione: Inter (native) · contorni 400, 500, 600 · Testo del corpo, etichette dell'interfaccia utente, navigazione, sottotitoli e intestazioni secondarie. Inter è il carattere principale, in grado di gestire qualsiasi elemento, dalle micro-etichette di 11px alle intestazioni secondarie di 30px. Il peso predefinito per il testo del corpo è 400, 500 per gli elementi evidenziati e le etichette dei pulsanti, mentre 600 è riservato alle etichette importanti dell'interfaccia utente. La dimensione a singolo passo più frequente (1220 occorrenze) è 16px con un'altezza di riga di 1,5, a conferma che 16px è la dimensione canonica per il testo del corpo.
- Geist Mono — sostituzione: JetBrains Mono or IBM Plex Mono · contorni 400, 500 · Frammenti di codice, metadati tecnici e token monospaziati incorporati vengono utilizzati in blocchi di codice di dimensioni comprese tra 12 e 14 pixel e in elementi di visualizzazione del codice più grandi di 24 pixel. Ciò garantisce la credibilità dello strumento per sviluppatori, in linea con il posizionamento del prodotto di Dub.
Intervalli e forma
| Scopo | Senso |
|---|---|
| Densità | media |
| Passo base | 8px |
| Raggio del pulsante | 8px |
| Raggio della carta | 12px |
| Ombre | no - bordi invece di ombre |
| Tra le sezioni | 64px |
| Larghezza del pannello | 1200px |
L'IA creerà il tuo sito web nello stile Dub e lo riempirà
- Pubblica prodotti e contenuti tramite il link: Instagram, TikTok, Facebook.
- Trasferisci i contenuti dal tuo vecchio sito: basta specificare l'indirizzo.
- Design moderno sul miglior motore: React ( Next.js) con rendering lato server e ottimizzazione SEO integrata.
- Ottimizzazione SEO completamente automatizzata per i risultati di ricerca e raccomandazioni basate su reti neurali.
Stili simili
- ElevenLabs — Un reportage fotografico dai toni caldi color crema con titoli delicati. Un taccuino in stile Bauhaus: carta color guscio d'uovo, inchiostro nero e un unico accento viola e arancione per la presentazione del prodotto.
- Awesomic — Rete metallica in zinco per uso editoriale con segni di punteggiatura arancioni che ricordano i coriandoli.
- Monad — Rivista tecnica editoriale sulla pergamena calda
- Seline Analytics — Un tranquillo tavolo analitico su carta calda
- Notion — Un quaderno di carta calda sotto il sole di mezzogiorno
- Anthropic — Un diario scientifico da campo su calda pergamena: superfici color avorio, titoli editoriali con grazie e un unico accento color argilla che compare solo quando è necessario intervenire.
- Calendly — Inchiostro blu scuro su marmo freddo
- Augen Pro — La presentazione bianca di Apple presenta un blu elettrico, clinico e impalpabile, come unico accento in uno spazio monocromatico.
- Antimetal — Una cronaca editoriale su carta color crema: una tranquilla mattinata in una rivista scientifica, dove la sobrietà trasmette sicurezza e i caratteri serif svolgono il lavoro più impegnativo.
- Perk — Calce elettrica su carta da forno calda
- Ditto — Un laboratorio illuminato dal sole dove si creano campioni di fiori selvatici. Superfici color crema caldo, una base di colore giallo vibrante, inchiostri blu scuro intenso, forme di colore organiche che sbocciano sullo sfondo dell'opera.
- Officevibe — Una rivista editoriale stampata su carta color crema caldo. Immaginate un saggio approfondito sulla gestione delle risorse umane, presentato come un prodotto: un carattere serif corsivo che sussurra attraverso un'interfaccia blu moderna.