Vivid+Co

призматический свет сквозь обсидиан

Vivid+Co работает в кинематографической темной пустоте: почти черный холст #101010–#495764, прерываемый единственным почти белым оттенком (#fffdf9), используемым для почти всех шрифтов и элементов интерфейса. Типографика в основном выполнена шрифтом Neue Montreal толщиной 400 — намеренный отказ от жирного шрифта, где авторитетность достигается за счет масштаба (136px и 105px), а не веса. Фирменным приемом является хроматическая призма: блоки насыщенного красного/зеленого/синего света, разделенные по RGB, просачиваются сквозь стеклянные кубы, нарушая монохромную поверхность. Макет центрирован и просторен; навигация, основной текст и ссылки выполнены в одном цвете #fffdf9 без отдельных акцентных кнопок, заливок и теней — дифференциация достигается за счет интервалов, масштаба и радужного артефакта, который является единственным цветовым акцентом бренда.

Темный холст, занимающий всю ширину страницы, с одной колонкой контента максимальной шириной ~1440px. Основной элемент: центрированный призматический артефакт с перекрывающимся заголовком (текст пересекает кубы) и подзаголовком, выровненным по левому краю. Навигация расположена в тонкой верхней панели: слева — логотип, справа — четыре невидимые ссылки, а в конце строки — выделенная кнопка «Контакты». Ритм разделов чередуется между панелями-героями во всю высоту экрана и более узкими полосами контента с промежутками ~108px. Расположение контента асимметрично: призматический артефакт служит визуальным центром, а заголовки обтекают его. Текстовые блоки в одну колонку имеют максимальную ширину около 440px; отсутствуют многоколоночные сетки, матрицы карточек и таблицы цен. Нижний колонтитул представляет собой тонкую полосу, разделенную тонкой линией, с двумя колонками метаданных.

Главный элемент дизайна — абстрактное 3D-изображение стеклянных кубов с хроматической аберрацией по краям, разделенными по RGB-цвету. Никаких фотографий, никаких изображений людей, никаких снимков продукции. Призма — это и есть имидж бренда, все остальное — монохромная типография на темном холсте. Иконография минимальна: тонкие навигационные надписи и небольшой акцент в виде курсора/глифа (область 142765) в конце одного из заголовков намекают на единственную монолинейную иконку 16px. Никаких иллюстраций, никаких декоративных узоров, никаких текстур.

Тёмный Монохром Высокий контраст

https://vividand.co

Палитра

Нейтральные

Bone White #fffdf9 — Основной текст, подписи навигации, цвет ссылок, заливка заголовков — почти белый цвет, занимающий все типографические поверхности на темном холсте.
Obsidian #101010 — Холст страницы, заливка фона для главного и разделительных полос — глубокий черный цвет, внутри которого находится призматический артефакт.
Graphite Veil #495764 — За заголовками и блоками контента доминирует холодный темный сланец, придающий холсту глубину без использования плоского черного цвета.
Ash Border #403f3f — Едва заметная разделительная линия и контур карточки — используются в 1px для разделения строк, не конкурируя с текстом.
Fog Blue #6f879c — Приглушенный второстепенный текст и едва заметные надписи на кнопках (контраст 3,7:1) — обозначения категорий услуг, такие как «Стратегия», «Креатив», «Коммуникации + маркетинг», воспринимаются как невыделенные метаданные.
Pure Black #000000 — Декоративная заливка для иконок и иллюстраций в формате SVG — используется в изображении призмы и глифах иконок; не является фоном.

Типографика

от 15 до 136px · 9 ступеней

Neue Montreal — замена: Söhne · начертания 400, 700 · Эксклюзивный шрифт используется во всем пользовательском интерфейсе — заголовках, основном тексте, навигации, кнопках, ссылках, нижнем колонтитуле. Толщина 400 — значение по умолчанию; толщина 700 зарезервирована только для подзаголовков. Заголовки с толщиной 105px и 136px имеют межстрочный интервал 1,00–1,01 и межбуквенное расстояние -0.02em, создавая кинематографичные, расположенные друг над другом заголовки, которые воспринимаются скорее как скульптурные, чем типографические.

Интервалы и форма

Назначение	Значение
Плотность	просторная
Базовый шаг	7px
Радиус кнопок	0px
Радиус карточек	15px
Тени	нет — границы вместо теней
Между секциями	108px
Ширина страницы	1440px

ИИ соберёт ваш сайт в стиле Vivid+Co и наполнит его

Наполнит товарами и постами по ссылке — Instagram, TikTok, Facebook.
Перенесёт контент со старого сайта — достаточно указать адрес.
Современный дизайн на лучшем движке: React (Next.js) с серверным рендерингом и SEO-оптимизацией из коробки.
Полная автоматическая SEO-оптимизация под поисковую выдачу и рекомендации нейросетей.

Создать сайт в этом стиле

Vivid+Co

Палитра

Типографика

Интервалы и форма

ИИ соберёт ваш сайт в стиле Vivid+Co и наполнит его

Похожие стили