Vercel
Terminal imprimat pe hârtie albă
Sistemul de design Vercel este un exercițiu de monocromie disciplinată: o pânză aproape albă (#fafafa), font negru, margini subțiri și o absență completă a culorii decorative. Limbajul vizual evocă un terminal de dezvoltator redat în format tipărit - Geist Sans este abia lizibil la scara „eroică”, cu o pondere de 400-450 și o spațiere între litere de -0,06 em, în timp ce Geist Mono aplică etichete, metadate și mostre de cod în majuscule de 11-13 px. Butoanele sunt raze clare de 6 px sau dreptunghiuri de negru pur pe alb sau alb pe negru. Sistemul se bazează pe contrast și ierarhie tipografică mai degrabă decât pe culoare, folosind semnul triunghiular (▲) și un verb marcat pe două linii ca singure elemente de branding. Suprafețele sunt așezate una peste alta în ordinea #fafafa → #ebebeb → #171717, creând profunzime prin schimbarea valorilor tonale, mai degrabă decât prin umbră sau culoare. Fiecare element este construit pe o grilă de 4px cu o densitate compactă, rezultând o interfață care amintește de caietul unui inginer - precisă, funcțională și fără teamă de spațiul alb.
Containerul are o lățime de 1280px, este centrat, cu o suprapunere orizontală generoasă (24-48px). Blocul principal folosește o compoziție asimetrică în trei zone: un titlu mare în stânga, un glif de brand centrat și un bloc „sprânceană” în dreapta. Sub blocul principal, conținutul este aranjat în dungi alternante: o bandă pe toată lățimea cu sigla clientului, urmată de o secțiune pe două coloane „Creatori de agenți” cu titlul în stânga și un aspect al produsului în dreapta, urmată de o grilă de trei carduri cu caracteristici. Secțiunile sunt separate prin margini verticale de 96-128px, fără divizoare sau decalaje de fundal. Navigarea este un singur panou fix de 64px cu un fundal neclar. Grilele de carduri folosesc în mod constant un aspect pe două sau trei coloane, cu margini de 16-24px. Densitatea generală este compactă - textul este ușor de citit, există spațiu alb amplu, dar dimensiunea fontului și dimensiunile componentelor împiedică pagina să pară aerisită.
Imaginile sunt rare și întotdeauna funcționale. Principalul element vizual este triunghiul negru (▲) - o marcă geometrică ce apare ca o siluetă plutitoare la scara „majusculă”. Logo-urile clienților de pe banda demonstrativă folosesc semnele verbale reale ale fiecărei mărci în tonuri de gri. Machetele de produse (interfața de chat Notion, ieșirea terminalului CLI, cardul de pașaport) sunt încorporate ca capturi de ecran în mod luminos în cadrul unor carduri înrămate. Nu există fotografii, ilustrații sau elemente 3D - sistemul este tipografie pură și forme geometrice pe hârtie albă.
Paletă
Neutru
- Obsidian
#171717— Titlurile principale, chenarele de navigare, butoanele întunecate și marcajele listei sunt aproape negre, evitând duritatea și saturația stridentă. - Paper White
#fafafa— Pânza paginii, suprafețele cardurilor, umpluturile luminoase ale butoanelor - acesta este fundalul standard pe care se află toate celelalte. - Pure White
#ffffff— Suprafețe de card în relief, inserții, câmpuri de introducere. - Hairline
#ebebeb— Marginile de 1px de pe butoane, linkuri și carduri sunt vizibile la niveluri de zoom ridicate, dar invizibile la niveluri de zoom scăzute. - Ash
#c9c9c9— Text dezactivat, etichete dezactivate, filigrane cu numele mărcii în siglele clienților. - Smoke
#a8a8a8— Text secundar, text substituent, umplere subtilă cu pictograme.
Tipografie
de la 11 la 64px · 6 pași
- Geist Sans — înlocuire: Inter · contururi 400, 450, 500 · Fontul principal pentru interfață și titluri este un sans-serif geometric personalizat de la Vercel, cu spațiere strânsă între litere la dimensiuni mari (-0,06em la 56-64px, -0,05em la 30px). Pentru titlurile din partea de sus a paginii, a fost aleasă o grosime de 450: mai groasă decât Light, dar mai ușoară decât Semi-Bold, creând un ton încrezător, dar nu prea arogant.
- Geist Mono — înlocuire: JetBrains Mono · contururi 400, 500, 600 · Un font secundar monospațiat pentru legende, blocuri de cod, panouri de ieșire CLI, metadate și text cu majuscule. Combinația 8px/600px/majuscule permite plasarea precisă a semnelor de text minuscule. Spațierea mare între litere (0,071 em) în versiunea monospațiată oferă spațiu amplu pentru text cu majuscule.
Intervale și formă
| Scop | Sens |
|---|---|
| Densitate | dens |
| Pasul de bază | 12px |
| Raza butonului | 6px |
| Raza cardului | 6px |
| Umbre | fără - margini în loc de umbre |
| Între secțiuni | 96-128px |
| Lățimea paginii | 1280px |
Inteligența artificială vă va construi site-ul web în stilul Vercel și îl va completa
- Completează cu produse și postări prin link - Instagram, TikTok, Facebook.
- Transferați conținut de pe vechiul site - specificați doar adresa.
- Design modern pe cel mai bun motor: React ( Next.js) cu randare pe server și optimizare SEO gata de utilizare.
- Optimizare SEO complet automatizată pentru rezultatele căutării și recomandări de rețele neuronale.
Stiluri similare
- Headspace — Un colț de wellness însorit pe hârtie caldă
- WHOOP — Laborator de spectacole la miezul nopții - mese albe de laborator clinic sub un vid teatral negru, un singur impuls violet de electricitate
- Together AI — Consolă de cercetare pe hârtie glaciară
- v0 by Vercel — Desen la strung. Precizia și funcționalitatea sunt primordiale, fiecare element servind unui scop clar pe o suprafață curată și perfectă din punct de vedere tehnic.
- Dovetail — Un plan sub o lună neagră — linii grafice abia vizibile, font alb, o sclipire violetă
- Glideapps — masă de desen monocromă cu o strălucire turcoaz electrică
- Timescale — Desen ingineresc pe hârtie milimetrică caldă
- UGLYCASH — Un caiet acoperit cu stickere, pe hârtie crem, emană ambianța unei companii fintech îndrăznețe și maximaliste, care își etalează cu mândrie haosul.
- Sprout Social — O vlăstă verde pe ardezie neagră. Un accent strălucitor pe o pânză monocromă strictă, a cărei culoare este folosită doar pentru acțiune, cu un font geometric încrezător care servește drept indicator.
- Krea — Galeria Noir la miezul nopții
- Evergreen — Seră solară pe hârtie de in
- Factory — Terminalul „camera de război” la miezul nopții. „Fabrica” este un panou de control negru, unde o singură cartelă albă aterizează ca o dispeceră luminată de o lanternă - singurul obiect din cameră este lucrarea în sine.