Vercel
Lub davhlau ya nyob twg luam tawm rau ntawm daim ntawv dawb
Lub Vercel tsim qauv system yog ib qho kev tawm dag zog hauv monochrome disciplined: ib daim ntaub canvas ze-dawb (#fafafa), hom dub, ciam teb nyias nyias, thiab tsis muaj xim zoo nkauj kiag li. Cov lus pom ua rau tus tsim tawm lub davhlau ya nyob twg ua rau luam tawm - Geist Sans tsis tshua nyeem tau ntawm qhov ntsuas "heroic" nrog qhov hnyav ntawm 400-450 thiab qhov sib nrug ntawm tsab ntawv ntawm -0.06em, thaum Geist Mono siv cov ntawv lo, metadata, thiab cov qauv code hauv 11-13px caps. Cov nyees khawm yog ntse 6px radii lossis rectangles ntawm cov xim dub ntshiab ntawm dawb lossis dawb ntawm dub. Lub system vam khom rau qhov sib piv thiab typographic hierarchy es tsis yog xim, siv lub cim triangular (▲) thiab ob kab wordmark ua cov ntsiab lus branding xwb. Cov nto yog stacked rau saum ib leeg hauv qhov kev txiav txim #fafafa → #ebebeb → #171717, tsim qhov tob los ntawm kev hloov pauv cov nqi tonal es tsis yog duab ntxoov ntxoo lossis xim. Txhua lub ntsiab lus yog tsim los ntawm 4px daim phiaj nrog qhov sib txawv me me, ua rau muaj qhov interface zoo li phau ntawv sau ntawm tus engineer - meej, ua haujlwm tau zoo, thiab tsis ntshai qhov chaw dawb.
Lub thawv yog 1280px dav, nyob hauv nruab nrab, nrog rau cov padding kab rov tav dav (24-48px). Lub thaiv tseem ceeb siv cov khoom sib xyaw ua ke peb-cheeb tsam tsis sib xws: lub npe loj nyob rau sab laug, lub cim lag luam nyob rau hauv nruab nrab, thiab lub thaiv "eyebrow" nyob rau sab xis. Hauv qab lub thaiv tseem ceeb, cov ntsiab lus tau teeb tsa ua kab txaij sib hloov: ib kab txaij dav dav nrog lub logo ntawm tus neeg siv khoom, ua raws li ob-kab ntawv "Agent Creators" nrog lub npe nyob rau sab laug thiab cov khoom tsim ntawm sab xis, ua raws li daim phiaj ntawm peb daim npav nrog cov yam ntxwv. Cov ntu raug sib cais los ntawm cov kab ntsug ntawm 96-128px tsis muaj cov khoom faib lossis keeb kwm yav dhau los. Kev taw qhia yog ib lub vaj huam sib luag 64px ruaj khov nrog keeb kwm yav dhau los tsis meej. Daim npav grids siv cov qauv ob lossis peb-kab ntawv nrog 16-24px gutters. Qhov ceev tag nrho yog compact - cov ntawv nyeem yooj yim, muaj qhov chaw dawb ntau, tab sis qhov loj me ntawm cov ntawv thiab cov khoom sib xyaw ua rau nplooj ntawv tsis hnov zoo li airy.
Cov duab tsis tshua muaj thiab ib txwm ua haujlwm tau zoo. Lub ntsiab lus pom yog lub duab peb ceg dub (▲) - lub cim lag luam geometric uas tshwm sim ua lub silhouette hovering ntawm qhov ntsuas "capital". Cov cim lag luam ntawm cov ntawv pov thawj-ntawm-lub tswv yim siv txhua lub npe cov cim lus tiag tiag hauv greyscale. Cov khoom mockups (Notion's chat interface, CLI terminal output, passport card) tau muab tso rau hauv cov duab thaij duab hom teeb pom kev zoo hauv cov ntawv framed. Tsis muaj duab, cov duab kos, lossis cov ntsiab lus 3D - lub kaw lus yog cov ntawv sau thiab cov duab geometric ntawm daim ntawv dawb.
Xim av
Nruab nrab
- Obsidian
#171717— Cov npe tseem ceeb, cov ciam teb navigation, cov nyees khawm tsaus nti, thiab cov cim npe yog yuav luag dub, zam kev ua kom tawv ncauj thiab ci ntsa iab. - Paper White
#fafafa— Cov nplooj ntawv canvas, daim npav nto, lub teeb ci ntsa iab ntawm cov nyees khawm - qhov no yog keeb kwm yav dhau los uas txhua yam nyob rau ntawd. - Pure White
#ffffff— Cov npoo ntawm daim npav uas tsa siab, cov ntawv ntxig, thiab cov teb nkag. - Hairline
#ebebeb— Cov ciam teb 1px ntawm cov nyees khawm, cov txuas, thiab cov ntawv teev lus pom tau ntawm qib zoom siab, tab sis tsis pom ntawm qib zoom qis. - Ash
#c9c9c9— Cov ntawv nyeem tsis ua haujlwm, cov ntawv lo tsis muaj suab, cov cim dej ntawm lub npe lag luam hauv cov logos ntawm cov neeg siv khoom. - Smoke
#a8a8a8— Cov ntawv nyeem thib ob, cov ntawv sau qhov chaw, cov cim me me.
Kev sau ntawv
txij li 11 mus rau 64px · 6 kauj ruam
- Geist Sans — hloov: Inter · cov qauv qhia 400, 450, 500 · Tus ntawv tseem ceeb rau lub interface thiab cov npe yog tus qauv geometric sans-serif los ntawm Vercel nrog qhov sib nrug ntawm cov ntawv me me ntawm qhov loj me (-0.06em ntawm 56-64px, -0.05em ntawm 30px). Rau cov npe nyob rau sab saum toj ntawm nplooj ntawv, qhov hnyav 450 tau xaiv: tuab dua li Light tab sis sib dua li Semi-Bold, tsim kom muaj lub suab ntseeg siab, tab sis tsis siab dhau.
- Geist Mono — hloov: JetBrains Mono · cov qauv qhia 400, 500, 600 · Ib hom ntawv thib ob uas muaj qhov sib nrug ib leeg rau cov lus piav qhia, cov ntawv cim, cov vaj huam sib luag tso zis CLI, cov ntaub ntawv metadata, thiab cov ntawv loj. Qhov sib xyaw ua ke 8px/600px/cov ntawv loj tso cai rau kev tso cov cim me me kom raug. Qhov sib nrug ntawm cov ntawv dav (0.071em) hauv qhov version uas muaj qhov sib nrug ib leeg muab qhov chaw dav rau cov ntawv loj.
Lub sijhawm thiab daim ntawv
| Lub Hom Phiaj | Lub ntsiab lus |
|---|---|
| Qhov Ceev | ntom ntom |
| Kauj ruam yooj yim | 12px |
| Lub vojvoog ntawm lub pob | 6px |
| Lub vojvoog ntawm daim npav | 6px |
| Duab ntxoov ntxoo | tsis muaj ciam teb es tsis yog duab ntxoov ntxoo |
| Nruab nrab ntawm cov ntu | 96-128px |
| Qhov dav ntawm nplooj ntawv | 1280px |
AI yuav tsim koj lub vev xaib hauv hom ntawv Vercel thiab sau nws
- Sau cov khoom thiab cov ntawv tshaj tawm los ntawm qhov txuas - Instagram, TikTok, Facebook.
- Hloov cov ntsiab lus ntawm koj lub xaib qub - tsuas yog qhia qhov chaw nyob xwb.
- Tsim qauv niaj hnub ntawm lub cav zoo tshaj plaws: React ( Next.js) nrog rau kev ua haujlwm ntawm lub server thiab kev ua kom zoo dua SEO tawm ntawm lub thawv.
- Kev ua kom zoo dua SEO tag nrho rau cov txiaj ntsig tshawb nrhiav thiab cov lus pom zoo ntawm neural network.
Cov qauv zoo sib xws
- Headspace — Ib lub ces kaum noj qab haus huv hnub ci ntsa iab rau ntawm daim ntawv sov so
- WHOOP — Chav kuaj mob ua yeeb yam thaum ib tag hmo - cov rooj kuaj mob dawb hauv qab qhov chaw ua yeeb yam dub, ib lub zog hluav taws xob xim av
- Together AI — Lub console tshawb fawb ntawm daim ntawv glacial
- v0 by Vercel — Kev kos duab ntawm lub tshuab dhos. Kev ua kom raug thiab kev ua haujlwm yog qhov tseem ceeb, nrog txhua yam khoom ua haujlwm rau lub hom phiaj meej ntawm qhov chaw huv si, zoo meej.
- Dovetail — Ib daim duab qhia hauv qab lub hli dub—cov kab kos uas tsis pom tseeb, cov ntawv dawb, ib qho ci ntsa iab xim ntshav
- Glideapps — Rooj kos duab monochrome nrog ib lub teeb ci ntsa iab turquoise hluav taws xob
- Timescale — Kev kos duab engineering ntawm daim ntawv graph sov
- UGLYCASH — Ib phau ntawv sau uas muaj daim nplaum lo rau ntawm daim ntawv xim dawb qhia txog qhov chaw ntawm lub tuam txhab fintech uas siab tawv thiab siab tshaj plaws uas nthuav tawm nws qhov kev tsis meej pem.
- Sprout Social — Ib tsob ntoo ntsuab ntawm daim slate dub. Ib qho ci ntsa iab ntawm daim ntaub monochrome, uas tsuas yog siv rau kev ua haujlwm xwb, nrog rau cov ntawv geometric uas muaj kev ntseeg siab ua lub cim qhia.
- Krea — gallery noir thaum ib tag hmo
- Evergreen — Tsev cog khoom hnub ci rau ntawm daim ntawv linen
- Factory — Lub chaw nres tsheb "chav ua tsov rog" thaum ib tag hmo. Lub "factory" yog lub vaj huam sib luag dub uas muaj ib daim npav dawb zoo li lub teeb ci ntsa iab - tsuas yog yam khoom hauv chav yog txoj haujlwm nws tus kheej xwb.