Все ИИ — Brand Symbol ∞ (Lemniscate)

// ВАРИАНТЫ ЗНАКА

Двенадцать способов представить ∞

Один path — разные исполнения под разные контексты. Все используют одну и ту же brand-форму через <use href="#lemn-infinity"> с разными fill/stroke значениями. Среди них пять «технических» (white / outline / cyan / glass / inverted), три «декоративных» (silver / glow / cyan-gradient) и четыре «экспрессивных» (bichromatic / neon / wireframe / dotted) — на случай неоновой вывески, печати или плакатной графики.

01 · White solid

02 · Outline

03 · Cyan accent

04 · Liquid glass

05 · Silver gradient

06 · Glow

07 · Cyan gradient

08 · Inverted

09 · Bichromatic

10 · Neon

11 · Wireframe

12 · Dotted

// КОНЦЕПЦИЯ A · ZENTRA LABS · LETTER MARK

Z в круге — letter mark Zentra Labs

Минималистичный буквенный знак для parent-brand. Буква Z (Zentra, "zen" = центр) вписана в круг — закрытая, упорядоченная форма, спокойствие через центрированность. На контрасте с продуктовым ∞ — это знак parent company, а не продукта.

A1 · White solid

A2 · Soft outline

A3 · Cyan accent

A4 · Glow

A5 · Inverted

A6 · Neon

// КОНЦЕПЦИЯ B · ВСЕ ИИ · CONVERGENCE

Точка-сборка: 8 лучей сходятся в центр

Семантика «Все ИИ — собрано в одной точке». 8 коротких радиальных штрихов (восемь сторон света / восемь типов задач) и центральная точка — фокус. Альтернатива ∞: вместо петли — sun-burst / nexus, более «технологичная» и менее abstract.

B1 · White solid

B2 · Faint

B3 · Cyan accent

B4 · Glow

B5 · Inverted

B6 · Neon

// КОНЦЕПЦИЯ C · ВСЕ ИИ · CONTINUUM

Волна — непрерывный AI-поток

Один непрерывный stroke — две полу-волны (вверх / вниз). Семантически: AI как непрерывный flow, обучение без конца. Менее статично чем геометрическая ∞ и более «живо». Aspect 2:1 — совместимо с tab-bar / button placement.

C1 · White solid

C2 · Faint

C3 · Cyan accent

C4 · Glow

C5 · Inverted

C6 · Neon

// ИНТЕГРАЦИЯ В TAB-BAR

Как это работает в навигации Mini App

Центр tab-bar — главное место, где встречается знак ∞. Контейнер 308 × 67 px, active-pill 61 × 61 r=15. Иконка в центре имеет соотношение 2:1 (новая lemniscate-форма), 38 × 19 px, white solid. Текст «ВСЕ ИИ» под значком.

Tab bar — production size 308 × 67 px

Профиль

ВСЕ ИИ

Чаты

Tap-bar в реальном размере · в чёрном dock

// APP ICON · LOCKUP

Иконка приложения и лого-замок

Знак работает и как самостоятельная app-иконка (rounded square iOS-style 28px radius), и в составе lockup'а с wordmark «Все ИИ».

Dark · white

Cyan

Glass

Light · dark

Все ИИ

// ЗАГРУЗЧИК

Liquid loader — три размера

Тот же знак в анимации ожидания. Стеклянный контур с двумя cyan-волнами, текущими внутри с разной скоростью. Один loader для всего приложения — chat indicator, splash screen, кнопки во время submit.
2 waves · 5s + 7s linear infinite reverse · top-edge gradient · backdrop blur 24px

Chat · 36 px

ИИ печатает

Inline в чате — вместо трёх точек.

Inline · 64 px

Кнопки, карточки во время submit.

Splash · 140 px

Splash при загрузке Mini App.

// ВАРИАНТЫ ТЕМПА

Три скорости волн

Тот же loader, разная скорость через CSS-vars. slow для idle ожидания, normal по умолчанию, fast только для urgent состояний.

Slow

7s + 9s · idle

Normal

5s + 7s · default

Fast

2.8s + 3.6s · urgent

// СПЕЦИФИКАЦИИ

Как использовать в production

Вся форма управляется через один SVG <symbol id="lemn-infinity"> в defs. Любая реализация (logo, icon, loader, splash) ссылается на него через <use> с переопределением fill/stroke.

<!-- В defs (один раз на странице) -->
<svg width="0" height="0" style="position:absolute">
  <symbol id="lemn-infinity" viewBox="0 0 120 60">
    <path d="M 110 30 C 110 32.12 109.53 34.41 ... Z"/>  <!-- 48 cubic Bezier -->
  </symbol>
</svg>

<!-- Logo (white solid) -->
<svg viewBox="0 0 120 60"><use href="#lemn-infinity" fill="#FFFFFF"/></svg>

<!-- Logo (outline) -->
<svg viewBox="0 0 120 60"><use href="#lemn-infinity"
    fill="none" stroke="#FFFFFF" stroke-width="0.7"/></svg>

<!-- Logo (cyan) -->
<svg viewBox="0 0 120 60"><use href="#lemn-infinity" fill="#54C4CE"/></svg>

/* Loader (HTML+CSS, glass + liquid) */
.loader {
  aspect-ratio: 120 / 60;
  position: relative;
}
.loader .glass-bg {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(24px) saturate(1.4);
  clip-path: url(#lemniscate-clip);
}

VIEWBOX

120 × 60

Aspect ratio 2:1, центр в (60, 30)

КРИВАЯ

Lemniscate Бернулли

48 cubic Bezier через Catmull-Rom (tension 1/6)

МИНИМ. РАЗМЕР

28 × 14 px

Меньше — теряет детализацию в центре

// СЛЕДУЮЩИЕ ШАГИ

Если форма утверждена — три апдейта

Чтобы система оставалась цельной, новую форму нужно прокинуть в три места. Перерисовка icon-infinity.svg подтянет два других автоматически.

1 · BRAND ASSET

Перерисовать assets/icon-infinity.svg

Заменить текущий double-overlapping path на single closed lemniscate. Можно сделать в любом из вариантов сверху (white / silver / cyan) — финальный выбор за тобой.

2 · TAB BAR

Tab-bar центр (.t-allai)

Подхватит новую форму автоматически (использует тот же icon-infinity.svg). Размеры в CSS возможно потребуется адаптировать с 39×20 на 38×19 (lemniscate ratio 2:1 точно, без округлений).

3 · HERO PLUS

Hero подписки PLUS

Уже использует brand SVG через <img> — обновится автоматически.