Dub
Link'ның мат дөге кәгазе белән идарә итү панеле
Dub'ның визуаль системасы тыйнак, диярлек редакция SaaS эстетикасына ия: чыгып торган элементлар урынына нечкә чикләр белән тоташтырылган ак төстәге полотно, структураны ныгытучы тыгыз монохром типография һәм ачык зәңгәр төс (#2563eb) үзенчәлекле. Өслекләр беренче карашка яссы һәм рамсыз кала, ләкин һәр контейнерда басылган документ хисен уята торган 1 пиксель зурлыктагы #e5e5e5 кыр бар. Шәхес нейтраль палитра өстендә йөзеп йөрүче кечкенә төсле "таблетка" акцентлары (кызгылт сары, яшел, шәмәхә төстәге) һәм ялтыравыклы булмыйча, ышанычлы һәм заманча тоелган башлыклар аша шәхескә ирешелә. Компонентлар компакт һәм тыгыз: 8 пиксель суүткәргечләр, 12 пиксель карта радиусы, 9999 пиксель зурлыктагы таблетка формасындагы этикеткалар һәм авыр, тутырылган төймәләр урынына күренми торган идарә итү элементлары.
Бит якынча 1200 пиксель киңлектәге үзәкләштерелгән макет нигезендә төзелгән. Төп элемент - зур продукт макетының өстендә горизонталь рәвештә урнаштырылган өч йөзүче элементлы (Партнерлык программалары, Конверсия аналитикасы, Кыска сылтамалар) үзәкләштерелгән текст блогы. Бүлекләр вертикаль рәвештә 64 пиксель зурлыктагы суүткәргечләр белән урнаштырылган, алар ак холст һәм #f5f5f5 кәгазь томаннары белән чиратлашып, тональ аеру өчен кулланыла. Аскы өлеш Z формасындагы макетны куллана: редакция тексты урта өчтән бер өлештә үзәкләштерелгән, ә йөзүче UI карталары сул һәм уң кырыйларга беркетелгән, асимметрик, журнал сыман ритм тудыра. Логотип болыты - битнең үзәгендә урнашкан гади 5x2 зурлыктагы челтәр. Навигация - минималист өске панель - сулда логотип, үзәктә навигация, уңда ике төймә төркеме ("Керү" төймәсе + тутырылган "Теркәлү" төймәсе) - билгеләнгән яки мега-менюсыз. Төп тәрәзәнең идарә итү панеле макеты классик ике баганалы кушымта макетын күрсәтә: билгеләнгән ян панель (240 пиксельгә охшаш) + кулланучылар өчен продукт турындагы мәгълүмат тыгызлыгын билгели торган эчтәлек өлкәсе, алар скроллингны башлар алдыннан.
Визуаль материаллар яшәү рәвешенә түгел, ә продуктка юнәлтелгән. Төп экран зур панель скриншоты үзәгендә урнашкан, ул ян панель навигациясе, мәгълүматлар таблицасы һәм йөзүче UI элементлары белән реаль дөнья продукт макетын күрсәтә, ак полотнода яссы панель рәвешендә урнаштырылган. Клиент логотиплары социаль медиа эшчәнлеген тану өчен туендырылмаган соры төстәге челтәрдә (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 дән 48 пиксельгә кадәр · 9 адым
- Satoshi — алыштыру: Inter (weight 500 · контурлар 500 · Башлыкларны күрсәтү – башлык һәм бүлек исемнәре өчен 36–48 пиксель юлларда гына кулланыла. Шрифт калынлыгы – 500 (уртача, калын түгел): Башлыклар ышанычлы һәм заманча күренә, ләкин беркайчан да артык көчле түгел. Сатошиның геометрик пропорцияләре шрифтка бераз редакция, заманча тоем бирә, ә Inter'ның төп тексты кабатлый алмый.
- Inter — алыштыру: Inter (native) · контурлар 400, 500, 600 · Төп текст, UI ярлыклары, навигация, өстәмә исемнәр һәм өстәмә исемнәр. Inter - төп эш урыны, ул 11 пиксельле микро-ярлыклардан алып 30 пиксельле икенчел исемнәргә кадәр барысын да эшкәртә. Төп текст өчен 400 авырлык, билгеләнгән элементлар һәм төймә исемнәре өчен 500, ә мөһим UI ярлыклары өчен 600 сакланган. Юл биеклеге 1,5 булган 16 пиксель - иң еш очрый торган бер адымлы зурлык (1220 тапкыр очрый), бу 16 пиксельнең каноник төп текст зурлыгы булуын раслый.
- Geist Mono — алыштыру: JetBrains Mono or IBM Plex Mono · контурлар 400, 500 · Код фрагментлары, техник мета мәгълүматлар һәм кертелгән бер аралыклы токеннар 12–14 пиксель зурлыктагы код блокларында һәм 24 пиксель зурлыктагы зур код күрсәтү элементларында кулланыла. Бу эшкәртүче коралының ышанычлылыгын тәэмин итә, Dub продукт позицияләүенә туры килә.
Интерваллар һәм форма
| Максат | Мәгънәсе |
|---|---|
| Тыгызлык | уртача |
| Төп адым | 8px |
| Төймә радиусы | 8px |
| Карта радиусы | 12px |
| Күләгәләр | күләгәләр урынына чикләр юк |
| Бүлекләр арасында | 64px |
| Бит киңлеге | 1200px |
Ясалма интеллект сезнең сайтны Dub стилендә төзер һәм аны тутырыр
- Продуктлар һәм постлар белән Instagram, TikTok, Facebook сылтамасы аша тутырыгыз.
- Иске сайтыгыздан контентны күчерегез — адресны күрсәтегез генә.
- Иң яхшы двигательдә заманча дизайн: сервер рендерингы һәм SEO оптимизациясе белән React ( Next.js).
- Эзләү нәтиҗәләре һәм нейрон челтәр тәкъдимнәре өчен тулысынча автоматик SEO оптимизациясе.
Охшаш стильләр
- ElevenLabs — Җылы каймак төсендәге фотоэссе, нечкә башлыклар белән. Баухаус стилендәге дәфтәр — йомырка кабыгы төсендәге кәгазь, кара буяу һәм продуктны күрсәтү өчен бер шәмәхә һәм кызгылт сары төстәге бизәк.
- Awesomic — Конфеттины хәтерләткән кызгылт сары тыныш билгеләре белән редакция цинк челтәре
- Monad — җылы пергаменттагы редакция техник журналы
- Seline Analytics — Җылы кәгазьдә тыныч аналитик өстәл
- Notion — Көндезге кояш астында җылы кәгазь дәфтәр
- Anthropic — Җылы пергамент турында фәнни өлкә журналы - тыныч фил сөяге өслекләре, серифлы редакция рубрикалары һәм хәрәкәт кирәк булганда гына күренә торган бердәнбер балчык акценты.
- Calendly — Салкын мәрмәрдә куе зәңгәр төстәге кара
- Augen Pro — Apple'ның ак төсе монохром киңлектә бердәнбер акцент буларак клиник, авырлыксыз, электр зәңгәрен үз эченә ала.
- Antimetal — Каймак кәгазьдәге редакция хроникасы — фәнни журналдагы тыныч иртә, анда тыйнаклык ышаныч бирә, ә серифлар авыр эшне башкара.
- Perk — җылы пергамент кәгазендә электр лаймы
- Ditto — Кояш нурлары астында кыргый чәчәк үрнәкләре ясау остаханәсе. Җылы каймак өслекләр, ачык сары төс, тирән күк зәңгәрсу буяулар, әсәр артында чәчәк аткан органик төс формалары.
- Officevibe — Җылы каймак төсле кәгазьдә басылган редакция журналы. Кадрлар белән идарә итү турында уйланылган иншаны күз алдыгызга китерегез, ул продукт буларак тәкъдим ителә - заманча зәңгәр интерфейс аша пышылдап язылган курсив-сериф шрифты.