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

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

Один 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>` — обновится автоматически.
📦 Frontend pack — 12 SVG + Liquid Loader (HTML/CSS/TSX)26 KB · standalone, без внешних зависимостей Скачать ZIP ↓

### Liquid Loader — копи-паст

📦 Скачать всё ZIP