VetFamily Email Design System (25.09.2026)

Основа: EMAIL-STRATEGY-BG.md, analysis/DESIGN-PATTERNS.md, analysis/DESIGN-STATS-SUMMARY.md, analysis/VISUAL-REVIEW.csv. Текущи VF шаблони: visual-rollout-gpt25/ и footer-rollout-2026-09-15/ (14 native темплейта VF | BP V2, живи в Klaviyo).

Забележка за собственика: живият Klaviyo export (footer-rollout-2026-09-15/klaviyo-html-final.json) реално ползва линк/бутон зелено #587628, фон карти #F3F1EA/#EEF2C8, коралово #DB593B. Заданието тук фиксира каноничните токъни по-долу (крем #F8F3DE, лайм #8BB43E, корал #F2643A, олио #8FAE4A) като целева система за новите модули и прототипи. Има лека разлика спрямо текущия износ. Флагвам го: реши дали приравняваме живия темплейт към тези токъни при следващ rollout, или токъните по-долу остават само за нови модули върху съществуващата база. Не пипам Klaviyo.

1. Токъни

1.1 Цветове

Правило за контраст: лайм и корал НЕ носят бял текст директно (под AA прага). Три safe варианта, използвани в модулите по-долу: 1. Бутон с плътен лайм фон + тъмен текст color-lime-text (#223018), основен CTA стил. 2. Бутон с бял фон + лайм бордер 2px + лайм текст (текст #587628 еквивалент, тъмен вариант на лайм за четимост), вторичен CTA. 3. Корал само като тънка pill/badge (код, "остават Х бр.", таймер) с тъмен текст #5C1200, никога като голяма плоча с бял текст.

1.2 Проверени комбинации (WCAG AA, нормален текст ≥4,5:1, едър/бутон текст ≥3:1)

1.3 Типография

Основен шрифт: 'Nunito', Arial, sans-serif (web-safe fallback Arial, защото Nunito не е гарантиран в Outlook/Gmail без web font loading, Klaviyo custom_fonts.css го зарежда в живия акаунт).

1.4 Разстояния (spacing scale, px)

4, 8, 12, 16, 24, 32, 40, 48, секции падинг 32-40px desktop / 24px mobile; между модули 24-32px; вътре в карта 16-24px; между ред текст и CTA 24px минимум (палец).

1.5 Ширини и форма

• Максимална ширина на писмо: 600px (единствена колона, без изключения).
• Радиус на карти: 12px. Радиус на бутон: 8px (не pill, дисциплина от текущия VF стил, различава ни от PetLab/Native pill бутоните).
• Изображения: пълна ширина на колоната или колоната/2 за двойки продукти, винаги с width="100%" style="max-width:...px" и height:auto.

2. CTA правила

1. Височина на бутона ≥44px (padding: 14px 28px изчислено на 16px line-height дава ~44px реална кликаема зона, проверено във всеки прототип).
2. Един основен CTA на секция. Ако секцията показва 2+ продукта (bundle ladder), всеки продукт носи собствен вторичен бутон (бял фон + лайм бордер), но само ЕДИН основен плътен лайм бутон стои за цялото писмо, обикновено най-силната оферта или крайното действие.
3. Повторение на CTA по продукт: позволено, всяка продуктова карта може да носи собствен бутон towards нейния продукт, стига визуално да е ясно кой е "основният" (плътен лайм) срещу "вторичен" (outline).
4. Финален общ CTA: всяко писмо завършва с една обобщена покана преди footer (напр. "Разгледай магазина" / "Отговори на този имейл"), дори ако по-горе вече е имало продуктов CTA, това е сигурност за читатели, които са скролнали покрай другите.
5. Бутоните са bulletproof (VML фон за Outlook + table <a> fallback), никога чисто <button> или CSS background-image.
6. CTA текст: глагол в начало, конкретен ("Вземи Артро Плюс", не "Научи повече" самостоятелно за продажба; "Научи повече" е окей само за edu съдържание без директна продажба).

3. Правила за изображения

Правила: - Никога текст, вграден в изображение, който носи оферта/цена/код, всичко четимо е HTML текст (screen reader, blocked-images устойчивост, преводимост). - Alt текст на български, описателен, не keyword-refill. - Dark mode: няма гарантирано dark-mode покритие в конкурентния корпус (0-0,6% от 3138 писма имат dark-mode CSS) и текущият VF export също няма. Прототипите декларират prefers-color-scheme fallback само за фон/текст на самия HTML контейнер (крем фон остава четим и на тъмна тема, защото ink текстът пази контраст), изображенията НЕ получават dark инверсия (риск от"burned-in" бял фон на product снимки, приемлив компромис при табличен email). - Всички снимки reused от visual-rollout-gpt25/footer-rollout-2026-09-15 (реални hosted URL-та, вижте data/PRODUCT-FACTS.md за продуктов контекст). Никакви нови генерации в тази задача.

4. Библиотека от модули

За всеки модул: цел, кога, конкурентна евиденция (email id от VISUAL-REVIEW.csv/DESIGN-PATTERNS.md), лимити на съдържание, мобилно поведение, Klaviyo native бележка.

4.1 Header

• Цел: разпознаваемост, линк към сайта.
• Кога: във всяко писмо, първи блок.
• Съдържание: лого (fixed 180px), опционален малък линк "Виж в браузъра" вдясно (текст, не бутон).
• Мобилно: лого се смалява до 140px, центрирано.
• Klaviyo: image block + text block в 2-column row (SYSTEM_DRAGGABLE); при 1 колона на мобилно "stack_on_mobile: true".

4.2 Hero, image variant

• Цел: емоционален вход, "защо да отворя това писмо".
• Кога: welcome, launch, seasonal.
• Евиденция: BIOPET-SCREEN-01 (lifestyle hero +H1 отгоре), NATIVE-PANO hero pattern (edge-to-edge снимка).
• Лимит: H1 ≤8 думи, 1 lifestyle снимка ≤140KB, 1 кратък subhead ≤20 думи.
• Мобилно: снимка пълна ширина, H1 намалява до 24px.
• Klaviyo: image block full-width + text block отдолу (не текст върху снимка, text-in-image е забранено правило 3).

4.3 Hero, text-first variant

• Цел: по-леко, по-лично усещане (30-40% от кампаниите са текстови писма от автора, стратегия т.12).
• Кога: founder letter, education nurture, Q&A рубрика.
• Евиденция: PETLAB-PANO CEO plain-text писма, WUF-PANO founder confession, BIOPET-SCREEN-20/27.
• Лимит: без hero снимка; header лого + H1 текст + 2-3 изречения встъпление.
• Мобилно: без промяна на layout (вече е тесен текстов блок).
• Klaviyo: чист text block, без image row, най-лесен за редакция без drag-and-drop сложност.

4.4 Product card

• Цел: едно предложение, ясна цена, един CTA.
• Кога: всяко продуктово писмо (replenishment, cross-sell, single-offer).
• Евиденция: стандартен формат във всички 6 конкурента + текущ VF c04-omega.
• Лимит: 1 снимка, име на продукт, ≤3 bullet предимства, цена, 1 бутон.
• Мобилно: снимка/текст stack вертикално (снимка отгоре).
• Klaviyo: 2-колонна row (снимка | текст+бутон) с stack_on_mobile: true.

4.5 Bundle ladder 1/2/3

• Цел: количествена оферта вместо голям %, съгласно т.7 от стратегията.
• Кога: Артро 1/2/3 (39/78/99,90 €), Омега cross-sell.
• Евиденция: PETLAB-PANO Buy1/2/3 карти (най-преизползваният модул в целия корпус), FERA-MILLED autoship-vs-one-time, текущ VF c03-bundle (разширяваме до 3 нива).
• Лимит: 3 карти в ред (desktop), значка "Най-изгодно" само на средната/третата, реална подарък-логика от OFFERS-VERIFIED.csv (не измислена).
• Мобилно: картите се stack-ват вертикално, значката остава видима.
• Klaviyo: 3-column row, stack_on_mobile: true; всяка колона отделен image+text+button group.

4.6 "Кое за кой проблем" matcher table

• Цел: избор по нужда за нови абонати (А4 аудитория, welcome).
• Кога: welcome писмо 1, "избор" писмо.
• Евиденция: BIOPET-SCREEN-07, ZESTY-PANO-B6GQ13nYJbEV180bvWypMze2aA5kow.
• Лимит: максимум 4 реда (симптом → продукт → 1 линк), без диагностични claims извън разрешените теми (т.5 стратегия).
• Мобилно: таблица се разпада на карти-редове (не хоризонтален скрол).
• Klaviyo: таблицата се строи като поредица от 2-column rows (симптом текст | продукт текст+линк), не като <table> HTML, drag-and-drop няма native table block, затова "редовете" са отделни rows със същия padding за визуална консистентност.

4.7 Ingredient/dose strip

• Цел: прозрачност на дозата, диференциатор за категорията добавки.
• Кога: onboarding "как да дозирате", образователно писмо.
• Евиденция: BIOPET-SCREEN-25, FERA-MILLED-ddf000e3770ae3b2 (dose vs конкурент).
• Лимит: само потвърдени числа от PRODUCT-FACTS.md/PRODUCTS-CURRENT.csv; ако дозата не е потвърдена (Артро активни съставки, пробиотик CFU), полето остава [ПРОВЕРИ] в HTML коментар, не се публикува измислено число.
• Мобилно: icon+text редове stack-ват, без хоризонтален грид над 2 колони.
• Klaviyo: редица от малки image (икона) + text blocks, 2-column rows.

4.8 Author quote card (Д-р Маджаров)

• Цел: авторитет на автора на продукта, НЕ клиника (правило т.5.2, никакви покани за прегледи/клиника).
• Кога: education nurture, launch, Q&A рубрика.
• Евиденция: WUF-PANO vet quote card, NATIVE-PANO vet/scientist quote, YUMOVE-PANO, FERA carousel вариант, най-силният proof модул за категорията по DESIGN-PATTERNS.md т.2.1.
• Лимит: 1 цитат ≤40 думи, подпис "Д-р Симеон Маджаров, автор на формулата" (без "нашият вет"/клиника), олио рамка + лайм акцентна линия.
• Мобилно: карта пълна ширина, текст central-align опционален.
• Klaviyo: text block в card с border styles (border color олио, border-radius 12), без снимка по подразбиране (снимка на автора опционална, ако е одобрена).

4.9 Timeline "какво да очаквате"

• Цел: управлява очакване след покупка (ден/седмица/месец), намалява ранни връщания и недоволство.
• Кога: post-purchase onboarding (F07).
• Евиденция: BIOPET-SCREEN-31 (order-status tracker икони, адаптирано за product timeline вместо доставка).
• Лимит: 3-4 стъпки максимум, всяка ≤15 думи.
• Мобилно: вертикална линия вместо хоризонтална (stack).
• Klaviyo: поредица от text blocks с малка image номер-икона отляво, 2-column rows, stack на мобилно превръща реда в стъпка-под-стъпка вертикално, което е желаното поведение и без допълнителен CSS.

4.10 Real review card (placeholder)

• Цел: социално доказателство, само реални отзиви с разрешение (т.5.4 стратегия, забранени чужди/измислени %).
• Кога: review request follow-up, social proof кампания.
• Евиденция: WUF-PANO UGC review grid, NATIVE before/after с име на любимец.
• Лимит: placeholder текст ясно маркиран [РЕАЛЕН ОТЗИВ: изчаква разрешение от клиента], без звезди по подразбиране (нямаме звездна система активна).
• Мобилно: карта пълна ширина.
• Klaviyo: text + опционален image (снимка на любимеца, само с разрешение) block.

4.11 FAQ list

• Цел: сваля възражения преди покупка/подновяване.
• Кога: launch серия, replenishment с код, product page follow-up.
• Евиденция: обичайна практика във всички 6 конкурента като затварящ модул.
• Лимит: 3-5 въпроса, отговор ≤3 изречения, без нови claims извън одобрените теми.
• Мобилно: без промяна (вече е вертикален списък).
• Klaviyo: редуващи се text blocks (въпрос bold + отговор regular), разделени с тънък divider block.

4.12 Offer/code block

• Цел: единствено място, където се показва код/срок, коралов акцент тук, никъде другаде.
• Кога: welcome оферта, replenishment с код (само ако собственикът реши, т.7), сезонна кампания.
• Евиденция: практика при всички брандове; VF правило "пестим оранжевото" (т.5.7 стратегия).
• Лимит: 1 код видим наведнъж, реален срок само ако е активен в Shopify (т.7 P0 сигурност, fullmargin не се споменава никъде).
• Мобилно: pill badge central, не се къса на 2 реда.
• Klaviyo: text block с dashed border style (border-style: dashed, border-color корал), код в <strong>.

4.13 Founder text letter

• Цел: личен тон, високо доверие, ниска production цена (т.6 баланс 15% "писмо от автора").
• Кога: launch announce, Q&A рубрика, чувствителни теми (смяна на формула, наличност).
• Евиденция: PETLAB CEO note, WUF founder confession, BIOPET-SCREEN-20/27.
• Лимит: без hero картинка, подпис в края, P.S. ред опционален.
• Мобилно: без промяна.
• Klaviyo: самостоятелен text block, минимален брой sections, най-лесният темплейт за бърза редакция от Симеон.

4.14 Cross-sell row

• Цел: препоръка на втори продукт след основното съобщение (Омега → Артро за възрастни кучета, храна → Омега).
• Кога: второ съобщение в писмото, след основния CTA, преди footer.
• Евиденция: PETLAB related-product upsell, NATIVE numbered listicle + upsell.
• Лимит: 1 малка снимка + 1 изречение + текстов линк (не плътен бутон, да не конкурира основния CTA, правило 4.2).
• Мобилно: пълна ширина, снимка отгоре.
• Klaviyo: 2-column row (icon-size снимка | text+link), stack на мобилно.

4.15 Trust strip

• Цел: лек бадж ред (Ветеринарно одобрено / Естествени съставки / Гаранция), без нова графика.
• Кога: под hero или над footer, всяко продуктово писмо.
• Евиденция: YuMOVE 3-icon strip (навсякъде), Zesty trust row в welcome.
• Лимит: 3 бадж максимум, само текст+малка икона, без нови claims.
• Мобилно: 3 икони stack в 1 колона или остават в ред при по-малък font (≤13px).
• Klaviyo: 3-column row с малки image+text двойки.

4.16 Footer (VF-Footer, съществуващ)

• Цел: unsubscribe, социални мрежи, адрес, правно и брандово задължителен.
• Кога: всяко писмо, последен блок, без промяна.
• Източник: footer-rollout-2026-09-15/footer.json, вече native SYSTEM_DRAGGABLE секция, приложена към всичките 14 темплейта. Не пипаме съдържание, лого, социални икони или контакти тук.
• Klaviyo: копирана native секция (не universal linked block, вижте README на footer-rollout), remains as-is.

5. Класификация desktop/mobile бърза справка

Файлове: prototypes/ (5 HTML прототипа + index.html галерия + screens/ + QA.md).