Letters
Una visita mattutina in una clinica all'aperto: un tavolo bianco sterile sotto un soffitto azzurro tenue, cosparso di strumenti chirurgici blu.
Letters è uno strumento per la scrittura di lettere mediche che inizia con un'intestazione sfumata a cielo aperto – una morbida striscia blu che crea un'atmosfera calma e clinica – prima di passare a un'area di lavoro bianca e pulita. Il sistema è progettato in stile monocromatico: una tela bianca pulita, testo quasi nero (#070709), inviti all'azione a forma di pillola scura e schede arrotondate che fluttuano su ombre sottilissime. Un singolo blu brillante (#2597d0) è riservato alla punteggiatura funzionale – icone, micrografiche, lettori di forme d'onda – mai utilizzato per pulsanti o grandi riempimenti. La tipografia utilizza Open Runde, un sans-serif umanistico geometrico con un'aggressiva spaziatura negativa tra le lettere su schermi più grandi (-0,04em a 80px), che comprime le intestazioni in blocchi decisi. I componenti risultano leggeri, come uno strumento medico: cornici sottili, spaziatura generosa tra le schede, pulsanti a forma di pillola e un uso discreto dell'elevazione che permette all'intestazione a forma di cielo di svolgere la funzione emotiva.
La homepage, con una sfumatura azzurra che occupa l'intera larghezza della pagina, presenta un titolo e un sottotitolo centrati e un pulsante di invito all'azione sottostante. La transizione è fluida verso un'area di contenuto bianca con un'ampia spaziatura tra le sezioni (80-120px). Le sezioni dedicate alle funzionalità utilizzano una griglia a due colonne di grandi schede arrotondate (raggio di 18-32px) di uguali proporzioni. I titoli delle sezioni sono sempre centrati, in un'unica colonna, sopra la griglia delle schede. La navigazione è costituita da una barra superiore bianca fissa con un gruppo di link centrati e pulsanti di accesso allineati a destra. Il ritmo generale è dato da un'unica striscia principale, suggestiva, alternata a sezioni bianche e #f5f5f5 con un'adeguata spaziatura verticale. Non ci sono barre laterali, mega-menu o layout asimmetrici: la pagina trasmette una sensazione di calma e simmetria, come una colonna simmetrica.
Il design visivo è quasi interamente focalizzato sull'interfaccia utente del prodotto: niente foto di lifestyle, niente rendering 3D astratti. Il linguaggio visivo si basa su schede prodotto che mostrano l'interfaccia nativa dell'app: un confronto "Prima" e "Dopo" di documenti, un'area di caricamento con un bordo tratteggiato e un lettore audio a forma di onda. L'unico elemento visivo di atmosfera è la sfumatura del cielo nell'immagine principale. Le icone sono piatte, monocromatiche (busta, microfono, segno di spunta) con spessore uniforme, senza variazioni di riempimento. Lo stile illustrativo è sobrio: i mockup dei prodotti sono visualizzati su uno sfondo bianco, leggermente ruotati per creare profondità, mai inclinati bruscamente. Un font scritto a mano (The Doctor) è l'unico elemento organico/artigianale, utilizzato unicamente per evocare la grafia clinica della scheda "Prima".
Tavolozza
Marca
- Surgical Blue
#2597d0— Icone, un'icona del microfono, un riproduttore di onde sonore e piccoli dettagli funzionali creano un'unica nota cromatica in tutta l'interfaccia.
Neutro
- Obsidian
#070709— Il testo del corpo, i pulsanti di invito all'azione riempiti e gli elementi dell'interfaccia utente scuri (è stato scelto un nero quasi puro invece del #000 puro per ammorbidire il contrasto con lo sfondo bianco). - Paper White
#ffffff— Lo sfondo della pagina, le superfici delle schede e il testo dei pulsanti costituiscono la tela principale per tutte le sezioni sottostanti all'elemento principale. - Cloud Gray
#f5f5f5— Ulteriori superfici per le schede e sfondi per le sezioni separano i blocchi funzionali dalla tela principale. - Sky Tint
#d7e6f5— La tonalità della cornice di cartone e il lievissimo accenno di blu della superficie creano un'atmosfera suggestiva, anziché grigia. - Charcoal
#60606c— Testo principale, testo secondario e bordi tenui: un colore neutro dominante per i contenuti non di intestazione. - Slate
#8b8b8b— Testo minore e stati di confine inattivi: utilizzati per indicare le posizioni e garantire l'accessibilità alle persone con disabilità.
Tipografia
da 12 a 80px · 8 passaggi
- sans-serif — sostituzione: Inter · contorni 400, 700 · sans-serif - trovato nei dati estratti ma non descritto dall'IA.
- Open Runde — sostituzione: Inter Tight · contorni 400, 500, 600, 700, 900 · Il carattere principale per titoli e navigazione è un umanista geometrico, con spaziatura tra le lettere ridotta a dimensioni grandi; -0,04em a 80px comprime il titolo in un unico blocco deciso. Da utilizzare per tutti i titoli, la navigazione e il testo di grandi dimensioni.
- Inter — sostituzione: system-ui · contorni 400, 500 · Testo secondario per corpo e interfaccia utente: utilizzato per titoli di piccole dimensioni, elementi di navigazione e link in linea, dove si desidera un ritmo di lettura più neutro. Si abbina a Open Runde per creare un contrasto gerarchico.
Intervalli e forma
| Scopo | Senso |
|---|---|
| Densità | denso |
| Passo base | 12-16px |
| Raggio del pulsante | 100px |
| Raggio della carta | 18px |
| Ombre | no - bordi invece di ombre |
| Tra le sezioni | 80-120px |
| Larghezza del pannello | 1200px |
L'IA creerà il tuo sito web nello stile Letters 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
- Integrated Biosciences — laboratorio di bioluminescenza a mezzanotte
- Mintlify — Un giardino di nuvole sopra un tavolo di vetro. Il cielo disegnato a mano e il documentario sono incorniciati insieme: l'unico punto in cui colore e concetto si fondono prima che la pagina svanisca in un bianco monastico.
- Gleap — Uno spazio di lavoro decorato con calde tonalità crema e accenti color grafite: uno studio dove punti di inchiostro nero opaco sembrano fluttuare sopra la struttura in lino.
- Render — Il design è realizzato su alluminio spazzolato. L'interfaccia ha l'aspetto di un documento di ingegneria pulito e geometrico: spazi bianchi, linee sottili e un'unica linea viola che attira l'attenzione sull'azione.
- Grafbase — Disegno tecnico su marmo freddo
- Slash — Cripta di mezzanotte con registri dorati
- Modal — Un terminale fosforescente in una sala server buia: l'unica fonte di luce è di un verde brillante.
- Whimsical — Inchiostro color prugna intenso su sfondo lavanda: un taccuino creativo da studio che funge anche da lavagna tecnica.
- AgentQL — Aurora boreale sopra il terminal di notte
- Alveos One — Un accogliente rifugio fatto di ciottoli di fiume: una tranquilla stanza per la meditazione, illuminata da una luce soffusa e delicata, dove un singolo oggetto di grafite riposa in un tenue bagliore ambrato.
- 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.
- Buddy — Disegno tecnico su carta millimetrata. La superficie bianca del disegno è segnata da una griglia appena visibile, realizzata con inchiostro quasi nero, con marcature verde lime fluorescenti e tratti sfumati iridescenti.