Dub
Контролен панел с матова оризова хартия на Link
Визуалната система на Dub има сдържана, почти редакционна SaaS естетика: почти бяло платно, държано заедно от тънки рамки, а не от изпъкнали елементи, с плътна монохромна типография, осигуряваща структурна поддръжка, и един ярко син цвят (#2563eb), който прави впечатление. Повърхностите остават плоски и без рамки на пръв поглед, но всеки контейнер има поле от 1px #e5e5e5, което наподобява усещането за отпечатан документ. Индивидуалността се постига чрез малък набор от цветни акценти тип „хапче“ (оранжево, зелено, лилаво), които се носят над неутралната палитра, и заглавки, които изглеждат уверени и модерни, без да са крещящи. Компонентите са компактни и плътни: улейчета от 8px, радиус на картата от 12px, етикети с форма на хапче с размер 9999px и невидими контроли вместо тежки, запълнени бутони.
Страницата е изградена върху центрирано оформление с максимална ширина от приблизително 1200px. Основният елемент е центриран текстов блок с три плаващи елемента (Партньорски програми, Анализ на реализациите, Кратки връзки), разположени хоризонтално над голямо оформление на продукта. Секциите са подредени вертикално с постоянни междинни линии от 64px, редуващи се между бяло платно и хартиена мъгла #f5f5f5 за тонално разделяне. Долната секция използва Z-образно оформление: редакционният текст е центриран в средната третина, а плаващите потребителски интерфейсни карти са закотвени към левия и десния полета, създавайки асиметричен, подобен на списание ритъм. Облакът с логото е проста мрежа 5x2, центрирана на страницата. Навигацията е минималистична горна лента - логото отляво, навигацията в центъра, група от два бутона (бутон „Вход“ + запълнен бутон „Регистрация“) отдясно - без фиксирано или мега-меню. Оформлението на таблото за управление на главния прозорец показва класическо оформление на приложението с две колони: фиксирана странична лента (подобна на 240px) + област със съдържание, която определя плътността на информацията за продукта за посетителите, преди да започнат да превъртат.
Визуалните елементи са фокусирани върху продукта, а не върху начина на живот. Главният екран е центриран върху голяма екранна снимка на таблото, представляваща макет на продукт от реалния свят със странична лента за навигация, таблица с данни и плаващи елементи на потребителския интерфейс, разположени като плосък панел върху бяло платно. Логотата на клиентите се показват в обезцветена мрежа в сиви тонове (пчелен кошер, суперсила, 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 — Редакционно списание на топла кремава хартия. Представете си замислено есе за управлението на човешките ресурси, представено като продукт - курсивен шрифт със серифни букви, шепнещ през модерен син интерфейс.