feat(sprint-2): цвета, типографика, оффлайн элементы

Страницы фундамента: - /foundation/colors — палитра 7 цветов, HEX/RGB/HSL/CSS-var с копированием, WCAG-контраст 7 пар, экспорт JSON-токенов - /foundation/typography — DINPro (оффлайн) + Fira Sans (веб), шкалы, таблица применения, живой пример Оффлайн элементы (5 страниц): - /offline/uniform — схема формы, таблица размеров логотипа - /offline/badges — макеты бейджей 70×30 мм (светлый/тёмный) - /offline/navigation — 4 шаблона табличек, цвета Oracal - /offline/transport — CSS-макет трамвая, трёхполосная схема - /offline/print — макеты визитки и листовки А5, Telegram-бот Sidebar: убраны «скоро» для Цветов, Типографики, всех Оффлайн Версия: Sprint 2 · v0.2.0 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 week ago · 02f561fcd3
9 changed files with 2130 additions and 24 deletions
--- a/apps/web/app/foundation/colors/page.tsx
+++ b/apps/web/app/foundation/colors/page.tsx
@ -0,0 +1,415 @@
 "use client";
 import { useState, useCallback } from "react";
 import type { Metadata } from "next";
 /* ─── Утилиты конвертации ──────────────────────────────────────────── */
 function hexToRgb(hex: string): { r: number; g: number; b: number } {
  const m = /^#([0-9a-f]{6})$/i.exec(hex);
  if (!m) return { r: 0, g: 0, b: 0 };
  return {
    r: parseInt(m[1].slice(0, 2), 16),
    g: parseInt(m[1].slice(2, 4), 16),
    b: parseInt(m[1].slice(4, 6), 16),
  };
 }
 function rgbToHsl(r: number, g: number, b: number): { h: number; s: number; l: number } {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b), min = Math.min(r, g, b);
  let h = 0, s = 0;
  const l = (max + min) / 2;
  if (max !== min) {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
      case g: h = ((b - r) / d + 2) / 6; break;
      case b: h = ((r - g) / d + 4) / 6; break;
    }
  }
  return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
 }
 function luminance(r: number, g: number, b: number): number {
  const a = [r, g, b].map(v => {
    v /= 255;
    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
  });
  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
 }
 function contrastRatio(hex1: string, hex2: string): number {
  const { r: r1, g: g1, b: b1 } = hexToRgb(hex1);
  const { r: r2, g: g2, b: b2 } = hexToRgb(hex2);
  const l1 = luminance(r1, g1, b1);
  const l2 = luminance(r2, g2, b2);
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return Math.round(((lighter + 0.05) / (darker + 0.05)) * 10) / 10;
 }
 /* ─── Данные цветов ────────────────────────────────────────────────── */
 const BRAND_COLORS = [
  {
    oracal: "053M",
    name: "Основной бирюзовый",
    hex: "#7ecfca",
    usage: "Акцентный цвет, CTA-кнопки, иконки, активные состояния",
    cssVar: "--brand-053m",
  },
  {
    oracal: "073M",
    name: "Тёмный серо-голубой",
    hex: "#5b7b87",
    usage: "Тёмный фон, хедер, акценты на тёмных поверхностях",
    cssVar: "--brand-073m",
  },
  {
    oracal: "066M",
    name: "Средний бирюзовый",
    hex: "#5bb5ad",
    usage: "Вторичные акценты, фоны секций, иллюстрации",
    cssVar: "--brand-066m",
  },
  {
    oracal: "050M",
    name: "Тёмно-синий",
    hex: "#1b4c72",
    usage: "Наружная реклама, полиграфия, заголовки на светлом фоне",
    cssVar: "--brand-050m",
  },
  {
    oracal: "081M",
    name: "Бежевый",
    hex: "#c4a882",
    usage: "Форма сотрудников, оффлайн носители, тёплые акценты",
    cssVar: "--brand-081m",
  },
  {
    oracal: "080M",
    name: "Тёмно-коричневый",
    hex: "#5c2e0e",
    usage: "Текст на бежевых поверхностях, логотип на форме",
    cssVar: "--brand-080m",
  },
  {
    oracal: "—",
    name: "Белый",
    hex: "#ffffff",
    usage: "Фон, инвертированный текст, логотип на тёмных фонах",
    cssVar: "--brand-white",
  },
 ];
 const CONTRAST_PAIRS = [
  { fg: "#ffffff", bg: "#5b7b87", label: "Белый на тёмном серо-голубом" },
  { fg: "#ffffff", bg: "#1b4c72", label: "Белый на тёмно-синем" },
  { fg: "#ffffff", bg: "#5c2e0e", label: "Белый на тёмно-коричневом" },
  { fg: "#ffffff", bg: "#5bb5ad", label: "Белый на среднем бирюзовом" },
  { fg: "#111827", bg: "#7ecfca", label: "Тёмный текст на основном бирюзовом" },
  { fg: "#111827", bg: "#c4a882", label: "Тёмный текст на бежевом" },
  { fg: "#5c2e0e", bg: "#c4a882", label: "Тёмно-коричневый на бежевом (форма)" },
 ];
 /* ─── Компоненты ───────────────────────────────────────────────────── */
 function CopyBadge({ value, label }: { value: string; label: string }) {
  const [copied, setCopied] = useState(false);
  const copy = useCallback(() => {
    navigator.clipboard.writeText(value);
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  }, [value]);
  return (
    <button
      onClick={copy}
      className="flex items-center gap-1.5 px-2 py-1 rounded text-xs font-mono transition-colors"
      style={{
        background: copied ? "#d1fae5" : "#f3f4f6",
        color: copied ? "#065f46" : "#374151",
        border: "1px solid",
        borderColor: copied ? "#6ee7b7" : "#e5e7eb",
      }}
      title={`Скопировать ${label}`}
    >
      {copied ? "✓" : "⎘"} {value}
    </button>
  );
 }
 function ColorCard({ color }: { color: typeof BRAND_COLORS[0] }) {
  const { r, g, b } = hexToRgb(color.hex);
  const { h, s, l } = rgbToHsl(r, g, b);
  const isLight = l > 55;
  return (
    <div
      className="rounded-xl overflow-hidden border"
      style={{ borderColor: "var(--bb-border)" }}
    >
      {/* Свотч */}
      <div
        className="h-32 flex items-end justify-between px-4 pb-3"
        style={{ background: color.hex }}
      >
        {color.oracal !== "—" && (
          <span
            className="text-xs font-semibold px-2 py-0.5 rounded"
            style={{
              background: isLight ? "rgba(0,0,0,0.15)" : "rgba(255,255,255,0.2)",
              color: isLight ? "rgba(0,0,0,0.8)" : "rgba(255,255,255,0.9)",
            }}
          >
            Oracal {color.oracal}
          </span>
        )}
      </div>
      {/* Информация */}
      <div className="p-4" style={{ background: "var(--bb-content-bg)" }}>
        <p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
          {color.name}
        </p>
        <p className="text-xs mb-3" style={{ color: "var(--bb-text-muted)" }}>
          {color.usage}
        </p>
        {/* Коды */}
        <div className="flex flex-wrap gap-1.5">
          <CopyBadge value={color.hex.toUpperCase()} label="HEX" />
          <CopyBadge value={`rgb(${r}, ${g}, ${b})`} label="RGB" />
          <CopyBadge value={`hsl(${h}, ${s}%, ${l}%)`} label="HSL" />
          <CopyBadge value={color.cssVar} label="CSS var" />
        </div>
      </div>
    </div>
  );
 }
 function ContrastRow({ pair }: { pair: typeof CONTRAST_PAIRS[0] }) {
  const ratio = contrastRatio(pair.fg, pair.bg);
  const aa = ratio >= 4.5;
  const aaa = ratio >= 7;
  const aaLarge = ratio >= 3;
  return (
    <div
      className="flex items-center gap-4 p-4 rounded-xl border"
      style={{ borderColor: "var(--bb-border)" }}
    >
      {/* Превью */}
      <div
        className="w-32 shrink-0 h-12 rounded-lg flex items-center justify-center text-sm font-medium"
        style={{ background: pair.bg, color: pair.fg }}
      >
        Aa Бб Вв
      </div>
      {/* Описание */}
      <div className="flex-1 min-w-0">
        <p className="text-sm font-medium truncate" style={{ color: "var(--bb-text)" }}>
          {pair.label}
        </p>
        <div className="flex gap-1 mt-1 items-center">
          <span className="font-mono text-xs" style={{ color: "var(--bb-text-muted)" }}>
            {pair.fg} / {pair.bg}
          </span>
        </div>
      </div>
      {/* Ratio и бейджи */}
      <div className="shrink-0 flex items-center gap-3">
        <span className="font-mono font-semibold text-sm" style={{ color: "var(--bb-text)" }}>
          {ratio}:1
        </span>
        <div className="flex gap-1">
          {[
            { label: "AA", pass: aa },
            { label: "AAA", pass: aaa },
            { label: "AA large", pass: aaLarge },
          ].map(({ label, pass }) => (
            <span
              key={label}
              className="text-[10px] font-semibold px-1.5 py-0.5 rounded"
              style={{
                background: pass ? "#d1fae5" : "#fee2e2",
                color: pass ? "#065f46" : "#991b1b",
              }}
            >
              {pass ? "✓" : "✕"} {label}
            </span>
          ))}
        </div>
      </div>
    </div>
  );
 }
 /* ─── Экспорт токенов ──────────────────────────────────────────────── */
 function exportTokens() {
  const tokens: Record<string, Record<string, string>> = { colors: {} };
  BRAND_COLORS.forEach(c => {
    const key = c.oracal !== "—" ? `brand-${c.oracal.toLowerCase()}` : "brand-white";
    const { r, g, b } = hexToRgb(c.hex);
    const { h, s, l } = rgbToHsl(r, g, b);
    tokens.colors[key] = {
      oracal: c.oracal,
      name: c.name,
      hex: c.hex.toUpperCase(),
      rgb: `rgb(${r}, ${g}, ${b})`,
      hsl: `hsl(${h}, ${s}%, ${l}%)`,
      cssVar: c.cssVar,
    };
  });
  const blob = new Blob([JSON.stringify(tokens, null, 2)], { type: "application/json" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url; a.download = "oclinica-brand-tokens.json"; a.click();
  URL.revokeObjectURL(url);
 }
 /* ─── Страница ─────────────────────────────────────────────────────── */
 export default function ColorsPage() {
  return (
    <div className="max-w-4xl mx-auto px-8 py-10">
      {/* Заголовок */}
      <div className="mb-10 pb-6 border-b" style={{ borderColor: "var(--bb-border)" }}>
        <p
          className="text-xs font-semibold uppercase tracking-widest mb-2"
          style={{ color: "var(--brand-053m)" }}
        >
          Фундамент → 1.3
        </p>
        <h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}>
          Цвета
        </h1>
        <p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
          Фирменная цветовая палитра основана на кодах плёнки Oracal. HEX-значения
          подобраны как ближайшие эквиваленты. Для точной печати используйте коды Oracal.
        </p>
        <div className="mt-4 flex items-center justify-between">
          <div
            className="px-4 py-3 rounded-lg border text-sm flex items-center gap-2"
            style={{ borderColor: "#fde68a", background: "#fffbeb", color: "#92400e" }}
          >
            <span>⚠️</span>
            <span>
              HEX-значения приблизительны. Для оффлайн-носителей используйте
              официальные коды Oracal.
            </span>
          </div>
          <button
            onClick={exportTokens}
            className="ml-4 shrink-0 px-4 py-2 rounded-lg text-sm font-medium transition-colors"
            style={{
              background: "var(--brand-053m)",
              color: "#ffffff",
            }}
          >
            ↓ Экспорт JSON
          </button>
        </div>
      </div>
      {/* 1. Палитра */}
      <section className="mb-12">
        <div className="mb-6">
          <h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
            Фирменные цвета
          </h2>
          <p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
            Нажмите на значение, чтобы скопировать его в буфер обмена.
          </p>
        </div>
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {BRAND_COLORS.map(c => (
            <ColorCard key={c.oracal} color={c} />
          ))}
        </div>
      </section>
      {/* 2. Контрастность */}
      <section className="mb-12">
        <div className="mb-6">
          <h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
            Контрастность пар (WCAG)
          </h2>
          <p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
            Проверка соответствия требованиям доступности для основных комбинаций цветов.
            AA = 4.5:1 для обычного текста, 3:1 для крупного (&gt;18pt).
          </p>
        </div>
        <div className="flex flex-col gap-3">
          {CONTRAST_PAIRS.map(pair => (
            <ContrastRow key={pair.label} pair={pair} />
          ))}
        </div>
      </section>
      {/* 3. Применение */}
      <section className="mb-12">
        <div className="mb-6">
          <h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
            Правила применения
          </h2>
        </div>
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
          {[
            {
              icon: "✓",
              color: "#d1fae5",
              textColor: "#065f46",
              title: "Используйте фирменные цвета",
              text: "Только цвета из палитры обеспечивают узнаваемость бренда на всех носителях.",
            },
            {
              icon: "✓",
              color: "#d1fae5",
              textColor: "#065f46",
              title: "Соблюдайте контрастность",
              text: "Текст на цветном фоне должен соответствовать минимум AA по WCAG 2.1.",
            },
            {
              icon: "✕",
              color: "#fee2e2",
              textColor: "#991b1b",
              title: "Не смешивайте произвольно",
              text: "Не используйте фирменные цвета с посторонними цветами без согласования.",
            },
            {
              icon: "✕",
              color: "#fee2e2",
              textColor: "#991b1b",
              title: "Не изменяйте насыщенность",
              text: "Осветление, затемнение или изменение оттенка недопустимо без необходимости.",
            },
          ].map(item => (
            <div
              key={item.title}
              className="flex gap-3 p-4 rounded-xl border"
              style={{ borderColor: "var(--bb-border)" }}
            >
              <span
                className="shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold"
                style={{ background: item.color, color: item.textColor }}
              >
                {item.icon}
              </span>
              <div>
                <p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
                  {item.title}
                </p>
                <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
                  {item.text}
                </p>
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
 }
--- a/apps/web/app/foundation/typography/page.tsx
+++ b/apps/web/app/foundation/typography/page.tsx
@ -0,0 +1,349 @@
 import type { Metadata } from "next";
 export const metadata: Metadata = {
  title: "Типографика | Брендбук О!Клиника",
 };
 /* ─── Шкала типографики ────────────────────────────────────────────── */
 const DIN_SCALE = [
  { token: "h1", size: "40px / 2.5rem", weight: "700", lh: "1.2", sample: "Клиника ухо, горло, нос" },
  { token: "h2", size: "32px / 2rem",   weight: "700", lh: "1.25", sample: "Наши специалисты" },
  { token: "h3", size: "24px / 1.5rem", weight: "700", lh: "1.3",  sample: "Запись на приём" },
  { token: "h4", size: "20px / 1.25rem",weight: "700", lh: "1.35", sample: "Расписание врачей" },
  { token: "h5", size: "16px / 1rem",   weight: "700", lh: "1.4",  sample: "Услуги и цены" },
  { token: "h6", size: "14px / 0.875rem",weight:"700", lh: "1.4",  sample: "Контакты клиники" },
 ];
 const FIRA_SCALE = [
  { token: "h1",       size: "40px / 2.5rem",  weight: "600", lh: "1.2",  sample: "Клиника ухо, горло, нос" },
  { token: "h2",       size: "32px / 2rem",    weight: "600", lh: "1.25", sample: "Наши специалисты" },
  { token: "h3",       size: "24px / 1.5rem",  weight: "600", lh: "1.3",  sample: "Запись на приём" },
  { token: "h4",       size: "20px / 1.25rem", weight: "500", lh: "1.35", sample: "Расписание врачей" },
  { token: "h5",       size: "16px / 1rem",    weight: "500", lh: "1.4",  sample: "Услуги и цены" },
  { token: "h6",       size: "14px / 0.875rem",weight: "500", lh: "1.4",  sample: "Контакты клиники" },
  { token: "body",     size: "16px / 1rem",    weight: "400", lh: "1.6",  sample: "ЛОР-клиника предоставляет полный спектр услуг по диагностике и лечению заболеваний уха, горла и носа." },
  { token: "body-sm",  size: "14px / 0.875rem",weight: "400", lh: "1.6",  sample: "Запись по телефону или через форму на сайте. Работаем без выходных." },
  { token: "caption",  size: "12px / 0.75rem", weight: "400", lh: "1.5",  sample: "Лицензия № ЛО-77-01-018234 от 12.01.2022" },
  { token: "label",    size: "12px / 0.75rem", weight: "500", lh: "1.4",  sample: "СПЕЦИАЛИЗАЦИЯ ВРАЧА" },
  { token: "overline", size: "10px / 0.625rem",weight: "600", lh: "1.4",  sample: "ФУНДАМЕНТ → 1.4" },
 ];
 /* ─── Компоненты ───────────────────────────────────────────────────── */
 function Section({
  title,
  subtitle,
  children,
 }: {
  title: string;
  subtitle?: string;
  children: React.ReactNode;
 }) {
  return (
    <section className="mb-14">
      <div className="mb-6">
        <h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
          {title}
        </h2>
        {subtitle && (
          <p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
            {subtitle}
          </p>
        )}
      </div>
      {children}
    </section>
  );
 }
 function UsageBadge({ label, color }: { label: string; color: string }) {
  return (
    <span
      className="inline-block px-2 py-0.5 rounded text-xs font-medium"
      style={{ background: color === "teal" ? "#e0f5f4" : "#fef3c7", color: color === "teal" ? "var(--brand-073m)" : "#92400e" }}
    >
      {label}
    </span>
  );
 }
 function TypeRow({
  token,
  size,
  weight,
  lh,
  sample,
  fontFamily,
 }: {
  token: string;
  size: string;
  weight: string;
  lh: string;
  sample: string;
  fontFamily: string;
 }) {
  const [sizeVal] = size.split(" / ");
  const pxSize = parseInt(sizeVal);
  return (
    <div
      className="border-t py-4 grid gap-4"
      style={{
        borderColor: "var(--bb-border)",
        gridTemplateColumns: "80px 1fr 140px",
        alignItems: "start",
      }}
    >
      {/* Токен */}
      <div className="pt-1">
        <span
          className="font-mono text-xs px-2 py-0.5 rounded"
          style={{ background: "#f3f4f6", color: "#374151" }}
        >
          {token}
        </span>
      </div>
      {/* Образец */}
      <div
        style={{
          fontFamily,
          fontSize: `${Math.min(pxSize, 28)}px`,
          fontWeight: weight,
          lineHeight: lh,
          color: "var(--bb-text)",
          wordBreak: "break-word",
        }}
      >
        {sample}
      </div>
      {/* Метаданные */}
      <div className="pt-1 space-y-1 text-right">
        <p className="font-mono text-xs" style={{ color: "var(--bb-text-muted)" }}>
          {size}
        </p>
        <p className="font-mono text-xs" style={{ color: "var(--bb-text-muted)" }}>
          w{weight} · lh{lh}
        </p>
      </div>
    </div>
  );
 }
 /* ─── Страница ─────────────────────────────────────────────────────── */
 export default function TypographyPage() {
  return (
    <div className="max-w-4xl mx-auto px-8 py-10">
      {/* Заголовок */}
      <div className="mb-10 pb-6 border-b" style={{ borderColor: "var(--bb-border)" }}>
        <p
          className="text-xs font-semibold uppercase tracking-widest mb-2"
          style={{ color: "var(--brand-053m)" }}
        >
          Фундамент → 1.4
        </p>
        <h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}>
          Типографика
        </h1>
        <p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
          Бренд использует два шрифта с чётким разделением по контексту применения.
          Никогда не смешивайте их в одном носителе без необходимости.
        </p>
      </div>
      {/* Карточки шрифтов */}
      <section className="mb-12">
        <h2 className="text-xl font-semibold mb-6" style={{ color: "var(--bb-text)" }}>
          Шрифты бренда
        </h2>
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
          {/* DINPro */}
          <div
            className="rounded-xl border p-6"
            style={{ borderColor: "var(--bb-border)" }}
          >
            <div className="flex items-start justify-between mb-3">
              <div>
                <p className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
                  DINPro
                </p>
                <p className="text-xs mt-0.5" style={{ color: "var(--bb-text-muted)" }}>
                  Бренд-шрифт · не Google Fonts
                </p>
              </div>
              <UsageBadge label="Оффлайн · Бренд" color="yellow" />
            </div>
            <div
              className="text-4xl mb-4 font-bold"
              style={{ fontFamily: "'DINPro', Arial, sans-serif", color: "var(--bb-text)" }}
            >
              Aa Бб Вв
            </div>
            <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
              Применяется на: форме сотрудников, бейджах, вывесках, транспорте,
              полиграфии. Лицензионный шрифт — передаётся дизайнером.
            </p>
            <p className="text-xs mt-3 font-mono px-2 py-1 rounded inline-block"
              style={{ background: "#f3f4f6", color: "#374151" }}>
              --font-brand
            </p>
          </div>
          {/* Fira Sans */}
          <div
            className="rounded-xl border p-6"
            style={{ borderColor: "var(--bb-border)" }}
          >
            <div className="flex items-start justify-between mb-3">
              <div>
                <p className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
                  Fira Sans
                </p>
                <p className="text-xs mt-0.5" style={{ color: "var(--bb-text-muted)" }}>
                  Веб-шрифт · Google Fonts
                </p>
              </div>
              <UsageBadge label="Веб · Цифровой" color="teal" />
            </div>
            <div
              className="text-4xl mb-4 font-semibold"
              style={{ fontFamily: "var(--font-fira-sans)", color: "var(--bb-text)" }}
            >
              Aa Бб Вв
            </div>
            <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
              Применяется на: сайте oclinica.ru, в цифровом брендбуке, онлайн-материалах.
              Подключён через next/font/google (кириллица + латиница).
            </p>
            <p className="text-xs mt-3 font-mono px-2 py-1 rounded inline-block"
              style={{ background: "#f3f4f6", color: "#374151" }}>
              --font-web
            </p>
          </div>
        </div>
      </section>
      {/* Таблица применения */}
      <section className="mb-12">
        <h2 className="text-xl font-semibold mb-4" style={{ color: "var(--bb-text)" }}>
          Правило применения
        </h2>
        <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)" }}>
                {["Носитель", "Шрифт"].map(h => (
                  <th
                    key={h}
                    className="text-left px-5 py-3 font-medium"
                    style={{ color: "var(--bb-text-muted)" }}
                  >
                    {h}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {[
                ["Сайт, цифровые материалы, брендбук",   "Fira Sans"],
                ["Форма сотрудников, бейджи",             "DINPro"],
                ["Вывески, таблички, навигация",          "DINPro"],
                ["Брендирование транспорта",              "DINPro"],
                ["Визитки, листовки, полиграфия",         "DINPro"],
                ["Telegram-бот, пуш-уведомления",        "Fira Sans (системный)"],
              ].map(([media, font]) => (
                <tr
                  key={media}
                  className="border-t"
                  style={{ borderColor: "var(--bb-border)" }}
                >
                  <td className="px-5 py-3" style={{ color: "var(--bb-text)" }}>{media}</td>
                  <td className="px-5 py-3 font-medium" style={{ color: "var(--brand-073m)" }}>
                    {font}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>
      {/* DINPro Scale */}
      <Section
        title="DINPro — шкала заголовков"
        subtitle="Бренд-шрифт. Используется в оффлайн-носителях. Отображается с системным фоллбэком Arial, если шрифт не установлен."
      >
        <div>
          {DIN_SCALE.map(row => (
            <TypeRow
              key={row.token}
              {...row}
              fontFamily="'DINPro', 'DIN Pro', Arial, sans-serif"
            />
          ))}
        </div>
      </Section>
      {/* Fira Sans Scale */}
      <Section
        title="Fira Sans — полная шкала"
        subtitle="Веб-шрифт. Используется на сайте и в цифровых материалах. Загружается через Google Fonts."
      >
        <div>
          {FIRA_SCALE.map(row => (
            <TypeRow
              key={row.token}
              {...row}
              fontFamily="var(--font-fira-sans, 'Fira Sans', sans-serif)"
            />
          ))}
        </div>
      </Section>
      {/* Живой пример */}
      <Section
        title="Живой пример — блок контента"
        subtitle="Типичная комбинация заголовка и тела текста на сайте."
      >
        <div
          className="rounded-xl border p-8"
          style={{
            borderColor: "var(--bb-border)",
            background: "var(--bb-sidebar-bg)",
            fontFamily: "var(--font-fira-sans, 'Fira Sans', sans-serif)",
          }}
        >
          <p
            className="text-xs font-semibold uppercase tracking-widest mb-3"
            style={{ color: "var(--brand-053m)", letterSpacing: "0.1em" }}
          >
            Наши специалисты
          </p>
          <h2
            className="mb-4"
            style={{ fontSize: 28, fontWeight: 600, lineHeight: 1.3, color: "var(--bb-text)" }}
          >
            Запись к ЛОР-врачу<br />без очереди и ожидания
          </h2>
          <p
            className="mb-4 max-w-xl"
            style={{ fontSize: 16, fontWeight: 400, lineHeight: 1.6, color: "var(--bb-text-muted)" }}
          >
            В нашей клинике работают специалисты высшей категории с опытом от 15 лет.
            Диагностика и лечение заболеваний уха, горла, носа и смежных органов.
          </p>
          <p
            style={{ fontSize: 12, fontWeight: 400, lineHeight: 1.5, color: "#9ca3af" }}
          >
            Лицензия № ЛО-77-01-018234 · Москва, ул. Примерная, д. 1
          </p>
        </div>
      </Section>
    </div>
  );
 }
--- a/apps/web/app/offline/badges/page.tsx
+++ b/apps/web/app/offline/badges/page.tsx
@ -0,0 +1,273 @@
 import type { Metadata } from "next";
 import Image from "next/image";
 export const metadata: Metadata = {
  title: "Бейджи | Брендбук О!Клиника",
 };
 function Section({
  title,
  subtitle,
  children,
 }: {
  title: string;
  subtitle?: string;
  children: React.ReactNode;
 }) {
  return (
    <section className="mb-12">
      <div className="mb-6">
        <h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
          {title}
        </h2>
        {subtitle && (
          <p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
            {subtitle}
          </p>
        )}
      </div>
      {children}
    </section>
  );
 }
 /* Компонент бейджа (масштабированный макет) */
 function BadgeMockup({
  variant,
  name,
  role,
 }: {
  variant: "light" | "dark";
  name: string;
  role: string;
 }) {
  const isDark = variant === "dark";
  /* 70×30 мм → пропорция 7:3. Отображаем в 280×120px */
  return (
    <div className="flex flex-col items-center gap-3">
      <div
        className="rounded-lg flex items-center px-5 gap-4"
        style={{
          width: 280,
          height: 120,
          background: isDark ? "var(--brand-073m)" : "var(--brand-081m)",
          border: isDark ? "none" : "1px solid #d1d5db",
          flexShrink: 0,
        }}
      >
        {/* Логотип */}
        <Image
          src="/logo/logo-transparent.png"
          alt="Логотип"
          width={72}
          height={26}
          className="object-contain shrink-0"
          style={{
            filter: isDark
              ? "brightness(0) invert(1)"
              : "brightness(0) sepia(1) saturate(2) hue-rotate(330deg) brightness(0.45)",
          }}
        />
        {/* Разделитель */}
        <div
          className="self-stretch w-px mx-1"
          style={{ background: isDark ? "rgba(255,255,255,0.25)" : "rgba(92,46,14,0.2)" }}
        />
        {/* Текст */}
        <div>
          <p
            className="font-bold leading-tight"
            style={{
              fontFamily: "'DINPro', Arial, sans-serif",
              fontSize: 13,
              color: isDark ? "#ffffff" : "#5c2e0e",
            }}
          >
            {name}
          </p>
          <p
            className="leading-tight mt-0.5"
            style={{
              fontFamily: "'DINPro', Arial, sans-serif",
              fontSize: 10,
              color: isDark ? "rgba(255,255,255,0.7)" : "rgba(92,46,14,0.7)",
            }}
          >
            {role}
          </p>
        </div>
      </div>
      <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
        {isDark ? "Тёмный вариант (серо-голубой)" : "Светлый вариант (бежевый)"}
      </p>
    </div>
  );
 }
 export default function BadgesPage() {
  return (
    <div className="max-w-4xl mx-auto px-8 py-10">
      {/* Заголовок */}
      <div className="mb-10 pb-6 border-b" style={{ borderColor: "var(--bb-border)" }}>
        <p
          className="text-xs font-semibold uppercase tracking-widest mb-2"
          style={{ color: "var(--brand-053m)" }}
        >
          Оффлайн элементы → 6.2
        </p>
        <h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}>
          Бейджи сотрудников
        </h1>
        <p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
          Именные бейджи для идентификации сотрудников клиники. Размер 70×30 мм.
          Два цветовых варианта в зависимости от должности.
        </p>
      </div>
      {/* Размеры и технические требования */}
      <Section
        title="Технические параметры"
        subtitle="Единый стандарт для всех сотрудников клиники."
      >
        <div
          className="grid grid-cols-2 gap-4 sm:grid-cols-4 mb-6"
        >
          {[
            { label: "Ширина", value: "70 мм" },
            { label: "Высота", value: "30 мм" },
            { label: "Материал", value: "ПВХ / металл" },
            { label: "Крепление", value: "Булавка / клипса" },
          ].map(({ label, value }) => (
            <div
              key={label}
              className="rounded-xl border p-4 text-center"
              style={{ borderColor: "var(--bb-border)", background: "var(--bb-sidebar-bg)" }}
            >
              <p className="font-mono text-lg font-semibold" style={{ color: "var(--brand-073m)" }}>
                {value}
              </p>
              <p className="text-xs mt-1" style={{ color: "var(--bb-text-muted)" }}>
                {label}
              </p>
            </div>
          ))}
        </div>
      </Section>
      {/* Варианты */}
      <Section
        title="Варианты бейджей"
        subtitle="Макет бейджа (масштаб: 4× от реального размера 70×30 мм)."
      >
        <div className="flex flex-wrap gap-8 items-start">
          <BadgeMockup
            variant="light"
            name="Иванова А.В."
            role="Врач-оториноларинголог"
          />
          <BadgeMockup
            variant="dark"
            name="Петров К.С."
            role="Главный врач"
          />
        </div>
      </Section>
      {/* Состав текста */}
      <Section
        title="Состав текста на бейдже"
        subtitle="Строгий порядок элементов. Шрифт — DINPro."
      >
        <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)" }}>
                {["Элемент", "Содержание", "Шрифт / Размер", "Позиция"].map(h => (
                  <th
                    key={h}
                    className="text-left px-5 py-3 font-medium"
                    style={{ color: "var(--bb-text-muted)" }}
                  >
                    {h}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {[
                ["Логотип", "Логотип клиники", "PNG / SVG", "Левая часть, по центру по высоте"],
                ["Разделитель", "Вертикальная линия", "1px, 40% прозрачность", "Между логотипом и текстом"],
                ["ФИО", "Фамилия И.О.", "DINPro Bold 13px", "Правая часть, верхняя строка"],
                ["Должность", "Полное название должности", "DINPro Regular 10px", "Правая часть, нижняя строка"],
              ].map(([el, content, font, pos]) => (
                <tr
                  key={el}
                  className="border-t"
                  style={{ borderColor: "var(--bb-border)" }}
                >
                  <td className="px-5 py-3 font-medium" style={{ color: "var(--bb-text)" }}>{el}</td>
                  <td className="px-5 py-3" style={{ color: "var(--bb-text-muted)" }}>{content}</td>
                  <td className="px-5 py-3 font-mono text-xs" style={{ color: "var(--bb-text-muted)" }}>{font}</td>
                  <td className="px-5 py-3" style={{ color: "var(--bb-text-muted)" }}>{pos}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Section>
      {/* Цветовые варианты */}
      <Section
        title="Применение вариантов"
        subtitle="Выбор варианта зависит от должности сотрудника."
      >
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
          {[
            {
              variant: "Светлый (бежевый)",
              color: "#c4a882",
              usage: "Медицинский персонал, санитарки, технический персонал",
              oracal: "081M",
            },
            {
              variant: "Тёмный (серо-голубой)",
              color: "#5b7b87",
              usage: "Административный персонал, менеджеры, главный врач",
              oracal: "073M",
            },
          ].map(item => (
            <div
              key={item.variant}
              className="flex gap-4 p-4 rounded-xl border"
              style={{ borderColor: "var(--bb-border)" }}
            >
              <div
                className="w-8 h-8 rounded-lg shrink-0 mt-0.5"
                style={{ background: item.color }}
              />
              <div>
                <p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
                  {item.variant}
                </p>
                <p className="text-xs mb-1.5" style={{ color: "var(--bb-text-muted)" }}>
                  {item.usage}
                </p>
                <span
                  className="text-[10px] font-mono px-1.5 py-0.5 rounded"
                  style={{ background: "#f3f4f6", color: "#374151" }}
                >
                  Oracal {item.oracal}
                </span>
              </div>
            </div>
          ))}
        </div>
      </Section>
    </div>
  );
 }
--- a/apps/web/app/offline/navigation/page.tsx
+++ b/apps/web/app/offline/navigation/page.tsx
@ -0,0 +1,252 @@
 import type { Metadata } from "next";
 export const metadata: Metadata = {
  title: "Внутренняя навигация | Брендбук О!Клиника",
 };
 function Section({
  title,
  subtitle,
  children,
 }: {
  title: string;
  subtitle?: string;
  children: React.ReactNode;
 }) {
  return (
    <section className="mb-12">
      <div className="mb-6">
        <h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
          {title}
        </h2>
        {subtitle && (
          <p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
            {subtitle}
          </p>
        )}
      </div>
      {children}
    </section>
  );
 }
 /* Макет настенной таблички */
 function SignMockup({
  type,
  text,
  subtext,
  bgColor,
  textColor,
  accentColor,
  size,
 }: {
  type: string;
  text: string;
  subtext?: string;
  bgColor: string;
  textColor: string;
  accentColor: string;
  size: string;
 }) {
  return (
    <div className="flex flex-col items-start gap-2">
      <div
        className="rounded-lg px-6 py-4 flex items-center gap-4"
        style={{
          background: bgColor,
          width: 260,
          border: bgColor === "#ffffff" ? "1px solid #e5e7eb" : "none",
        }}
      >
        {/* Цветовая полоса */}
        <div
          className="w-1.5 self-stretch rounded-full"
          style={{ background: accentColor, minHeight: 32 }}
        />
        <div>
          <p
            style={{
              fontFamily: "'DINPro', Arial, sans-serif",
              fontSize: 14,
              fontWeight: 700,
              color: textColor,
              lineHeight: 1.3,
            }}
          >
            {text}
          </p>
          {subtext && (
            <p
              style={{
                fontFamily: "'DINPro', Arial, sans-serif",
                fontSize: 10,
                color: textColor,
                opacity: 0.65,
                marginTop: 3,
              }}
            >
              {subtext}
            </p>
          )}
        </div>
      </div>
      <div className="pl-1">
        <p className="text-xs font-medium" style={{ color: "var(--bb-text)" }}>{type}</p>
        <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>{size}</p>
      </div>
    </div>
  );
 }
 export default function NavigationPage() {
  return (
    <div className="max-w-4xl mx-auto px-8 py-10">
      {/* Заголовок */}
      <div className="mb-10 pb-6 border-b" style={{ borderColor: "var(--bb-border)" }}>
        <p
          className="text-xs font-semibold uppercase tracking-widest mb-2"
          style={{ color: "var(--brand-053m)" }}
        >
          Оффлайн элементы → 6.3
        </p>
        <h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}>
          Внутренняя навигация
        </h1>
        <p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
          Система навигационных табличек и указателей внутри клиники.
          Единый стиль с фирменными цветами и шрифтом DINPro.
        </p>
      </div>
      {/* Шаблоны табличек */}
      <Section
        title="Типы табличек"
        subtitle="Четыре базовых шаблона для разных зон клиники."
      >
        <div className="flex flex-wrap gap-6">
          <SignMockup
            type="Кабинет врача"
            text="Кабинет № 101"
            subtext="Оториноларингология"
            bgColor="#ffffff"
            textColor="#1b4c72"
            accentColor="#7ecfca"
            size="200 × 80 мм"
          />
          <SignMockup
            type="Направляющий указатель"
            text="→ Регистратура"
            subtext="2-й этаж"
            bgColor="#5b7b87"
            textColor="#ffffff"
            accentColor="#7ecfca"
            size="300 × 80 мм"
          />
          <SignMockup
            type="Зона ожидания"
            text="Зона ожидания"
            subtext="Пожалуйста, соблюдайте тишину"
            bgColor="#e0f5f4"
            textColor="#1b4c72"
            accentColor="#5bb5ad"
            size="250 × 80 мм"
          />
          <SignMockup
            type="Запрещающий"
            text="Вход только для персонала"
            bgColor="#1b4c72"
            textColor="#ffffff"
            accentColor="#c4a882"
            size="250 × 60 мм"
          />
        </div>
      </Section>
      {/* Технические требования */}
      <Section
        title="Технические требования"
        subtitle="Материалы и цвета для производства."
      >
        <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)" }}>
                {["Параметр", "Значение"].map(h => (
                  <th
                    key={h}
                    className="text-left px-5 py-3 font-medium"
                    style={{ color: "var(--bb-text-muted)" }}
                  >
                    {h}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {[
                ["Основной материал", "ПВХ 3мм / ПС зеркальный / акрил"],
                ["Покрытие фона", "Oracal плёнка (053M / 073M / 050M)"],
                ["Шрифт", "DINPro Bold / Regular (DXF для фрезеровки)"],
                ["Крепление", "Двусторонний скотч / шурупы с дистанционным держателем"],
                ["Толщина букв (фрезеровка)", "3 мм от основы"],
                ["Минимальный размер текста", "10 мм по высоте"],
              ].map(([param, value]) => (
                <tr
                  key={param}
                  className="border-t"
                  style={{ borderColor: "var(--bb-border)" }}
                >
                  <td className="px-5 py-3 font-medium" style={{ color: "var(--bb-text)" }}>
                    {param}
                  </td>
                  <td className="px-5 py-3" style={{ color: "var(--bb-text-muted)" }}>
                    {value}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Section>
      {/* Цвета Oracal */}
      <Section
        title="Цвета Oracal для навигации"
        subtitle="Допустимые цвета плёнки по коду Oracal."
      >
        <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
          {[
            { code: "053M", hex: "#7ecfca", name: "Акцент / полоса" },
            { code: "073M", hex: "#5b7b87", name: "Фон указателей" },
            { code: "050M", hex: "#1b4c72", name: "Фон запрещающих" },
            { code: "081M", hex: "#c4a882", name: "Акцент на тёмном" },
          ].map(c => (
            <div
              key={c.code}
              className="rounded-xl overflow-hidden border"
              style={{ borderColor: "var(--bb-border)" }}
            >
              <div className="h-16" style={{ background: c.hex }} />
              <div className="p-3">
                <p className="font-medium text-xs" style={{ color: "var(--bb-text)" }}>
                  Oracal {c.code}
                </p>
                <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
                  {c.name}
                </p>
                <p className="font-mono text-xs mt-1" style={{ color: "var(--bb-text-muted)" }}>
                  {c.hex}
                </p>
              </div>
            </div>
          ))}
        </div>
      </Section>
    </div>
  );
 }
--- a/apps/web/app/offline/print/page.tsx
+++ b/apps/web/app/offline/print/page.tsx
@ -0,0 +1,331 @@
 import type { Metadata } from "next";
 import Image from "next/image";
 export const metadata: Metadata = {
  title: "Печатные материалы | Брендбук О!Клиника",
 };
 function Section({
  title,
  subtitle,
  children,
 }: {
  title: string;
  subtitle?: string;
  children: React.ReactNode;
 }) {
  return (
    <section className="mb-12">
      <div className="mb-6">
        <h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
          {title}
        </h2>
        {subtitle && (
          <p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
            {subtitle}
          </p>
        )}
      </div>
      {children}
    </section>
  );
 }
 /* Макет визитки */
 function BusinessCardMockup({ side }: { side: "front" | "back" }) {
  /* 90×50 мм → пропорция 9:5. Отображаем 288×160px */
  if (side === "front") {
    return (
      <div
        className="rounded-xl overflow-hidden shadow-md"
        style={{ width: 288, height: 160, background: "#5b7b87", flexShrink: 0 }}
      >
        {/* Верхняя бирюзовая полоса */}
        <div style={{ height: 6, background: "#7ecfca" }} />
        <div className="flex h-full">
          {/* Левая колонка с логотипом */}
          <div
            className="flex items-center justify-center px-6"
            style={{ width: 110, borderRight: "1px solid rgba(255,255,255,0.15)" }}
          >
            <Image
              src="/logo/logo-transparent.png"
              alt="Логотип"
              width={80}
              height={28}
              className="object-contain"
              style={{ filter: "brightness(0) invert(1)" }}
            />
          </div>
          {/* Правая колонка с данными */}
          <div className="flex flex-col justify-center px-5 pb-2 gap-1">
            <p
              style={{
                fontFamily: "'DINPro', Arial, sans-serif",
                fontSize: 12,
                fontWeight: 700,
                color: "#ffffff",
              }}
            >
              Иванова Анна Викторовна
            </p>
            <p
              style={{
                fontFamily: "'DINPro', Arial, sans-serif",
                fontSize: 9,
                color: "rgba(255,255,255,0.7)",
              }}
            >
              Врач-оториноларинголог
            </p>
            <div className="mt-2 space-y-0.5">
              {["+7 (495) 000-00-00", "oclinica.ru"].map(line => (
                <p
                  key={line}
                  style={{
                    fontFamily: "'DINPro', Arial, sans-serif",
                    fontSize: 8,
                    color: "rgba(255,255,255,0.6)",
                  }}
                >
                  {line}
                </p>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  }
  return (
    <div
      className="rounded-xl overflow-hidden shadow-md flex items-center justify-center"
      style={{ width: 288, height: 160, background: "#c4a882", flexShrink: 0 }}
    >
      <Image
        src="/logo/logo-transparent.png"
        alt="Логотип на обороте"
        width={140}
        height={50}
        className="object-contain"
        style={{
          filter: "brightness(0) sepia(1) saturate(2) hue-rotate(330deg) brightness(0.45)",
        }}
      />
    </div>
  );
 }
 /* Макет листовки */
 function LeafletMockup() {
  /* А5 = 148×210 мм → пропорция ≈ 1:1.42. Отображаем 180×256px */
  return (
    <div
      className="rounded-xl overflow-hidden shadow-md"
      style={{ width: 180, height: 256, background: "#ffffff", border: "1px solid #e5e7eb", flexShrink: 0 }}
    >
      {/* Шапка */}
      <div
        className="px-4 pt-4 pb-3 flex items-end justify-between"
        style={{ background: "#5b7b87" }}
      >
        <Image
          src="/logo/logo-transparent.png"
          alt="Логотип"
          width={90}
          height={32}
          className="object-contain"
          style={{ filter: "brightness(0) invert(1)" }}
        />
      </div>
      {/* Тело */}
      <div className="px-4 pt-3">
        {/* Плейсхолдер фото */}
        <div
          className="w-full rounded mb-3"
          style={{ height: 70, background: "#e0f5f4" }}
        />
        {/* Заголовок */}
        <div
          className="h-3 rounded mb-1.5"
          style={{ background: "#1b4c72", width: "80%" }}
        />
        <div
          className="h-3 rounded mb-3"
          style={{ background: "#1b4c72", width: "60%" }}
        />
        {/* Текст-заглушка */}
        {[100, 90, 95, 80].map((w, i) => (
          <div
            key={i}
            className="h-1.5 rounded mb-1"
            style={{ background: "#e5e7eb", width: `${w}%` }}
          />
        ))}
        {/* CTA-кнопка */}
        <div
          className="mt-4 rounded py-2 text-center"
          style={{ background: "#7ecfca" }}
        >
          <p
            style={{
              fontFamily: "'DINPro', Arial, sans-serif",
              fontSize: 9,
              fontWeight: 700,
              color: "#ffffff",
            }}
          >
            ЗАПИСАТЬСЯ НА ПРИЁМ
          </p>
        </div>
      </div>
    </div>
  );
 }
 export default function PrintPage() {
  return (
    <div className="max-w-4xl mx-auto px-8 py-10">
      {/* Заголовок */}
      <div className="mb-10 pb-6 border-b" style={{ borderColor: "var(--bb-border)" }}>
        <p
          className="text-xs font-semibold uppercase tracking-widest mb-2"
          style={{ color: "var(--brand-053m)" }}
        >
          Оффлайн элементы → 6.5
        </p>
        <h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}>
          Печатные материалы
        </h1>
        <p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
          Листовки, визитки и digital-каналы клиники. Все материалы следуют
          единому фирменному стилю с использованием шрифта DINPro и цветов Oracal.
        </p>
      </div>
      {/* Визитки */}
      <Section
        title="Визитки"
        subtitle="Стандарт 90×50 мм. Двусторонняя печать. Изображены в масштабе."
      >
        <div className="flex flex-wrap gap-6 items-start">
          <div className="flex flex-col items-center gap-2">
            <BusinessCardMockup side="front" />
            <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>Лицевая сторона</p>
          </div>
          <div className="flex flex-col items-center gap-2">
            <BusinessCardMockup side="back" />
            <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>Оборотная сторона</p>
          </div>
        </div>
        <div
          className="mt-6 overflow-hidden rounded-xl border"
          style={{ borderColor: "var(--bb-border)" }}
        >
          <table className="w-full text-sm">
            <thead>
              <tr style={{ background: "var(--bb-sidebar-bg)" }}>
                {["Элемент", "Содержание"].map(h => (
                  <th key={h} className="text-left px-5 py-3 font-medium"
                    style={{ color: "var(--bb-text-muted)" }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {[
                ["Лицевая — логотип", "Белый инвертированный на тёмно-серо-голубом фоне"],
                ["Лицевая — ФИО", "DINPro Bold, 10pt, белый"],
                ["Лицевая — должность", "DINPro Regular, 8pt, белый 70%"],
                ["Лицевая — контакты", "DINPro Regular, 7pt, белый 60%"],
                ["Оборотная", "Логотип тёмно-коричневый на бежевом фоне (081M)"],
                ["Размер", "90 × 50 мм, 4+4 офсет или цифровая печать"],
              ].map(([el, content]) => (
                <tr key={el} className="border-t" style={{ borderColor: "var(--bb-border)" }}>
                  <td className="px-5 py-3 font-medium" style={{ color: "var(--bb-text)" }}>{el}</td>
                  <td className="px-5 py-3" style={{ color: "var(--bb-text-muted)" }}>{content}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Section>
      {/* Листовки */}
      <Section
        title="Листовки"
        subtitle="Формат А5 (148×210 мм). Шаблон для акций и информационных материалов."
      >
        <div className="flex gap-8 items-start">
          <LeafletMockup />
          <div className="flex-1">
            <p className="font-medium text-sm mb-3" style={{ color: "var(--bb-text)" }}>
              Структура листовки
            </p>
            <div className="space-y-3">
              {[
                { zone: "Шапка", desc: "Логотип белый на тёмно-серо-голубом (073M)" },
                { zone: "Фото", desc: "Фото врача или процедуры, 70% ширины" },
                { zone: "Заголовок", desc: "DINPro Bold, тёмно-синий (050M), 18–22pt" },
                { zone: "Текст", desc: "DINPro Regular, 9–10pt, серый #374151" },
                { zone: "CTA-кнопка", desc: "Основной бирюзовый (053M), DINPro Bold белый" },
              ].map(({ zone, desc }) => (
                <div key={zone} className="flex gap-3">
                  <span
                    className="shrink-0 text-xs font-semibold px-2 py-0.5 rounded mt-0.5"
                    style={{ background: "#e0f5f4", color: "var(--brand-073m)" }}
                  >
                    {zone}
                  </span>
                  <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>{desc}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Section>
      {/* Telegram-бот */}
      <Section
        title="Telegram-бот"
        subtitle="Цифровой канал взаимодействия с пациентами."
      >
        <div
          className="rounded-xl border p-6"
          style={{ borderColor: "var(--bb-border)", background: "var(--bb-sidebar-bg)" }}
        >
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
            {[
              { icon: "🤖", title: "Запись на приём", desc: "Выбор врача, даты и времени через бот" },
              { icon: "📋", title: "Результаты анализов", desc: "Уведомления и просмотр результатов" },
              { icon: "💬", title: "Напоминания", desc: "Напоминание о предстоящем визите" },
            ].map(({ icon, title, desc }) => (
              <div key={title} className="flex gap-3">
                <span className="text-2xl shrink-0">{icon}</span>
                <div>
                  <p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
                    {title}
                  </p>
                  <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>{desc}</p>
                </div>
              </div>
            ))}
          </div>
          <div
            className="mt-4 pt-4 border-t text-xs"
            style={{ borderColor: "var(--bb-border)", color: "var(--bb-text-muted)" }}
          >
            В Telegram-боте используется системный шрифт Telegram. Логотип и цвета бренда
            применяются в аватаре, приветственном изображении и кнопках меню.
          </div>
        </div>
      </Section>
    </div>
  );
 }
--- a/apps/web/app/offline/transport/page.tsx
+++ b/apps/web/app/offline/transport/page.tsx
@ -0,0 +1,262 @@
 import type { Metadata } from "next";
 import Image from "next/image";
 export const metadata: Metadata = {
  title: "Брендирование транспорта | Брендбук О!Клиника",
 };
 function Section({
  title,
  subtitle,
  children,
 }: {
  title: string;
  subtitle?: string;
  children: React.ReactNode;
 }) {
  return (
    <section className="mb-12">
      <div className="mb-6">
        <h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
          {title}
        </h2>
        {subtitle && (
          <p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
            {subtitle}
          </p>
        )}
      </div>
      {children}
    </section>
  );
 }
 /* Макет трамвая (упрощённый силуэт) */
 function TramMockup() {
  return (
    <div
      className="relative rounded-2xl overflow-hidden"
      style={{
        background: "#f8f9fa",
        border: "1px solid var(--bb-border)",
        padding: "32px 24px",
      }}
    >
      {/* Кузов трамвая */}
      <div
        className="relative mx-auto rounded-xl overflow-hidden"
        style={{
          width: "100%",
          maxWidth: 560,
          height: 160,
          background: "#ffffff",
          border: "2px solid #e5e7eb",
        }}
      >
        {/* Верхняя полоса — бирюзовая */}
        <div
          className="absolute top-0 left-0 right-0"
          style={{ height: 28, background: "#7ecfca" }}
        />
        {/* Основная бежевая полоса */}
        <div
          className="absolute left-0 right-0"
          style={{ top: 28, height: 76, background: "#c4a882" }}
        />
        {/* Нижняя полоса — серо-голубая */}
        <div
          className="absolute left-0 right-0"
          style={{ top: 104, height: 56, background: "#5b7b87" }}
        />
        {/* Логотип по центру бежевой полосы */}
        <div
          className="absolute flex items-center justify-center"
          style={{ top: 28, left: 0, right: 0, height: 76 }}
        >
          <Image
            src="/logo/logo-transparent.png"
            alt="Логотип на трамвае"
            width={180}
            height={64}
            className="object-contain"
            style={{
              filter: "brightness(0) sepia(1) saturate(2) hue-rotate(330deg) brightness(0.45)",
            }}
          />
        </div>
        {/* Окна (декоративные) */}
        {[80, 180, 280, 380, 460].map(x => (
          <div
            key={x}
            className="absolute rounded"
            style={{
              left: x,
              top: 40,
              width: 50,
              height: 44,
              background: "rgba(255,255,255,0.6)",
              border: "1px solid rgba(255,255,255,0.8)",
            }}
          />
        ))}
        {/* Колёса (декоративные) */}
        {[60, 200, 360, 500].map(x => (
          <div
            key={x}
            className="absolute rounded-full"
            style={{
              left: x,
              bottom: -8,
              width: 24,
              height: 24,
              background: "#374151",
            }}
          />
        ))}
      </div>
      <p className="mt-4 text-center text-xs" style={{ color: "var(--bb-text-muted)" }}>
        Схема цветового решения (превью, не финальный макет)
      </p>
    </div>
  );
 }
 export default function TransportPage() {
  return (
    <div className="max-w-4xl mx-auto px-8 py-10">
      {/* Заголовок */}
      <div className="mb-10 pb-6 border-b" style={{ borderColor: "var(--bb-border)" }}>
        <p
          className="text-xs font-semibold uppercase tracking-widest mb-2"
          style={{ color: "var(--brand-053m)" }}
        >
          Оффлайн элементы → 6.4
        </p>
        <h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}>
          Брендирование транспорта
        </h1>
        <p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
          Схема нанесения фирменной символики на трамвай и другой общественный транспорт.
          Трёхполосная структура с логотипом клиники по центру.
        </p>
      </div>
      {/* Макет */}
      <Section
        title="Макет трамвая"
        subtitle="Трёхполосная схема брендирования: верхняя бирюзовая, центральная бежевая с логотипом, нижняя серо-голубая."
      >
        <TramMockup />
      </Section>
      {/* Цветовая схема */}
      <Section
        title="Цветовая схема"
        subtitle="Порядок и размеры полос."
      >
        <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)" }}>
                {["Зона", "Цвет", "Oracal", "Высота", "Содержимое"].map(h => (
                  <th
                    key={h}
                    className="text-left px-4 py-3 font-medium"
                    style={{ color: "var(--bb-text-muted)" }}
                  >
                    {h}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {[
                ["Верхняя полоса", "#7ecfca", "053M", "~17% высоты", "Декоративная"],
                ["Центральная полоса", "#c4a882", "081M", "~48% высоты", "Логотип клиники (по центру)"],
                ["Нижняя полоса", "#5b7b87", "073M", "~35% высоты", "Декоративная / контактная информация"],
              ].map(([zone, hex, oracal, height, content]) => (
                <tr
                  key={zone}
                  className="border-t"
                  style={{ borderColor: "var(--bb-border)" }}
                >
                  <td className="px-4 py-3 font-medium" style={{ color: "var(--bb-text)" }}>
                    {zone}
                  </td>
                  <td className="px-4 py-3">
                    <div className="flex items-center gap-2">
                      <div
                        className="w-5 h-5 rounded"
                        style={{ background: hex as string, border: "1px solid #e5e7eb" }}
                      />
                      <span className="font-mono text-xs" style={{ color: "var(--bb-text-muted)" }}>
                        {hex}
                      </span>
                    </div>
                  </td>
                  <td className="px-4 py-3 font-mono text-xs" style={{ color: "var(--bb-text-muted)" }}>
                    {oracal}
                  </td>
                  <td className="px-4 py-3" style={{ color: "var(--bb-text-muted)" }}>{height}</td>
                  <td className="px-4 py-3" style={{ color: "var(--bb-text-muted)" }}>{content}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Section>
      {/* Логотип на транспорте */}
      <Section
        title="Размещение логотипа"
        subtitle="На центральной полосе, горизонтально по центру борта."
      >
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
          {[
            { label: "Минимальная длина логотипа", value: "600 мм" },
            { label: "Отступ от краёв борта", value: "≥ 400 мм" },
            { label: "Вертикальное выравнивание", value: "По центру полосы" },
            { label: "Цвет логотипа", value: "Тёмно-коричневый (080M)" },
          ].map(({ label, value }) => (
            <div
              key={label}
              className="flex items-center gap-4 p-4 rounded-xl border"
              style={{ borderColor: "var(--bb-border)", background: "var(--bb-sidebar-bg)" }}
            >
              <div
                className="w-2 h-2 rounded-full shrink-0"
                style={{ background: "var(--brand-053m)" }}
              />
              <div>
                <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>{label}</p>
                <p className="font-semibold text-sm" style={{ color: "var(--bb-text)" }}>{value}</p>
              </div>
            </div>
          ))}
        </div>
      </Section>
      <div
        className="rounded-xl border p-4 text-sm flex items-start gap-3"
        style={{ borderColor: "#fde68a", background: "#fffbeb", color: "#92400e" }}
      >
        <span className="text-base shrink-0">⚠️</span>
        <p>
          Финальные макеты для производства предоставляются дизайнером в форматах AI / PDF с
          реальными размерами конкретного транспортного средства.
        </p>
      </div>
    </div>
  );
 }
--- a/apps/web/app/offline/uniform/page.tsx
+++ b/apps/web/app/offline/uniform/page.tsx
@ -0,0 +1,207 @@
 import type { Metadata } from "next";
 import Image from "next/image";
 export const metadata: Metadata = {
  title: "Форма сотрудников | Брендбук О!Клиника",
 };
 function Section({
  title,
  subtitle,
  children,
 }: {
  title: string;
  subtitle?: string;
  children: React.ReactNode;
 }) {
  return (
    <section className="mb-12">
      <div className="mb-6">
        <h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
          {title}
        </h2>
        {subtitle && (
          <p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
            {subtitle}
          </p>
        )}
      </div>
      {children}
    </section>
  );
 }
 export default function UniformPage() {
  return (
    <div className="max-w-4xl mx-auto px-8 py-10">
      {/* Заголовок */}
      <div className="mb-10 pb-6 border-b" style={{ borderColor: "var(--bb-border)" }}>
        <p
          className="text-xs font-semibold uppercase tracking-widest mb-2"
          style={{ color: "var(--brand-053m)" }}
        >
          Оффлайн элементы → 6.1
        </p>
        <h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}>
          Форма сотрудников
        </h1>
        <p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
          Фирменная медицинская одежда сотрудников клиники. Бежевый костюм
          с логотипом клиники на левой стороне груди.
        </p>
      </div>
      {/* Описание костюма */}
      <Section
        title="Описание комплекта"
        subtitle="Стандартная форма для всех сотрудников клиники."
      >
        <div
          className="rounded-xl border p-6"
          style={{ borderColor: "var(--bb-border)", background: "var(--bb-sidebar-bg)" }}
        >
          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
            <div>
              <p className="font-medium text-sm mb-3" style={{ color: "var(--bb-text)" }}>
                Состав формы
              </p>
              <ul className="space-y-2">
                {["Медицинский костюм (куртка + брюки)", "Цвет: бежевый (Oracal 081M)", "Материал: медицинская ткань", "Логотип вышит или нанесён термопечатью"].map(item => (
                  <li key={item} className="flex items-start gap-2 text-sm" style={{ color: "var(--bb-text-muted)" }}>
                    <span style={{ color: "var(--brand-053m)" }}>•</span> {item}
                  </li>
                ))}
              </ul>
            </div>
            <div>
              <p className="font-medium text-sm mb-3" style={{ color: "var(--bb-text)" }}>
                Цветовая схема
              </p>
              <div className="flex gap-3">
                <div className="text-center">
                  <div className="w-12 h-12 rounded-lg border mb-1"
                    style={{ background: "#c4a882", borderColor: "var(--bb-border)" }} />
                  <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>081M</p>
                  <p className="text-xs font-mono" style={{ color: "var(--bb-text-muted)" }}>#c4a882</p>
                </div>
                <div className="text-center">
                  <div className="w-12 h-12 rounded-lg border mb-1"
                    style={{ background: "#5c2e0e", borderColor: "var(--bb-border)" }} />
                  <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>080M</p>
                  <p className="text-xs font-mono" style={{ color: "var(--bb-text-muted)" }}>#5c2e0e</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Section>
      {/* Логотип на форме */}
      <Section
        title="Размещение логотипа"
        subtitle="Логотип располагается на левой стороне груди. Размер зависит от размера одежды."
      >
        {/* Визуализация размещения */}
        <div
          className="rounded-xl border p-8 mb-6 flex flex-col items-center justify-center"
          style={{ background: "#c4a882", borderColor: "transparent", minHeight: 200 }}
        >
          <div className="relative w-64 h-48 flex items-center justify-center">
            {/* Силуэт куртки (упрощённая схема) */}
            <div className="absolute inset-0 rounded-xl opacity-20"
              style={{ border: "2px dashed #5c2e0e" }} />
            {/* Зона логотипа — левая грудь */}
            <div className="absolute top-6 left-10 flex flex-col items-center gap-2">
              <Image
                src="/logo/logo-transparent.png"
                alt="Логотип на форме"
                width={100}
                height={36}
                className="object-contain"
                style={{ filter: "brightness(0) sepia(1) saturate(2) hue-rotate(330deg) brightness(0.45)" }}
              />
              <div className="border border-dashed rounded px-1"
                style={{ borderColor: "#5c2e0e50" }}>
                <p className="text-xs" style={{ color: "#5c2e0e80" }}>← Левая грудь</p>
              </div>
            </div>
          </div>
          <p className="mt-4 text-sm" style={{ color: "rgba(92,46,14,0.7)" }}>
            Схема размещения логотипа (превью)
          </p>
        </div>
        {/* Таблица размеров */}
        <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)" }}>
                {["Размер одежды", "Длина логотипа", "Высота логотипа", "Расположение"].map(h => (
                  <th
                    key={h}
                    className="text-left px-5 py-3 font-medium"
                    style={{ color: "var(--bb-text-muted)" }}
                  >
                    {h}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {[
                ["До 46 р. включительно", "70 мм", "25,5 мм", "Левая сторона груди"],
                ["От 48 р.", "90 мм", "32,8 мм", "Левая сторона груди"],
              ].map(([size, w, h, pos]) => (
                <tr
                  key={size}
                  className="border-t"
                  style={{ borderColor: "var(--bb-border)" }}
                >
                  <td className="px-5 py-3" style={{ color: "var(--bb-text)" }}>{size}</td>
                  <td className="px-5 py-3 font-mono text-xs" style={{ color: "var(--bb-text)" }}>{w}</td>
                  <td className="px-5 py-3 font-mono text-xs" style={{ color: "var(--bb-text)" }}>{h}</td>
                  <td className="px-5 py-3" style={{ color: "var(--bb-text-muted)" }}>{pos}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Section>
      {/* Правила */}
      <Section title="Правила использования">
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
          {[
            { ok: true,  text: "Носить комплект в полном составе" },
            { ok: true,  text: "Поддерживать чистоту и опрятность формы" },
            { ok: true,  text: "Логотип — только тёмно-коричневый на бежевом" },
            { ok: false, text: "Носить форму без логотипа" },
            { ok: false, text: "Изменять цвет или материал формы" },
            { ok: false, text: "Добавлять сторонние нашивки и знаки" },
          ].map(item => (
            <div
              key={item.text}
              className="flex items-start gap-3 p-4 rounded-lg border"
              style={{
                borderColor: item.ok ? "#a7f3d0" : "#fecaca",
                background: item.ok ? "#f0fdf4" : "#fff5f5",
              }}
            >
              <span style={{ color: item.ok ? "#16a34a" : "#ef4444" }}>
                {item.ok ? "✓" : "✕"}
              </span>
              <p className="text-sm" style={{ color: item.ok ? "#14532d" : "#7f1d1d" }}>
                {item.text}
              </p>
            </div>
          ))}
        </div>
      </Section>
    </div>
  );
 }
--- a/apps/web/components/layout/Sidebar.tsx
+++ b/apps/web/components/layout/Sidebar.tsx
@ -19,8 +19,8 @@ const NAV: NavSection[] = [
    title: "Фундамент",
    items: [
      { label: "Логотип", href: "/foundation/logo" },
-      { label: "Цвета", href: "/foundation/colors", soon: true },
+      { label: "Цвета", href: "/foundation/colors" },
-      { label: "Типографика", href: "/foundation/typography", soon: true },
+      { label: "Типографика", href: "/foundation/typography" },
      { label: "Иконография", href: "/foundation/icons", soon: true },
    ],
  },
@ -64,11 +64,11 @@ const NAV: NavSection[] = [
  {
    title: "Оффлайн элементы",
    items: [
-      { label: "Форма сотрудников", href: "/offline/uniform", soon: true },
+      { label: "Форма сотрудников", href: "/offline/uniform" },
-      { label: "Бейджи", href: "/offline/badges", soon: true },
+      { label: "Бейджи", href: "/offline/badges" },
-      { label: "Навигация", href: "/offline/navigation", soon: true },
+      { label: "Навигация", href: "/offline/navigation" },
-      { label: "Транспорт", href: "/offline/transport", soon: true },
+      { label: "Транспорт", href: "/offline/transport" },
-      { label: "Печать", href: "/offline/print", soon: true },
+      { label: "Печать", href: "/offline/print" },
    ],
  },
  {
@ -171,7 +171,7 @@ export function Sidebar() {
          color: "var(--bb-sidebar-text-muted)",
        }}
      >
-        Sprint 1 · v0.1.0
+        Sprint 2 · v0.2.0
      </div>
    </aside>
  );
--- a/docs/SPRINTS.md
+++ b/docs/SPRINTS.md
@ -53,30 +53,47 @@
 ---
-## Sprint 2 — Цвета, типографика и оффлайн элементы (Brand Foundation)
+## Sprint 2 — Цвета, типографика и оффлайн элементы (Brand Foundation) ✅ ЗАВЕРШЁН
 **Цель:** Секция «Фундамент бренда» — цвета, оба шрифта, а также первый оффлайн-раздел.
 ### Задачи — цвета
- [ ] Design: Зафиксировать HEX-эквиваленты всех цветов бренда (053M, 073M, 066M, 050M, 081M, 080M)
+- [x] Design: Зафиксировать HEX-эквиваленты всех цветов бренда (053M, 073M, 066M, 050M, 081M, 080M)
- [ ] FE: Создать CSS-переменные / дизайн-токены для всей цветовой палитры
+- [x] FE: Создать CSS-переменные / дизайн-токены для всей цветовой палитры
- [ ] FE: Страница «Цвета» — палитра с кодами Oracal/Pantone, HEX, RGB, HSL, копирование в клик
+- [x] FE: Страница «Цвета» — палитра с кодами Oracal/Pantone, HEX, RGB, HSL, копирование в клик
- [ ] FE: Проверка контрастности пар цветов (WCAG AA/AAA)
+- [x] FE: Проверка контрастности пар цветов (WCAG AA/AAA)
- [ ] FE: Экспорт токенов в JSON (Figma-compatible)
+- [x] FE: Экспорт токенов в JSON (Figma-compatible)
 ### Задачи — типографика
- [ ] FE: Страница «Типографика» — раздел DINPro (бренд/оффлайн) + раздел Fira Sans (веб)
+- [x] FE: Страница «Типографика» — раздел DINPro (бренд/оффлайн) + раздел Fira Sans (веб)
- [ ] FE: Шкала размеров для обоих шрифтов: h1–h6, body, caption, label, overline
+- [x] FE: Шкала размеров для обоих шрифтов: h1–h6, body, caption, label, overline
- [ ] FE: Чёткое указание: где DINPro, где Fira Sans
+- [x] FE: Чёткое указание: где DINPro, где Fira Sans
- [ ] FE: Живые примеры текста обоими шрифтами
+- [x] FE: Живые примеры текста обоими шрифтами
 ### Задачи — оффлайн элементы (справочный раздел)
- [ ] FE: Раздел «Оффлайн элементы» в навигации брендбука
+- [x] FE: Раздел «Оффлайн элементы» в навигации брендбука
- [ ] FE: Страница «Форма сотрудников» — фото, правила размещения логотипа, таблица размеров
+- [x] FE: Страница «Форма сотрудников» — схема размещения логотипа, таблица размеров
- [ ] FE: Страница «Бейджи» — размеры 70×30 мм, варианты, состав текста
+- [x] FE: Страница «Бейджи» — размеры 70×30 мм, варианты (светлый/тёмный), состав текста
- [ ] FE: Страница «Внутренняя навигация» — шаблоны табличек, материалы, цвета Oracal
+- [x] FE: Страница «Внутренняя навигация» — шаблоны табличек, материалы, цвета Oracal
- [ ] FE: Страница «Брендирование транспорта» — макет трамвая, цветовая схема
+- [x] FE: Страница «Брендирование транспорта» — макет трамвая, цветовая схема
- [ ] FE: Страница «Печатные материалы» — листовки, визитки, Telegram-бот
+- [x] FE: Страница «Печатные материалы» — листовки, визитки, Telegram-бот
 ### Фактические результаты
 - Страница `/foundation/colors` — 7 цветов с HEX/RGB/HSL/CSS-var и копированием, WCAG-контраст 7 пар, экспорт JSON
 - Страница `/foundation/typography` — DINPro (оффлайн) + Fira Sans (веб), таблица применения, полные шкалы, живой пример
 - Страница `/offline/uniform` — схема формы, таблица размеров логотипа, правила использования
 - Страница `/offline/badges` — макеты бейджей 70×30 мм (светлый/тёмный), состав текста, применение
 - Страница `/offline/navigation` — 4 шаблона табличек, технические требования, цвета Oracal
 - Страница `/offline/transport` — CSS-макет трамвая с трёхполосной схемой, таблица зон
 - Страница `/offline/print` — макеты визитки (лицо/оборот) и листовки А5, Telegram-бот
 - Sidebar: убраны «скоро» для Цветов, Типографики и всех 5 страниц Оффлайн
 - Версия обновлена до **Sprint 2 · v0.2.0**
 ### Технические решения Sprint 2
 - Страница «Цвета» — `"use client"` для clipboard API и экспорта JSON
 - WCAG relative luminance вычисляется на клиенте, без зависимостей
 - DINPro отображается с фоллбэком Arial (лицензионный шрифт)
 - Макеты (бейджи, трамвай, визитки) — чистый CSS/Tailwind без внешних зависимостей
 **Результат спринта:** Разделы «Цвета», «Типографика» и «Оффлайн элементы» полностью готовы.