Vercel
Terminālis, kas iespiests uz balta papīra
Vercel dizaina sistēma ir disciplinēta monohroma stila vingrinājums: gandrīz balts audekls (#fafafa), melns fonts, plānas apmales un pilnīga dekoratīvu krāsu neesamība. Vizuālā valoda atgādina izstrādātāja termināli, kas atveidots drukātā veidā — Geist Sans ir tik tikko salasāms "varoņa" mērogā ar svaru 400–450 un burtu atstarpi -0,06em, savukārt Geist Mono lieto etiķetes, metadatus un koda paraugus ar 11–13 pikseļu lielajiem burtiem. Pogas ir asas 6 pikseļu rādiusi vai taisnstūri tīri melnā krāsā uz balta vai baltā krāsā uz melna. Sistēma balstās uz kontrastu un tipogrāfisko hierarhiju, nevis krāsu, izmantojot trīsstūra zīmi (▲) un divu rindu vārdisku zīmi kā vienīgos zīmola elementus. Virsmas ir sakrautas viena virs otras secībā #fafafa → #ebebeb → #171717, radot dziļumu, mainot toņu vērtības, nevis ēnas vai krāsu. Katrs elements ir veidots uz 4 pikseļu režģa ar kompaktu blīvumu, kā rezultātā saskarne atgādina inženiera piezīmju grāmatiņu — precīza, funkcionāla un bez baltām telpām.
Konteiners ir 1280 pikseļu plats, centrēts, ar dāsnu horizontālu atkāpi (24–48 pikseļi). Galvenajā blokā tiek izmantota asimetriska trīs zonu kompozīcija: liels virsraksts kreisajā pusē, zīmola glifs centrā un "uzacu" bloks labajā pusē. Zem galvenā bloka saturs ir sakārtots mainīgās svītrās: pilna platuma josla ar klienta logotipu, kam seko divu kolonnu sadaļa "Aģentu veidotāji" ar virsrakstu kreisajā pusē un produkta izkārtojumu labajā pusē, kam seko trīs kartīšu režģis ar funkcijām. Sadaļas ir atdalītas ar vertikālām 96–128 pikseļu iecirkņiem bez atdalītājiem vai fona nobīdēm. Navigācija ir viens fiksēts 64 pikseļu panelis ar izplūdušu fonu. Kartīšu režģi konsekventi izmanto divu vai trīs kolonnu izkārtojumu ar 16–24 pikseļu iecirkņiem. Kopējais blīvums ir kompakts — tekstu ir viegli lasīt, ir pietiekami daudz baltas vietas, bet fonta lielums un komponentu izmēri neļauj lapai justies gaisīgai.
Attēli ir reti un vienmēr funkcionāli. Galvenais vizuālais elements ir melnais trīsstūris (▲) — ģeometriska zīmola zīme, kas parādās kā planējošs siluets "lielā burta" mērogā. Klientu logotipi koncepcijas pierādījuma joslā izmanto katra zīmola faktiskās vārdiskās zīmes pelēktoņos. Produktu maketi (Notion tērzēšanas saskarne, CLI termināļa izvade, pases karte) ir iestrādāti kā gaišā režīma ekrānuzņēmumi ierāmētās kartītēs. Nav fotogrāfiju, ilustrāciju vai 3D elementu — sistēma ir tīra tipogrāfija un ģeometriskas formas uz balta papīra.
Palete
Neitrāls
- Obsidian
#171717— Galvenie virsraksti, navigācijas robežas, tumšo pogu aizpildījums un sarakstu marķieri ir gandrīz melni, izvairoties no asuma un koša piesātinājuma. - Paper White
#fafafa— Lapas audekls, karšu virsmas, pogu gaismas aizpildījumi — tas ir standarta fons, uz kura atrodas viss pārējais. - Pure White
#ffffff— Paceltas karšu virsmas, ieliktņi, ievades lauki. - Hairline
#ebebeb— 1px apmales uz pogām, saitēm un kartītēm ir redzamas augstā tālummaiņas līmenī, bet neredzamas zemā tālummaiņas līmenī. - Ash
#c9c9c9— Atspējots teksts, klusinātas etiķetes, zīmola nosaukuma ūdenszīmes klientu logotipos. - Smoke
#a8a8a8— Papildu teksts, aizvietotāja teksts, smalks ikonu aizpildījums.
Tipogrāfija
no 11 līdz 64 pikseļiem · 6 soļi
- Geist Sans — nomaiņa: Inter · kontūras 400, 450, 500 · Saskarnes un virsrakstu galvenais fonts ir Vercel izstrādāts ģeometrisks sans-serif fonts ar ciešu burtu atstarpi lielos izmēros (-0,06 em pie 56–64 px, -0,05 em pie 30 px). Lapas augšdaļas virsrakstiem tika izvēlēts 450. tona biezums: biezāks nekā Light, bet vieglāks nekā Semi-Bold, radot pārliecinošu, bet ne uzbāzīgu toni.
- Geist Mono — nomaiņa: JetBrains Mono · kontūras 400, 500, 600 · Vienrindas sekundārais fonts parakstiem, koda blokiem, komandrindas saskarnes izvades paneļiem, metadatiem un lielajiem burtiem. 8 px/600 px/lielo burtu kombinācija ļauj precīzi izvietot sīkas vārdu zīmes. Plata burtu atstarpe (0,071 em) vienrindas versijā nodrošina pietiekami daudz vietas lielajiem burtiem.
Intervāli un forma
| Mērķis | Nozīme |
|---|---|
| Blīvums | blīvs |
| Pamata solis | 12px |
| Pogas rādiuss | 6px |
| Kartes rādiuss | 6px |
| Ēnas | nē — robežas ēnu vietā |
| Starp sekcijām | 96-128px |
| Lapas platums | 1280px |
Mākslīgais intelekts izveidos jūsu vietni Vercel stilā un aizpildīs to
- Aizpildiet ar produktiem un ierakstiem, izmantojot saiti — Instagram, TikTok, Facebook.
- Pārsūtiet saturu no savas vecās vietnes — vienkārši norādiet adresi.
- Moderns dizains uz labākā dzinēja: React ( Next.js) ar servera renderēšanu un SEO optimizāciju uzreiz pēc instalēšanas.
- Pilnībā automatizēta SEO optimizācija meklēšanas rezultātiem un neironu tīkla ieteikumiem.
Līdzīgi stili
- Headspace — Saulains labsajūtas stūrītis uz silta papīra
- WHOOP — Izrādes laboratorija pusnaktī — balti klīniskās laboratorijas galdi zem melna teatrāla tukšuma, viens violets elektrības pulss.
- Together AI — Pētniecības konsole uz ledus papīra
- v0 by Vercel — Virpošanas rasējums. Precizitāte un funkcionalitāte ir vissvarīgākās, katram elementam pildot skaidru mērķi uz tīras, tehniski perfektas virsmas.
- Dovetail — Rasējums zem melna mēness — tik tikko saskatāmas grafika līnijas, balts fonts, viena violeta dzirksts
- Glideapps — vienkrāsains rasēšanas galds ar vienu elektrisko tirkīza mirdzumu
- Timescale — Inženiertehniskais zīmējums uz silta milimetru papīra
- UGLYCASH — Ar uzlīmēm pārklāta piezīmju grāmatiņa uz krēmkrāsas papīra izstaro drosmīgas, maksimālistiskas finanšu tehnoloģiju (fintech) atmosfēru, kas lepni demonstrē savu haosu.
- Sprout Social — Zaļš asns uz melna šīfera. Viens spilgts akcents uz stingra melnbalta audekla, kura krāsa tiek izmantota tikai darbībai, ar pārliecinātu ģeometrisku fontu, kas kalpo kā norādes.
- Krea — galerija noir pusnaktī
- Evergreen — Saules siltumnīca uz lina papīra
- Factory — "Kara telpas" terminālis pusnaktī. "Rūpnīca" ir skarbi melns vadības panelis, kur viena balta karte nolaižas kā ar lukturīti apgaismota ziņojumapmaiņa — vienīgais objekts telpā ir pats darbs.