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 — Редакційний журнал на папір теплого кремового кольору. Уявіть собі вдумливе есе з управління персоналом, оформлене у вигляді продукту — курсивний шрифт із засічками, що ніби шепоче крізь сучасний синій інтерфейс.