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