Superlist
Uno spazio di lavoro notturno con braci di corallo: una superficie silenziosa color melanzana dove una singola calda scintilla arancione segnala ogni azione
Superlist utilizza un linguaggio di produttività nei toni del viola notte: melanzana intenso, corallo caldo come unico colore primario e grandi titoli sans-serif che catturano l'intera atmosfera. L'interfaccia evoca la sensazione di un lavoro concentrato a tarda notte: tranquilla, stratificata e sicura, con il colore utilizzato solo come punteggiatura funzionale per le call to action, gli stati attivi e i punti chiave. Le superfici sono stratificate in sottili tonalità scure con una sfumatura violacea (#181824 → #26253b), evitando il nero puro per garantire che la profondità risulti calda piuttosto che sterile. I componenti presentano forme arrotondate e generose (schede da 20px, pulsanti a pillola), ombre morbide e "respirano" grazie a comodi spazi di 10-16px anziché a griglie strette. Il tono del titolo è fondamentale: un peso di 600 punti a 70-88px con una spaziatura tra le lettere di -0,02em tratta il testo come tipografia piuttosto che come interfaccia utente, più simile a un testo editoriale che a un SaaS.
Le sezioni scure si estendono per tutta la larghezza della pagina, con contenitori di contenuto centrati e a larghezza massima. La sezione principale è centrata verticalmente e contiene un titolo, un sottotitolo e una call to action (CTA), seguiti da un'ampia schermata del prodotto che si sovrappone alla sezione successiva. Le sezioni successive alternano blocchi di testo centrati e griglie di schede. La sezione delle recensioni utilizza una griglia a tre colonne con schede di recensione e 16 spazi tra le sezioni. La navigazione è costituita da una singola barra superiore con un logo a sinistra, link centrati e azioni di accesso a destra: non è presente una barra laterale fissa o un mega-menu. Gli spazi tra le sezioni sono ampi (16 spazi), creando un ritmo editoriale spazioso piuttosto che una fitta griglia di prodotti.
Lo spazio visivo è dominato da screenshot del prodotto: un'ampia cornice con angoli arrotondati, che mostra l'interfaccia dell'app, riempie le sezioni principale e secondaria. Le foto sono ridotte al minimo, utilizzate solo come avatar degli utenti o anteprime di contenuti multimediali all'interno dell'app (ad esempio, l'immagine del concerto nel pannello di destra del mockup del prodotto). I loghi sulla barra di fiducia sono simboli di testo bianchi, piatti e dai toni tenui. Non ci sono illustrazioni decorative, né grafiche astratte, né rendering 3D. La strategia visiva è quella di mostrare il prodotto in scala, lasciare che la tipografia si occupi dell'aspetto emotivo e utilizzare il color corallo come unico colore d'accento.
Tavolozza
Marca
- Coral Ember
#ff4a36— L'arancione viene utilizzato come accento secondario per dettagli decorativi e per evidenziare elementi che si presentano raramente. Non dovrebbe essere utilizzato come colore principale per le chiamate all'azione.
Neutro
- Aubergine Canvas
#181824— Lo sfondo della pagina, la tela principale, è una tonalità calda e scura che sostituisce il nero puro, conferendo all'interfaccia utente un aspetto stratificato anziché piatto. - Elevated Plum
#26253b— Superfici delle schede, campi di input, contenitori di navigazione: un passo in più rispetto alla tela per creare profondità senza un confine visibile. - Pure White
#ffffff— Intestazioni principali, testo dei pulsanti e contorni delle icone: massimo contrasto su sfondo scuro. - Fog Text
#696f81— Il testo principale, i titoli secondari e i bordi sfumati presentano tutti un rapporto di contrasto di 7:1 per una lettura confortevole su uno sfondo color melanzana. - Ash Text
#8e8da0— Un colore neutro è supportato per gli elementi secondari dell'interfaccia utente, i divisori e le etichette attenuate. Non deve essere utilizzato come colore principale per le call to action. - Mist Highlight
#a3a3a7— Bordi, divisori ed elementi di navigazione inattivi, seppur discreti, creano una delicata tonalità neutra che, tuttavia, risalta sullo sfondo.
Tipografia
da 12 a 88px · 9 passaggi
- sans-serif — sostituzione: Inter · contorni 400 · sans-serif - trovato nei dati estratti ma non descritto dall'IA.
- Haffer XH SemiBold — sostituzione: Inter Tight · contorni 400, 600 · Il carattere principale per titoli e intestazioni. Viene utilizzato in una dimensione di 70-88px per le intestazioni principali con una spaziatura tra le lettere di -0,02em e un peso di 600. La spaziatura ridotta e l'altezza elevata delle lettere conferiscono alle intestazioni un aspetto editoriale, facendo sì che l'interfaccia scura assomigli più alla copertina di una rivista che a una dashboard. Sostituire con Inter Tight o General Sans in grassetto.
- Jersey 10 — sostituzione: Anybody · contorni 400 · Un carattere grande e decorativo per numeri e dettagli in evidenza. Da usare con parsimonia e in dimensioni molto grandi per creare accenti tipografici. Può essere sostituito con Anybody o Cabinet Grotesk.
Intervalli e forma
| Scopo | Senso |
|---|---|
| Densità | media |
| Passo base | 10-16px |
| Raggio del pulsante | 100px |
| Raggio della carta | 20px |
| Ombre | ombre morbide |
| Tra le sezioni | 80px |
| Larghezza del pannello | 1200px |
L'IA creerà il tuo sito web nello stile Superlist 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
- DNA — L'Osservatorio di Mezzanotte visto attraverso una lente di particelle.
- Abetterlou — Sparks on Saddle Leather - un carattere caldo e cremoso che risplende su uno sfondo nero caffè intenso, con pulsanti color oro ambrato che danno la sensazione di metallo rovente premuto sulla pagina.
- Galileo-ft — Una plancia di comando nello spazio profondo con segnali blu elettrico
- Decide AI — Osservatorio a mezzanotte - segnale della zecca
- Redis Agency — La redazione, aperta anche fuori orario, è un luogo completamente buio dove tutto il lavoro di branding viene svolto con caratteri serif e un unico ravanello rosso.
- Spellbook — Un'aula di tribunale a mezzanotte illuminata da inchiostro color corallo: una scura superficie editoriale dove l'unico suono è il caldo tratto di una penna arancione.
- Linear — strumento di precisione di mezzanotte
- Origin Financial — Una galleria notturna di sobria opulenza. Una stanza silenziosa, quasi buia, dove grandi caratteri serif e alcuni pannelli colorati illuminati creano la sensazione che la finanza sia un'opera d'arte accuratamente selezionata.
- Hyperstudio — Il disegno è inciso nell'ossidiana. Testo e linee sottili incorniciano uno spazio bianco di nero puro, con occasionali segni dorati di una bussola che indicano la direzione.
- Air — scultura "Cielo di mezzanotte attraverso il vetro"
- Raycast — Centro di comando di mezzanotte, Coral Neon
- dope.security — Terminale di mezzanotte con fari viola