Humess — Дизайн-система

01 / Основи

Теплі та серйозні кольори.

Тепле полотно — ніколи не чисто-біле. Заголовки — глибокий navy, ніколи не чорні. Один зелений акцент, усе інше — тільки відтінки.

Чорнило та акцент

#F7F7F7

--canvasполотно сторінки — тепле, не біле

#08304C

--ink-headзаголовки й наголоси — navy, не чорний

#4A4A4A

--ink-bodyосновний текст

#7A7E85

--ink-softдругорядний текст, підписи

#1FA968

--accentЄДИНИЙ акцентний колір

#157A4C

--accent-deepнатиснутий стан, текст на м'ятних тінтах

Брендові градієнти

--grad-iriтекстовий градієнт — акцентне слово в заголовку

--grad-ringкільце головної CTA-кнопки (закільцьований)

--grad-brandвордмарк, прогрес-бар

Пастельні заливки секцій

--wash-mint

--wash-peach

--wash-sky

--wash-lav

Один відтінок на секцію. Радіальна заливка починається згори і розчиняється в полотні — секції дихають, сторінка лишається спокійною.

HTML — секція із заливкою

<section class="section-pad">
  <div class="wash wash--mint" aria-hidden="true"></div>
  <div class="container">
    <!-- chip → h2 → sec-body → showcase -->
  </div>
</section>

/* токен */
--wash-mint: radial-gradient(120% 90% at 50% 0%,
  #E2F4E9 0%,
  rgba(231,244,236,0.45) 55%,
  rgba(247,247,247,0) 100%);

Поверхня

радіус: --r-card: 28px (картки) · 999px (пігулки)
межа: --card-border: rgba(8,48,76,0.07)
тінь: 0 24px 50px -28px rgba(8,48,76,0.22)

CSS — біла поверхня

.card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);      /* 28px */
  box-shadow: 0 24px 50px -28px rgba(8,48,76,0.22);
}
/* тінь несе картку — вона ПЛАВАЄ, а не стоїть у рамці */

02 / Типографіка

Дві сім'ї. Одне фірмове слово.

Onest несе весь текст. Playfair Display з'являється лише як курсивне акцентне слово всередині заголовка — це ~80% преміального відчуття.

Аа

Playfair Display — italic 500–700

Тільки акцентні слова в заголовках. Ніколи — суцільний текст.

генетичний · назавжди · саме ваш · знаєте своє тіло

Аа

Onest — 400 / 500 / 600 / 700

Все інше: заголовки (500), текст (400), кнопки й чіпи (600).

АБВГҐДЕЄЖЗИІЇЙ абвгґдеєжзиії 0123456789

Шкала

Ваш код

H139→56px · 1.07 · 500 · −0.045em

Один тест

H234→40px · 1.08 · 500 · −0.045em

Заголовок картки

H319–20px · 500–650 · −0.03em

Основний текст — Onest 400, теплий сірий.

body17px · 1.55 · 400

Підтримний текст секцій та кроків.

support15.5px · --ink-soft

Підписи, мета-рядки, чіпи.

caption13–13.5px

Дрібні пояснення та примітки.

micro12–12.5px

Фірмовий заголовок

Один тест — і ви знаєте своє тіло.

Як працює саме ваш організм.

HTML + CSS

<h2>Один тест — і ви
  <span class="serif-accent serif-accent--iri">знаєте своє тіло</span>.
</h2>

.serif-accent {
  font-family: var(--serif);   /* Playfair Display */
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.02em;
}
/* варіант 1: іридесцентний градієнт (герой, великі обіцянки) */
.serif-accent--iri {
  background: var(--grad-iri);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* варіант 2: зелений (робочі секції) */
.serif-accent--green { color: var(--accent); }

ОДНЕ акцентне слово чи фраза на заголовок. Два акценти = жодного.

Іридесцентний — для найбільших обіцянок (герой, фінальна CTA). Зелений — для робочих секцій. Теплий помаранч #C2702E — коли поруч уже є зелений.

03 / Кнопки

Тихі пігулки. Одне кільце.

Радіус 999 — завжди. Жодних градієнтних заливок і темних панелей. Найсильніша кнопка сторінки — скляна пігулка в іридесцентному кільці.

Найсильніша кнопка сторінки

Одна жива CTA — і proof-бейджі під нею.

Замовити Complex

точність 99,9% ISO 17025 GDPR

btn--ring — головна CTA

Скляне живе кільце

СТАТИЧНИЙ ВАРІАНТ (хедер, компактні місця)

Замовити

HTML

<!-- герой / головне замовлення: скло + живе кільце -->
<a class="btn btn--ring btn--ring-glass btn--lg" href="#order">
  Замовити Complex
</a>

<!-- хедер, компактні місця: статичне кільце -->
<a class="btn btn--ring" href="#order">Замовити</a>

/* кільце = прозора межа 4.5px, зафарбована градієнтом */
.btn--ring {
  border: 4.5px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--grad-ring) border-box;
}

btn--soft — другорядна дія

Дивитись усі показники Переглянути звіт

ТИХІ АЛЬТЕРНАТИВИ btn--black btn--green

HTML + CSS

<a class="btn btn--soft" href="#analysis">
  Дивитись усі показники
</a>

.btn--soft {
  background: rgba(31,169,104,0.11);
  color: var(--accent-deep);
  box-shadow: inset 0 0 0 1px rgba(31,169,104,0.16);
}

btn--ring зарезервована за головним замовленням. Одна на екран — ніколи дві поруч.

Не ховайте цифри в кнопках. Ціна й знижка живуть поруч із кнопкою, не всередині.

04 / Чіпи та бейджі

Малі слова, які тримають довіру.

Білі пігулки з тонованим диском іконки. Текст завжди navy — колір несе тільки диск.

Eyebrow-чіп секції

Чому ДНК Що ви отримуєте Ваш результат

у нормі увага інформація

HTML

<!-- eyebrow над заголовком секції -->
<span class="chip chip--mint">
  <span class="chip__ico">
    <svg class="ic"><use href="#ic-dna"/></svg>
  </span>
  Чому ДНК
</span>

<!-- соціальний доказ -->
<span class="chip chip--social">
  <span class="chip-avatars">
    <img src="img/av1.png" alt=""> …
  </span>
  <b>5 000+</b>&nbsp;пройшли тест
</span>

<!-- пігулки значень (словник результатів) -->
<span class="pill-val pill-val--ok">у нормі</span>
<span class="pill-val pill-val--warn">увага</span>
<span class="pill-val pill-val--info">інформація</span>

Proof-бейджі NEW

HTML + CSS

<!-- ПІД КОЖНОЮ лід-формою / кнопкою замовлення -->
<div class="proof-badges">
  <span class="proof-badge">
    <svg><use href="#ic-check"/></svg>точність 99,9%
  </span>
  <span class="proof-badge">
    <svg><use href="#ic-shield"/></svg>ISO 17025
  </span>
  <span class="proof-badge">
    <svg><use href="#ic-lock"/></svg>GDPR
  </span>
</div>

.proof-badges { display: flex; flex-wrap: wrap;
  justify-content: center; gap: 7px; margin-top: 14px; }
.proof-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 9px; border-radius: 999px;
  background: #fff; border: 1px solid var(--card-border);
  font-size: 12px; font-weight: 650; color: var(--ink-head);
  box-shadow: 0 8px 18px -14px rgba(8,48,76,0.30);
}

Розміщення фіксоване: одразу під кнопкою submit кожної лід-форми. Склад теж фіксований: точність 99,9% · ISO 17025 · GDPR.

05 / Картки

Картки плавають, а не стоять у рамках.

Дві поверхні: біла картка на тіні — для контенту й відгуків; тонований мат — для карток із зображеннями.

«Від детального ДНК-тесту до професійної консультації. Тепер чітко розумію, на що звертати увагу.»

Evelina Chorna

3 місяці тому · Google

HTML — біла картка

<div class="card">
  <div class="stars">★★★★★</div>
  <p>«Від детального ДНК-тесту до професійної
     консультації…»</p>
  <div class="profile-row">
    <img class="avatar" src="img/evelina-chorna.png" alt="">
    <div>
      <div class="profile-row__name">Evelina Chorna</div>
      <div class="profile-row__meta">3 місяці тому</div>
    </div>
  </div>
</div>

Тонований мат (image-led)

Що отримуєте

Звіт на 340+ показників

Людською мовою — що їсти й що змінити. Не таблиця для лікарів.

Під ваші цілі

Хто веде

HTML — тонований мат

<article class="mat mat--peach">
  <div class="mat__media">
    <img class="img-fade" src="img/box-complex.png" alt="…">
  </div>
  <span class="mat__kicker">Що отримуєте</span>
  <h3 class="mat__title">Звіт на 340+ показників</h3>
  <p class="mat__sub">Людською мовою — що їсти
     й що змінити.</p>
</article>

/* відтінки мату: --peach / --sky / --lav
   (--mat-k фарбує кікер автоматично) */
.mat--peach { background:
  linear-gradient(168deg, #FBEEE2 0%, #FCF6F0 100%);
  --mat-k: #C06A2E; }

Ніколи не обгортайте фото+текст жорсткою рамкою 1px — це брошурна коробка, її вже відхиляли. Тінь і радіус несуть картку самі.

Картка не вища за свою інформацію. Вертикальний «наповнювач» — перша ознака generic-дизайну.

06 / Живі зображення

Продукт і люди плавають на полотні.

Фото — вирізаний PNG без фону, який висить на м'якій тіні. Нижній край розчиняється маскою — жодних жорстких країв.

CSS — три обробки

/* 1. продуктовий виріз — плаває на тіні */
.img-float {
  filter: drop-shadow(0 16px 24px rgba(8,48,76,0.18));
}

/* 2. розчинити нижній край (для матів і країв) */
.img-fade {
  mask-image: linear-gradient(180deg,
    #000 82%, transparent 100%);
}

/* 3. люди: приглушити колір + м'який низ */
.img-person {
  filter: saturate(0.72) brightness(1.02);
  mask-image: linear-gradient(to bottom,
    #000 84%, transparent 100%);
}

Конвеєр: реальне брендове фото → bin/cutout.sh (зняти фон) → розмістити → одна з трьох обробок вище.

Люди — ширший кадр з опорним об'єктом (ноутбук = онлайн-консультація), не близький портрет в упор. Десатурація ~0.72 садить фото в палітру.

Немає фінального фото — ставте плейсхолдер зі специфікацією (сюжет, кадр, настрій, файл призначення). Плейсхолдер із хорошим ТЗ — це фіча, не провал.

07 / Живий рух

Повільно, стримано, одне за раз.

Рух — те, що робить сайт живим. Але він цілеспрямований: один акцент за раз, і кожна анімація має вимикач reduced-motion зі змістовним статичним кадром.

Reveal-on-scroll — базовий механізм

Набір удома

Один зразок

Звіт назавжди

CSS + JS

<div class="reveal">…</div>
<div class="reveal" data-d="1">…</div>  <!-- stagger -->

.reveal { opacity: 0; transform: translateY(22px);
  transition: opacity .7s ease,
    transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }

const io = new IntersectionObserver((entries) => {
  for (const e of entries) {
    if (e.isIntersecting) {
      e.target.classList.add('in');
      io.unobserve(e.target);
    }
  }
}, { threshold: 0.12 });
document.querySelectorAll('.reveal')
  .forEach(el => io.observe(el));

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

Каталог живих ефектів лендінгу

Аврора героя

3 розмиті бренд-плями повільно дрейфують за заголовком — translate/scale 19–23s, alternate.

Живе кільце CTA

ringFlow 4s (градієнт тече по кільцю) + ctaInvite 3.4s (ледь помітний пульс); на hover — швидше.

Count-up

[data-count] + IntersectionObserver @0.6 — цифри доростають з кубічним послабленням, один раз.

Прогрес прочитання

3px смуга згори у --grad-brand, ширина = відсоток скролу.

Пульс статусу

Зелена крапка в футері — кільце box-shadow 2.4s.

Плавний FAQ

JS анімує висоту <details> — без нативного стрибка.

Смак руху: повільний, цілеспрямований, один акцент за раз. Ніколи не кричущий.

Кожна анімація вмирає гідно: prefers-reduced-motion лишає читабельний статичний кадр.

08 / Дані та цифри

Дані — це дизайн, не дамп.

Сторінки з великою кількістю даних — ціни, системи, показники — дають кожній цифрі свою форму: чек, склад, спокійні рядки. Стіна з чіпів — це дамп.

Чек із підсумком (ledger) NEW

Complex — один набір

Wellness 234 показники15 900 ₴

Disease 124 показники ризику15 900 ₴

Окремо разом31 800 ₴

Complex22 200 ₴

економія 9 600 ₴

HTML — чек

<!-- компонент не живе голим: садимо в композицію
     панель + реальне фото + картка -->
<div class="panel-tint panel-tint--mint">
  <img class="img-float"
    src="img/box-complex.png" alt="Набір Complex">

  <div class="card">
    <div class="ledger">
      <div class="ledger__row">
        <span class="ledger__label">Wellness
          <small>234 показники</small></span>
        <span class="ledger__val">15 900 ₴</span>
      </div>
      <div class="ledger__row">
        <span class="ledger__label">Окремо разом</span>
        <span class="ledger__val price-was">31 800 ₴</span>
      </div>
      <div class="ledger__row ledger__row--total">
        <span class="ledger__label">Complex</span>
        <span class="ledger__val">22 200 ₴</span>
      </div>
    </div>
    <span class="pill-delta">економія 9 600 ₴</span>
  </div>
</div>

Цифри без коробок (stat-row) NEW

4 000+

клієнтів пройшли тест

99,9%

точність прочитання

5–8 тижнів

від зразка до звіту

HTML

<div class="stat-row">
  <!-- головна цифра — на крок більша -->
  <div class="stat stat--lead">
    <div class="stat__num">4 000+</div>
    <div class="stat__label">клієнтів пройшли тест</div>
  </div>
  <div class="stat">
    <div class="stat__num">99,9<small>%</small></div>
    <div class="stat__label">точність прочитання</div>
  </div>
</div>

<!-- pill-delta живе поруч зі своїм доказом:
     чек (економія) чи історія (story-result) -->

Картка звіту (seg-bar + рядки) NEW

Реальний звіт Humess — телефон і сторінки PDF

Ваш звіт · Complex

358 показників PDF — назавжди

Wellness — 234
Disease — 124

Вітамін Dувага

Омега-3у нормі

Метаболізм кофеїнуповільний

HTML

<!-- реальний звіт поруч, дані — в картці -->
<div class="panel-tint panel-tint--sky">
  <img class="img-float" src="img/report.png" alt="…">

  <div class="card">
    <!-- склад: ширина сегмента = flex: число -->
    <div class="seg-bar">
      <i class="seg--green" style="flex:234"></i>
      <i class="seg--sky" style="flex:124"></i>
    </div>
    <ul class="seg-legend">
      <li><span class="dot"
        style="background:var(--accent)"></span>
        Wellness — <b>234</b></li>
      …
    </ul>

    <!-- рядки звіту: значення = pill-val -->
    <div class="ledger__row">
      <span class="ledger__label">Вітамін D</span>
      <span class="pill-val pill-val--warn">увага</span>
    </div>
  </div>
</div>

Довгі переліки (spec-rows) NEW

Харчування та дієти

Вітаміни та мінералиD · B12 · залізо

Спорт та активність

Травна система

Серце та судини

Сон

Стресостійкість

Шкіра

Щитоподібна залоза

Памʼять

Усі 30 систем Wellness

HTML

<!-- довгий перелік: 2 колонки, пунктирні рядки.
     НІКОЛИ не стіна чіпів. -->
<div class="spec-rows">
  <div class="spec-row">Харчування та дієти</div>
  <div class="spec-row">Вітаміни та мінерали
    <span class="spec-row__meta">D · B12 · залізо</span>
  </div>
  …
</div>
<!-- 10 видно + кнопка на решту -->
<a class="btn btn--soft" href="#all">
  Усі 30 систем Wellness
</a>

Ціна як акцент (price-serif) NEW

22 200 ₴частинами від 7 400 ₴/міс

6 000 ₴консультація + меню

HTML + CSS

<div class="price-serif">
  22 200 ₴<small>частинами від 7 400 ₴/міс</small>
</div>

/* ціна = фірмовий курсив; одиниця тихша */
.price-serif {
  font-family: var(--serif);
  font-style: italic; font-weight: 600;
  font-size: 36px; color: var(--ink-head);
}
.price-serif small {
  font-family: var(--sans); font-style: normal;
  font-size: 14px; color: var(--ink-soft);
}

Ціна-артефакт героя (hero-price) NEW

Патерн — герой сторінки цін

<!-- portrait.so /wallet: «вся ціна — одне число».
     Картка = відповідь героя: число + 2 рядки.
     НЕ додавайте сюди частинами / seg-bar /
     «окремо по…» — це робота чека в #tiers. -->
<aside class="hero-price">
  <div class="hero-price__head">
    [лого] Humess Complex  [−30%]
  </div>
  <span class="price-serif">22 200 ₴</span>
  <s class="price-was">31 800 ₴</s>
  <div class="ledger">… 2 рядки максимум …</div>
</aside>
/* на десктопі: transform: rotate(-1.4deg) —
   артефакт, не форма */

Герой відповідає — чек доводить. Ціна-артефакт у героя тримає лише відповідь (число + що входить, 2 рядки). Уся математика (234+124, −9 600, частинами, «окремо по…») живе один раз — у чеку секції тарифів. Жоден факт не з'являється двічі на повній вазі.

Компонент даних не живе голим. Садіть його в композицію: тонована панель + реальне зображення (набір, звіт) + картка з даними. Голі рядки на білому — це схема, не дизайн.

Кожній цифрі — своя форма: математика ціни → чек, «з чого складається» → смуга, довгий перелік → рядки у 2 колонки. Стіна чіпів — дамп, її вже відхиляли.

Цифра не живе без підпису. «4 000+» — тільки разом із «клієнтів пройшли тест». Голі числа читаються як заглушка.

Максимум один stat-row на сторінку, і кожна цифра — поруч зі своїм доказом. Розкиданий усюди, він стає генеричною смугою-наповнювачем.

09 / Порівняння і кроки

Складне — поруч, і одразу ясно.

Вибір пояснює порівняння, програму — кроки, план — одна зібрана панель. Форма несе аргумент, щоб текст міг бути коротким.

Відоме проти нового (vs-split) NEW

«ДНК-тест з реклами» — розвага.

Сотні маркерів про походження і риси. Цікаво — але не про здоровʼя.

Humess — медичний рівень.

700 000+ маркерів, лабораторія Eurofins, точність 99,9%. І дані — ваші.

HTML

<div class="vs-split">
  <div class="vs-half vs-half--warm">
    <div class="vs-half__face">…іконка…</div>
    <div class="vs-half__t">«ДНК-тест з реклами» —
      <span class="serif-accent">розвага</span>.</div>
    <p class="vs-half__s">Сотні маркерів про
      походження і риси.</p>
  </div>
  <div class="vs-half vs-half--brand">
    <!-- продукт? реальне фото, не іконка -->
    <div class="vs-half__face vs-half__face--img">
      <img class="img-float" src="img/box-complex.png"
        alt="Набір Humess Complex"></div>
    <div class="vs-half__t">Humess —
      <span class="serif-accent">медичний рівень</span>.</div>
    <p class="vs-half__s">700 000+ маркерів,
      Eurofins, 99,9%.</p>
  </div>
</div>

Чек-лист переваг (check-list) NEW

Консультація лікаря після результатів — уже в ціні.
Доставка набору по Україні — безкоштовна.
Результати лишаються назавжди — тест один раз у житті.
Повний доступ до raw data — 700 000+ маркерів.

HTML

<ul class="check-list">
  <li><span class="ck"></span>
    <span><b>Консультація лікаря</b>
    після результатів — уже в ціні.</span></li>
  <li><span class="ck"></span>
    <span>Доставка по Україні —
    <b>безкоштовна</b>.</span></li>
</ul>

<!-- відтінок диска = відтінок секції -->
<ul class="check-list check-list--peach">…</ul>

Панель плану (panel-tint + feat-grid) NEW

Програма 2 — з лікарем до результату

Комплексне медичне ведення

1

Діагностика

Розширена анкета + аналіз лабораторних і генетичних даних.

2

Заключення

Письмове медичне заключення й рекомендації: харчування, сон, активність.

3

Раціон

Персональне меню з калорійністю та БЖВ під ваші цілі.

4

Контроль результату

Повторні аналізи, фінальна консультація і чат з лікарем 1,5 міс.

10 000 ₴

Додати до тесту

ІГ

Ірина Гаврилюк

лікар, дієтолог · 10+ років

ЮН

Юлія Негрієнко

функціональна медицина · 20+ років

HTML

<!-- план = ОДНА зібрана панель:
     назва → feat-grid → ціна → CTA -->
<div class="panel-tint panel-tint--lav">
  <span class="mat__kicker">Програма 2</span>
  <h3>Комплексне медичне ведення</h3>

  <div class="feat-grid">
    <div class="feat">
      <div class="feat__ico">…іконка…</div>
      <div class="feat__t">Діагностика</div>
      <div class="feat__s">Анкета + аналіз
        даних.</div>
    </div>
    …
  </div>

  <div class="price-serif">10 000 ₴</div>
  <a class="btn btn--soft">Додати до тесту</a>
</div>

Кроки програми (stepper) NEW

Етап 1
Діагностика
Розширена анкета здоровʼя + аналіз лабораторних і генетичних даних. Відео-консультація 60 хв.
Етап 2
Заключення
Письмове медичне заключення з рекомендаціями.
Етап 3
Раціон
Персональний раціон з калорійністю та БЖВ.
Етап 4
Контроль результату
Повторні аналізи, фінальна консультація, чат 1,5 міс.

HTML

<ol class="stepper">
  <li class="step is-on">
    <div class="step__k">Етап 1</div>
    <div class="step__t">Діагностика</div>
    <div class="step__d">Анкета + аналіз даних.
      Відео-консультація 60 хв.</div>
  </li>
  <li class="step">…</li>
</ol>

<!-- .is-on = активний (світиться).
     .stepper--open = показати всі описи
     (статичні сторінки програм). -->

Живі дрібниці (rule-stat · powered-by) NEW

4 000+ клієнтів вже з нами

Приймаємо замовлення

лабораторія Eurofins, Данія

технологія Illumina

Відгуки (скоро)

HTML

<!-- лічильник на пунктирній лінії -->
<div class="rule-stat">
  <span class="rule-stat__chip">
    4 000+ клієнтів вже з нами
  </span>
</div>

<!-- dot-live ЛИШЕ для справді поточного
     стану, не для статичних підсумків -->
<span class="rule-stat__chip">
  <span class="dot-live"></span>
  Приймаємо замовлення
</span>

<!-- тиха атрибуція партнера -->
<span class="powered-by">
  <img src="img/eurofins.png" alt="Eurofins">
  лабораторія Eurofins, Данія
</span>

<!-- статус у чіпі -->
<span class="chip">…Відгуки
  <span class="chip__meta">(скоро)</span></span>

FAQ у дві колонки (qa-cols) NEW

Чому дорожче за «ДНК-тести з реклами»?

Ми читаємо 700 000+ маркерів у медичній лабораторії Eurofins із точністю 99,9% — і супроводжуємо лікарем. Розважальні тести цього не роблять.

Чи можна оплатити частинами?

Так — частинами від 7 400 ₴/міс на 3 місяці, без переплат.

Скільки чекати результати?

5–8 тижнів від зразка до готового звіту.

Що буде з моїми даними?

Зразок іде в лабораторію під анонімним кодом, дані захищені GDPR, а raw data доступні лише вам.

HTML

<div class="qa-cols">
  <details class="qa" open>
    <summary>Чому дорожче за «ДНК-тести
      з реклами»?</summary>
    <p class="qa__a">700 000+ маркерів,
      Eurofins, 99,9% — і лікар поруч.</p>
  </details>
  <details class="qa">…</details>
</div>
<!-- 2 колонки ≥800px; плавне відкриття —
     реюз JS-анімації FAQ з лендінгу -->

feat-grid живе ТІЛЬКИ в зібраній панелі плану (назва → інвентар → ціна → CTA). Окремий ряд «іконка-заголовок-підпис» — найгенеричніший шаблон, його вже відхиляли.

feat-grid і stepper — дві форми ОДНИХ даних програми. На сторінці живе одна з них, ніколи обидві. Етапи? Ставте цифри (.feat__num), не декоративні іконки.

vs-split — лише реальні факти обох сторін. Порівняння продає, коли чесне. Де порівнюються продукти — у «обличчя» ставте реальне фото, не іконку.

dot-live — тільки для справді поточного стану («приймаємо замовлення»), ніколи для статичних підсумків. Позичена «живість» = фейковий дашборд у мініатюрі.

Програми, що продовжують одна одну, — з'єднуйте фізично. На сторінці цін П2 «росте» з П1 через вузлик «+» на спільній рейці степера (вертикально на мобілі, поруч на десктопі) — звʼязок показаний, не описаний. Патерн живе на pricing.html#care.

10 / Відгуки

Реальні голоси — без шуму.

Матеріал справжній: Google-відгуки, листування після консультацій, сторіз і відео клієнтів. Сирий скріншот не вставляємо — переносимо текст у бренд: правда лишається, шум зникає.

Діалог після консультації (dm-card) NEW

Підкажіть, як пройшла консультація? Все сподобалось?)

Так, загалом все сподобалося — досить глибоко було розказано щодо моєї дієти і харчування. Збільшилося розуміння, які аналізи тримати під контролем.

Telegram · клієнтка Humess · після консультації

HTML

<!-- реальний ТЕКСТ листування, наші бульбашки.
     Клієнт = м'ятна, праворуч. -->
<div class="card">
  <div class="dm-card">
    <div class="dm-bubble dm-bubble--brand">
      Підкажіть, як пройшла консультація?</div>
    <div class="dm-bubble dm-bubble--client">
      Так, загалом все сподобалося — досить
      глибоко було розказано щодо моєї дієти…</div>
  </div>
  <div class="dm-meta">Telegram · клієнтка Humess</div>
</div>

Сторіз клієнтів (ugc-card) NEW

Клієнтка здає зразок слини за інструкцією

Instagram

Сторіз клієнтки — розділ «Онкологія» її звіту

Instagram розбирає ризики у своєму звіті

HTML

<!-- 9:16 кадр зі сторіз/відео клієнта.
     __play — лише якщо це відео.
     __caption — лише коли додає нове
     (не дублює текст у кадрі). -->
<div class="ugc-card">
  <img src="img/reel-1.jpg" alt="…">
  <!-- реальний @handle клієнта (за згодою),
       інакше просто платформа -->
  <span class="ugc-card__handle">Instagram</span>
  <span class="ugc-card__play"></span>
  <span class="ugc-card__caption">
    розбирає ризики у своєму звіті</span>
</div>

<!-- архів реальних сторіз/відео:
     prototypes/img/_staging/reviews/ -->

Історія з результатом (card + story-result) NEW

Д

Дмитро М.

марафонець, 34 · ціль: спорт

«Змінив підхід до тренувань — тепер знаю, що працює саме для мого організму.»

через 3 місяці ↓ −4 хв на 5 км

HTML

<div class="card">
  <div class="profile-row">
    <span class="avatar">Д</span>
    <div>
      <div class="profile-row__name">Дмитро М.</div>
      <div class="profile-row__meta">
        марафонець, 34 · ціль: спорт</div>
    </div>
  </div>
  <p>«Змінив підхід до тренувань…»</p>

  <!-- результат = реальна зміна + строк -->
  <div class="story-result">
    <span class="story-result__label">
      через 3 місяці</span>
    <span class="pill-delta">↓ −4 хв на 5 км</span>
  </div>
</div>

Сирі скріншоти не вставляємо. Переносимо реальний текст у бренд-бульбашки та картки — правда та сама, шуму нема. Google-картка відгуку — в розділі 05 «Картки».

Матеріал тільки реальний: 14 текстових відгуків, 14 листувань, 13 сторіз-фото/відео і 6 довгих відео лежать у prototypes/img/_staging/reviews/. Імена й цифри — з них, нічого не вигадуємо.

Результат в історії — лише реальна зміна з реальним строком («−4 хв на 5 км · 3 міс»). Без before/after-обіцянок — це і політика Meta, і чесність.

Сітка однакових карток потребує ритм-брейкера: один елемент інакший за формою — відгук із реальним фото набору, цитата на всю ширину серифом. Однорідна сітка = дефолтний AI-грід; брейкер бере реальний артефакт із матеріалу, не вигадується. Живе на reviews.html#google і в стрічці відгуків сторінки цін.