Vercel
Terminal nga giimprinta sa puti nga papel
Ang sistema sa disenyo sa Vercel usa ka ehersisyo sa disiplinado nga monochrome: usa ka hapit puti nga canvas (#fafafa), itom nga tipo, nipis nga mga border, ug hingpit nga pagkawala sa pangdekorasyon nga kolor. Ang biswal nga pinulongan nagpahinumdom sa usa ka terminal sa developer nga gi-render sa print—Ang Geist Sans halos dili mabasa sa "heroic" scale nga adunay gibug-aton nga 400-450 ug ang gilay-on sa letra nga -0.06em, samtang ang Geist Mono naggamit og mga label, metadata, ug mga sample sa code sa 11-13px nga mga cap. Ang mga butones hait nga 6px radii o mga rectangle nga puro itom sa puti o puti sa itom. Ang sistema nagsalig sa contrast ug typographic hierarchy imbes nga kolor, gamit ang triangular sign (▲) ug usa ka two-line wordmark isip bugtong branding elements. Ang mga nawong gipatong-patong sa ibabaw sa usag usa sa han-ay nga #fafafa → #ebebeb → #171717, nga nagmugna og giladmon pinaagi sa pagbalhin sa tonal values imbes nga anino o kolor. Ang matag elemento gitukod sa usa ka 4px grid nga adunay compact density, nga miresulta sa usa ka interface nga susama sa notebook sa usa ka engineer—tukma, magamit, ug walay kahadlok sa white space.
Ang sudlanan kay 1280px ang gilapdon, nakasentro, nga adunay lapad nga pinahigda nga padding (24-48px). Ang pangunang bloke naggamit ug asymmetrical nga tulo-ka-sona nga komposisyon: usa ka dako nga headline sa wala, usa ka brand glyph nakasentro, ug usa ka "kilay" nga bloke sa tuo. Sa ubos sa pangunang bloke, ang sulod gihan-ay sa nagpuli-puli nga mga stripe: usa ka full-width nga stripe nga adunay logo sa kliyente, gisundan sa duha ka kolum nga seksyon nga "Agent Creators" nga adunay headline sa wala ug usa ka layout sa produkto sa tuo, gisundan sa usa ka grid sa tulo ka kard nga adunay mga feature. Ang mga seksyon gibulag sa bertikal nga mga gutter nga 96-128px nga walay mga divider o background offset. Ang nabigasyon usa ka pirmi nga 64px nga panel nga adunay hanap nga background. Ang mga grid sa kard kanunay nga naggamit ug duha o tulo ka kolum nga layout nga adunay 16-24px nga mga gutter. Ang kinatibuk-ang densidad kay compact—ang teksto dali basahon, adunay daghang white space, apan ang gidak-on sa font ug mga gidak-on sa component nagpugong sa panid nga mobati nga luag.
Ang mga imahe nipis ug kanunay nga magamit. Ang pangunang biswal nga elemento mao ang itom nga trianggulo (▲)—usa ka geometric nga marka sa brand nga makita isip naglutaw nga silhouette sa "capital" scale. Ang mga logo sa kliyente sa proof-of-concept strip naggamit sa aktuwal nga mga wordmark sa matag brand sa grayscale. Ang mga product mockup (Notion's chat interface, CLI terminal output, passport card) gisulod isip light-mode screenshots sulod sa mga naka-frame nga card. Walay mga litrato, ilustrasyon, o 3D nga elemento—ang sistema puro nga typography ug geometric nga mga porma sa puti nga papel.
Paleta
Neutral
- Obsidian
#171717— Ang mga pangunang ulohan, mga border sa nabigasyon, itom nga pagpuno sa butones, ug mga marker sa lista halos itom tanan, nga naglikay sa kabangis ug garboso nga saturation. - Paper White
#fafafa— Ang canvas sa panid, ang mga nawong sa kard, ang kahayag nga mipuno sa mga butones—mao kini ang sumbanan nga background diin nahimutang ang tanan. - Pure White
#ffffff— Gipataas nga mga nawong sa kard, mga insert, mga input field. - Hairline
#ebebeb— Ang mga border nga 1px sa mga butones, link, ug card makita sa taas nga zoom level, apan dili makita sa ubos nga zoom level. - Ash
#c9c9c9— Na-disable nga teksto, gi-mute nga mga label, mga watermark sa brand name sa mga logo sa kliyente. - Smoke
#a8a8a8— Ikaduhang teksto, teksto sa placeholder, gamay nga pagpuno sa icon.
Tipograpiya
gikan sa 11 ngadto sa 64px · 6 ka lakang
- Geist Sans — kapuli: Inter · mga balangkas 400, 450, 500 · Ang pangunang font para sa interface ug mga heading kay usa ka custom-designed nga geometric sans-serif gikan sa Vercel nga adunay hugot nga gilay-on sa mga letra sa dagkong mga gidak-on (-0.06em sa 56-64px, -0.05em sa 30px). Para sa mga heading sa ibabaw sa panid, usa ka 450 nga gibug-aton ang gipili: mas baga kay sa Light apan mas gaan kay sa Semi-Bold, nga nagmugna og masaligon, apan dili sobra ka dominante, nga tono.
- Geist Mono — kapuli: JetBrains Mono · mga balangkas 400, 500, 600 · Usa ka monospaced secondary font para sa mga caption, code block, CLI output panel, metadata, ug uppercase nga teksto. Ang kombinasyon sa 8px/600px/uppercase nagtugot sa tukmang pagbutang sa gagmay nga mga wordmark. Ang lapad nga letra nga gilay-on (0.071em) sa monospaced nga bersyon naghatag og igong espasyo para sa uppercase nga teksto.
Mga interval ug porma
| Katuyoan | Kahulugan |
|---|---|
| Densidad | dasok |
| Batakang lakang | 12px |
| Radius sa butones | 6px |
| Radius sa kard | 6px |
| Mga anino | walay - mga utlanan imbes nga mga anino |
| Taliwala sa mga seksyon | 96-128px |
| Lapad sa panid | 1280px |
Ang AI motukod sa imong website sa estilo sa Vercel ug mopuno niini
- Pun-a og mga produkto ug mga post pinaagi sa link - Instagram, TikTok, Facebook.
- Ibalhin ang sulod gikan sa imong daang site—ipiho lang ang adres.
- Modernong disenyo sa pinakamaayong makina: React ( Next.js) nga adunay server rendering ug SEO optimization nga andam na gamiton.
- Bug-os nga awtomatik nga pag-optimize sa SEO para sa mga resulta sa pagpangita ug mga rekomendasyon sa neural network.
Parehas nga mga estilo
- Headspace — Usa ka maaraw nga suok sa kahimsog sa init nga papel
- WHOOP — Performance lab sa tungang gabii - puti nga mga lamesa sa klinikal nga lab ubos sa itom nga wanang sa teatro, usa ka purpura nga pulso sa kuryente
- Together AI — Research console sa papel nga glacial
- v0 by Vercel — Pagdrowing gamit ang lathe. Ang katukma ug gamit mao ang labing importante, diin ang matag elemento adunay klaro nga katuyoan sa usa ka limpyo ug perpekto nga teknikal nga nawong.
- Dovetail — Usa ka blueprint ubos sa itom nga bulan—halos dili makita nga mga linya sa graph, puti nga font, usa ka purpura nga kislap
- Glideapps — monochrome drafting table nga adunay usa ka electric turquoise sparkle
- Timescale — Pagdrowing sa inhenyeriya sa init nga graph paper
- UGLYCASH — Ang usa ka notebook nga gitabonan og sticker sa krema nga papel nagpakita sa ambiance sa usa ka maisog ug maximalist nga fintech nga mapasigarbuhong nagpakita sa kagubot niini.
- Sprout Social — Usa ka berde nga saha sa itom nga slate. Usa ka hayag nga accent sa usa ka estrikto nga monochrome nga canvas, ang kolor niini gigamit lamang alang sa aksyon, nga adunay masaligon nga geometric nga font nga nagsilbing mga timaan.
- Krea — gallery noir sa tungang gabii
- Evergreen — Solar greenhouse sa linen nga papel
- Factory — Ang terminal sa "war room" sa tungang gabii. Ang "pabrika" usa ka itom nga control panel diin ang usa ka puti nga kard motugpa nga daw flashlight—ang bugtong butang sa kwarto mao ang trabaho mismo.