Vercel
Terminal imprès en paper blanc
El sistema de disseny de Vercel és un exercici de monocromia disciplinada: un llenç gairebé blanc (#fafafa), lletra negra, vores primes i una absència completa de color decoratiu. El llenguatge visual evoca un terminal de desenvolupador representat en forma impresa: Geist Sans és amb prou feines llegible a l'escala "heroica" amb un pes de 400-450 i un espaiat entre lletres de -0,06 em, mentre que Geist Mono aplica etiquetes, metadades i mostres de codi en majúscules d'11-13 px. Els botons són radis nítids de 6 px o rectangles de negre pur sobre blanc o blanc sobre negre. El sistema es basa en el contrast i la jerarquia tipogràfica en lloc del color, utilitzant el signe triangular (▲) i una marca denominativa de dues línies com a únics elements de marca. Les superfícies s'apilen una sobre l'altra en l'ordre #fafafa → #ebebeb → #171717, creant profunditat mitjançant el canvi de valors tonals en lloc d'ombres o colors. Cada element està construït sobre una quadrícula de 4 px amb una densitat compacta, donant com a resultat una interfície que recorda el quadern d'un enginyer: precisa, funcional i sense por a l'espai en blanc.
El contenidor té una amplada de 1280 px, està centrat i té un farciment horitzontal generós (24-48 px). El bloc principal utilitza una composició asimètrica de tres zones: un títol gran a l'esquerra, un glif de marca centrat i un bloc de "celles" a la dreta. A sota del bloc principal, el contingut s'organitza en franges alternes: una franja d'amplada completa amb el logotip del client, seguida d'una secció de dues columnes "Creadors d'agents" amb el títol a l'esquerra i un disseny de producte a la dreta, seguida d'una quadrícula de tres targetes amb característiques. Les seccions estan separades per canals verticals de 96-128 px sense divisors ni desplaçaments de fons. La navegació és un únic panell fix de 64 px amb un fons borrós. Les quadrícules de targetes utilitzen constantment un disseny de dues o tres columnes amb canals de 16-24 px. La densitat general és compacta: el text és fàcil de llegir, hi ha molt espai en blanc, però la mida de la lletra i les mides dels components eviten que la pàgina sembli airejada.
Les imatges són escasses i sempre funcionals. L'element visual principal és el triangle negre (▲), una marca geomètrica que apareix com una silueta suspesa a l'escala de "majúscula". Els logotips dels clients a la tira de prova de concepte utilitzen les marques denominatives reals de cada marca en escala de grisos. Les maquetes de productes (la interfície de xat de Notion, la sortida del terminal CLI, la targeta passaport) estan incrustades com a captures de pantalla en mode clar dins de targetes emmarcades. No hi ha fotografies, il·lustracions ni elements 3D: el sistema és pura tipografia i formes geomètriques sobre paper blanc.
Paleta
Neutral
- Obsidian
#171717— Els encapçalaments principals, les vores de navegació, el farciment de botons foscos i els marcadors de llista són gairebé negres, evitant la duresa i la saturació cridanera. - Paper White
#fafafa— El llenç de la pàgina, les superfícies de les targetes, els farciments de llum dels botons: aquest és el fons estàndard sobre el qual es troba tota la resta. - Pure White
#ffffff— Superfícies de targetes en relleu, insercions, camps d'entrada. - Hairline
#ebebeb— Les vores d'1 px dels botons, enllaços i targetes són visibles a nivells de zoom alts, però invisibles a nivells de zoom baixos. - Ash
#c9c9c9— Text desactivat, etiquetes silenciades, marques d'aigua de noms de marca als logotips dels clients. - Smoke
#a8a8a8— Text secundari, text de marcador de posició, farciment subtil d'icones.
Tipografia
d'11 a 64 px · 6 passos
- Geist Sans — reemplaçament: Inter · esquemes 400, 450, 500 · La font principal per a la interfície i els encapçalaments és una sans-serif geomètrica de disseny personalitzat de Vercel amb un espaiat ajustat entre lletres en mides grans (-0,06 em a 56-64 px, -0,05 em a 30 px). Per als encapçalaments de la part superior de la pàgina, es va triar un gruix de 450: més gruixut que Light però més lleuger que Semi-Bold, creant un to segur, però no dominant.
- Geist Mono — reemplaçament: JetBrains Mono · esquemes 400, 500, 600 · Una font secundària monoespaiada per a subtítols, blocs de codi, panells de sortida de la CLI, metadades i text en majúscules. La combinació de 8px/600px/majúscules permet la col·locació precisa de marques de paraules petites. L'espaiat ampli entre lletres (0,071 em) a la versió monoespaiada proporciona un ampli espai per a text en majúscules.
Intervals i forma
| Propòsit | Significat |
|---|---|
| Densitat | dens |
| Pas bàsic | 12px |
| Radi del botó | 6px |
| Radi de la targeta | 6px |
| Ombres | sense vores en comptes d'ombres |
| Entre seccions | 96-128px |
| Amplada de la pàgina | 1280px |
La IA crearà el vostre lloc web a l'estil Vercel i l'omplirà.
- Omple amb productes i publicacions a través de l'enllaç: Instagram, TikTok, Facebook.
- Transfereix contingut del teu lloc web antic; només cal que especifiquis l'adreça.
- Disseny modern en el millor motor: React ( Next.js) amb renderització de servidor i optimització SEO des del primer moment.
- Optimització SEO totalment automatitzada per a resultats de cerca i recomanacions de xarxes neuronals.
Estils similars
- Headspace — Un racó de benestar assolellat sobre paper càlid
- WHOOP — Laboratori d'actuació a mitjanit: taules blanques de laboratori clínic sota un buit teatral negre, un únic pols porpra d'electricitat
- Together AI — Consola de recerca sobre paper glacial
- v0 by Vercel — Dibuix al torn. La precisió i la funcionalitat són primordials, i cada element serveix per a una finalitat clara sobre una superfície neta i tècnicament perfecta.
- Dovetail — Un plànol sota una lluna negra: línies gràfiques gairebé invisibles, font blanca, una guspira porpra
- Glideapps — taula de dibuix monocroma amb una brillantor turquesa elèctrica
- Timescale — Dibuix d'enginyeria sobre paper mil·limetrat calent
- UGLYCASH — Un quadern cobert amb adhesius sobre paper de color crema desprèn l'ambient d'una fintech atrevida i maximalista que mostra amb orgull el seu caos.
- Sprout Social — Un brot verd sobre pissarra negra. Un accent brillant sobre un llenç monocrom estricte, el color del qual només s'utilitza per a l'acció, amb una font geomètrica segura que serveix com a senyals.
- Krea — galeria noir a mitjanit
- Evergreen — Hivernacle solar sobre paper de lli
- Factory — La terminal de la "sala de guerra" a mitjanit. La "fàbrica" és un panell de control negre i impecable on aterra una única targeta blanca com un enviament il·luminat per una llanterna; l'únic objecte de la sala és l'obra en si.