Vercel
Терминалыг цагаан цаасан дээр хэвлэв
Vercel дизайны систем нь сахилга баттай монохром хэлбэрээр хийгдсэн дасгал юм: бараг цагаан өнгийн зураг (#fafafa), хар фонт, нимгэн хүрээ, чимэглэлийн өнгө огт байхгүй. Харааны хэл нь хөгжүүлэгчийн терминалыг хэвлэмэл хэлбэрээр харуулсан мэт санагдуулдаг - Geist Sans нь "баатарлаг" хэмжээсээр 400-450 жинтэй, -0.06em үсэг хоорондын зайтай бараг уншигдахааргүй байдаг бол Geist Mono нь шошго, мета өгөгдөл, кодын дээжийг 11-13 пикселийн том хэмжээтэйгээр ашигладаг. Товчнууд нь цагаан дээр цэвэр хар эсвэл хар дээр цагаан өнгийн тод 6 пикселийн радиус эсвэл тэгш өнцөгт хэлбэртэй байдаг. Систем нь өнгөний оронд тодосгогч болон хэвлэмэл шатлалд тулгуурладаг бөгөөд гурвалжин тэмдэг (▲) болон хоёр мөртэй үгийн тэмдгийг цорын ганц брэндийн элемент болгон ашигладаг. Гадаргууг #fafafa → #ebebeb → #171717 дарааллаар бие биенийхээ дээр давхарлаж байрлуулсан бөгөөд сүүдэр эсвэл өнгөнөөс илүү өнгө аясыг өөрчлөх замаар гүнийг бий болгодог. Элемент бүр нь нягт нягтралтай 4 пикселийн торон дээр бүтээгдсэн бөгөөд үүний үр дүнд инженерийн тэмдэглэлийн дэвтэртэй төстэй интерфэйс бий болсон - нарийн, ажиллагаатай, цагаан орон зайнаас айдаггүй.
Контейнер нь 1280 пиксел өргөн, төвд нь байрлуулсан, хэвтээ өгөөмөр дэвсгэртэй (24-48 пиксел) юм. Үндсэн блок нь тэгш бус гурван бүсийн найрлагыг ашигладаг: зүүн талд нь том гарчиг, төвд нь брэндийн глиф, баруун талд нь "хөмсөг" блок. Үндсэн блокийн доор контентыг ээлжлэн зураасаар байрлуулсан: үйлчлүүлэгчийн лого бүхий бүтэн өргөнтэй зураас, дараа нь зүүн талд нь гарчиг, баруун талд нь бүтээгдэхүүний зохион байгуулалт бүхий хоёр баганатай "Агент бүтээгчид" хэсэг, дараа нь онцлог шинж чанартай гурван картын тор. Хэсгүүдийг хуваагч эсвэл дэвсгэрийн зөрүүгүйгээр 96-128 пикселийн босоо сувгаар тусгаарласан. Навигаци нь бүдгэрсэн дэвсгэртэй дан тогтмол 64 пикселийн самбар юм. Картын тор нь 16-24 пикселийн сувгуудтай хоёр эсвэл гурван баганатай зохион байгуулалтыг байнга ашигладаг. Нийт нягтрал нь авсаархан - текстийг уншихад хялбар, цагаан зай хангалттай боловч фонтын хэмжээ болон бүрэлдэхүүн хэсгийн хэмжээ нь хуудсыг агаартай мэт санагдахаас сэргийлдэг.
Зурагнууд нь сийрэг бөгөөд үргэлж ажиллагаатай байдаг. Гол харааны элемент нь хар гурвалжин (▲) бөгөөд энэ нь "том" масштаб дээр хөвж буй дүрс хэлбэрээр гарч ирдэг геометрийн брэндийн тэмдэг юм. Концепцийн баталгааны тууз дээрх үйлчлүүлэгчийн логонууд нь брэнд бүрийн бодит үгийн тэмдгийг саарал өнгөөр ашигладаг. Бүтээгдэхүүний загварууд (Notion-ийн чат интерфэйс, CLI терминалын гаралт, паспортын карт) нь жаазтай картуудын дотор гэрлийн горимын дэлгэцийн агшин хэлбэрээр суулгагдсан байдаг. Зураг, чимэглэл, 3D элемент байхгүй - систем нь цэвэр хэвлэмэл болон цагаан цаасан дээрх геометрийн дүрсүүд юм.
Палетт
Төвийг сахисан
- Obsidian
#171717— Үндсэн гарчиг, навигацийн хүрээ, бараан товчлуурын дүүргэлт болон жагсаалтын тэмдэглэгээ нь бараг хар өнгөтэй тул хатуу ширүүн байдал болон тод ханасан байдлаас зайлсхийдэг. - Paper White
#fafafa— Хуудасны зураг, картын гадаргуу, товчлууруудын гэрлийн дүүргэлт - энэ бол бусад бүх зүйл байрладаг стандарт дэвсгэр юм. - Pure White
#ffffff— Өргөгдсөн картын гадаргуу, оруулга, оролтын талбарууд. - Hairline
#ebebeb— Товчлуур, холбоос болон картууд дээрх 1 пикселийн хүрээ нь өндөр томруулах түвшинд харагдах боловч бага томруулах түвшинд харагдахгүй. - Ash
#c9c9c9— Идэвхгүй болгосон текст, дуугүй шошго, үйлчлүүлэгчийн логон дахь брэндийн усны тэмдэг. - Smoke
#a8a8a8— Хоёрдогч текст, орлуулагч текст, нарийн дүрс дүүргэлт.
Типографи
11-ээс 64 пиксел хүртэл · 6 алхам
- Geist Sans — солих: Inter · тоймууд 400, 450, 500 · Интерфэйс болон гарчгийн үндсэн фонт нь Vercel-ийн захиалгаар хийсэн геометрийн sans-serif бөгөөд том хэмжээтэй үед үсэг хоорондын зай багатай (56-64 пиксел дээр -0.06em, 30 пиксел дээр -0.05em) фонт юм. Хуудасны дээд хэсэгт байгаа гарчгийн хувьд 450 жинг сонгосон: Light-ээс илүү зузаан, харин Semi-Bold-ээс илүү цайвар, өөртөө итгэлтэй боловч хэт бардам бус өнгө аяс бий болгосон.
- Geist Mono — солих: JetBrains Mono · тоймууд 400, 500, 600 · Тайлбар, кодын блок, CLI гаралтын самбар, мета өгөгдөл болон том үсгийн текстэд зориулсан нэг зайтай хоёрдогч фонт. 8px/600px/том үсгийн хослол нь жижиг үгийн тэмдэглэгээг нарийн байрлуулах боломжийг олгодог. Нэг зайтай хувилбарт өргөн үсгийн зай (0.071em) нь том үсгийн текстэд хангалттай зай өгдөг.
Интервал ба хэлбэр
| Зорилго | Утга |
|---|---|
| Нягтрал | нягт |
| Үндсэн алхам | 12px |
| Товчлуурын радиус | 6px |
| Картын радиус | 6px |
| Сүүдэр | сүүдрийн оронд хил хязгаар байхгүй |
| Хэсгүүдийн хооронд | 96-128px |
| Хуудасны өргөн | 1280px |
Хиймэл оюун ухаан таны вэбсайтыг Vercel хэв маягаар бүтээж, дүүргэх болно
- Instagram, TikTok, Facebook холбоосоор дамжуулан бүтээгдэхүүн болон нийтлэлүүдээр дүүргээрэй.
- Хуучин сайтаасаа контентыг шилжүүлэх - зүгээр л хаягийг нь зааж өгнө үү.
- Шилдэг хөдөлгүүр дээрх орчин үеийн дизайн: Серверийн рендеринг болон SEO оновчлолыг хайрцагнаас нь гарган React ( Next.js).
- Хайлтын үр дүн болон мэдрэлийн сүлжээний зөвлөмжид зориулсан бүрэн автомат SEO оновчлол.
Төстэй хэв маяг
- Headspace — Дулаан цаасан дээрх нарлаг эрүүл мэндийн булан
- WHOOP — Шөнө дундын үзүүлбэрийн лаборатори - хар театрын хоосон зайн доорх цагаан клиник лабораторийн ширээнүүд, ганц нил ягаан цахилгаан импульс
- Together AI — Мөстлөгийн цаасан дээрх судалгааны консол
- v0 by Vercel — Токарийн зураг. Нарийвчлал болон ажиллагаа нь хамгийн чухал бөгөөд элемент бүр нь цэвэрхэн, техникийн хувьд төгс гадаргуу дээр тодорхой үүрэг гүйцэтгэдэг.
- Dovetail — Хар сарны доорх зураг төсөл — бараг харагдахгүй график шугам, цагаан фонт, нэг нил ягаан гялалзсан зураг
- Glideapps — Нэг ширхэг цахилгаан оюу гялалзсан өнгөлгөөтэй монохром зургийн ширээ
- Timescale — Дулаан график цаасан дээр инженерийн зураг зурах
- UGLYCASH — Цөцгий өнгийн цаасан дээр наалттай дэвтэр нь зоримог, максималист финтек компанийн эмх замбараагүй байдлыг бахархалтайгаар харуулсан уур амьсгалыг тодотгож байна.
- Sprout Social — Хар занар дээрх ногоон нахиа. Хатуу монохром зураг дээрх тод өнгийн чимэглэл, зөвхөн үйл явдалд ашигласан бөгөөд өөртөө итгэлтэй геометрийн фонт нь замын тэмдэг болж үйлчилнэ.
- Krea — шөнө дундын хар галерей
- Evergreen — Маалинган цаасан дээрх нарны эрчим хүчээр ажилладаг хүлэмж
- Factory — Шөнө дундын "дайны өрөө"-ний терминал. "Үйлдвэр" бол хар өнгийн удирдлагын самбар бөгөөд гар чийдэнгийн гэрэлд ассан дохионы самбар шиг ганц цагаан карт буудаг бөгөөд өрөөнд байгаа цорын ганц объект бол бүтээл өөрөө юм.