Seline Analytics
Un tranquillo tavolo analitico su carta calda
Seline si staglia su uno sfondo color pietra calda (#fafaf9) con un unico accento blu vibrante; tutti gli altri colori sono neutri e tratti dalla palette di colori pietra di Tailwind. I titoli sono resi con un font sans-serif geometrico personalizzato (roobert) con un peso di 400 e una spaziatura negativa stretta tra le lettere, conferendo al testo una sicurezza rilassata, quasi sussurrata, che contrasta con il tipico stile SaaS più audace. Le superfici dell'interfaccia utente sono costituite da schede bianche piatte, che fluttuano sopra lo sfondo caldo con una singola, morbida sfocatura di 16px; i bordi sono creati con sottili linee color pietra di 1px, utilizzate generosamente come elemento strutturale principale al posto di divisori o pannelli pesanti. Il layout è arioso: contenuto a larghezza intera centrato su un generoso ritmo verticale, con controlli interattivi a forma di pillola, un'illustrazione della mascotte per dare personalità e screenshot della dashboard come prova del prodotto. L'impressione generale è editoriale e analitica: calma, monocromatica, sicura, con la call to action blu che è l'elemento più sorprendente della pagina grazie alla deliberata sobrietà di tutto il resto.
La pagina è a larghezza massima, centrata a circa 1200px con ampio spazio verticale. L'elemento principale è un blocco di testo su due righe, allineato a sinistra, con una singola frase evidenziata ("semplice ed efficace") in blu, seguita da una riga con due call to action (pillola blu + pillola fantasma), poi una riga di loghi dei partner in scala di grigi, quindi una riga di valutazioni di affidabilità e infine un'anteprima flottante a larghezza intera della dashboard, che si sovrappone leggermente alla sezione successiva. Sotto la parte visibile della pagina si alternano righe di testimonianze in una griglia a colonna singola, seguite da sezioni a larghezza intera con descrizioni delle funzionalità, testo allineato a sinistra e immagini del prodotto centrate. La navigazione è costituita da una barra superiore minimalista: logo a sinistra, link di navigazione centrati, login + call to action blu a destra, con un gruppo di avatar flottanti al centro della navigazione che funge da verifica dell'identità. Gli spazi tra le sezioni sono ampi (96px) per creare un ritmo editoriale piuttosto che un denso ammasso di informazioni.
Il linguaggio visivo è dominato da screenshot dell'interfaccia utente del prodotto: l'anteprima della dashboard è una fotografia renderizzata con un filtro di contrasto in scala di grigi (1) (0,94), che attenua i colori dei dati in una tonalità monocromatica. L'unica figura umana è un adesivo lineare a forma di mascotte (un personaggio incappucciato), disegnato in stile SVG con solo contorni, posizionato una volta per sezione come un giocoso contrappunto al contenuto analitico, con un'ombra morbida per creare un effetto di profondità simile a quello di un adesivo. Il logo del marchio e i glifi sono piccole scintille/fiamme nere. Non ci sono fotografie: né foto di lifestyle, né foto di squadra, né immagini ambientali. L'oggetto (la dashboard) è il protagonista. Tutte le icone decorative sono in stile contorno da 1px in #0c0a09 o #3ba6f1, mai riempite.
Tavolozza
Marca
- Cyan Signal
#3ba6f1— La principale call to action, i link attivi e i contorni dell'icona del marchio sono gli unici elementi di colore presenti sulla pagina, utilizzati con parsimonia per attirare l'attenzione sull'azione. - Cyan Edge
#3398e1— Il blu viene utilizzato per evidenziare i contorni delle azioni, le etichette dei link e gli elementi interattivi. Non deve essere utilizzato come colore principale per le call to action.
Neutro
- Ink Black
#0c0a09— I titoli principali, il testo del corpo evidenziato e le icone espressive sono di un colore caldo, quasi nero. - Stone Canvas
#fafaf9— Lo sfondo della pagina è di una calda tonalità crema che ricorda la carta piuttosto che il bianco di uno schermo. - Pure White
#ffffff— Le superfici delle mappe, i pannelli sporgenti e i riempimenti dei campi di input sono piatti e senza ombre per impostazione predefinita. - Stone Border
#e8e6e5— I bordi sottili delle schede, della navigazione e dei campi di input sono l'elemento strutturale principale, non i separatori. - Stone Muted
#d6d3d1— Cornici aggiuntive, delicate sfumature di sfondo, divisori decorativi. - Ash Gray
#a8a29e— Testo di aiuto, contorni delle icone, stati disabilitati: leggibili ma inattivi.
Tipografia
da 10 a 52px · 5 passaggi
- Roobert — sostituzione: Inter Tight or Satoshi · contorni 400, 500 · Il carattere utilizzato per titoli e impaginazione del testo è un sans-serif geometrico unico con una spaziatura negativa minima tra le lettere (-0,025em a 32px, -0,021em a 52px). Il peso di 400 x 52px è la sua cifra distintiva: non convenzionale, sottile, autorevole ma al contempo discreto. I titoli occupano il loro spazio senza risultare invadenti.
- Inter — sostituzione: Inter · contorni 400, 500, 600 · Il carattere principale per il testo del corpo, la navigazione, l'interfaccia utente e le intestazioni è un carattere neutro e universale per tutto il testo fuori dallo schermo. La dimensione predominante per il testo del corpo è di 14px con un peso di 400 e un'interlinea di 1,64 (frequenza 1174). La spaziatura positiva tra le lettere (0,004em) a dimensioni ridotte garantisce la leggibilità dell'interfaccia utente densa.
Intervalli e forma
| Scopo | Senso |
|---|---|
| Densità | spazioso |
| Passo base | 8px |
| Raggio del pulsante | 9999px |
| Raggio della carta | 10px |
| Ombre | ombre morbide |
| Tra le sezioni | 96px |
| Larghezza del pannello | 1200px |
L'IA creerà il tuo sito web nello stile Seline Analytics 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
- Dub — Pannello di controllo in carta di riso opaca di Link
- 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.