ТЗ: перевод шаблонов страниц на строгий деловой стиль

Заказчик: рынок-фирм.рф · Объект: https://xn----ptbekbgmf8a6d.xn--p1ai/Редакция: 1.0 от 13.10.2026 · Основание: «необходимо оформить сайт в строгом деловом официальном стиле»

1. Задача

Перевести все шаблоны страниц действующего сайта на строгий деловой официальный стиль.

В объёме работ — только три вещи:

1. Шрифты — семейства, начертания, кегли, трекинг, начертание цифр.
2. Цвета — палитра, фоны, границы, состояния, статусные цвета.
3. Формы компонентов — радиусы, рамки, тени, заливки, обводки фокуса.

Вне объёма — всё остальное. Пользовательские сценарии, логика, порядок и расположение компонентов сохраняются без изменений.

2. Что такое «строгий деловой официальный» в терминах этого ТЗ

Признак	Что делаем
Официальность	Одна сдержанная гарнитура для интерфейса, документная антиква для читальных страниц
Строгость	Прямые углы и микрорадиусы вместо текущих 14–16 px
Деловитость	Тонкая линия вместо тени, отсутствие градиентов и «парящих» карточек
Спокойствие	Один фирменный акцент, нейтральный холодный фон, никаких декоративных цветов
Документность	Табличные цифры во всех числах, выравненные суммы, ИНН, номера заявок

3. Исходное состояние

Данные сняты с боевого бандла assets/styles-j_AatC_s.css.

3.1. Текущие цветовые токены

Токен	Значение	Приближённый HEX
--background	oklch(100% 0 0)	#FFFFFF
--foreground	oklch(22% .02 155)	#131D17
--card	oklch(100% 0 0)	#FFFFFF
--primary	oklch(62% .16 148)	#2B9F4A
--primary-foreground	oklch(99% 0 0)	#FCFCFC
--primary-soft	oklch(96% .03 148)	#E5F8E7
--secondary	oklch(97.5% .003 155)	#F5F7F6
--muted	oklch(97% .003 155)	#F4F6F4
--muted-foreground	oklch(42% .015 155)	#475049
--accent	oklch(96% .03 148)	#E5F8E7
--accent-foreground	oklch(35% .08 148)	#174521
--destructive	oklch(60% .22 27)	#E62C2C
--border	oklch(93% .005 155)	#E5E9E6
--input	oklch(95% .005 155)	#ECEFED
--ring	oklch(62% .16 148)	#2B9F4A
--radius	.875rem	14 px

Тёмной темы нет: в бандле присутствует только утилита .dark\:…, корневой тёмной палитры не существует.

3.2. Текущие шрифты

Подключено 5 семейств Google Fonts, ~19 начертаний:

Переменная	Семейство
--font-sans	Manrope, Inter
--font-display	Manrope, Inter
--font-editorial	Instrument Serif
--font-accent	Fraunces (курсив)
--font-mono	системный

3.3. Текущие формы

Замеры по HTML главной страницы:

Признак	Количество вхождений на главной
rounded-full	40
rounded-xl	36
rounded-lg	13
rounded-2xl	10
rounded-md	4
shadow-sm	3
Градиенты (linear-gradient)	есть, в т.ч. на кнопках и бейджах

3.4. Проблемы, которые устраняет ТЗ

1. Основной цвет не совпадает с логотипом. Знак — #0D7A5F (сине-зелёный), акцент интерфейса — #2B9F4A (травяной). Два разных зелёных в одной шапке.
2. Радиус 14 px и rounded-full в 40 местах дают мягкий «стартапный» вид вместо официального.
3. Три декоративных семейства (Instrument Serif, Fraunces, Manrope) не несут функции.
4. Кнопка и статус «успех» — один и тот же зелёный, поэтому успех неотличим от действия.
5. --input: #ECEFED даёт контраст 1,1:1 к белому — граница поля ввода практически не видна (WCAG 1.4.11 требует ≥ 3:1).

4. Целевые токены

4.1. Цвет

Палитра не утверждена

Ниже предложение, вариант 02 «Нотариальный». Всего собрано пять направлений оформления главной страницы. Значения разделов 4.1 и 4.3 фиксируются после выбора направления.

Гамма сохранена фирменная зелёная: новый --primary выведен из цвета логотипа #0D7A5F, а не заменён на чужой синий. Меняется насыщенность и глубина: вместо травяного #2B9F4A берётся глубокий бутылочный #0B5A43.

Токен	Новое значение	Назначение
--background	#F4F6F5	Фон страницы (нейтральная бумага, не чистый белый)
--foreground	#101614	Основной текст
--card	#FFFFFF	Поверхности: карточки, панели, поля
--primary	#0B5A43	Действие, ссылка, активное состояние
--primary-hover	#084534	Наведение
--primary-active	#063327	Нажатие
--primary-foreground	#FFFFFF	Текст на заливке
--primary-soft	#E7EFEB	Плашка выбранного пункта, мягкий бейдж
--secondary	#ECF0EE	Второстепенная кнопка, подложка
--secondary-foreground	#1B241F	Текст на ней
--muted	#F0F3F1	Скелетон, заголовок таблицы
--muted-foreground	#5A6B63	Второстепенный текст, подписи
--border	#DCE3DF	Разделители (декоративные)
--input	#7E8C86	Граница полей ввода
--ring	#0B5A43	Обводка фокуса
--destructive	#B3261E	Ошибка, удаление
--destructive-soft	#FBEAE8	Плашка ошибки
--success	#1A6E47	Статус «завершено»
--success-soft	#E6F1EB	Плашка успеха
--warning	#8A5A0B	«Ожидает решения», «к выплате»
--warning-soft	#F8EFDF	Плашка предупреждения
--info	#1F5A78	Справочные пометки
--info-soft	#E6EFF4	Плашка информации

Проверенные коэффициенты контраста (WCAG 2.1):

Пара	Контраст	Норма	Итог
Текст на фоне страницы	16,87:1	4,5	OK
Текст на карточке	18,31:1	4,5	OK
Второстепенный текст на карточке	5,65:1	4,5	OK
Второстепенный текст на подложке	5,06:1	4,5	OK
Белый текст на primary-кнопке	8,21:1	4,5	OK
Ссылка primary на белом	8,21:1	4,5	OK
Primary-текст на soft-плашке	7,02:1	4,5	OK
Ошибка на soft-плашке	5,61:1	4,5	OK
Успех на soft-плашке	5,39:1	4,5	OK
Предупреждение на soft-плашке	5,19:1	4,5	OK
Инфо на soft-плашке	6,45:1	4,5	OK
Граница поля ввода к белому	3,51:1	3,0	OK
Обводка фокуса к белому	8,21:1	3,0	OK

Правила использования цвета

• Заливка --primary — только у одного главного действия на экран. Всё остальное — --secondary с рамкой --border.
• Градиенты запрещены полностью, включая градиентные заливки кнопок и текст с градиентом.
• Статусные цвета применяются только в бейджах и плашках статусов, никогда — как заливка кнопки действия.
• Фон страницы --background, фон всех поверхностей --card. Цветные фоны секций не вводятся.

4.2. Типографика

Два семейства вместо пяти.

Переменная	Значение
--font-sans	"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
--font-display	"Source Serif 4", "PT Serif", Georgia, "Times New Roman", serif
--font-mono	ui-monospace, SFMono-Regular, Menlo, Consolas, monospace

Кириллица проверена у всех кандидатов. Lato из типовой «юридической» пары использовать нельзя — в нём нет кириллицы.

Где что применяется

Поверхность	Гарнитура
H1 публичных страниц, H2 и H3 статей и новостей, юридические страницы, суммы в первом экране	--font-display
Весь остальной интерфейс: навигация, кнопки, формы, карточки, таблицы, бейджи, кабинет, админка	--font-sans
Номера заявок, ИНН, ОГРН, реф-коды, идентификаторы	--font-mono

В кабинете партнёра и админке антиква не используется вообще — это рабочие поверхности, там только Inter.

Загружаемые начертания

Семейство	Начертания
Inter	400, 500, 600
Source Serif 4	400, 600 (+ курсив 400 для статей)

Итого 6 начертаний против текущих ~19.

Шкала

Роль	Кегль	Интерлиньяж	Насыщенность
H1 первого экрана	clamp(38px, 4.2vw, 56px)	1.08	600
H1 страницы	38px	1.15	600
H2	28px	1.22	600
H3	21px	1.30	600
Подзаголовок	17px	1.40	600
Основной текст	16px	1.60	400
Мелкий текст	14px	1.50	400
Подпись, метка	13px	1.35	500
Служебная	12px	1.35	500
Юридический текст	15px	1.70	400

Правила

• Трекинг: заголовки -0.01em, служебные метки +0.02em.
• font-variant-numeric: tabular-nums обязательно для всех чисел: суммы, проценты, даты, ИНН, номера заявок, метрики дашборда.
• КАПС: не использовать в заголовках. Допускается только в надзаголовках-метках над H2 одного экрана, не более одного на секцию, 12 px, --muted-foreground, +0.06em.
• Курсив — только внутри текста статей и новостей. В интерфейсе курсива нет.
• Многоточия, кавычки и тире — типографские: «ёлочки», длинное тире, неразрывный пробел перед единицами измерения.

4.3. Формы, тени, радиусы

Токен	Было	Стало
--radius-sm	—	0
--radius	14px	2px
--radius-lg	—	3px
--shadow-none	shadow-sm	нет тени, рамка 1px --border
--shadow-overlay	—	0 8px 24px rgb(16 22 20 / 0.10) — только для модалок, дропдаунов, тостов

Правила

• Радиус 2px — у кнопок, полей, карточек, бейджей, таблиц, модалок, тостов, пагинации.
• Заливные круги (rounded-full) запрещены, кроме аватаров пользователей. Текущие 40 вхождений на главной сводятся к нулю.
• Тень разрешена только у всплывающих слоёв поверх затемнения. У карточек, кнопок, шапки, выпадающего меню тени нет — только рамка.
• Границы: 1px, цвет --border. Толстые и цветные рамки не вводятся, кроме левой полосы 2px --primary у активного пункта сайдбара.
• Обводка фокуса: outline: 2px solid var(--ring); outline-offset: 2px. Свечения и box-shadow-кольца не используются.
• Градиентные заливки и стеклянные подложки (backdrop-blur) убираются.

5. Компоненты

Для каждого компонента меняются только радиус, цвет, рамка, тень, обводка и шрифт. Высота, паддинги, ширина и позиция сохраняются.

Компонент	Было	Стало
Кнопка основная	#2B9F4A, радиус 14px или круг, градиент	--primary, радиус 2px, без градиента
Кнопка второстепенная	заливка --secondary	белая, рамка 1px --input, текст --foreground
Кнопка-ссылка	цвет --primary	без изменений, подчёркивание при наведении
Поле ввода	рамка #ECEFED, радиус 14px	рамка 1px --input, фокус 2px --primary, радиус 2px
Поле с ошибкой	—	рамка --destructive, текст ошибки 13px --destructive под полем
Чекбокс / радио	скругление	чекбокс — 2px, радио — круг (не меняется), галочка --primary
Карточка	rounded-2xl, shadow-sm	радиус 2px, рамка 1px --border, тени нет
Наведение карточки	тень усиливается	тень не появляется, меняется цвет рамки на --primary 40%
Бейдж, чип, статус	rounded-full, яркая заливка	радиус 2px, *-soft фон, затемнённый текст
Счётчик непрочитанных	круг	радиус 2px, фон --warning, белый текст
Заголовок таблицы	--foreground	12px, 500, --muted-foreground, нижняя рамка
Строка таблицы	разделители	1px --border, без зебры, наведение --secondary 60%
Шапка сайта	тень или блюр	белый фон, нижняя рамка 1px --border
Активный пункт меню	заливка-«таблетка»	--primary-soft, текст --primary, радиус 2px
Сайдбар кабинета	—	белый фон, рамка справа 1px, активный пункт + левая полоса 2px --primary
Модалка, дровер	rounded-2xl	радиус 2px, рамка 1px, тень --shadow-overlay
Тост	скруглённый	радиус 2px, левая полоса 3px по типу
Аккордеон (FAQ)	скруглённые блоки	разделители 1px --border, радиус 0, иконка плюс/минус
Пагинация	круглые кнопки	радиус 2px
Хлебные крошки	—	13px, --muted-foreground, разделитель «/»
Скелетон	—	фон --muted, радиус 2px, анимация pulse, отключается при prefers-reduced-motion
Cookie-баннер	плавающий скруглённый	нижняя полоса во всю ширину, рамка сверху
Загрузка файла	скруглённая зона	пунктирная рамка 1px, радиус 2px
Графики админки	палитра Recharts по умолчанию	--primary, --muted-foreground, --info, --warning, --destructive, без градиентов
Иконки (Lucide)	—	цвет наследуется через currentColor, толщина штриха единая 1.75
Аватар	круг	остаётся круглым, рамка 1px --border

Состояния, обязательные для каждого интерактивного элемента

Состояние	Оформление
Наведение	смена фона на --primary-hover или рамки, 150 мс
Нажатие	--primary-active
Фокус с клавиатуры	outline: 2px solid var(--ring); outline-offset: 2px — видим всегда
Отключено	opacity: .45, cursor: not-allowed
Загрузка	спиннер на месте подписи, ширина кнопки не меняется
Ошибка	рамка --destructive + текст ошибки
Пусто	текст --muted-foreground, без иллюстраций

6. Шаблоны

Все 15 шаблонов. Меняются только шрифт, цвет и форма входящих компонентов — состав, порядок и расположение блоков сохраняются.

№	Шаблон	Маршруты	Что меняется
T1	Главная	/	H1 с 78px на 56px, кнопки первого экрана, карточки витрины и новостей, аккордеон FAQ, форма партнёра
T2	Витрина	секция на /, /gotovye-firmy	Карточки компаний: рамка вместо тени, фильтры и сортировка, пагинация
T3	Гео-лендинг	/kupit-biznes/$city (11), /prodat-ooo/$city (8), /prodazha/$industry (9)	H1, сетка городов и отраслей, хлебные крошки, форма заявки
T4	Услуга	/prodat-ooo, /prodat-kompaniyu, /kupit-ooo, /kupit-ooo-s-nds, /prodat-ooo-s-* (8)	H1, блоки преимуществ, таблицы условий, форма расчёта
T5	Статьи	/articles, /articles/$slug (11)	Антиква для заголовков и текста, оглавление, блок перелинковки
T6	Новости	/news, /news/$slug (23)	Антиква, карточки в списке, дата, пагинация
T7	Заявки покупателей	/kuplyu-firmu, /kuplyu-firmu/$number (40)	Карточки заявок, бейджи региона и режима, карточка заявки
T8	Юридические	/privacy, /consent, /cookies, /terms	Антиква 15/1.7, нумерованные разделы, якоря
T9	О компании, филиалы	/about, /filialy	Реквизиты моноширинным, сетка филиалов, кнопки регионов
T10	Заявка принята	/spasibo	Иконка, кнопки возврата
T11	Вход	/auth, /auth?mode=signup, ?region=	Форма, поля, чекбокс согласия, переключатель вход/регистрация
T12	Реферальная	/p/$code	Карточка партнёра, кнопка
T13	Ошибки	404, «Объявление не найдено», «Партнёр не найден»	Антиква в заголовке, кнопка возврата
T14	Кабинет партнёра	/partner + 7 разделов	Сайдбар без антиквы, метрики, таблицы, бейджи статусов, графики
T15	Админка	/admin + 12 разделов	То же плюс счётчик алертов, плотные таблицы, модалки, панель уведомлений

6.1. Пояснения по группам

T1–T4, T9, T12 — убеждающие поверхности. Заголовки антиквой, фон страницы --background, секции белыми карточками с рамкой. Главное действие экрана — единственная заливная кнопка --primary; вторичные действия — контурные.

T5, T6, T8 — читальные поверхности. Максимальная длина строки 72 знака, антиква 15/1.7 для юридических текстов и 16/1.6 для статей, ссылки в тексте --primary с подчёркиванием. Цитаты и врезки — левая полоса 2px --border, без заливки.

T7 — смешанная поверхность. Список заявок и карточка заявки оформляются как деловые бланки: моноширинные номера, табличные цифры, бейджи регионов и налоговых режимов в soft-цветах.

T11 — единственная форма с антиквой в заголовке. Поля ввода по правилам раздела 5, чекбокс согласия 2px, ссылки на /privacy и /consent подчёркнуты.

T14, T15 — рабочие поверхности. Антиква не используется. Таблицы — разделители вместо зебры, заголовки столбцов 12px --muted-foreground. Метрики дашборда — табличные цифры. Статусы: успех, предупреждение, ошибка, инфо — только в бейджах.

T13 — страницы ошибок. Заголовок антиквой, пояснение обычным текстом, одна контурная кнопка возврата.

7. Доступность

Требование	Значение
Контраст текста	≥ 4,5:1, для крупного ≥ 3:1
Контраст границ элементов управления	≥ 3:1
Обводка фокуса	видима на всех интерактивных элементах, не удаляется через outline: none
Размер цели нажатия	≥ 44×44 px (существующие размеры сохраняются)
prefers-reduced-motion	отключает pulse скелетонов, вращение спиннеров и переходы
Информация цветом	дублируется текстом или иконкой
Тёмная тема	не вводится: сейчас её нет, в объём работ не входит

8. Что запрещено

Нарушением ТЗ считается любое из перечисленного:

1. Изменение порядка, вложенности, состава и расположения блоков и секций.
2. Изменение сетки, брейкпоинтов и количества колонок.
3. Изменение текстов, названий пунктов меню, подписей кнопок, состава полей формы.
4. Изменение маршрутов, редиректов, правил доступа и ролей.
5. Изменение серверной логики, валидации, запросов и серверных функций.
6. Добавление, удаление или замена блоков и страниц.
7. Изменение высоты, паддингов и ширины компонентов. Допустимое отклонение — не более 2 px, если иначе не встаёт новая гарнитура.
8. Изменение отступов между секциями и внутреннего вертикального ритма страницы.
9. Замена фотографий и иллюстраций. Перекраска SVG-иконок через currentColor разрешена.
10. Введение градиентов, теней у плоских элементов, стеклянных подложек и декоративных цветов.

9. Приёмка

Работа принимается, если выполнено всё перечисленное.

• Токены из разделов 4.1–4.3 применены на всех 15 шаблонах.
• Загружается не более двух веб-семейств и шести начертаний.
• На сайте не осталось rounded-full вне аватаров и rounded-2xl.
• Плоские элементы без теней; linear-gradient отсутствует в оформлении.
• Все числа выводятся табличными цифрами.
• Контрасты из таблицы раздела 4.1 подтверждены замером на собранной странице.
• Фокус с клавиатуры виден на каждом интерактивном элементе.
• Сверка до/после на 375, 768, 1024 и 1440 px: различия только в шрифте, цвете и форме; геометрия блоков совпадает.
• Сценарии пройдены без изменений: отправка формы заявки, регистрация и вход партнёра, создание лида, заявка на выплату, фильтры витрины.
• Скриншоты всех 15 шаблонов в четырёх разрешениях приложены к сдаче.

10. Порядок внедрения

1. Токены. Заменить переменные в :root и подключение Google Fonts. Проверить, что ни одна страница не разъехалась.
2. Примитивы. Кнопки, поля, чекбоксы, бейджи, карточки, таблицы, модалки, тосты.
3. Навигация. Шапка, мобильное меню, подвал, сайдбары кабинета и админки.
4. Публичные шаблоны. T1–T13.
5. Рабочие шаблоны. T14, T15.
6. Сверка и приёмка. По чек-листу раздела 9.

Шаги 2–5 выполняются на уже применяемых токенах: если на этапе 1 палитра и шрифт зафиксированы, дальше меняются только формы компонентов.