Цветовая палитра в духе Vercel
Палитра в духе Vercel - строгий чёрно-белый вид девелоперского бренда: чисто чёрный фон, белый текст и элементы интерфейса, и один синий акцент, зарезервированный для основного призыва к действию.
Посмотрите, как палитра в духе Vercel выглядит в реальном, живом интерфейсе ниже - не на плоском свотче. Переключитесь на «Ваша палитра», чтобы увидеть свои цвета в том же интерфейсе.
Как выглядит палитра в духе Vercel?
Бренды девелоперской инфраструктуры часто намеренно используют урезанную, почти брутальную чёрно-белую палитру, чтобы сигнализировать точность и серьёзность - ближе к терминалу, чем к потребительскому приложению. Цвет трактуется как дефицитный ресурс: почти всё в градациях серого, а единственный насыщенный цвет, который всё же появляется, становится самым важным элементом на экране.
Этот мокап - центрированный тёмный hero-блок с окном терминала и кнопкой деплоя - заимствует этот высококонтрастный подход «монохром плюс один акцент», чтобы показать, как палитра работает, когда цвету почти негде спрятаться. Это оригинальный макет в этом духе, а не копия реальной брендовой системы какого-либо конкретного продукта.
Ключевые визуальные характеристики
- Чисто чёрный или почти чёрный фон по всей странице, а не только в hero-блоке
- Белый или почти белый текст и границы, обеспечивающие основной контраст
- Центрированный, симметричный hero-блок вместо асимметричного двухколоночного разделения
- Терминал или сниппет кода, оформленный как элемент дизайна уровня hero-блока
- Ровно один насыщенный акцентный цвет, зарезервированный для основной кнопки призыва к действию
Цветовые характеристики
- Чёрный и белый несут на себе почти весь интерфейс - цвет трактуется как редкий, осознанный сигнал
- Один синий (или столь же яркий) акцент, используемый только для самого важного действия
- Границы и второстепенный текст в градациях серого вместо второго фирменного цвета
Типографика
- Геометрический или гротескный шрифт для заголовков, часто набранный капслоком или с плотным трекингом
- Моноширинный шрифт для вывода терминала и сниппетов кода, усиливающий ощущение девелоперского инструмента
- Высокий контраст между крупными витринными заголовками и мелким, приглушённым вспомогательным текстом
UI-паттерны
- Центрированный hero-блок с заголовком, подзаголовком и одной основной кнопкой
- Сниппет терминала или командной строки, показанный как декоративный, почти реалистичный элемент интерфейса
- Минимальная верхняя панель только с логотипом и одной-двумя ссылками
- Много свободного пространства вокруг hero-блока вместо плотной раскладки в первом экране
Частые вопросы
Какие цвета обычно используются в интерфейсе в духе Vercel?
В основном чисто чёрный и белый, и ровно один насыщенный акцентный цвет - часто синий - зарезервированный для самого важного действия на странице, например кнопки «Deploy».
Это официальные цвета бренда Vercel?
Нет - это оригинальный макет, вдохновлённый общим видом чёрно-белых брендов девелоперской инфраструктуры вроде Vercel, а не копия его официальной цветовой палитры или защищённого товарным знаком дизайна.
Сложно ли применить почти чёрно-белую палитру к своему сайту?
На самом деле это одна из самых простых палитр для переиспользования - выберите почти чёрный и почти белый для базы, затем один акцентный цвет для кнопок и ссылок, и не добавляйте второй яркий цвет.
Можно ли посмотреть свои цвета в этом интерфейсе в духе Vercel, а не только палитру по умолчанию?
Да - переключите тумблер «Ваша палитра» над предпросмотром, чтобы увидеть свои текущие цвета в живом интерфейсе в духе Vercel вместо цветов по умолчанию.