Framer
galleria al neon nel vuoto
Framer si presenta come un'oscurità quasi totale: una tela nera su cui il contenuto aleggia come un'insegna al neon all'inaugurazione di una galleria. I titoli, composti in GT Walsheim Medium con interlinea stretta di 0,8–1,1 e un'aggressiva spaziatura negativa tra le lettere (-0,04em a 54px), creano un carattere tipografico condensato e decorativo che si impone all'attenzione anziché adagiarsi ordinatamente sulla pagina. Un singolo blu elettrico (#0099ff) fornisce tutti gli accenti funzionali – bordi, bagliori, icone, stati attivi – mentre il resto dell'interfaccia rimane acromatico, affidandosi a sottili transizioni di grigio (#111, #171717, #242424) per creare profondità dal nero puro. I componenti appaiono studiati piuttosto che decorativi: raggi arrotondati di 8–25px, bordi sottili di 1px, ombreggiature minimali e superfici traslucide che lasciano trasparire il vuoto.
Le sezioni a tutta larghezza si estendono oltre la tela nera, con contenuti limitati a una larghezza massima di circa 1200 pixel e centrati al loro interno. La sezione principale presenta un'intestazione allineata a sinistra e un singolo pulsante di invito all'azione (CTA), mentre il lato destro è intenzionalmente lasciato vuoto, in modo asimmetrico e non centrato. Le sezioni si alternano tra layout di solo testo (intestazione grande + sottotesto) e schermate del prodotto. La sezione "Incluso con Framer" utilizza una parete di loghi in una griglia a 4 colonne. Nella sezione community, una schermata del prodotto è posizionata all'interno di un contenitore centrato a tutta larghezza con angoli arrotondati. La navigazione è minimale: una sottile barra superiore con il logo a sinistra e i link allineati a destra, senza controlli visibili. Ritmo delle sezioni: ampi spazi verticali di 80 pixel tra le sezioni, che creano isole distinte di contenuto sospese nel vuoto.
Le schermate dell'interfaccia utente del prodotto sono predominanti: incorniciate da una finestra simile a un cromo con punti a semaforo, le schermate dell'app diventano l'immagine principale. I loghi, a garanzia della qualità, sono presentati in lettere bianche su sfondo nero con un'ampia spaziatura. Non vengono utilizzate fotografie, illustrazioni o grafiche astratte: il linguaggio visivo è il prodotto stesso, mostrato come un'interfaccia dinamica. Stile delle icone: minimalista, contornato, monocromatico e bianco in piccole dimensioni. Densità del testo: prevalentemente testo, con occasionali frammenti di grandi dimensioni sotto forma di schermate del prodotto. L'equilibrio visivo dello spazio privilegia chiaramente la tipografia rispetto alle immagini.
Tavolozza
Marca
- Vivid Violet
#0066ff— Il pulsante di azione principale è l'unico punto dell'interfaccia in cui viene visualizzato uno sfondo a tinta unita.
Neutro
- Bone
#ffffff— Intestazioni principali, testo principale su sfondo scuro, lo sfondo dei pulsanti è l'unica fonte di luce. - Void
#000000— La tela della pagina, lo sfondo della navigazione, le superfici delle schede, il riempimento delle icone: tutto è di un nero infinito che assorbe ogni contenuto non essenziale. - Graphite
#111111— Le superfici rialzate delle carte rappresentano un passo avanti rispetto al vuoto: carte grandi e funzionali e contenitori modali. - Obsidian
#171717— Superficie intermedia per pulsanti, schede aggiuntive, riempimenti dell'interfaccia utente: separa gli elementi interattivi dalla tela. - Slate
#242424— Al passaggio del mouse, i campi di input e i pannelli rientrati assumono la tonalità neutra più chiara prima di passare alla visualizzazione del testo. - Ash
#333333— Riempimento profondo per immagini di sfondo inattive ed elementi strutturali.
Tipografia
da 12 a 68 pixel · 8 passaggi
- sans-serif — sostituzione: Inter · contorni 400 · sans-serif - trovato nei dati estratti ma non descritto dall'IA.
- GT Walsheim — sostituzione: Inter Tight · contorni 500 · Il carattere utilizzato per intestazioni e titoli è il font del marchio. È fortemente condensato, con interlinea compresa tra 0,8 e 1,1 e spaziatura tra le lettere tra -0,04 e -0,05 em nella gamma di dimensioni 44-68 pixel. Non si tratta di un elemento decorativo; il calore geometrico di GT Walsheim, combinato con metriche rigorose, definisce l'identità del sistema: sicura di sé, compatta e leggermente futuristica. Per un'espressione geometrica simile, si possono considerare Inter Tight o Space Grotesk Bold.
- Inter Variable — sostituzione: Inter · contorni 400 · Il testo principale, la navigazione e le intestazioni secondarie sono gli elementi fondamentali. L'asse variabile Inter consente un'interpolazione fluida dei pesi. Il tracking si restringe all'aumentare delle dimensioni: da -0,001em a 18px e da -0,027em a 22px. La versione variabile consente micro-animazioni fluide del sito. Sostituzione: Inter ( Google) – un fallback praticamente identico.
Intervalli e forma
| Scopo | Senso |
|---|---|
| Densità | media |
| Passo base | 10px |
| Raggio del pulsante | 9999px |
| Raggio della carta | 20px |
| Ombre | no - bordi invece di ombre |
| Tra le sezioni | 80px |
| Larghezza del pannello | 1200px |
L'IA creerà il tuo sito web nello stile Framer 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
- Auros — Terminale abissale con sfere dati bioluminescenti
- 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.
- Raycast — Centro di comando di mezzanotte, Coral Neon
- Dimension — una postazione di lavoro illuminata dal crepuscolo con pannelli in vetro satinato
- Reflect Notes — Lo spazio viola stellato è un osservatorio oscuro dove le note fluttuano come costellazioni su uno sfondo di vuoto indaco quasi nero.
- Ameba — La sala di controllo a mezzanotte: un impulso blu elettrico all'interno di pannelli di vetro smerigliato.
- Branding — Parete nera della galleria, accenti rosso sangue - Grandi caratteri bianchi fluttuano su una tela scura che ricorda il vuoto, interrotti da un singolo accento rosso acceso e da elementi decorativi di grande impatto che sembrano più insegne di una galleria d'arte che un'interfaccia web.
- Harness — Centro di controllo missione a mezzanotte con dettagli verde fosforescente
- Koto — La Obsidian Gallery a mezzanotte. Un palcoscenico quasi completamente buio, dove l'unica fonte di luce calda è un singolo pennarello giallo, e caratteri tipografici condensati fluttuano nell'ampio spazio negativo come manifesti di una mostra.
- Ohzi — Un cubo luminoso sospeso in una galleria buia
- Depot — Un terminale server scuro. Una console per sviluppatori quasi nera, con un singolo LED verde che segnala l'inizio del lavoro e il resto dell'interfaccia utente visualizzato in grafite.
- Maciej Zadykowicz — La Midnight Gallery, con il suo murale caleidoscopico, è una parete dello studio quasi completamente nera dove un'opera d'arte tipografica vibrante e colorata cattura l'attenzione, mentre tutto il resto rimane sobrio e misurato.