Vercel
Terminale stampato su carta bianca
Il sistema di design Vercel è un esercizio di monocromia disciplinata: una tela quasi bianca (#fafafa), testo nero, bordi sottili e una completa assenza di colore decorativo. Il linguaggio visivo evoca un terminale di sviluppo riprodotto in stampatello: Geist Sans è a malapena leggibile nella scala "eroica" con un peso di 400-450 e una spaziatura tra le lettere di -0,06em, mentre Geist Mono applica etichette, metadati ed esempi di codice in maiuscolo di 11-13px. I pulsanti hanno un raggio netto di 6px o sono rettangoli di puro nero su bianco o bianco su nero. Il sistema si basa sul contrasto e sulla gerarchia tipografica piuttosto che sul colore, utilizzando il segno triangolare (▲) e un logo su due righe come unici elementi di branding. Le superfici sono sovrapposte l'una sull'altra nell'ordine #fafafa → #ebebeb → #171717, creando profondità attraverso la variazione dei valori tonali piuttosto che con ombre o colori. Ogni elemento è costruito su una griglia di 4 pixel con una densità compatta, dando vita a un'interfaccia che ricorda il taccuino di un ingegnere: precisa, funzionale e senza timore degli spazi bianchi.
Il contenitore è largo 1280px, centrato, con un'ampia spaziatura orizzontale (24-48px). Il blocco principale utilizza una composizione asimmetrica a tre zone: un grande titolo a sinistra, un glifo del marchio centrato e un blocco "sopracciglio" a destra. Sotto il blocco principale, il contenuto è disposto in strisce alternate: una striscia a tutta larghezza con il logo del cliente, seguita da una sezione "Agent Creators" a due colonne con il titolo a sinistra e un layout del prodotto a destra, seguita da una griglia di tre schede con le relative caratteristiche. Le sezioni sono separate da spazi verticali di 96-128px senza divisori o offset di sfondo. La navigazione è costituita da un singolo pannello fisso di 64px con sfondo sfocato. Le griglie di schede utilizzano costantemente un layout a due o tre colonne con spazi di 16-24px. La densità complessiva è compatta: il testo è facile da leggere, c'è ampio spazio bianco, ma la dimensione del carattere e delle componenti impedisce alla pagina di risultare ariosa.
Le immagini sono scarse e sempre funzionali. L'elemento visivo principale è il triangolo nero (▲), un marchio geometrico che appare come una silhouette sospesa in scala "maiuscola". I loghi dei clienti sulla striscia di prova utilizzano i marchi denominativi effettivi di ciascun brand in scala di grigi. I mockup dei prodotti (interfaccia di chat di Notion, output del terminale CLI, carta d'identità) sono incorporati come screenshot in modalità chiara all'interno di schede incorniciate. Non ci sono fotografie, illustrazioni o elementi 3D: il sistema è pura tipografia e forme geometriche su carta bianca.
Tavolozza
Neutro
- Obsidian
#171717— Le intestazioni principali, i bordi di navigazione, il riempimento scuro dei pulsanti e gli indicatori degli elenchi sono quasi completamente neri, evitando così colori troppo aspri e saturi. - Paper White
#fafafa— La tela della pagina, le superfici delle carte, i leggeri riempimenti dei pulsanti: questo è lo sfondo standard su cui si colloca tutto il resto. - Pure White
#ffffff— Superfici delle carte in rilievo, inserti, campi di input. - Hairline
#ebebeb— I bordi di 1 pixel di pulsanti, link e schede sono visibili a livelli di zoom elevati, ma invisibili a livelli di zoom bassi. - Ash
#c9c9c9— Testo disabilitato, etichette silenziate, filigrane con il nome del marchio nei loghi dei clienti. - Smoke
#a8a8a8— Testo secondario, testo segnaposto, riempimento discreto con icone.
Tipografia
da 11 a 64 pixel · 6 passaggi
- Geist Sans — sostituzione: Inter · contorni 400, 450, 500 · Il carattere principale per l'interfaccia e le intestazioni è un sans-serif geometrico personalizzato di Vercel con spaziatura tra le lettere ridotta alle grandi dimensioni (-0,06em a 56-64px, -0,05em a 30px). Per le intestazioni nella parte superiore della pagina è stato scelto un peso di 450: più spesso di Light ma più leggero di Semi-Bold, creando un tono deciso ma non eccessivo.
- Geist Mono — sostituzione: JetBrains Mono · contorni 400, 500, 600 · Un font secondario a spaziatura fissa per didascalie, blocchi di codice, pannelli di output della CLI, metadati e testo in maiuscolo. La combinazione 8px/600px/maiuscolo consente un posizionamento preciso di piccole scritte. L'ampia spaziatura tra le lettere (0,071em) nella versione a spaziatura fissa offre ampio spazio per il testo in maiuscolo.
Intervalli e forma
| Scopo | Senso |
|---|---|
| Densità | denso |
| Passo base | 12px |
| Raggio del pulsante | 6px |
| Raggio della carta | 6px |
| Ombre | no - bordi invece di ombre |
| Tra le sezioni | 96-128px |
| Larghezza del pannello | 1280px |
L'IA creerà il tuo sito web nello stile Vercel 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
- Headspace — Un angolo benessere soleggiato su carta calda
- WHOOP — Laboratorio di performance a mezzanotte: tavoli da laboratorio clinico bianchi sotto un vuoto teatrale nero, un singolo impulso elettrico viola
- Together AI — Console di ricerca sulla carta glaciale
- v0 by Vercel — Disegno al tornio. Precisione e funzionalità sono fondamentali, con ogni elemento che assolve a uno scopo preciso su una superficie pulita e tecnicamente perfetta.
- Dovetail — Un progetto sotto una luna nera: linee del grafico appena visibili, caratteri bianchi, un luccichio viola
- Glideapps — tavolo da disegno monocromatico con un luccichio turchese elettrico
- Timescale — Disegno tecnico su carta millimetrata calda
- UGLYCASH — Un quaderno ricoperto di adesivi su carta color crema emana l'atmosfera di una fintech audace e massimalista che ostenta con orgoglio il suo caos.
- Sprout Social — Un germoglio verde su ardesia nera. Un accento luminoso su una tela rigorosamente monocromatica, il cui colore è usato solo per l'azione, con un carattere geometrico deciso che funge da segnaletica.
- Krea — galleria nera a mezzanotte
- Evergreen — Serra solare su carta di lino
- Factory — Il terminale della "sala di guerra" a mezzanotte. La "fabbrica" è un pannello di controllo nero e spoglio dove una singola scheda bianca atterra come un messaggio illuminato da una torcia: l'unico oggetto nella stanza è il lavoro stesso.