Modal
Un terminale fosforescente in una sala server buia: l'unica fonte di luce è di un verde brillante.
Le finestre modali funzionano come un terminale fosforescente in una sala server buia: una tela quasi nera, caratteri verde chiaro e un singolo accento verde lime brillante che funge da indicatore di stato a LED. Il linguaggio di design è incentrato sugli sviluppatori: finestre di codice a spaziatura fissa con punti a semaforo, icone 3D isometriche nel caratteristico verde e ampi spazi bianchi, che permettono a un elemento in ogni sezione di risaltare. La tipografia è suddivisa tra un font personalizzato (Goga) per i titoli e un font variabile (Inter) per tutti gli elementi dell'interfaccia utente, entrambi impostati con spaziatura negativa ridotta. I colori sono distribuiti uniformemente: la maggior parte delle schermate è acromatica e il verde lime brillante appare solo sulle azioni chiave, sul logo, sulle illustrazioni 3D e nei momenti di enfasi. I componenti sono piatti e senza cornice, con la profondità creata da sottili bordi verdi e sfocatura dello sfondo anziché da ombre.
La finestra modale utilizza un layout scuro a tutta larghezza con una larghezza massima di 1280px per ospitare il contenuto. La finestra principale è centrata: il titolo (la prima frase in verde lime), un sottotitolo, due call to action e un singolo oggetto 3D come punto di ancoraggio visivo, senza separare il layout dalla barra laterale. Le sezioni del contenuto seguono un ritmo uniforme: tag sopracciglio (maiuscole, Moss 70) → titolo Goga → testo del corpo attenuato, quindi un layout a due colonne con una descrizione della funzionalità (testo + codice/scheda visiva) o una griglia di schede a tre colonne. Gli spazi tra le sezioni sono ampi: 80px. La pagina alterna strisce di sfondo vuote profonde (#000000) e strisce di sfondo leggermente più chiare (#181818), con una sezione chiara (#def0dd) che appare al centro della pagina come respiro visivo. La navigazione consiste in una singola barra superiore fissa con uno sfondo sfocato, senza barra laterale o mega-menu. Il piè di pagina è compatto e scuro, con colonne di link di un verde tenue. La densità del testo è confortevole: a ogni sezione è dedicato ampio spazio e le griglie di schede non utilizzano più di tre colonne.
Il linguaggio visivo di Modal è suddiviso in due modalità: rendering 3D luminosi dei prodotti e mockup di finestre di codice scure. Il punto focale è un singolo cubo 3D renderizzato con una sfumatura di marketing (dal verde lime allo smeraldo), inserito in un alone con sfumatura radiale che avvolge lo spazio vuoto in una luce verde, lo stile visivo distintivo del marchio. Le schede dei carichi di lavoro contengono icone isometriche 3D (un cubo wireframe, una scala solida, livelli) renderizzate nello stesso verde lime su uno sfondo scuro. Il codice e i risultati dei benchmark sono presentati come schede di finestre di terminale con punti a semaforo, evidenziazione della sintassi a spaziatura fissa in una palette fosforescente e un bordo verde tenue: ricordano screenshot di una vera interfaccia a riga di comando. I loghi dei clienti sono visualizzati come etichette grigio-verdi desaturate in un'unica riga a basso contrasto, a indicare fiducia senza competizione visiva. La densità complessiva è bassa: la maggior parte delle pagine contiene prevalentemente testo e le immagini sono presentate come singoli punti focali piuttosto che come griglie di fotografie. Non ci sono fotografie; l'intero sistema visivo è renderizzato, geometrico e luminoso.
Tavolozza
Marca
- Lime Pulse
#7fee64— Gli elementi principali dell'identità aziendale sono il logo, la principale call to action (CTA), il riempimento dei tag, gli stati attivi e il colore di base dell'illustrazione.
Neutro
- Phosphor White
#ddffdc— Il testo principale, il colore del titolo, il contorno dell'icona e il testo pieno dei pulsanti costituiscono la superficie principale leggibile. - Void Black
#000000— Tela della pagina, lo strato di sfondo più profondo - Ground Iron
#181818— Riempimento del pulsante principale, superfici delle schede nelle aree scure, superficie di base dell'interfaccia utente. - Carbon Veil
#212525— Superfici sopraelevate, sfondo di navigazione, leggermente più chiare del terreno. - Circuit Border
#485346— Il contorno/la cornice dell'azione fantasma, la principale linea sottile interattiva, è di una tenue tonalità grigio-verde. - Phosphor Blue-Black
#1f2a33— Linee di marcatura secondarie sottili, che dividono le strisce scure.
Tipografia
da 12 a 64 pixel · 8 passaggi
- Goga — sostituzione: Inter Tight or Space Grotesk · contorni 400, 500 · Carattere per titoli e sottotitoli – Utilizzato per tutti i titoli e le schede da H1 a H4. Goga è un carattere sans-serif geometrico personalizzato con aperture strette e terminali leggermente squadrati. Il peso medio (500) è riservato per evidenziare i titoli a livello di scheda; il peso normale (400) è utilizzato per i titoli di intestazione e di sezione. Per accedere alle forme alternative dei glifi che definiscono l'identità di Modal, è necessario abilitare il set stilistico 'ss01'. La spaziatura negativa tra le lettere diminuisce gradualmente da -0,007em a 48px a -0,017em a 21px.
- Inter Variable — sostituzione: Inter · contorni 400, 500 · Interfaccia utente e corpo del testo: navigazione, pulsanti, corpo del testo, etichette, piè di pagina. Il peso medio (500) è utilizzato di default per gli elementi interattivi e la navigazione; il peso normale (400) è utilizzato per i paragrafi. La spaziatura tra le lettere è notevolmente ridotta anche a dimensioni ridotte (-0,026em a 14px, -0,022em a 16px), conferendo all'interfaccia una densità finale condensata. Per la punteggiatura alternativa, è necessario includere la variante del carattere 'cv11'. Le etichette in maiuscolo a 12px utilizzano una spaziatura tra le lettere di +0,05em per bilanciare la densità del corpo del testo.
Intervalli e forma
| Scopo | Senso |
|---|---|
| Densità | media |
| Passo base | 20px |
| Raggio del pulsante | 12px |
| Raggio della carta | 8px |
| Ombre | no - bordi invece di ombre |
| Tra le sezioni | 80px |
| Larghezza del pannello | 1280px |
L'IA creerà il tuo sito web nello stile Modal 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
- Slash — Cripta di mezzanotte con registri dorati
- AgentQL — Aurora boreale sopra il terminal di notte
- GitHub — Un pannello di controllo spaziale con punti di controllo bioluminescenti: uno spazio di lavoro buio e suggestivo dove un singolo bagliore verde indica la strada da seguire.
- Doppler — La luce viola della cripta a mezzanotte. La tela quasi nera risplende di un singolo segnale lavanda e di una luce di conferma verde, ogni superficie è sufficientemente curva da poter essere afferrata.
- Basedash — Un terminale dati notturno con caratteri opachi. Un osservatorio buio dove le metriche brillano di viola e verde, i titoli con grazie fluttuano sopra il rumore e i pulsanti bianchi a forma di pillola sono gli unici oggetti luminosi in una stanza dalle superfici nere e morbide.
- Superwhisper — L'aurora boreale si dissolve sul vetro di mezzanotte.
- Better Stack — Console SRE di mezzanotte
- Langbase — Console delle luci del nord di mezzanotte
- Astro — Centro di controllo missione per lo spazio profondo con un singolo bagliore viola proveniente da una nebulosa
- Wayfinder — Una schermata nera da film con un titolo appena udibile che fluttua sopra un'illustrazione animata. L'interfaccia è costituita da un cursore per la luminosità anziché da un pannello di controllo.
- HashiCorp — La sala di controllo a mezzanotte, illuminata da luci al neon viola, è una superficie tecnica e oscura dove un cubo esagonale luminoso funge da unico riferimento cromatico.
- Umbrel — Un accogliente braciere nella sala server notturna: una stanza buia dove un unico bagliore color pesca mette in risalto ciò che conta davvero.