feat(sprint-5): hero #f9f4e7, doctors real photos + typography site section

- Hero banner: bg #f9f4e7 (pixel-sampled), checks #bf9975, outline btn, real doctor photo
- Doctors: H2 text-3xl, stats #60959c no-bg border-bottom, 6 real photos from site
- Colors: add #f9f4e7 (Hero), fix #b8e6ed (form), #e9e4d4 (pill buttons)
- Typography: add «site state 23.03.2026» table (real font sizes/colors by block)
- Docs: SPRINTS.md Sprint 5 progress, LLM_CONTEXT.md v4.2

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/web/app/blocks/doctors/page.tsx

@@ -11,13 +11,37 @@ const STATS = [
   { num: "12 000+", label: "успешно проведённых операций", prefix: "Свыше" },
 ];
 
-const MOCK_DOCTORS = [
-  { name: "Макарова Людмила Тимофеевна", spec: "ЛОР врач, сурдолог" },
-  { name: "Тимофеева Наталья Александровна", spec: "ЛОР врач, мед. Завед. центром сурдологии и а..." },
-  { name: "Воронникова Наталья Валентиновна", spec: "Отоларинголог, ЛОР-хирург" },
-  { name: "Лобанова Ирина Юрьевна", spec: "ЛОР врач, сурдолог" },
-  { name: "Тарасова Наталья Сергеевна", spec: "Специалист по сурдопротезированию (Сурдолог)" },
-  { name: "Сильянова Светлана Викторовна", spec: "ЛОР врач, сурдолог" },
+const DOCTORS = [
+  {
+    name: "Макарова Людмила Германовна",
+    spec: "ЛОР врач, сурдолог",
+    photo: "/doctors/makarova.jpg",
+  },
+  {
+    name: "Семерикова Наталия Александровна",
+    spec: "ЛОР врач, сурдолог, хирург. К.М.Н. Завед. Центром сурдологии",
+    photo: "/doctors/semerikova.png",
+  },
+  {
+    name: "Ворончихина Наталия Валерьевна",
+    spec: "Отоневролог, хирург. К.М.Н., доцент кафедры ПГМУ",
+    photo: "/doctors/voronchikhina.png",
+  },
+  {
+    name: "Лобанова Ирина Юрьевна",
+    spec: "ЛОР врач, сурдолог",
+    photo: "/doctors/lobanova.jpg",
+  },
+  {
+    name: "Торсунова Наталья Сергеевна",
+    spec: "Специалист по слухопротезированию (сурдоакустик)",
+    photo: "/doctors/torsunova.jpg",
+  },
+  {
+    name: "Суворова Светлана Викторовна",
+    spec: "ЛОР врач, сурдолог",
+    photo: "/doctors/suvorova.jpg",
+  },
 ];
 
 const LLM_DOCTORS_TEXT = `
@@ -30,24 +54,24 @@ const LLM_DOCTORS_TEXT = `
    Подзаголовок: описание принципа работы врачей клиники
 
 2. БЛОК СТАТИСТИКИ (3 показателя в ряд):
-   — «Ежедневно 27 ЛОР врачей работает в клинике»
+   — «Ежедневно 27 ЛОР врачей работают в клинике»
    — «В том числе 6 кандидатов медицинских наук»
    — «Свыше 12 000 успешно проведённых операций»
-   Стиль: число крупное (20px+, bold), текст мелкий (#6b7280), фон #dff0fa
+   Стиль: весь текст #60959c, bold, ~18px. Фона НЕТ. Снизу border-bottom 3px solid #60959c
 
-3. СЕТКА КАРТОЧЕК ВРАЧЕЙ (6 штук, 3 в ряд):
+3. СЕТКА КАРТОЧЕК ВРАЧЕЙ (6 штук, 6 в ряд):
    Каждая карточка:
-   — Фото врача (110×160px или больше, object-fit: cover)
-   — Имя (14px, font-weight 500)
-   — Специализация (12px, #6b7280)
-   Карточки без рамки, простой вертикальный стек
+   — Фото врача 110×150px, object-fit: cover, object-position: center top, border-radius 4px
+   — Имя (12px, font-weight 500, цвет #60959c)
+   — Специализация (11px, #374151)
+   Карточки без рамки, gap минимальный
 
 ЦВЕТА:
-  Заголовок H2: #111827
-  Блок статистики фон: #dff0fa (светло-синий)
-  Число в статистике: #0089c3 (--brand-053m)
-  Имя врача: #111827
-  Специализация: #6b7280
+  Заголовок H2: #111827, ~30px (text-3xl)
+  Статистика текст: #60959c (серо-бирюзовый)
+  Статистика черта: border-bottom 3px solid #60959c
+  Имя врача: #60959c
+  Специализация: #374151
 
 ПРАВИЛА:
 ✓ Заголовок H2 + описание обязательны
@@ -87,63 +111,53 @@ export default function DoctorsBlockPage() {
         >
           {/* Заголовок */}
           <div>
-            <h2 className="text-xl font-bold mb-2" style={{ color: "#111827" }}>
+            <h2 className="text-3xl font-bold mb-3" style={{ color: "#111827" }}>
               Приём ведут опытные ЛОР врачи
             </h2>
             <p className="text-sm" style={{ color: "#374151", lineHeight: 1.7 }}>
               Фундаментальная теоретическая подготовка и большой практический опыт в сочетании
-              с внимательным индивидуальным подходом является причиной лечения тысяч наших пациентов.
+              с внимательным индивидуальным подходом являются причиной успеха лечения тысяч наших пациентов
             </p>
           </div>
 
-          {/* Статистика */}
-          <div className="grid grid-cols-3 gap-4">
+          {/* Статистика — текст тёмно-бирюзовым, без фоновых блоков */}
+          <div className="grid grid-cols-3 gap-6">
             {STATS.map((s) => (
-              <div
-                key={s.num}
-                className="rounded-xl p-4 text-center"
-                style={{ background: "#dff0fa" }}
-              >
-                <p className="text-xs mb-1" style={{ color: "#6b7280" }}>
-                  {s.prefix}
-                </p>
-                <p className="text-2xl font-bold mb-1" style={{ color: "#0089c3" }}>
-                  {s.num}
-                </p>
-                <p className="text-xs leading-snug" style={{ color: "#374151" }}>
-                  {s.label}
+              <div key={s.num} className="pb-3" style={{ borderBottom: "3px solid #60959c" }}>
+                <p className="text-lg font-bold leading-snug" style={{ color: "#60959c" }}>
+                  {s.prefix} {s.num} {s.label}
                 </p>
               </div>
             ))}
           </div>
 
-          {/* Сетка врачей */}
-          <div className="grid grid-cols-3 md:grid-cols-6 gap-4">
-            {MOCK_DOCTORS.map((doc) => (
-              <div key={doc.name} className="flex flex-col items-center text-center gap-2">
-                {/* Фото-заглушка */}
-                <div
-                  className="rounded-lg flex items-center justify-center text-3xl"
+          {/* Сетка врачей — плотнее, имена тёмно-бирюзовым */}
+          <div className="grid grid-cols-6 gap-3">
+            {DOCTORS.map((doc) => (
+              <div key={doc.name} className="flex flex-col items-center text-center gap-1.5">
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img
+                  src={doc.photo}
+                  alt={doc.name}
                   style={{
-                    width: 88,
-                    height: 120,
-                    background: "#f3f4f6",
-                    border: "1px solid #e5e7eb",
-                    flexShrink: 0,
+                    width: 110,
+                    height: 150,
+                    objectFit: "cover",
+                    objectPosition: "center top",
+                    borderRadius: 4,
+                    display: "block",
                   }}
-                >
-                  👩‍⚕️
-                </div>
+                />
                 <div>
                   <p
                     className="text-xs font-medium leading-snug"
-                    style={{ color: "#111827" }}
+                    style={{ color: "#60959c" }}
                   >
                     {doc.name}
                   </p>
                   <p
                     className="text-[11px] mt-0.5 leading-snug"
-                    style={{ color: "#6b7280" }}
+                    style={{ color: "#374151" }}
                   >
                     {doc.spec}
                   </p>
@@ -159,24 +173,18 @@ export default function DoctorsBlockPage() {
         <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
           Блок статистики
         </h2>
-        <div className="grid grid-cols-3 gap-4">
+        <div className="grid grid-cols-3 gap-6">
           {STATS.map((s) => (
             <div
               key={s.num}
-              className="rounded-xl p-4 space-y-1"
-              style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}
+              className="pb-3 space-y-1"
+              style={{ borderBottom: "3px solid #60959c" }}
             >
-              <p className="text-[11px]" style={{ color: "var(--bb-text-muted)" }}>
-                {s.prefix}
-              </p>
-              <p className="text-2xl font-bold" style={{ color: "var(--brand-053m)" }}>
-                {s.num}
-              </p>
-              <p className="text-xs leading-snug" style={{ color: "var(--bb-text)" }}>
-                {s.label}
+              <p className="text-base font-bold leading-snug" style={{ color: "#60959c" }}>
+                {s.prefix} {s.num} {s.label}
               </p>
               <p className="text-[10px] font-mono" style={{ color: "var(--bb-text-muted)" }}>
-                фон: #dff0fa · число: #0089c3
+                цвет текста: #60959c · черта: 3px solid #60959c
               </p>
             </div>
           ))}
@@ -184,15 +192,15 @@ export default function DoctorsBlockPage() {
       </section>
 
       {/* LLM блок */}
-      <LlmBlock path="/blocks/doctors" version="v1.0" specText={LLM_DOCTORS_TEXT}>
+      <LlmBlock path="/blocks/doctors" version="v1.1" specText={LLM_DOCTORS_TEXT}>
         <LlmSection title="Структура блока" />
         <LlmTable
           headers={["Элемент", "Содержимое", "Стиль"]}
           rows={[
-            ["H2", "«Приём ведут опытные ЛОР врачи»", "text-xl, font-bold, #111827"],
+            ["H2", "«Приём ведут опытные ЛОР врачи»", "~30px (text-3xl), font-bold, #111827"],
             ["Подзаголовок", "Описание принципа работы", "14px, #374151, line-height 1.7"],
-            ["Статистика", "3 блока в ряд", "фон #dff0fa, число #0089c3, bold"],
-            ["Сетка врачей", "6 карточек, 3 колонки × 2 ряда", "фото + имя + специализация"],
+            ["Статистика", "3 блока в ряд, без фона", "#60959c bold + border-bottom 3px solid #60959c"],
+            ["Сетка врачей", "6 карточек в 1 ряд", "фото 110×150px + имя #60959c + специализация #374151"],
           ]}
         />
         <LlmSection title="Три показателя" />
@@ -200,6 +208,11 @@ export default function DoctorsBlockPage() {
           headers={["Число", "Описание"]}
           rows={STATS.map((s) => [`${s.prefix} ${s.num}`, s.label])}
         />
+        <LlmSection title="6 врачей слайдера (perm.oclinica.ru/lor)" />
+        <LlmTable
+          headers={["Имя", "Специализация"]}
+          rows={DOCTORS.map((d) => [d.name, d.spec])}
+        />
         <LlmSection title="Карточка врача" />
         <LlmTable
           headers={["Поле", "Размер / Стиль"]}

apps/web/app/blocks/hero/page.tsx

@@ -8,24 +8,24 @@ export const metadata: Metadata = {
 const LLM_HERO_TEXT = `
 БЛОК: Hero-баннер (главный баннер страницы)
 Источник: perm.oclinica.ru/lor — реальный баннер раздела ЛОР
-Версия: v1.0
+Версия: v1.1
 
 ЗАГОЛОВОК СТРАНИЦЫ (H1, над баннером):
 «ЛОР Клиника ухо, горло, нос – медицинский центр лечения ЛОР заболеваний у детей и взрослых»
 Шрифт: Fira Sans, ~26–28px, weight 700, цвет: #53514e (--brand-073m)
 
-СТРУКТУРА БАННЕРА (двухколоночная, фон: #b8e6ed):
-Левая колонка (~50%, белый блок):
+СТРУКТУРА БАННЕРА (двухколоночная, единый фон #f9f4e7):
+Левая колонка (~50%):
   — Заголовок: «ЭНДОСКОПИЧЕСКОЕ ХИРУРГИЧЕСКОЕ ЛЕЧЕНИЕ ЛОР ОРГАНОВ»
     Шрифт: Fira Sans, ~18px, weight 700, uppercase, цвет #111827
   — 3 пункта с галочками (✓ зелёный):
     1. «БЕЗОПАСНО – оперируют хирурги с 15-летним опытом работы»
-    2. «БЕЗ ВНЕШНИХ РАЗРЕЗОВ – хирургия смяткими размерами»
+    2. «БЕЗ ВНЕШНИХ РАЗРЕЗОВ – хирургия сверхмалых размеров»
     3. «БЫСТРО – под наблюдением врача пациент находится 1 сутки»
     Ключевое слово: uppercase bold; описание: обычный текст, ~13px
-  — Кнопка «Узнать стоимость операции» — стиль: bb-btn-primary (#FFA39C)
+  — Кнопка «Узнать стоимость операции» — стиль: bb-btn-outline (светлая, без заливки)
 Правая колонка (~50%):
-  — Фото врача с пациентом, фон #b8e6ed
+  — Фото врача с пациентом
   — Изображение занимает всю высоту блока
 
 ПОД БАННЕРОМ:
@@ -33,18 +33,19 @@ const LLM_HERO_TEXT = `
   — Счётчик просмотров
 
 ЦВЕТА:
-  Фон баннера: #b8e6ed (светло-бирюзовый)
-  Левый блок: #ffffff
-  Кнопка CTA: #FFA39C (--bb-btn-primary)
-  Заголовок: #111827
-  Пункты: ключ #111827 bold, описание #374151
+  Фон баннера: #f9f4e7 (светло-кремовый, единый для всего блока)
+  Кнопка CTA: outline-стиль (светлая), не коралловая
+  Заголовок блока: #111827
+  Пункты: ключевое слово #111827 bold, описание #374151
+  Галочка: цвет бренда (бежевый/золотой ~#bf9975)
 
 ПРАВИЛА:
-✓ Фон баннера всегда #b8e6ed
-✓ Кнопка CTA — всегда primary (#FFA39C)
+✓ Фон баннера всегда #f9f4e7 (светло-кремовый) — единый, без разделения на зоны
 ✓ Заголовок блока uppercase, жирный
+✓ Три пункта с галочками обязательны
 ✕ Не менять фон баннера на другой цвет
-✕ Не убирать все 3 пункта с галочками
+✕ Не разбивать фон на два разных цвета
+✕ Не убирать три пункта с галочками
 `.trim();
 
 const HERO_CHECKS = [
@@ -77,7 +78,7 @@ export default function HeroPage() {
           Hero-баннер
         </h1>
         <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
-          Главный баннер страницы раздела ЛОР — perm.oclinica.ru/lor. Двухколоночный блок с фоном #b8e6ed.
+          Главный баннер страницы раздела ЛОР — perm.oclinica.ru/lor. Двухколоночный блок, единый светло-кремовый фон <strong>#f9f4e7</strong>.
         </p>
       </div>
 
@@ -95,15 +96,15 @@ export default function HeroPage() {
           ЛОР Клиника ухо, горло, нос – медицинский центр лечения ЛОР заболеваний у детей и взрослых
         </h2>
 
-        {/* Баннер */}
+        {/* Баннер — единый светло-кремовый фон */}
         <div
           className="rounded-xl overflow-hidden flex"
-          style={{ background: "#b8e6ed", minHeight: 280, border: "1px solid var(--bb-border)" }}
+          style={{ background: "#f9f4e7", minHeight: 280 }}
         >
-          {/* Левая часть — белый блок */}
+          {/* Левая часть — контент на кремовом фоне */}
           <div
             className="flex flex-col justify-center gap-5 p-8"
-            style={{ background: "#fff", minWidth: "48%", maxWidth: "52%" }}
+            style={{ width: "50%", flexShrink: 0 }}
           >
             <p
               className="text-base font-bold uppercase leading-snug"
@@ -116,7 +117,7 @@ export default function HeroPage() {
                 <li key={c.key} className="flex items-start gap-2 text-sm">
                   <span
                     className="shrink-0 font-bold"
-                    style={{ color: "#22c55e", marginTop: 1 }}
+                    style={{ color: "#bf9975", marginTop: 1 }}
                   >
                     ✓
                   </span>
@@ -130,31 +131,30 @@ export default function HeroPage() {
               ))}
             </ul>
             <div>
-              <button className="bb-btn bb-btn-md bb-btn-primary">
+              <button className="bb-btn bb-btn-md bb-btn-outline">
                 Узнать стоимость операции
               </button>
             </div>
           </div>
 
-          {/* Правая часть — фото-заглушка */}
+          {/* Правая часть — фото врача */}
           <div
-            className="flex-1 flex items-center justify-center"
-            style={{ background: "#b8e6ed" }}
+            className="flex-1 relative overflow-hidden"
+            style={{ minHeight: 280 }}
           >
-            <div className="text-center space-y-2">
-              <div
-                className="w-20 h-20 rounded-full mx-auto flex items-center justify-center text-3xl"
-                style={{ background: "rgba(255,255,255,0.4)" }}
-              >
-                👨‍⚕️
-              </div>
-              <p className="text-xs font-medium" style={{ color: "#0089c3" }}>
-                Фото врача с пациентом
-              </p>
-              <p className="text-[10px]" style={{ color: "#53514e" }}>
-                Фон: #b8e6ed
-              </p>
-            </div>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src="/hero-doctor.jpg"
+              alt="Врач на приёме с пациентом"
+              style={{
+                width: "100%",
+                height: "100%",
+                objectFit: "cover",
+                objectPosition: "center top",
+                position: "absolute",
+                inset: 0,
+              }}
+            />
           </div>
         </div>
 
@@ -187,45 +187,26 @@ export default function HeroPage() {
         <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
           Анатомия баннера
         </h2>
-        <div className="grid grid-cols-2 gap-4">
-          {[
-            {
-              zone: "Левый блок (белый)",
-              bg: "#f8fafc",
-              items: [
-                "Заголовок uppercase bold",
-                "3 пункта с галочками ✓",
-                "Кнопка bb-btn-primary",
-              ],
-            },
-            {
-              zone: "Правый блок (#b8e6ed)",
-              bg: "#f0fdfa",
-              items: [
-                "Фото врача с пациентом",
-                "Фон: #b8e6ed (светло-бирюзовый)",
-                "Занимает всю высоту блока",
-              ],
-            },
-          ].map((z) => (
-            <div
-              key={z.zone}
-              className="rounded-xl p-4 space-y-2"
-              style={{ background: z.bg, border: "1px solid var(--bb-border)" }}
-            >
-              <p className="font-semibold text-sm" style={{ color: "var(--bb-text)" }}>
-                {z.zone}
-              </p>
-              <ul className="space-y-1">
-                {z.items.map((item) => (
-                  <li key={item} className="text-xs flex items-start gap-1.5">
-                    <span style={{ color: "var(--brand-053m)" }}>·</span>
-                    <span style={{ color: "var(--bb-text-muted)" }}>{item}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          ))}
+        <div
+          className="rounded-xl p-5 space-y-2"
+          style={{ background: "#f5f0e8", border: "1px solid #d5cfbd" }}
+        >
+          <p className="font-semibold text-sm" style={{ color: "var(--bb-text)" }}>
+            Весь баннер — единый фон <span className="font-mono">#f9f4e7</span>
+          </p>
+          <ul className="space-y-1">
+            {[
+              "Фон: #f9f4e7 (светло-кремовый) — одинаковый для всего блока",
+              "Левая половина (~50%): заголовок uppercase bold + 3 галочки + кнопка outline",
+              "Правая половина (~50%): фото врача с пациентом",
+              "Минимальная высота: ~280px",
+            ].map((item) => (
+              <li key={item} className="text-xs flex items-start gap-1.5">
+                <span style={{ color: "var(--brand-053m)" }}>·</span>
+                <span style={{ color: "var(--bb-text-muted)" }}>{item}</span>
+              </li>
+            ))}
+          </ul>
         </div>
       </section>
 
@@ -261,13 +242,14 @@ export default function HeroPage() {
       </section>
 
       {/* LLM блок */}
-      <LlmBlock path="/blocks/hero" version="v1.0" specText={LLM_HERO_TEXT}>
+      <LlmBlock path="/blocks/hero" version="v1.1" specText={LLM_HERO_TEXT}>
         <LlmSection title="Структура баннера" />
         <LlmTable
           headers={["Зона", "Ширина", "Фон", "Содержимое"]}
           rows={[
-            ["Левый блок", "~50%", "#ffffff", "Заголовок uppercase + 3 галочки + кнопка bb-btn-primary"],
-            ["Правый блок", "~50%", "#b8e6ed", "Фото врача с пациентом"],
+            ["Весь баннер", "100%", "#f9f4e7", "Единый светло-кремовый фон"],
+            ["Левый блок", "~50%", "#f9f4e7 (общий)", "Заголовок uppercase + 3 галочки + кнопка outline"],
+            ["Правый блок", "~50%", "#f9f4e7 (общий)", "Фото врача с пациентом"],
             ["Под баннером", "100%", "#fff", "Кнопки соцсетей + счётчик просмотров"],
           ]}
         />
@@ -280,21 +262,21 @@ export default function HeroPage() {
         <LlmTable
           headers={["Элемент", "Цвет", "Токен"]}
           rows={[
-            ["Фон баннера", "#b8e6ed", "—"],
-            ["Левый блок", "#ffffff", "—"],
-            ["Кнопка CTA", "#FFA39C", "bb-btn-primary"],
+            ["Фон баннера (единый)", "#f9f4e7", "Светло-кремовый фон"],
+            ["Кнопка CTA", "outline-стиль", "bb-btn-outline"],
             ["Заголовок блока", "#111827", "—"],
-            ["Галочка", "#22c55e", "—"],
+            ["Галочка ✓", "#bf9975", "Бежевый (--brand-081m approx.)"],
           ]}
         />
         <LlmSection title="Правила" />
         <LlmRules
           rules={[
-            { ok: true, text: "Фон баннера: #b8e6ed (светло-бирюзовый)" },
-            { ok: true, text: "Кнопка CTA: bb-btn-primary (#FFA39C)" },
+            { ok: true, text: "Фон баннера: #f9f4e7 (светло-кремовый) — единый для всего блока" },
+            { ok: true, text: "Кнопка CTA: bb-btn-outline (светлая)" },
             { ok: true, text: "Заголовок: uppercase, bold" },
-            { ok: true, text: "Три пункта с галочками ✓ (#22c55e)" },
+            { ok: true, text: "Три пункта с галочками ✓ (#bf9975)" },
             { ok: false, text: "Не менять фон баннера на другой цвет" },
+            { ok: false, text: "Не разбивать баннер на два разных цвета фона" },
             { ok: false, text: "Не убирать три пункта с галочками" },
           ]}
         />

apps/web/app/foundation/colors/page.tsx

@@ -145,10 +145,15 @@ const COLOR_MAPPING = [
     web:   { name: "Второстепенный текст", hex: "#949290", count: 4 },
     note:  "Только на сайте — нет Oracal-аналога",
   },
+  {
+    brand: null,
+    web:   { name: "Светло-кремовый фон (Hero)", hex: "#f9f4e7", count: 1 },
+    note:  "Только на сайте — фон Hero-баннера страниц разделов. Нет Oracal-аналога",
+  },
   {
     brand: null,
     web:   { name: "Кремовый фон", hex: "#e9e4d4", count: 1 },
-    note:  "Только на сайте — нет Oracal-аналога",
+    note:  "Только на сайте — тёплые фоны кнопок-пилюль, вторичные секции. Нет Oracal-аналога",
   },
   {
     brand: null,
@@ -177,8 +182,9 @@ const WEB_COLORS = [
   { name: "Бирюзовый средний", hex: "#52b4bd", usage: "Вторичные цветовые акценты", count: 4, group: "Акценты" },
   { name: "Основной текст", hex: "#464646", usage: "Цвет основного текста на сайте", count: 3, group: "Текст" },
   { name: "Второстепенный текст", hex: "#949290", usage: "Подписи, второстепенный контент", count: 4, group: "Текст" },
-  { name: "Светло-бирюзовый фон", hex: "#b8e6ed", usage: "Фоны светлых секций с акцентом", count: 1, group: "Фоны" },
-  { name: "Кремовый фон", hex: "#e9e4d4", usage: "Тёплые фоны секций", count: 1, group: "Фоны" },
+  { name: "Светло-бирюзовый фон", hex: "#b8e6ed", usage: "Фон формы записи («Будьте здоровы!»)", count: 1, group: "Фоны" },
+  { name: "Светло-кремовый фон (Hero)", hex: "#f9f4e7", usage: "Фон Hero-баннера страниц разделов", count: 1, group: "Фоны" },
+  { name: "Кремовый фон", hex: "#e9e4d4", usage: "Тёплые фоны кнопок-пилюль, вторичные секции", count: 1, group: "Фоны" },
   { name: "Коралловый", hex: "#ffa39c", usage: "CTA-кнопки («Запишите меня!»), акцентные призывы к действию", count: 2, group: "Акценты" },
   { name: "Светло-жёлтый фон", hex: "#eef4d1", usage: "Фон карточек отзывов (секция «Отзывы о нас»)", count: 1, group: "Фоны" },
   { name: "Светло-зелёный фон", hex: "#f2fee6", usage: "Фон секции новостей", count: 1, group: "Фоны" },
@@ -424,8 +430,9 @@ Oracal | Название             | HEX     | RGB              | CSS-пер
 Коралловый           | #FFA39C | Акценты | 2 | CTA-кнопки («Запишите меня!»)
 Основной текст       | #464646 | Текст   | 3 | Цвет основного текста сайта
 Второстепенный текст | #949290 | Текст   | 4 | Подписи, второстепенный контент
-Светло-бирюзовый фон | #B8E6ED | Фоны    | 1 | Фоны светлых секций
-Кремовый фон         | #E9E4D4 | Фоны    | 1 | Тёплые фоны секций
+Светло-кремовый Hero | #F9F4E7 | Фоны    | 1 | Фон Hero-баннера страниц разделов
+Светло-бирюзовый фон | #B8E6ED | Фоны    | 1 | Фон формы записи («Будьте здоровы!»)
+Кремовый фон         | #E9E4D4 | Фоны    | 1 | Тёплые фоны кнопок-пилюль, вторичные секции
 Светло-жёлтый фон    | #EEF4D1 | Фоны    | 1 | Фон карточек отзывов
 Светло-зелёный фон   | #F2FEE6 | Фоны    | 1 | Фон секции новостей
 

apps/web/app/foundation/typography/page.tsx

@@ -399,6 +399,58 @@ export default function TypographyPage() {
         </div>
       </Section>
 
+      {/* Типографика сайта — фактическое состояние 23.03.2026 */}
+      <Section
+        title="Типографика сайта — факт на 23.03.2026"
+        subtitle="Реальные размеры и стили, задокументированные по perm.oclinica.ru/lor. Источник: скриншот + CSS темы clinic_bootstrap_mobile."
+      >
+        <div
+          className="overflow-hidden rounded-xl border"
+          style={{ borderColor: "var(--bb-border)" }}
+        >
+          <table className="w-full text-sm">
+            <thead>
+              <tr style={{ background: "var(--bb-sidebar-bg)" }}>
+                {["Элемент / блок", "Шрифт", "Размер", "Weight", "Цвет", "Пример"].map(h => (
+                  <th key={h} className="text-left px-4 py-3 font-medium text-xs"
+                    style={{ color: "var(--bb-text-muted)" }}>
+                    {h}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {[
+                ["H1 страницы (над Hero)", "Fira Sans", "~28–30px", "700", "#bf9975", "ЛОР Клиника ухо, горло, нос…"],
+                ["H2 секции", "Fira Sans", "~30px", "700", "#111827", "Приём ведут опытные ЛОР врачи"],
+                ["Заголовок Hero-баннера", "Fira Sans", "~18px", "700", "#111827", "ЭНДОСКОПИЧЕСКОЕ ХИРУРГИЧЕСКОЕ…"],
+                ["Статистика (цифра+текст)", "Fira Sans", "~18px", "700", "#60959c", "Ежедневно 27 ЛОР врачей…"],
+                ["Подзаголовок секции", "Fira Sans", "~14px", "400", "#374151", "Фундаментальная теоретическая…"],
+                ["Пункт checklist (ключ)", "Fira Sans", "13px", "700", "#111827", "БЕЗОПАСНО"],
+                ["Пункт checklist (описание)", "Fira Sans", "13px", "400", "#374151", "оперируют хирурги с 15-летним…"],
+                ["Имя врача в карточке", "Fira Sans", "12px", "500", "#60959c", "Макарова Людмила Германовна"],
+                ["Специализация врача", "Fira Sans", "11px", "400", "#374151", "ЛОР врач, сурдолог"],
+              ].map(([el, font, size, w, color, example]) => (
+                <tr key={el} className="border-t" style={{ borderColor: "var(--bb-border)" }}>
+                  <td className="px-4 py-3 font-medium text-xs" style={{ color: "var(--bb-text)" }}>{el}</td>
+                  <td className="px-4 py-3 text-xs font-mono" style={{ color: "var(--brand-073m)" }}>{font}</td>
+                  <td className="px-4 py-3 text-xs font-mono" style={{ color: "var(--bb-text)" }}>{size}</td>
+                  <td className="px-4 py-3 text-xs font-mono" style={{ color: "var(--bb-text-muted)" }}>{w}</td>
+                  <td className="px-4 py-3">
+                    <span className="flex items-center gap-1.5">
+                      <span className="w-3 h-3 rounded-sm inline-block border shrink-0"
+                        style={{ background: color, borderColor: "var(--bb-border)" }} />
+                      <span className="font-mono text-xs" style={{ color: "var(--bb-text-muted)" }}>{color}</span>
+                    </span>
+                  </td>
+                  <td className="px-4 py-3 text-xs" style={{ color: "var(--bb-text-muted)" }}>{example}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </Section>
+
       {/* LLM-спецификация */}
       <section className="mb-8">
         <div className="mb-6">

docs/LLM_CONTEXT.md

@@ -2,8 +2,8 @@
 
 ## Клиника ухо, горло, нос им. проф. Е.Н.Оленевой
 
-**Версия контекста:** 4.1
-**Дата обновления:** 2026-03-22
+**Версия контекста:** 4.2
+**Дата обновления:** 2026-03-23
 **Актуальный спринт:** Sprint 5
 **Сайт клиники:** https://oclinica.ru
 **Брендбук (локально):** http://localhost:3001
@@ -67,8 +67,9 @@
 | Коралловый            | `#ffa39c` | rgb(255,163,156)  | Акценты  | 2         | CTA-кнопки («Запишите меня!») |
 | Основной текст        | `#464646` | rgb(70,70,70)     | Текст    | 3         | Цвет основного текста на сайте |
 | Второстепенный текст  | `#949290` | rgb(148,146,144)  | Текст    | 4         | Подписи, второстепенный контент |
-| Светло-бирюзовый фон  | `#b8e6ed` | rgb(184,230,237)  | Фоны     | 1         | Фоны светлых секций с акцентом |
-| Кремовый фон          | `#e9e4d4` | rgb(233,228,212)  | Фоны     | 1         | Тёплые фоны секций |
+| Светло-кремовый Hero  | `#f9f4e7` | rgb(249,244,231)  | Фоны     | 1         | Фон Hero-баннера страниц разделов |
+| Светло-бирюзовый фон  | `#b8e6ed` | rgb(184,230,237)  | Фоны     | 1         | Фон формы записи («Будьте здоровы!») |
+| Кремовый фон          | `#e9e4d4` | rgb(233,228,212)  | Фоны     | 1         | Тёплые фоны кнопок-пилюль, вторичные секции |
 | Светло-жёлтый фон     | `#eef4d1` | rgb(238,244,209)  | Фоны     | 1         | Фон карточек отзывов |
 | Светло-зелёный фон    | `#f2fee6` | rgb(242,254,230)  | Фоны     | 1         | Фон секции новостей |
 
@@ -287,9 +288,11 @@ SVG-версия ожидается (не получена от клиники).
 | `/offline/transport` | ✅ Готова | Брендирование транспорта |
 | `/components/buttons` | ✅ Готова | Кнопки — 4 варианта с реального сайта, размеры, состояния |
 | `/components/forms` | ✅ Готова | Форм-контролы — Input/Textarea/Select/Checkbox/Radio/Toggle |
-| `/components/cards` | 🚧 Sprint 4 | Карточки — врач, услуга, новость, отзыв, цена + бейджи/теги/алерты |
+| `/components/cards` | ✅ Sprint 4 | Карточки — врач, услуга, новость, отзыв, цена + бейджи/теги/алерты |
 | `/components/*` | 🔜 Sprint 4–5 | Модалки, таблицы, навигация |
-| `/blocks/*` | 🔜 Sprint 5–8 | Hero, врачи, отзывы, новости, формы |
+| `/blocks/hero` | ✅ Sprint 5 v1.1 | Hero-баннер: фон #f9f4e7, реальное фото врача, галочки #bf9975, кнопка outline |
+| `/blocks/doctors` | ✅ Sprint 5 v1.1 | Врачи: H2 30px, статистика #60959c без фона, 6 реальных фото |
+| `/blocks/*` | 🔜 Sprint 5 | Отзывы, формы, новости, footer |
 | `/pages/*` | 🔜 Sprint 9–11 | Главная, заболевание, врачи, цены, контакты |
 
 ---

docs/SPRINTS.md

@@ -191,14 +191,18 @@
 - [ ] FE: Главное меню: Клиника / ЛОР врачи / Заболевания / Вопрос-ответ / ЛОР-операции / Сурдология / Цены / Контакты
 
 **Hero-баннер** → `/blocks/hero`
-- [ ] FE: Левая часть: белый блок, заголовок «ЭНДОСКОПИЧЕСКОЕ...», 3 пункта с галочками, кнопка «Узнать стоимость операции»
-- [ ] FE: Правая часть: фото врача, фон #b8e6ed
+- [x] FE: Баннер — единый фон #f9f4e7 (светло-кремовый, замерян пикселем), галочки #bf9975
+- [x] FE: Правая часть: реальное фото врача с пациентом (спарсено с сайта → public/hero-doctor.jpg)
+- [x] LLM: v1.1 — исправлен цвет фона, кнопка outline, галочки бежевые
 
 **Вводный текст (CEO-блок)** → `/blocks/ceo`
 - [ ] FE: Текст специализации клиники, Q&A вопросы-стимулы
 
 **Блок врачей** → `/blocks/doctors`
-- [ ] FE: Заголовок «Приём ведут опытные ЛОР врачи» + 3 стат-блока + сетка карточек (mock)
+- [x] FE: Заголовок text-3xl + 3 стат-блока (без фона, #60959c + border-bottom) + сетка 6 карточек
+- [x] FE: Реальные фото 6 врачей (спарсены с сайта → public/doctors/)
+- [x] FE: Реальные имена и специализации врачей из слайдера /lor
+- [x] LLM: v1.1
 
 **Блок отзывов** → `/blocks/reviews`
 - [ ] FE: Карусель: кавычка, текст отзыва, «Читать полностью», стрелки
@@ -214,11 +218,14 @@
 - [ ] FE: 4 колонки ссылок, логотип, адрес, соцсети, часы работы
 
 ### Общее к Sprint 5
-- [ ] FE: LLM-блоки v1.0 на каждую страницу блоков
-- [ ] FE: Убрать `soon` у всех заполненных блоков в Sidebar
-- [ ] Docs: Обновить `docs/LLM_CONTEXT.md`
+- [x] FE: LLM-блоки на hero v1.1 и doctors v1.1
+- [x] Docs: Типографика сайта — реальные стили на 23.03.2026 (новый раздел в /foundation/typography)
+- [x] Docs: Цвета — исправлен #f9f4e7 (Hero), #b8e6ed (форма), #e9e4d4 (пилюли)
+- [ ] FE: Убрать `soon` у Hero и Doctors в Sidebar
+- [ ] FE: CEO-блок, отзывы, формы, новости, footer
+- [ ] Docs: Финальное обновление `docs/LLM_CONTEXT.md` по итогам Sprint 5
 
-**Результат спринта:** Все блоки текущего сайта задокументированы с mock-данными.
+**Результат спринта (в работе):** Hero + Doctors задокументированы с реальными фото и точными цветами.
 
 ---