Dub
Контролна табла од мат оризова хартија на Link
Визуелниот систем на Даб има воздржана, речиси уредничка SaaS естетика: речиси бело платно споено со тенки рамки, наместо со испакнати елементи, со густа монохроматска типографија која обезбедува структурна поддршка и една светло сина боја (#2563eb) што остава впечаток. Површините остануваат рамни и без рамка на прв поглед, но секој контејнер има маргина од 1px #e5e5e5, што го евоцира чувството на печатен документ. Личноста се постигнува преку мал сет обоени акценти во боја на „апчиња“ (портокалова, зелена, виолетова) кои лебдат над неутралната палета и заглавија кои се чувствуваат сигурно и модерно без да бидат впечатливи. Компонентите се компактни и густи: олуци од 8px, радиус на картичка од 12px, етикети во форма на апчиња на 9999px и невидливи контроли наместо тешки, полни копчиња.
Страницата е изградена на центриран распоред со максимална ширина од приближно 1200 пиксели. Главниот елемент е центриран текстуален блок со три лебдечки елементи (партнерски програми, аналитика на конверзии, кратки врски) позиционирани хоризонтално над голем распоред на производот. Секциите се распоредени вертикално со конзистентни олуци од 64 пиксели, наизменично помеѓу бело платно и магла од хартија #f5f5f5 за тонално раздвојување. Долниот дел користи распоред во форма на Z: уредничкиот текст е центриран во средната третина, а лебдечките картички за кориснички интерфејс се прицврстени на левата и десната маргина, создавајќи асиметричен ритам сличен на списание. Облакот со лого е едноставна мрежа од 5x2, центриран на страницата. Навигацијата е минималистичка горна лента - лого лево, навигација во центарот, група од две копчиња (духовско копче „Најави се“ + пополнето копче „Регистрирај се“) десно - без фиксно или мега-мени. Распоредот на контролната табла на главниот прозорец прикажува класичен распоред на апликација со две колони: фиксна странична лента (слична на 240px) + област за содржина што ја дефинира густината на информациите за производот за посетителите пред да почнат да скролуваат.
Визуелните елементи се фокусирани на производот, а не на животниот стил. Главниот екран е центриран на голема снимка од екранот на контролната табла, што претставува макета на производ од реалниот свет со навигација во страничната лента, табела со податоци и лебдечки елементи на корисничкиот интерфејс, поставени како рамен панел на бело платно. Логоата на клиентите се прикажани во незаситена мрежа во сиви нијанси (beehiv, superperfoot, Chatbase, итн.) за да се признае нивниот учинок на социјалните медиуми, лишени од боја за да се овозможи единствениот син акцент на страницата да остане доминантен. Лебдечките картички на партнерите (мали профили и плочки со податоци за приходи/плаќања) се движат околу блокови од уреднички текст на дното, создавајќи чувство на длабочина без употреба на сенки на самиот текст. Моделот на испрекинатата мрежа во позадина е препознатлива карактеристика: тенок ред од мали точки со многу ниска непроѕирност создава текстура и чувство на систем за дизајн/површина за цртање, нагласувајќи го позиционирањето на страницата како „модерна платформа за атрибуција на линкови“. Иконографијата е минимална, со контури и пополнувања, и користи палета на акценти (мандарина портокалова, лаванда виолетова, нане зелена) за ознаки на функции. Не се користат фотографии, илустрации или 3Д модели - самиот кориснички интерфејс на производот е визуелен јазик.
Палета
Бренд
- 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 (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–14 пиксели и во елементи за прикажување на голем код со големина од 24 пиксели. Ова го обезбедува кредибилитетот на алатката за развивачи, што е во согласност со позиционирањето на производот на 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 — Уредничко списание на топла хартија во крем боја. Замислете промислен есеј за управување со човечки ресурси, претставен како производ - курзивен сериф фонт што шепоти низ модерен син интерфејс.