Cursor
Un accogliente laboratorio di pergamena, illuminato da braci ardenti.
Cursor utilizza una tipografia calda, simile alla pergamena: una tela color crema, testo nero intenso e un singolo accento arancione acceso che attiva link e selezioni anziché riempire i pulsanti. I titoli, impostati in CursorGothic con spessore 400, presentano una spaziatura tra le lettere che diminuisce gradualmente all'aumentare delle dimensioni: l'autorevolezza è ottenuta attraverso la moderazione e l'uso di caratteri sottili, piuttosto che con l'audacia. Le superfici sono mantenute piatte e simili alla carta, con bordi sottili e ombre morbide e calde di colore grigio; gli angoli rimangono nitidi con uno spessore di 4 pixel in tutto il testo. EB Garamond è utilizzato selettivamente per sottotitoli e prosa, mentre berkeleyMono gestisce codice, tag e metadati, conferendo al sistema una personalità tipografica che ricorda più una rivista letteraria che una dashboard SaaS.
Larghezza massima: 1300px centrato, margine di 24px. Navigazione superiore: intestazione trasparente alta 52px con logo e testo a sinistra, 4 link di navigazione centrati, gruppo "Login / Contatti / Download" allineato a destra. Hero: intestazione allineata a sinistra + doppio blocco di call-to-action con testo che parte dall'alto a sinistra, seguito da una scheda mockup del prodotto a larghezza intera che si estende per tutta la larghezza della pagina. Striscia di fiducia: una riga orizzontale di 8 riquadri del logo in un'unica linea per tutta la larghezza della sezione. Le sezioni delle funzionalità alternano testo a sinistra e uno screenshot a destra in un layout a due colonne, ciascuna 50/50, con un ritmo verticale di 64-96px tra le sezioni. Tutti gli screenshot delle funzionalità sono mockup di finestre con lo stesso stile macOS. Piè di pagina: griglia di link a quattro colonne con il marchio a sinistra. Le sezioni sono separate da un ampio spazio anziché da divisori: la tela color crema stessa fornisce la separazione.
Le schermate del prodotto sono al centro dell'attenzione: grandi mockup di finestre macOS che mostrano l'IDE Cursor in azione: schede file, viste diff, piani agente, pannelli terminale e integrazione con Slack/chat. Ogni mockup di finestra è incorniciato da una scheda #f2f1ed con un contrasto morbido e caldo. Una foto di paesaggio dai toni tenui (montagne/orizzonte desertico) si estende oltre la sezione principale, aggiungendo calore senza entrare in competizione con l'interfaccia utente. I loghi dei clienti ( Stripe, OpenAI, Linear, Datadog, NVIDIA, Figma, Ramp, Adobe) sono presentati come scritte monocromatiche all'interno di riquadri Linen a forma di pillola. Non ci sono fotografie di persone, illustrazioni o elementi grafici decorativi astratti: tutto il peso visivo è concentrato sull'interfaccia utente e sul marchio del prodotto. Le icone sono glifi sottili e monolineari riempiti con #7a7974 Ash, mai cromatici.
Tavolozza
Neutro
- Ink
#26251e— Testo principale, sfondo del pulsante di azione principale, testo di navigazione: una tonalità calda, quasi nera, mai #000 puro - Parchment
#f7f7f4— Lo sfondo della pagina, la tela principale, è di una calda tonalità crema che ammorbidisce il contrasto e crea la sensazione di una stampa a inchiostro piuttosto che di una stampa digitale. - Bone
#f2f1ed— Superfici di cartone e contenitori in rilievo, di una tonalità più scura rispetto alla tela, creano un effetto "carta su carta" stratificato e senza bordi. - Linen
#e6e5e0— Riempimento neutro e leggero per bottoni su superfici scure. - Stone
#cdcdc9— Bordi sottili, divisori, separazioni delicate: linee da 1 pixel in tonalità calde. - Mist
#a1a19f— Testo ausiliario di terzo livello, didascalie - tra il testo principale e quello secondario.
Tipografia
da 12 a 72px · 6 passaggi
- CursorGothic — sostituzione: Inter · contorni 400, 500 · Il carattere principale per l'interfaccia utente, i titoli, la navigazione, il corpo del testo e il design del prodotto. I titoli con un peso di 400 punti e la spaziatura tra le lettere che diminuisce gradualmente (-0,005em a 22px → -0,03em a 72px) sono una caratteristica distintiva del carattere: i titoli non sono mai in grassetto. Le funzioni del carattere ss08, ss09 e tnum attivano alternative stilistiche e cifre tabellari.
- EB Garamond — sostituzione: Iowan Old Style · contorni 400, 500 · CursorGothic è un carattere tipografico serif editoriale, ideale per sottotitoli, corpo del testo e tabelle, che conferisce un tocco letterario all'interfaccia.
- berkeleyMono — sostituzione: ui-monospace · contorni 400, 500 · Monospace - per blocchi di codice, frammenti di riga di comando, metadati, percorsi di file ed etichette per sviluppatori - un linguaggio tecnico.
Intervalli e forma
| Scopo | Senso |
|---|---|
| Densità | denso |
| Passo base | 8px |
| Raggio del pulsante | 4px |
| Raggio della carta | 4px |
| Ombre | no - bordi invece di ombre |
| Tra le sezioni | 64-96px |
| Larghezza del pannello | 1300px |
L'IA creerà il tuo sito web nello stile Cursor 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
- Amplemarket — Un luogo di lavoro baciato dal sole e cosparso di coriandoli
- Getharvest — Una scrivania all'ora d'oro: una tela color crema caldo, cartoline bianche appese alla tela e un'unica fiamma arancione brillante.
- Drive Capital — Poster retrò per un viaggio in auto su carta calda
- Wealthsimple — Magazzino rivestito in cashmere con illuminazione da galleria.
- Huddle — Schede di inventario color pastello su carta color crema
- Fuser — Polaroid sparse sulla parete dello studio di un designer.
- Campsite — Una postazione di lavoro illuminata dal sole, tipo quella di un redattore: carta color crema caldo con un singolo timbro arancione.
- Redis Agency — La redazione, aperta anche fuori orario, è un luogo completamente buio dove tutto il lavoro di branding viene svolto con caratteri serif e un unico ravanello rosso.
- AI Product Generation — Studio fotografico editoriale su carta bianca - titolo come copertina, colore arancione per evidenziare i dettagli editoriali
- Getanchor — Tonalità calda terracotta su uno sfondo crema sbiadito dal sole.
- Flatfile — Un tranquillo diario di dati su pergamena calda
- Inthememory — Un disegno architettonico su marmo bianco illuminato da un'unica luce calda. Una tranquilla sala dati editoriale dove inchiostro turchese intenso e comandi a forma di pillola fluttuano su superfici bianche e pulite, interrotte solo da un singolo tocco di arancione.