Atoms · Performante Component Library

ButtonPrimary top-priority · 8 мест · index.html:130–140, 1213–1219

Default dark

Disabled state

Назначение

Главный CTA на экране. Filled dark с иконкой стрелки. One primary CTA per screen — принцип DS.

Использования

«Показать мою рекламу» (Hero), «Подобрать тариф» (Section 3.5→4), «Запустить первую кампанию» (Section 4→5), «Дальше: что ещё подключить» (Section 3→3.5)

Tokens

px-6 sm:px-8 py-3 sm:py-4 bg-ink-900 hover:bg-ink-800 text-white font-semibold rounded-2xl flex items-center gap-3 transition shadow-lg shadow-ink-900/10

Варианты

dark (default) · disabled bg-ink-300 cursor-not-allowed · with-icon-right · full-width

Slots

label, optional trailing icon (arrow-right)

ButtonMint top-priority · 5 мест · index.html:763–766, 1586–1589

Default

Full-width

Да, оплатить и запустить

Назначение

Positive CTA — оплата, запуск, принятие оффера. Визуально приоритетнее вторичных действий.

Использования

«Беру бесплатный месяц» (Cancel flow step 3), «Да, оплатить и запустить» (Confirm-tariff primary CTA), «Принять и остаться» (Cancel flow step 2)

Tokens

px-6 sm:px-8 py-3 sm:py-4 bg-mint-500 hover:bg-mint-600 text-white font-semibold rounded-2xl shadow-xl shadow-mint-500/30 transition

Варианты

default · full-width (w-full text-center block)

ButtonSecondary 5 мест · index.html:1592–1594

Default

Full-width

Назначение

Вторичное действие без акцента. Всегда ниже по иерархии чем Primary или Mint.

Использования

«Сменить тариф» (под Confirm CTA), «Не сейчас» (AI Recommendation card), «Остаться» / «Не нужно, продолжить отмену» (Cancel flow)

Tokens

px-4 sm:px-6 py-2 sm:py-3 bg-ink-100 hover:bg-ink-200 text-ink-900 font-medium rounded-2xl transition

Варианты

default · full-width

Eyebrow conflict #1 · 14 мест · index.html:246, 779, 1518

Default text (ink-400)

Что такое Performante

Mint variant (ink-400 text-mint-600)

Финал · подтверждение

Step-pill variant (conflict — фактически StepBadge)

Шаг 1 из 5 · Анализ готов

Назначение

Метка-надпись над заголовком секции. Uppercase, tracking-wider, ink-400.

Использования

«Что такое Performante», «15 минут», «Экосистема», «Финал · подтверждение» (index.html:1518), step pills на quiz-шагах

Tokens

text-xs uppercase tracking-wider text-ink-400 font-semibold

Варианты

default (ink-400) · mint (text-mint-600) · step-pill (см. Конфликт DS)

Конфликт DS

Step-pill вариант (index.html:779, 1073, 1229) — это inline-flex items-center gap-2 px-3 py-1 bg-white shadow-sm rounded-full с точкой внутри. Фактически отдельный компонент StepBadge, замаскированный под Eyebrow. Требует нормализации и выделения в отдельный atom.

StatusPill top-5 · 7 мест · index.html:98–104, 168–170

Mint live (Hero)

5 421 кампания запущена

Mint compact (Dashboard)

AI ведёт кампанию

Amber state

Активна

Назначение

Inline-индикатор статуса с живой точкой. Animate-pulse сигнализирует об активном состоянии.

Использования

«5 421 кампания запущена» (Hero live counter), «AI ведёт кампанию» (Dashboard home tab), «идёт» (Campaign compact card), «работает» (Bot tab), «Активна» (Subscription page)

Tokens

inline-flex items-center gap-1.5 px-2.5 py-1 bg-mint-50 text-mint-700 text-xs font-semibold rounded-full + size-1.5 bg-mint-500 rounded-full animate-pulse

Варианты

mint/live (default) · amber/warning · compact (size-1 dot, меньший padding)

DS compliance

Совпадает с design-system.md «Status pill (live indicator)» — нормализация не нужна.

Chip conflict #6 · 9 мест · index.html:96–97, 505–506, 1443

Dark variant (Hero badge)

В РФ это есть только у нас

Mint variant (EcosystemCard)

базовый

Amber variant (популярный)

популярный

Outline variant (Pro header badge)

Pro

Назначение

Inline-тег, лейбл, badge. Статичный — без animate-pulse точки. Отличие от StatusPill: нет индикаторной точки, нет семантики «живого» состояния.

Использования

«В РФ это есть только у нас» (Hero dark badge), «базовый» / «включён» (EcosystemCard), «популярный» (Pricing over Pro tariff card), «Pro» (dashboard header label), «−20%» / «−40%» (frequency toggle)

Tokens (mint variant)

text-[10px] uppercase tracking-wider px-2 py-0.5 bg-mint-50 text-mint-700 rounded-full font-bold

Варианты

mint · dark (bg-ink-900 text-white) · amber (bg-amber-500 text-white) · outline (bg-white text-ink-700 ring-1 ring-ink-200)

Конфликт DS

design-system.md описывает Chip с точкой-индикатором — это StatusPill. Чистый Chip без точки не имеет отдельного описания в DS. Требует добавления в DS при первом извлечении.

Input conflict #3 · 4 места · index.html:122–128, 1574, 1580

Default с instagram-иконкой (Hero InstaInput)

Phone monospace (Auth form)

Назначение

Поле ввода текста. Без border, bg-смена на focus. Визуальный фидбек — через изменение фона, не обводки.

Использования

Instagram URL (Hero, с lucide instagram-иконкой leading), Phone input (Auth form phone/WA tab, font-mono), Chat helper input (dashboard)

Tokens

w-full px-4 py-3 bg-ink-50 rounded-xl outline-none focus:bg-ink-100 transition text-base

Варианты

default · monospace phone (font-mono) · inline-in-card (Hero — bg-transparent, без wrapper)

Конфликт DS

design-system.md: focus:bg-white, v19 использует focus:bg-ink-100 на светлом фоне. Нормализация: focus:bg-white когда input на ink-50 bg, focus:ring-2 ring-ink-900 когда на белом bg.

ProgressDots 3 места · dashboard.html:158–164, 828–831

3-step onboarding (шаг 1 активен)

5-step bars cancel flow (шаг 2 из 5)

Назначение

Dot-индикатор прогресса в многошаговых потоках. Два паттерна реализации: dots (onboarding) и bars (cancel flow).

Использования

3-step onboarding (dashboard.html:158–164, 208–214), Launch card (3 white dots на dark bg), 5-step cancel flow bars (dashboard.html:828–831)

Tokens (dots)

flex items-center gap-2 + size-2 rounded-full bg-mint-400 (active) / bg-ink-700 (inactive) + flex-1 h-px bg-ink-200 (connector)

Tokens (bars)

flex items-center gap-1 + h-1 rounded-full flex-1 bg-mint-500 (done) / bg-ink-200 (pending)

Заметка

Bars-вариант (cancel flow) фактически отдельный компонент ProgressBars. Предлагается выделить при следующей нормализации.

LogoMark 3 места · index.html:75–78, 1385–1388

sm / md / lg — три размера

P

В составе Navbar (как в v19)

P

Performante

Назначение

Логотип Performante — квадрат с буквой «P». Используется в navbar и как brand-маркер в body контенте.

Использования

Navbar logo (index.html:75–78, size-7), Dashboard header logo (dashboard.html:119–122, size-6 sm:size-7), Two-wallets disclaimer block (index.html:1385–1388, size-8)

Tokens

size-7 rounded-lg bg-ink-900 flex items-center justify-center + text-white text-xs font-bold (inner span)

Варианты

sm (size-6) · md (size-7, default в navbar) · lg (size-8 sm:size-10)

IconBox top-3 · 12+ мест · index.html:812–815, 826–829, 838–841

sm / md / lg — три размера в ряд

Реальные комбинации из v19 (AnalysisGrid)

lg с shadow accent (AI Recommendation card)

Назначение

Квадратный контейнер для Lucide-иконки с цветным фоном. Dependency для AnalysisCard, ModuleCard, EcosystemProductCard, AIRecommendationCard.

Использования

Niche card (size-10 bg-ink-900), Audience card (size-10 bg-mint-500), Insight card (size-10 bg-amber-500), Ecosystem modules (size-10), AI Recommendation (size-11 bg-mint-500 shadow-xl shadow-mint-500/30)

Tokens

size-10 rounded-xl bg-{color} flex items-center justify-center shrink-0 + inner size-5 text-white

Варианты

sm (size-9 rounded-xl) · md (size-10 rounded-xl, default) · lg (size-11/size-12 rounded-2xl + shadow-xl shadow-{color}/30)

Slots

icon name (Lucide), bg color из палитры: ink-900 / mint-500 / amber-500 / sky-500 / mint-500/20 (dimmed для dark card)

Зависимости

Используется как dependency в AnalysisCard, ModuleCard, EcosystemProductCard, AIRecommendationCard, AIFeedBlock. Нормализуй этот atom первым.