Vercel
Terminal na nakalimbag sa puting papel
Ang sistema ng disenyo ng Vercel ay isang pagsasanay sa disiplinadong monochrome: isang halos puting canvas (#fafafa), itim na tipo, manipis na mga hangganan, at ganap na kawalan ng pandekorasyon na kulay. Ang biswal na wika ay nagpapaalala sa isang terminal ng developer na nai-render sa print—ang Geist Sans ay halos hindi mabasa sa "heroic" scale na may bigat na 400-450 at espasyo ng mga letra na -0.06em, habang ang Geist Mono ay naglalapat ng mga label, metadata, at mga sample ng code sa 11-13px na malalaking titik. Ang mga butones ay matutulis na 6px radii o mga parihaba ng purong itim sa puti o puti sa itim. Ang sistema ay umaasa sa contrast at typographic hierarchy sa halip na kulay, gamit ang triangular sign (▲) at isang two-line wordmark bilang tanging mga elemento ng branding. Ang mga ibabaw ay nakasalansan sa ibabaw ng isa't isa sa pagkakasunud-sunod na #fafafa → #ebebeb → #171717, na lumilikha ng lalim sa pamamagitan ng pagbabago ng mga tonal value sa halip na anino o kulay. Ang bawat elemento ay binuo sa isang 4px grid na may compact density, na nagreresulta sa isang interface na nakapagpapaalaala sa notebook ng isang engineer—tumpak, gumagana, at walang takot sa white space.
Ang lalagyan ay may lapad na 1280px, nasa gitna, na may malawak na pahalang na padding (24-48px). Ang pangunahing bloke ay gumagamit ng asymmetrical three-zone composition: isang malaking headline sa kaliwa, isang brand glyph sa gitna, at isang "kilay" block sa kanan. Sa ibaba ng pangunahing bloke, ang nilalaman ay nakaayos sa salit-salit na mga guhit: isang full-width stripe na may logo ng kliyente, na sinusundan ng isang dalawang-column na seksyong "Agent Creators" na may headline sa kaliwa at isang layout ng produkto sa kanan, na sinusundan ng isang grid ng tatlong card na may mga tampok. Ang mga seksyon ay pinaghihiwalay ng mga patayong gutter na 96-128px na walang mga divider o background offset. Ang nabigasyon ay isang nakapirming 64px panel na may malabong background. Ang mga card grid ay palaging gumagamit ng dalawa o tatlong-column na layout na may 16-24px na gutter. Ang pangkalahatang densidad ay siksik—madaling basahin ang teksto, may sapat na puting espasyo, ngunit ang laki ng font at laki ng component ay pumipigil sa pahina na maging maluwag.
Kakaunti at laging gumagana ang mga imahe. Ang pangunahing elementong biswal ay ang itim na tatsulok (▲)—isang heometrikong marka ng tatak na lumilitaw bilang isang lumulutang na silweta sa iskala na "malalaking titik". Ginagamit ng mga logo ng kliyente sa proof-of-concept strip ang aktwal na mga wordmark ng bawat tatak sa grayscale. Ang mga mockup ng produkto (chat interface ng Notion, CLI terminal output, passport card) ay naka-embed bilang mga light-mode na screenshot sa loob ng mga naka-frame na card. Walang mga litrato, ilustrasyon, o 3D na elemento—ang sistema ay purong tipograpiya at mga heometrikong hugis sa puting papel.
Paleta
Neutral
- Obsidian
#171717— Ang mga pangunahing heading, mga hangganan ng nabigasyon, madilim na pagpuno ng buton, at mga pananda ng listahan ay halos itim lahat, kaya't naiiwasan ang kalupitan at mapangahas na saturation. - Paper White
#fafafa— Ang canvas ng pahina, ang mga ibabaw ng card, ang liwanag na pumupuno sa mga butones—ito ang karaniwang background kung saan matatagpuan ang lahat ng iba pa. - Pure White
#ffffff— Mga nakataas na ibabaw ng card, mga insert, mga input field. - Hairline
#ebebeb— Ang mga border na may 1px sa mga button, link, at card ay nakikita sa matataas na antas ng zoom, ngunit hindi nakikita sa mababang antas ng zoom. - Ash
#c9c9c9— Hindi pinagana ang teksto, mga naka-mute na label, mga watermark ng pangalan ng brand sa mga logo ng kliyente. - Smoke
#a8a8a8— Pangalawang teksto, teksto ng placeholder, banayad na pagpuno ng icon.
Tipograpiya
mula 11 hanggang 64px · 6 na hakbang
- Geist Sans — kapalit: Inter · mga balangkas 400, 450, 500 · Ang pangunahing font para sa interface at mga heading ay isang pasadyang dinisenyong geometric sans-serif mula sa Vercel na may masikip na espasyo sa pagitan ng mga letra sa malalaking sukat (-0.06em sa 56-64px, -0.05em sa 30px). Para sa mga heading sa itaas ng pahina, isang 450 na bigat ang pinili: mas makapal kaysa sa Light ngunit mas magaan kaysa sa Semi-Bold, na lumilikha ng isang kumpiyansa, ngunit hindi dominante, na tono.
- Geist Mono — kapalit: JetBrains Mono · mga balangkas 400, 500, 600 · Isang monospaced secondary font para sa mga caption, code block, CLI output panel, metadata, at uppercase na teksto. Ang kombinasyong 8px/600px/uppercase ay nagbibigay-daan para sa tumpak na paglalagay ng maliliit na wordmark. Ang malawak na espasyo para sa mga letra (0.071em) sa monospaced na bersyon ay nagbibigay ng sapat na espasyo para sa uppercase na teksto.
Mga pagitan at anyo
| Layunin | Kahulugan |
|---|---|
| Densidad | siksik |
| Pangunahing hakbang | 12px |
| Radius ng buton | 6px |
| Radius ng card | 6px |
| Mga anino | walang - mga hangganan sa halip na mga anino |
| Sa pagitan ng mga seksyon | 96-128px |
| Lapad ng pahina | 1280px |
Gagawa ang AI ng website mo sa estilong Vercel at pupunuin ito
- Punuin ng mga produkto at post gamit ang link - Instagram, TikTok, Facebook.
- Maglipat ng nilalaman mula sa iyong lumang site—tukuyin lamang ang address.
- Modernong disenyo gamit ang pinakamahusay na engine: React ( Next.js) na may kasamang server rendering at SEO optimization na agad-agad.
- Ganap na awtomatikong pag-optimize ng SEO para sa mga resulta ng paghahanap at mga rekomendasyon sa neural network.
Mga katulad na estilo
- Headspace — Isang maaraw na sulok para sa kalusugan sa mainit na papel
- WHOOP — Laboratoryo ng Pagtatanghal sa hatinggabi - mga puting mesa ng klinikal na laboratoryo sa ilalim ng itim na kawalan sa teatro, isang lilang pulso ng kuryente
- Together AI — Research console sa papel na glacial
- v0 by Vercel — Pagguhit gamit ang lathe. Ang katumpakan at kakayahang magamit ay pinakamahalaga, kung saan ang bawat elemento ay nagsisilbi ng malinaw na layunin sa isang malinis at perpektong teknikal na ibabaw.
- Dovetail — Isang blueprint sa ilalim ng itim na buwan—halos hindi nakikitang mga linya ng graph, puting font, isang lilang kislap
- Glideapps — monochrome drafting table na may isang electric turquoise sparkle
- Timescale — Pagguhit ng inhinyero sa mainit na papel na graph
- UGLYCASH — Ang isang notebook na may sticker sa kulay kremang papel ay nagpapakita ng ambiance ng isang matapang at maximalist na fintech na buong pagmamalaking nagpapakita ng kaguluhan nito.
- Sprout Social — Isang berdeng usbong sa itim na slate. Isang matingkad na diin sa isang mahigpit na monochrome canvas, na ang kulay ay ginagamit lamang para sa aksyon, na may kumpiyansang geometric na font na nagsisilbing mga palatandaan.
- Krea — gallery noir sa hatinggabi
- Evergreen — Solar greenhouse sa papel na linen
- Factory — Ang terminal ng "war room" sa hatinggabi. Ang "pabrika" ay isang matingkad na itim na control panel kung saan may isang puting card na lumalapag na parang isang dispatch na may ilaw na flashlight—ang tanging bagay sa silid ay ang mismong gawa.