Dub
матовая панель управления Link на рисовой бумаге
Визуальная система Dub — это сдержанная, почти редакционная эстетика SaaS: почти белый холст, скрепленный тонкими рамками, а не выступающими элементами, с плотной монохромной типографией, выполняющей структурную работу, и одним ярко-синим цветом (#2563eb), говорящим за себя. Поверхности остаются плоскими и безрамочными на первый взгляд, но каждый контейнер имеет 1px #e5e5e5 край, создающий ощущение печатного документа. Индивидуальность достигается за счет небольшого набора цветных акцентов в виде «таблеток» (оранжевый, зеленый, фиолетовый), которые парят над нейтральной палитрой, и заголовков, которые выглядят уверенно и современно, но не кричаще. Компоненты компактны и плотны: 8px зазоры, 12px радиус карточки, метки в форме таблеток на 9999px и невидимые элементы управления вместо тяжелых заполненных кнопок.
Страница построена по центрированной модели с максимальной шириной, приблизительно равной 1200px. Главный элемент представляет собой центрированный текстовый блок с тремя плавающими элементами (Партнерские программы, Аналитика конверсий, Короткие ссылки), расположенными горизонтально над большим макетом продукта. Разделы расположены вертикально с постоянными 64px промежутками, чередуясь между белым холстом и #f5f5f5 бумажной дымкой для тонального разделения. В нижней части используется Z-образный шаблон: редакционный текст центрирован в средней трети, а плавающие карточки пользовательского интерфейса закреплены у левого и правого полей, создавая асимметричный, журнальный ритм. Облако логотипов представляет собой простую сетку 5×2, центрированную на странице. Навигация представляет собой минималистичную верхнюю панель — логотип слева, навигация по центру, группа из двух кнопок (призрачная кнопка «Вход» + заполненная кнопка «Регистрация») справа — без фиксированного или мега-меню. Макет панели управления в главном окне демонстрирует классическую двухколоночную оболочку приложения: фиксированная боковая панель (похожая на240px) + область контента, определяющая плотность информации о продукте для посетителей до того, как они начнут прокручивать страницу.
Визуальный ряд ориентирован на продукт, а не на стиль жизни. В центре главного экрана — большой скриншот панели управления, представляющий собой реальный макет продукта с боковой панелью навигации, таблицей данных и плавающими элементами пользовательского интерфейса, — размещенный в виде плоской панели на белом холсте. Логотипы клиентов отображаются в обесцвеченной сетке серых тонов (beehiv, superpower, Chatbase и т. д.) для подтверждения их эффективности в социальных сетях, без цвета, чтобы единственный синий акцент страницы оставался доминирующим. Плавающие карточки партнеров (небольшой профиль + плитки с данными о доходах/выплатах) перемещаются вокруг блоков редакционного текста в нижней части, создавая ощущение глубины без использования теней на самом тексте. Фоновый узор в виде точечной сетки — это фирменный знак: тонкий ряд маленьких точек с очень низкой прозрачностью создает текстуру и ощущение системы дизайна/поверхности чертежа, подчеркивая позиционирование как «современной платформы атрибуции ссылок». Иконография небольшая, с контурами и заливкой, и использует акцентную палитру (оранжевый мандарин, фиолетовый лавандовый, зеленый мятный) для тегов функций. Никаких фотографий, иллюстраций, 3D-моделей — пользовательский интерфейс продукта САМ является визуальным языком.
Палитра
Бренд
- Electric Blue
#2563eb— Основной фирменный цвет — логотип, ссылки, ключевые показатели, активные состояния, акценты значков. Насыщенный синий цвет на белом фоне создает единственный момент визуальной привлекательности системы. - Deep Sapphire
#1e40af— Основной фон кнопки действия, ярко выраженная заливка призыва к действию — единственный цвет, обозначающий действие, используется экономно, чтобы привлечь внимание.
Нейтральные
- Canvas White
#ffffff— Фон страницы, поверхность карточки, всплывающие панели — абсолютная основа каждого экрана. - Paper Mist
#f5f5f5— Ненавязчивое изменение цвета поверхности для вложенных карточек, дополнительных панелей и заливки при наведении курсора. - Ash
#e5e5e5— Тонкие границы на картах, входных разъемах и разделителях — это структурная линия, которая скрепляет систему. - Smoke
#d4d4d4— Более четкие границы для выделенных контейнеров и контуров дополнительных кнопок. - Pebble
#c8c8c8— Границы, контуры элементов управления и структурные разделители со средним контрастом. Не следует выделять этот цвет в качестве основного цвета призыва к действию. - Midnight Ink
#0a0a0a— Основной текст кнопок, выделенные кнопки, текст навигации — почти чёрный цвет для максимального контраста.
Типографика
от 11 до 48px · 9 ступеней
- Satoshi — замена: Inter (weight 500 · начертания 500 · Заголовки для отображения — используются только в строке 36–48px для заголовков заголовка и разделов. Тип шрифта — 500 (средний, не жирный): заголовки выглядят уверенно и современно, но никогда не кричат. Геометрические пропорции Сатоши придают шрифту слегка редакционный, современный вид, который не может воспроизвести основной текст Inter.
- Inter — замена: Inter (native) · начертания 400, 500, 600 · Основной текст, метки пользовательского интерфейса, навигация, подзаголовки, небольшие заголовки. Inter — это основная рабочая лошадка, обрабатывающая все, от микро-меток 11px до второстепенных заголовков 30px. Вес 400 — это значение по умолчанию для основного текста, 500 — для выделенных элементов и меток кнопок, 600 зарезервировано для важных меток пользовательского интерфейса. Размер 16px с высотой строки 1,5 является наиболее часто встречающимся одношаговым размером (1220 случаев), что подтверждает, что 16px является каноническим размером основного текста.
- Geist Mono — замена: JetBrains Mono or IBM Plex Mono · начертания 400, 500 · Фрагменты кода, технические метаданные, встроенные моноширинные токены. Используются в блоках кода в коде в позиции 12–14px и в крупных элементах отображения кода в позиции 24px. Обеспечивает доверие к инструменту разработчика, соответствующее позиционированию продукта Dub.
Интервалы и форма
| Назначение | Значение |
|---|---|
| Плотность | средняя |
| Базовый шаг | 8px |
| Радиус кнопок | 8px |
| Радиус карточек | 12px |
| Тени | нет — границы вместо теней |
| Между секциями | 64px |
| Ширина страницы | 1200px |
ИИ соберёт ваш сайт в стиле Dub и наполнит его
- Наполнит товарами и постами по ссылке — Instagram, TikTok, Facebook.
- Перенесёт контент со старого сайта — достаточно указать адрес.
- Современный дизайн на лучшем движке: React (Next.js) с серверным рендерингом и SEO-оптимизацией из коробки.
- Полная автоматическая SEO-оптимизация под поисковую выдачу и рекомендации нейросетей.
Похожие стили
- ElevenLabs — Фоторепортаж в теплых кремовых тонах с ненавязчивыми заголовками. Блокнот в стиле Баухаус — бумага цвета яич…
- Awesomic — Редакционная цинковая сетка с оранжевыми знаками препинания, напоминающими конфетти
- Monad — редакционный технический журнал на теплом пергаменте
- Seline Analytics — Тихий аналитический стол на тёплой бумаге
- Notion — Теплый бумажный блокнот под полуденным солнцем
- Anthropic — Научный полевой журнал на теплом пергаменте — спокойные поверхности цвета слоновой кости, редакционные загол…
- Calendly — Темно-синие чернила на холодном мраморе
- Augen Pro — Презентация Apple на белом фоне — клинический, невесомый, электрический синий как единственный акцент в моно…
- Antimetal — Редакционная хроника на кремовой бумаге — тихое утро в научном журнале, где сдержанность свидетельствует об …
- Perk — Электрический лайм на теплой пергаментной бумаге
- Ditto — Залитая солнцем мастерская по созданию образцов полевых цветов. Теплые кремовые поверхности, яркий желтый ос…
- Officevibe — Редакционный журнал на бумаге теплого кремового цвета. Представьте себе вдумчивое эссе по управлению персона…