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 — Түн ортасындағы «соғыс бөлмесі» терминалы. «Зауыт» – қара түсті басқару панелі, оған бір ақ карта фонарьмен жарықтандырылған хабарлама сияқты түседі – бөлмедегі жалғыз зат – жұмыстың өзі.