Calendly
Inchiostro blu scuro su marmo freddo
Calendly trasmette una sensazione di calma e sicurezza, tipica di uno spazio di lavoro per la pianificazione: una tela quasi bianca con ampi spazi, schede prodotto bianche e nitide che si stagliano su uno sfondo grigio freddo e tutta la tipografia resa con un inchiostro blu scuro anziché nero puro. L'elemento distintivo è il colore blu scuro (#0b3558), utilizzato ovunque compaia del testo (titoli, pulsanti, icone, link), che ammorbidisce l'intera interfaccia, rendendola più calda ed elegante rispetto alla tipica landing page di un SaaS. Un unico blu brillante (#006bff) è utilizzato per tutte le azioni principali, e tocchi decorativi rosa e blu che si estendono oltre i layout dei prodotti aggiungono calore senza creare confusione. I componenti sono mantenuti sobri: bordi sottili di 1 pixel, ombreggiature leggermente blu, ampi raggi delle schede di 24 pixel e angoli dei pulsanti di 8 pixel trasmettono una sensazione di cura e non di banalità.
Larghezza massima 1200px, centrata, con ampi margini su desktop. La schermata principale è divisa in due colonne: la colonna di sinistra contiene un'intestazione di 80px + testo del corpo + pulsanti di accesso sovrapposti, mentre la colonna di destra contiene una scheda widget per le prenotazioni con elementi decorativi sullo sfondo. Sotto la schermata principale è presente una singola striscia a tutta larghezza con il logo Trust. Le sezioni successive si alternano tra blocchi di intestazione centrati (H2 + sottotesto + invito all'azione opzionale), seguiti da blocchi a due colonne che descrivono le caratteristiche (testo a sinistra/prodotto a destra o prodotto a sinistra/testo a destra) con elementi decorativi di accento dietro ogni immagine del prodotto. Le griglie a schede sono usate raramente: il layout privilegia sezioni accoppiate posizionate una accanto all'altra piuttosto che griglie a più colonne. La spaziatura tra le sezioni varia da 48 a 64px. La navigazione è costituita da una barra superiore fissa di 64px con il logo a sinistra, un menu centrato e un gruppo di inviti all'azione a destra.
L'elemento visivo principale è costituito da screenshot del prodotto: semplici mockup dell'interfaccia utente del calendario di prenotazione, realizzati su cartoncini bianchi nitidi con angoli ampi e arrotondati. Design decorativo: ogni scheda prodotto è circondata da una delicata macchia viola corallo (#e55cff) o blu azzurro (#0099ff), leggermente decentrata e sfocata, che crea un effetto collage anziché un semplice screenshot. Nessuna fotografia, nessuna immagine di lifestyle: tutti gli elementi visivi rappresentano l'interfaccia utente del prodotto, forme astratte decorative o loghi monocromatici dei partner sulla barra di fiducia. Le icone sono lineari con uno spessore di 1,5-2 pixel, monocromatiche, in blu scuro (Ink Navy) o blu (Signal Blue).
Tavolozza
Marca
- Ink Navy
#0b3558— Testo principale, intestazioni, icone, sfondo scuro per le call to action, link di navigazione. - Signal Blue
#006bff— Invito all'azione principale (CTA), navigazione attiva, enfasi sul link, stati selezionati
Neutro
- Carbon
#0a0a0a— Testo in nero puro (opzione di ripiego), glifo del logo, riempimento con icona. - Slate Gray
#476788— Testo principale aggiuntivo, testo di supporto, etichette attenuate. - Mist Gray
#a6bbd1— Testo disabilitato, etichette delle funzioni inattive, contorni delle icone chiari - Cloud
#f8f9fb— Tela della pagina, sfondo del piè di pagina, superficie extra - Paper
#ffffff— Superfici delle carte, pannelli in rilievo, testo dei pulsanti su sfondo scuro. - Pebble
#f0f3f8— Immagini di sfondo per icone, ombreggiatura dei campi di input, separatori discreti, effetti al passaggio del mouse.
Tipografia
da 12 a 80px · 10 passaggi
- Gilroy — sostituzione: Manrope · contorni 400, 500, 600, 700 · Tutto il testo dell'interfaccia. Gilroy è un sans-serif umanista geometrico con ampie aperture e contrasto uniforme dei tratti; i suoi pesi grassetto (700) sono usati per i titoli, mentre 500–600 sono usati per pulsanti e sottotitoli. Sostituire con Manrope o Inter.
- Gilroy — sostituzione: Inter · contorni 400 · Testo del corpo ed etichette dell'interfaccia utente generiche: il peso del carattere di 400 punti garantisce che i testi lunghi siano leggibili senza risultare pesanti.
- Gilroy — sostituzione: Inter · contorni 500 · Intestazioni secondarie e testo del corpo evidenziato: il carattere 14/500 è lo strumento principale per le intestazioni delle schede e le etichette in linea.
Intervalli e forma
| Scopo | Senso |
|---|---|
| Densità | denso |
| Passo base | 8-16px |
| Raggio del pulsante | 8px |
| Raggio della carta | 24px |
| Ombre | no - bordi invece di ombre |
| Tra le sezioni | 48-64px |
| Larghezza del pannello | 1200px |
L'IA creerà il tuo sito web nello stile Calendly 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
- Mollie — Un bancone in cashmere, un registro contabile scuro. Lascia ampio spazio bianco per la grafica editoriale attorno al testo nero, quindi rafforza i punti relativi al prodotto con tonalità crema calde, marroni caffè espresso e foto realistiche dei metodi di pagamento.
- Kagi — Una sala lettura separata. Create uno spazio bianco e aperto attorno a un testo in grafite audace, utilizzando delicati accenti viola e superfici dai toni pastello caldi per rompere la tranquillità.
- Milanote — Milanote è uno studio creativo specializzato. Realizziamo pagine editoriali in stile galleria utilizzando pannelli visivi fluttuanti: pareti incorniciate di scuro, spazi espositivi bianchi e screenshot che sembrano oggetti reali con una morbida profondità.
- Co2 — Un atlante climatico illuminato dalla luce invernale. Crea pagine che ricordano un paesaggio documentario aereo, dove titoli con grazie, dati codificati per categoria e immagini ghiacciate mettono in risalto ampi margini bianchi.
- GitButler — Turchese alla fine del testo. Una combinazione di titoli con grazie ad alto contrasto, sottili griglie tecniche, superfici color grafite calda e un discreto accento turchese.
- 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
- Seline Analytics — Un tranquillo tavolo analitico su carta calda
- 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.