Vercel
Надрукований на білому папері термінал
Дизайн-система Vercel – це приклад дисциплінованої монохромності: майже біле полотно (#fafafa), чорний шрифт, тонкі межі та повна відсутність декоративного кольору. Візуальна мова нагадує термінал розробника, відмальований у друкованому вигляді - шрифт Geist Sans ледь помітний у масштабі «героїчний» з товщиною 400-450 і міжлітерним інтервалом -0.06em, у той час як Geist Mono наносить позначки, метадані і приклади літер 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 — Термінал «військова кімната» опівночі. «Завод» - це строга чорна панель управління, де єдина біла карта приземляється, немов освітлене ліхтариком повідомлення - єдиний об'єкт у кімнаті - це сама робота