Задача: визуальная (UI/layout) часть редактора Automation (
AutomationEditor) и Flow Builder (Telegram) — как сделать её современной, в рамкахDESIGN_SYSTEM.md, и отстроить от SendPulse (текущий редактор визуально похож на него).Метод: deep-research harness — 6 углов → 23 источника → 83 утверждения → состязательная верификация 25 ключевых (3 голоса на claim) → 24 подтверждено / 1 опровергнут. Плюс аудит фактического кода редактора. Дата: 2026-07-09.
Важная оговорка по источникам: почти все измеримые числа (px, hex, паттерны) идут из одного авторитетного семейства — официальной документации и исходников React Flow / xyflow. Это ровно та библиотека, на которой построен наш редактор (
@xyflow/react), поэтому данные напрямую применимы — это плюс, а не натяжка. Но по конкретным маркетинговым продуктам (ManyChat, n8n, Make, Zapier, Customer.io, Braze, Klaviyo, HubSpot, ActiveCampaign) верифицированных пиксельных данных собрать не удалось — их визуал в текстовой документации не специфицирован, только в скриншотах. По SendPulse подтверждена сигнатура качественно (см. §3).
Корень проблемы — не «похоже на SendPulse», а «не подключено к дизайн-системе». Текущий
редактор построен на светлой теме с дженерик-серым Tailwind (bg-gray-50, white,
blue-500) и «радужных» нодах со сплошной цветной шапкой-баром. Это одновременно (а)
визуальная сигнатура SendPulse/ManyChat и (б) полный отрыв от DESIGN_SYSTEM.md (cyan
#02CBEF, dark-first, Unbounded/Golos/JetBrains Mono, стекло, glow). Перевод редактора на
фирменный язык Mailfit решает обе задачи разом.
Отстройка от SendPulse не может держаться на цвете — бренд-акцент SendPulse тоже cyan
(подтверждено: «new brand color and font — cyan and Nunito Sans»). Тема — светлая
(решение: тёмную не делаем; SendPulse тоже светлый — значит цвет+тема совпадают, и вся
нагрузка отстройки падает на форму). Дифференциаторы: анатомия ноды без цветной шапки,
типографика Unbounded/Golos/JetBrains Mono (у SendPulse — Nunito Sans), сигнатурная
точечная текстура фона .mf-light, один cyan-акцент вместо радуги, стекло/glow. Это
сложнее, чем через тёмный канвас, но выполнимо — см. §5.
Главный контр-паттерн (верифицировано). Современная нода — это НЕ цветная шапка-бар, а
карточка со стековой анатомией: header отделён от content тонкой линией border-b, а не
фоновой заливкой. Цвет типа ноды выражается иконкой-чипом, а не заливкой всей шапки.
→ Убрать сплошную цветную шапку — самый заметный шаг прочь от SendPulse.
Один «живой» акцент вместо радуги. Демотировать per-node цвет до маленького чипа-иконки;
единственный яркий цвет на канвасе — бренд-cyan #02CBEF для выделения/активного/glow
(приём Turbo Flow, но на нашем бренде и в светлой теме). Канвас читается как спокойное
светлое поле с одним cyan-током — противоположность пёстрому SendPulse.
Конкретные измеримые сдвиги (детали в §4; финальные значения — по готовому макету
editor-ui-redesign.html, см. §4.8): ноды 220px → 240px, скругление под ноду-масштаб (14px),
порты 12px → ~10px, светлый канвас #F7F8FA с сигнатурной точечной текстурой (radial-dot),
выделение — cyan-ring + glow. Уточнения после макета: рёбра оставлены нейтральными, cyan —
только на выделенном ребре (градиент не делали); панели непрозрачные белые (матовое стекло
в макет не пошло — читаемость важнее эффекта).
Технически дёшево. @xyflow/react темизируется через CSS-переменные --xy-* и проп
colorMode — большую часть канваса/портов/рёбер можно перекрасить токенами без переписывания
логики. Ноды — кастомные компоненты, их анатомию меняем точечно в nodes/*.
Грубо весь редактор — светлая тема + дженерик-Tailwind + «радужные» ноды с цветной шапкой. Ни один
элемент не использует токены DESIGN_SYSTEM.md.
| Элемент | Файл | Сейчас | Оценка |
|---|---|---|---|
| Канвас | editor/FlowCanvas.tsx:206-214 |
bg-gray-50, точки #d1d5db gap 20, MiniMap stroke #0F133A, светлая |
Игнорирует dark-first DS |
| Нода | nodes/automation/*.tsx |
w-[220px], bg-white, rounded-xl (12px), сплошная цветная шапка (backgroundColor: '#3B82F6' и т.п.) + белые иконка/текст, серое превью text-gray-500 |
Сигнатура SendPulse; не DS |
| Порт-хендл | те же файлы | круг 12px, bg #fff, border 2px #94a3b8 |
Крупноват; дженерик-серый |
| Выделение ноды | те же файлы | ring-2 ring-blue-500 |
Синий, не бренд-cyan |
| Рёбра | дефолт xyflow | 1px #b1b1b7 |
Дженерик; можно на бренд |
| Инспектор | editor/InspectorPanel.tsx:104-113 |
правая панель w-80 (320px), bg-white, левая цветная полоса на header (borderLeftWidth:3), slide-in 200ms |
Паттерн верный (см. §3, §4.6), но светлый |
| Палитра нод | editor/NodeLibrarySidebar.tsx:158 |
слева w-52 (208px), bg-white, левая цветная полоса на пунктах, группировка по category |
Паттерн верный, но светлый |
| Тулбар | editor/FlowToolbar.tsx:129 |
bg-white, border-gray-200, brand-dark текст, пастельные бейджи статуса (amber/green) |
Не бренд-cyan, не dark |
| Модалка удаления | editor/InspectorPanel.tsx:72 |
bg-brand-dark (тёмная!) |
Единственное место, где уже мелькает бренд-тёмный — рассинхрон |
Вывод: редактор — «SendPulse на минималках»: светлый пёстрый канвас, ноды с цветными шапками.
Дизайн-система (светлая тема .mf-light: #F7F8FA/#FFFFFF, cyan #02CBEF, radial-dot текстура,
стекло, glow, Unbounded/Golos/JetBrains Mono) не задействована вообще. Это и есть двойной рычаг редизайна.
SendPulse не публикует пиксельных спецификаций, но сигнатура собрана из справки и обзоров:
Ключевой риск: cyan у SendPulse и у Mailfit, тема у обоих светлая. Если оставить светлый канвас + цветные шапки + cyan-акцент — будет «ещё один SendPulse». Тёмным канвасом отстроиться нельзя (решение: тёмную тему не делаем). Значит отстройка целиком через форму: ноды без цветной шапки, наша типографика (Golos/JetBrains Mono vs Nunito Sans), сигнатурная точечная текстура
.mf-light, дисциплина «один cyan-акцент вместо радуги», матовое стекло/glow.Совпадающие паттерны (левая палитра, правый инспектор, drag-and-drop) менять не нужно — это отраслевой стандарт, подтверждённый и предыдущим ресёрчем (RESEARCH-node-inspectors §Пробелы: «правая боковая панель доминирует» — Customer.io/Klaviyo/HubSpot). Уникальность — в стиле, не в раскладке.
Все числа ниже — подтверждённые дефолты/примеры xyflow (наша библиотека). Правая колонка —
предлагаемое отображение на DESIGN_SYSTEM.md.
Решение по подложке (открытый вопрос №2 — закрыт): токены — как остальная консоль, а НЕ
.mf-переменные лендинга. То есть нейтральные поверхности через Tailwind (bg-white,bg-gray-50/100,border-gray-200, текстtext-brand-dark) + бренд-акцентыbrand-*(brand-accent/brand-cyan=#02CBEF,brand-dark=#0F133A,brand-surface=#F5F6F8). Хекс-значения.mf-lightв блоках ниже (#FFFFFF/#F7F8FA/#ECECF1/#02CBEF) читать как целевой тон-ориентир; на практике брать их Tailwind/brand-*-эквиваленты, чтобы редактор визуально совпадал с консолью, в которой живёт. Ключевой сдвиг от текущего кода — заменить дженерик-синий (blue-500) наbrand-accentcyan и перекроить форму ноды (§4.1).
Верифицировано: современная нода — карточка со стеком BaseNodeHeader (часто border-b) →
BaseNodeContent → опц. BaseNodeFooter. Заголовок отделён тонкой линией, а не заливкой.
Ширина в примерах 350–384px (w-96), высота по контенту. Дефолт библиотеки —
#fff фон, 1px solid #1a192b рамка, radius 3px (в dark-mode фон #1e1e1e, рамка #3c3c3c).
Состояния — цветом рамки/ring: red-500 ошибка, orange-500 загрузка, orange-ring hover.
→ Mailfit-нода (предложение, светлая тема .mf-light):
контейнер: w-[260px] (сейчас 220 — уже; 384 у xyflow — под «workflow»-ноды с полями; для
наших терсовых чат-нод середина ~260 оптимальна)
bg = var(--bg-elevated) #FFFFFF
border 1px var(--border) #ECECF1
radius 14px (между button 12 и card 20 — «нода-масштаб»)
shadow = var(--glow-card) (мягкая тень-подъём на светлом)
header: иконка-ЧИП 22–24px (bg = <cat-color> at 12–14% opacity, icon = <cat-color>)
+ заголовок Golos Text 600, 13px, var(--text) #0A0E16
+ eyebrow-тип (EMAIL/FILTER) — JetBrains Mono 10px, uppercase, var(--text-dim) #97A0AD
разделитель: border-b 1px var(--border) ← НЕ цветная заливка (контр-SendPulse)
content: превью данных — 12px var(--text-muted) #5B6473, truncate
состояния: selected → ring cyan var(--accent) #02CBEF + box-shadow var(--glow-accent)
error → border 1px #F59E0B (amber-статус DS)
hover → border var(--border-hover) + подъём -2px, лёгкая glow-card
Цвет типа (AUTOMATION_EMAIL #3B82F6 и т.д. из nodes/automation/index.ts) сохраняем, но он
живёт только в чипе-иконке, а не в шапке. Канвас перестаёт быть радужным.
Верифицировано: дефолт xyflow — круг 6px, заливка #1a192b, рамка #fff (в dark инверсия
#bebebe/#1e1e1e), подписей нет.
→ Mailfit: круг 8px (сейчас 12 — крупно), заливка var(--bg-elevated) #FFFFFF, рамка
1.5px var(--border-hover); при hover/подключении — рамка var(--accent) cyan + лёгкий glow.
Подписи «Да/Нет», «no_email» — не на самом порте, а лейблом рёбра/тултипом (как сейчас планируется
в ADR-700 §5.3).
Верифицировано: фон — паттерн dots(деф.)/lines/cross, gap 20 (можно [x,y]), размер
точки 1px / креста 6px; тема — проп colorMode (light/dark/system); рёбра дефолт
1px #b1b1b7 → #555 selected; 4 типа рёбер (bezier деф., straight, step, smoothstep) + кастом
(кнопка на ребре, петля, двунаправленность); MiniMap по умолчанию правый-низ, неинтерактивна.
→ Mailfit (тема светлая — решение; тёмную не делаем):
canvas bg = var(--bg-base) #F7F8FA (сейчас bg-gray-50 #f9fafb — близко, но на токен)
dots = приглушённая точка в тон DS radial-dot .mf-light (≈ var(--text-dim) на низкой
прозрачности), gap ~22 (сигнатурный шаг DS-текстуры 22px), size 1
colorMode = 'light'
рёбра = var(--gradient-accent) #02CBEF→#3B82F6, 1.5–2px, тип smoothstep
selected/hover рёбро — насыщеннее + тонкий cyan-glow
MiniMap = светлое матовое стекло var(--bg-glass) + blur; либо скрыть (ADR: showMiniMap v1.1)
Controls = светлая стеклянная пилюля (см. §4.5)
Точечная текстура фона на светлой теме (radial-dot 22px) — сигнатурный приём DS (DESIGN_SYSTEM §7). Настроить фон-точки xyflow под неё (тон/шаг), чтобы канвас читался как «продукт Mailfit», а не как дефолтная серая сетка SendPulse. Это, вместе с формой ноды (§4.1) и типографикой — основная нагрузка отстройки в светлой теме.
Верифицировано: премиум-эстетику даёт пример Turbo Flow — градиент #ae53ba→#2a8af6
на рёбрах и светящихся рамках нод (градиент статичный, анимация течения — опровергнуто 0-3,
не закладывать). У нас уже есть готовый токен --gradient-accent: linear-gradient(135deg,#02CBEF,#3B82F6)
— наш аналог Turbo, но на бренде. Применить к рёбрам (SVG linearGradient) и к glow выделенной ноды.
Тулбар (FlowToolbar): перевести с bg-white на var(--bg-elevated)/стекло, текст var(--text),
кнопку «Опубликовать» — на фирменную squircle-кнопку из DS (.mf-btn-primary, cyan-заливка, текст
#151515, ховер-инверсия — DS §5). Бейджи статуса — на токены статусов (--status-live #34D399).
<Controls> xyflow — обернуть в стеклянную пилюлю (--bg-glass + blur(16px), radius 999px — DS
паттерн «плавающая пилюля»).
Правый инспектор — паттерн верный (§3), меняем только шкуру. InspectorPanel (w-80=320px в
коде / w-[420px] в макете — оставить, в норме отрасли): светлое матовое стекло + blur(16px)
(сигнатурный DS-приём), header без цветной полосы слева → чип-иконка как у ноды; поля форм — на
токены консоли. Slide-in 200ms оставить.
Палитра нод — вынесена в отдельное решение, см. §4.8 (в макете MLF-286 она пока квадратными плитками = сигнатура SendPulse; переделываем).
| Параметр | Сейчас | Предложение | Источник ориентира |
|---|---|---|---|
| Ширина ноды | 220px | ~260px | xyflow 350–384 (терсовые — уже) |
| Скругление ноды | 12px (rounded-xl) |
14px | DS: между button 12 / card 20 |
| Заголовок ноды | сплошная цветная шапка | чип-иконка + border-b |
xyflow BaseNode (контр-SendPulse) |
| Порт | 12px, серый | 8px, --border-hover, cyan на hover |
xyflow 6px |
| Фон канваса | #f9fafb светлый |
--bg-base #F7F8FA (светлая, на токен) |
DS .mf-light |
| Точки сетки | #d1d5db |
приглушённые в тон DS radial-dot, gap ~22 | DS §7 текстура |
| Рёбра | #b1b1b7 1px |
--gradient-accent 1.5px |
Turbo Flow (на бренде) |
| Выделение | ring-blue-500 |
cyan --accent + --glow-accent |
DS бренд |
| Инспектор/палитра фон | bg-white |
стекло --bg-glass blur16 |
DS §4 «Стекло» |
Живой целевой артефакт — готовый макет
docs/automation/mockups/editor-ui-redesign.html(первый макет-набросок былstart-inspector.htmlпод MLF-286; редизайн канваса/палитры собран уже вeditor-ui-redesign.html). ✓ Все решения (1)–(4) ниже в нём реализованы и проверены в браузере: radial-dot канвас (#F7F8FA), шрифты Golos/Unbounded, токеныbrand-*, карточка ноды с чип-иконкой вместо цветной шапки, icon-rail палитра с hover-раскрытием + mobile bottom-sheet, состояния рамкой+точкой. Решения согласованы с пользователем (2026-07-09).
(1) Карточка ноды на канвасе — Вариант A: чип-иконка + divider (убрать цветную шапку-бар).
┌────────────────────────────┐
│ ╭──╮ Messenger │ чип 28px rounded-[9px]: bg = цвет типа @~12%, иконка = цвет типа
│ ╰──╯ │ заголовок (тип) — Golos 600 13px, тёмный текст
├────────────────────────────┤ ← border-b divider (gray-100), НЕ цветная заливка
│ Main1 │ превью данных — gray-500 12px, truncate
└────────────────────────────┘
w-[240px], rounded-[14px], border gray-200, shadow-sm
выбрана → ring-2 brand-accent #02CBEF + glow rgba(2,203,239,.15) (было: ring-blue-500)
порты → 9–10px, белые, border gray-400, cyan при наведении/подключении
Цвет типа живёт только в чипе; канвас перестаёт быть радужным. Тип-лейбл — uppercase-Golos-капшен (в макете JetBrains Mono не подключён; при желании «инженерного» моно-тега — добавить шрифт).
(2) Палитра нод — desktop icon-rail с hover-раскрытием + mobile bottom-sheet.
Требование: узкая, не закрывать канвас (сейчас w-28=112px квадратными плитками = как SendPulse).
DESKTOP — покой (~56px): DESKTOP — hover (временно ~190px, поверх канваса):
┌────┐ ┌──────────────────────┐
│ ✉ │ чипы-иконки │ ╭──╮ Email │ подписи появляются
│ 🔔 │ по цвету типа │ ╭──╮ Push │ по наведению на рельс
│ 📱 │ │ ╭──╮ SMS │ (десктоп-бонус)
│····│ ← divider категорий │──── Логика ──────────│
│ ⧩ │ │ ╭──╮ Фильтр │
└────┘ └──────────────────────┘
hover-чип → cyan-обводка · перетаскивается drag-and-drop · чипы перекликаются с плиткой MailfitMark
MOBILE (нет hover): постоянной палитры нет → плавающая кнопка «+ Добавить блок» открывает
bottom-sheet со списком нод. Канвас свободен. (На тач icon-rail вырождается в лист.)
Отличие от SendPulse: у них подписи всегда видны (стена плиток); тут в покое — компактный рельс иконок (эстетика Figma/Linear-rail), подписи по требованию; категории — тонкими разделителями; cyan-язык наведения. Забирает у канваса вдвое меньше места.
NB по тач: раскрытие рельса вешать на hover — только десктоп; на мобильном hover нет, поэтому там палитра переключается на bottom-sheet по «+» (не полагаться на hover как единственный триггер). Если редактор на мобильном окажется read-only — палитру там можно вообще скрыть.
(3) Ширина ноды — фикс 240px, высота по контенту. Все ноды одной ширины → канвас опрятный,
предсказуемая авто-раскладка. Тело — одна строка-превью с truncate, поэтому адаптивная ширина
почти ничего не даёт. Если ноде нужно 2 строки (Фильтр показывает условия) — растёт высота,
ширина заблокирована. 240 вместо текущих 220 — чуть просторнее под чип+заголовок, всё ещё узко.
(4) Состояния ноды — рамкой + маленькой точкой, без заливки всей карточки (в отличие от жёлтого SendPulse):
| Состояние | Оформление | Смысл |
|---|---|---|
| default | border gray-200 | — |
| selected | ring-2 brand-accent #02CBEF + glow rgba(2,203,239,.15) |
выбрана |
| hover | border-hover + подъём -2px, лёгкая тень | наведение |
| error (блокирует публикацию) | рамка red-400/500 + красная точка/иконка в углу |
не даст опубликовать; согласуется с красной валидацией тулбара |
| warning / «не подключена» (не блокирует) | рамка amber-400 (можно пунктир) + янтарная точка |
«обрати внимание»; тот же тон, что «неопубликованные изменения». Не чистый жёлтый (низкий контраст + это SendPulse) |
Для MVP обязателен только error (валидация уже есть); «не подключена» — можно как v1.1 (заложить amber).
(5) Скоуп итерации — ноды + палитра (ядро) + дешёвая cyan-связка на рёбрах; хром не трогаем.
.react-flow__edge.selected → #02CBEF).bg-brand-dark, DS-squircle);
cyan-перекраску кнопки не делали, чтобы главный акцент оставался на канвасе (ноды/рёбра), а не
на тулбаре. Изначальную идею cyan-кнопки не берём.Тема — светлая (решение: тёмную не делаем). Значит отстройка от SendPulse (тоже светлый+cyan) идёт целиком через форму, типографику и дисциплину акцента, а не через тему/цвет. Три «сигнатурных хода» в пределах DS:
border-b,
а не сплошной цветной шапкой SendPulse (§4.1); (б) канвас — светлое поле #F7F8FA с фирменной
radial-dot текстурой 22px (DS §7), а не дефолтная серая сетка. Форма + фактура фона =
«продукт Mailfit» с первого взгляда.#02CBEF появляется только
там, где есть «энергия»: выделенная нода (ring+glow), активные рёбра (--gradient-accent), порт
при подключении, кнопка «Опубликовать». Всё остальное — спокойное светлое поле + приглушённый
per-node чип. Прямая противоположность пёстрому SendPulse; «дорогой» контраст (приём Turbo Flow,
адаптированный под светлую тему). NB (DS §2): cyan как текст на белом — низкий контраст, поэтому
cyan только как заливка/иконка/рамка/подчёркивание, текст — тёмный --text.JetBrains Mono uppercase eyebrow (моно =
«инженерность/данные»), название — Golos Text, крупные заголовки экранов — Unbounded. У
SendPulse — один гуманистический Nunito Sans. Наша тройная шкала мгновенно читается как другой
продукт.Дополнительно (необязательные акценты, всё в DS): стеклянные плавающие панели (blur16), squircle-кнопки
с ховер-инверсией, glow на выделении. Ничего за пределами токенов не вводится.
Библиотека — @xyflow/react, темизуемая CSS-переменными --xy-* + colorMode. Большая часть
перекраски — не переписывание логики:
--xy-* в scope редактора
(colorMode='light' + оверрайды токенами .mf-light). <Background> — настроить color/gap
под radial-dot текстуру DS (§4.3). FlowCanvas.tsx:206-214 — точечно.nodes/automation/*.tsx (и telegram/*) по анатомии §4.1: убрать
backgroundColor-шапку, ввести чип-иконку + border-b, токены. ~10 маленьких файлов, паттерн один.bg-white/gray-* на токены + стекло
(InspectorPanel.tsx, NodeLibrarySidebar.tsx, FlowToolbar.tsx)..mf-light-переменные (лендинг) либо brand-*
Tailwind (консоль). DS §2: консоль исторически на brand-*; возможно, нужно завести редактор в
.mf mf-light scope. Открытый вопрос — см. §7.Изменения — чисто визуальные (классы/токены/разметка нод), контракты пропсов (ADR-700) не трогаются. Undo/analytics/autosave — без изменений.
white/gray-* +
brand-* акценты, brand-accent cyan вместо blue-500). НЕ .mf-переменные лендинга. См. §4.editor-ui-redesign.html
миникарта есть — RF.MiniMap с бренд-обводкой нод; рядом зум-контролы. Стилистически вписана,
не трогаем дальше; §4.8).Все открытые вопросы закрыты (2026-07-09). По устоявшемуся циклу — ресёрч → макет → апрув М. Терентьева → разработка (как в MLF-286/MLF-287).
Добор по просьбе: открыл редакторы в браузере (Playwright) и снял фактические вычисленные стили (
getComputedStyle+getBoundingClientRect) — реальные px/hex из работающего DOM, а не из документации.Жёсткое ограничение канала. Прочитать можно только same-origin DOM. Реальные редакторы прямых конкурентов оказались недоступны для замеров: n8n рендерит канвас в cross-origin iframe на внутреннем домене (
n8n-preview-service.internal.n8n.cloud, к тому жеclicktointeract+ shadow DOM); Make, Zapier, ManyChat, Braze, Customer.io, Klaviyo, HubSpot, ActiveCampaign — за логином; их публичные визуалы — статичные картинки, а скриншоты в этом окружении к обратному чтению не подтягиваются. Поэтому живые числа ниже — из семейства React Flow (наша библиотека) и её премиум-примера. Единственный вытащенный факт про n8n: их встраиваемый превью по умолчанию светлая тема (theme=light).
Открыт example-apps.xyflow.com/.../turbo-flow. Замеры:
| Элемент | Фактическое значение |
|---|---|
Канвас (фон .react-flow) |
rgb(17,17,17) = #111111 (почти чёрный) |
| Нода (обёртка) | 218×102px, border-radius: 10px, padding-обёртки 2px (под градиентную рамку) |
| Нода (внутренняя карточка) | фон rgb(17,17,17) #111, border-radius: 10px, padding 16px 20px |
| Шрифт текста ноды | Fira Mono, monospace (моноширинный — «инженерный» акцент) |
| Заголовок ноды | 16px / weight 500 / #f3f4f6 |
| Glow ноды (box-shadow) | двойная цветная тень: rgba(42,138,246,.3) 10px 0 15px (синий #2a8af6) + rgba(233,42,103,.3) -10px 0 15px (маджента #e92a67) |
| Порт-хендл | 5×5px (рендер ~7 с рамкой), заливка rgb(51,51,51) #333 |
| Ребро | stroke: url(#edge-gradient) (SVG-градиент), stroke-width: 2px |
Что это уточняет в наших рекомендациях (§4–5):
--gradient-accent #02CBEF→#3B82F6 — прямой аналог их #e92a67→#2a8af6; glow делается
двойной цветной box-shadow с alpha ≈0.3, offset 10px, blur 15px — конкретный рецепт для
выделенной ноды (у нас — cyan-glow, мягче, на светлом фоне; alpha ниже).--bg-elevated #FFFFFF на светлом --bg-base #F7F8FA, читается за счёт рамки #ECECF1,
тени-подъёма и cyan-glow на выделении. Приём (градиент-ребро + glow) переносим, палитру — нет.Живой инстанс на reactflow.dev: нода-контейнер 300px, рёбра 2px #d2d2d2 (светло-серый),
порт 10px приглушённо-бирюзовый. Контраст к Turbo: тот же движок, но светлая «маркетинговая»
подача — рёбра толще и бледнее, ноды крупнее. Вывод: толщина ребра 2px и размер ноды ~220–300px —
устойчивый диапазон независимо от темы; отличает продукты именно фон + glow + типографика, а не
геометрия.
Живые замеры подтвердили и уточнили рекомендации §4–5 конкретными числами (glow-рецепт, радиус 10px, ребро 2px, порт 5–8px, glow-рецепт). Пиксельной сигнатуры прямых маркетинговых конкурентов собрать не удалось по техническим причинам доступа (см. ограничение выше) — это остаётся честным пробелом; при наличии ваших скриншотов их UI разберу отдельно.
--xy-*); в v10/11 префикс был --rf-*. Сверить версию пакета.xyflow (анатомия/токены/тема): reactflow.dev/ui/components/base-node · reactflow.dev/learn/customization/theming · reactflow.dev/learn/customization/custom-nodes · reactflow.dev/examples/nodes/custom-node · reactflow.dev/api-reference/components/background · reactflow.dev/examples/styling/dark-mode · reactflow.dev/api-reference/components/minimap · reactflow.dev/examples/edges/custom-edges · reactflow.dev/examples/styling/turbo-flow · reactflow.dev/ui/templates/workflow-editor · deepwiki.com/xyflow/xyflow/7.1-css-variables-and-theming-system · raw.githubusercontent.com/xyflow/xyflow/main/packages/system/src/styles/style.css
SendPulse (сигнатура): sendpulse.com/knowledge-base/chatbot/chatbot-builder · .../flow-builder · .../flow-elements · sendpulse.com/blog/new-sendpulse-design (cyan + Nunito Sans) · chatimize.com/reviews/sendpulse
Journey builders (компоновка, blog/secondary): customer.io/learn/how-we-work/evolution-of-our-visual-workflow-builder · braze.com/resources/articles/building-braze-how-braze-built-our-canvas-flow-customer-journey-tool
Статистика прогона: 6 углов, 23 источника, 83 утверждения, 25 верифицировано (24✓/1✗), 106 агентов.