СТАНДАРТ ТЕЗИСЫ для дизайна в html коде

Главная / Статьи / СТАНДАРТ ТЕЗИСЫ для дизайна в html коде

0

18 Apr 2026

???? MOTIVERIKON · РЕЗУЛЬТИРУЮЩИЙ СТАНДАРТ «ТЕЗИСЫ»

версия стандарта: 2.0 · объединяет minimum + extended + практику mv-th25

1. ПРЕФИКС И ИЗОЛЯЦИЯ

Каждый блок = уникальный префикс mv-th[NN] (mv-th00 … mv-th30).
Все классы внутри <style> начинаются с этого префикса.
Никаких глобальных селекторов (body, *, a — только внутри Блока 0).
Блок полностью самодостаточен: работает, даже если вставить в пустую страницу.

2. ТЕХНИЧЕСКИЕ ПРАВИЛА

HTML + CSS, без JS, без внешних картинок, без SVG-файлов.
Все CSS-свойства с !important (Tobiz перебивает).
Один блок = одно сообщение.
Шрифт Inter подключён в Блоке 0 один раз — не дублировать.
Между блоками mv-thd (разделитель) — вставляется вручную автором, не включаем в тело блока.

3. ГЕОМЕТРИЯ

Параметр	Desktop	Mobile (≤700px)
Внешний контейнер	`max-width: 1170px`	—
Горизонтальные padding	`40px`	`16px`
Вертикальные padding	`48px 40px 56px`	`32px 16px 36px`
Контентный колодец	`max-width: 800px`, `margin: 0 auto`	—
Скругления главных карточек	`18px`	`14px`
Скругления внутренних элементов	`12–14px`	`10–11px`

4. ЕДИНАЯ ПАЛИТРА (фиксированная, не меняется от блока к блоку)

Фон блока         #0f0f1a    (единый, без чередований)
Заголовки         #e2e0ff
Основной текст    #c0bfd6    (или #e2e0ff для акцентных абзацев)
Приглушённый      #a0a0b6
Тихий/техн.       #706f80

Фиолет            #a78bfa    (ключевой акцент)
Золото            #d4af37    (второй акцент, следствия)

Градиент-акцент   linear-gradient(135deg, #a78bfa, #d4af37)

Применение:

Градиент — для мелких элементов: номеров тезисов, точек, иконок, пилл-бейджей.
Фиолет #a78bfa — эпиграфы, ключевые слова в тексте, первый полюс в диптихах.
Золото #d4af37 — стрелка →, следствия, второй полюс в диптихах, разделители (rgba(212,175,55,.06)).
Для ошибок/минусов — rgba(212,100,100,.x) (приглушённый красный).
Для позитива/плюсов — rgba(150,190,140,.x) (приглушённый зелёный).

Запрещено в блоках тезисов: тёплая охра #d4955c, синий #7eaad4 (это были ошибочные отклонения). Только фиолет + золото.

5. ТИПОГРАФИКА

Шрифт: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif.
Для заголовков тезисов допускается Georgia, serif как второй шрифт (опционально, для смыслового акцента).
line-height:
- 1.15 — крупные заголовки (название блока, название тезиса)
- 1.3–1.4 — метки, тэги
- 1.5–1.65 — основной текст
letter-spacing:
- .22–.28em — UPPERCASE-метки
- .02–.04em — заголовки (лёгкое расширение)
- 0 — основной текст
Размеры — в em. Адаптив — через clamp().

6. АДАПТИВ

Один брейкпоинт: @media (max-width: 700px). Уменьшаем padding, размеры заголовков, letter-spacing. Многоколоночные сетки → одна колонка.

7. СТРУКТУРА БЛОКА ТЕЗИСОВ (обязательная схема)

7.1. Обёртка

html

<div class="mv-thNN">
  <div class="mv-thNN-inner">
    ... содержимое блока ...
  </div>
</div>

7.2. Тэг-строка (верх блока)

Точка-градиент + UPPERCASE-метка с градиентным текстом:

• КОРПУС ТЕЗИСОВ · БЛОК XIX

7.3. Шапка блока — фиксированный шаблон ⚠️

┌─────┐
│ XIX │  БЛОК XIX                ← служебная надпись UPPERCASE, #a0a0b6
└─────┘  Природа усилия           ← название блока СТРОЧНЫМИ, weight 800

Правила заголовка блока:

Римская цифра в карточке-бейдже (фиолетово-золотой оттенок, Georgia).
Служебная надпись «БЛОК XIX» — UPPERCASE, letter-spacing .24em, цвет #a0a0b6.
Название блока — строчными буквами, как в исходнике v6.4: «Природа усилия», «Динамика тени», «Природа роста и конец пути».
Допускаются имена собственные в обычном регистре: MOTIVERIKON, Шут, Мистик, Кон.
Нельзя подставлять вместо названия блока название первого тезиса.

7.4. Intro-абзац

Под заголовком — цитатная плашка с описанием из исходника («Тезисы 75–78. Формула трансформации, эволюция усилия…»). Можно художественно перефразировать, сохраняя смысл. Стиль: курсив, #a0a0b6, левый бордер rgba(167,139,250,.4).

7.5. Запись одного тезиса — фиксированная структура

Каждый тезис — карточка (border-radius: 18px, background: rgba(167,139,250,.04), border: 1px solid rgba(167,139,250,.12)), внутри:

Шапка тезиса (head) с разделительной линией снизу:

Пилл-бейдж «Тезис 75» — мелкий, с градиентом a78bfa → d4af37, weight 800, letter-spacing .05em.
Секция «XIX. Природа усилия» — курсив, UPPERCASE, letter-spacing .18em, цвет #a0a0b6.
Название тезиса — крупно, #e2e0ff, weight 700–800, font-size ~1.1–1.3em, line-height 1.35.

Тело тезиса (body):

Основной текст: #e2e0ff (или #c0bfd6 для менее акцентных), line-height 1.65, font-size 1em.
<b> — чистый #fff или #e2e0ff, weight 600.
<em> — #a78bfa (фиолет, не курсив — выделение цветом), weight 500.

Визуальные блоки внутри тезиса (см. §8 — библиотека паттернов).

Следствие (arrow-block):

Отделяется сверху тонкой линией border-top: 1px solid rgba(212,175,55,.14).
Стрелка → — золотом #d4af37.
Текст следствия — #a0a0b6, font-size .95em, line-height 1.55.
<b> в следствии — #e2e0ff.
<em> в следствии — #d4af37.

7.6. Разделение тезисов внутри блока

Карточки тезисов в flex-direction: column, gap 18px. Без горизонтальных линий между ними — разделение создаётся самими карточками.

7.7. Навигационный футер

Три зоны:

Слева: ← Блок XVIII · Природа проявленности
Центр: Тезисы 75–78 из 89
Справа: Блок XX · Природа движения →

Сверху — тонкая линия rgba(212,175,55,.14). Стиль — мелкий UPPERCASE, #706f80, акценты #d4af37.

8. БИБЛИОТЕКА ВИЗУАЛЬНЫХ ПАТТЕРНОВ

Используем эти заготовки там, где уместно. Не дублируем на каждом тезисе — один-два паттерна на тезис, остальное — чистый текст.

Формула (для тезисов с математической/логической формулой)

Центрированная рамка с градиентным фоном, слагаемые/множители в пилл-бейджах, разделители = / × крупно и золотом.

Прогрессия по ступеням

4 строки с диапазонами 1–3 / 4–6 / 7–9 / 10–12. Цветовая прогрессия: фиолет → фиолет+золото → золото → золото+светлый. Каждая строка: пилл-бейдж диапазона + название фазы + описание.

Тест-диптих `+ / −`

Центральный вопрос курсивом, ниже две карточки: + (зелёный приглушённый) и − (красный приглушённый). Знак в квадратике слева.

Диптих «было / стало» или «А / Б»

Две карточки в сетке 1fr auto 1fr с вертикальной линией-разделителем посередине. Левая — фиолетовый оттенок, правая — золотой оттенок.

Триада / сетка карточек

2–4 карточки в ряд. Номер 01/02/03 в квадратике-бейдже сверху, название через тонкую линию, описание.

Цитата / пример

Левый бордер золотом, плашка, курсив. Для примеров — подпись-метка «ПРИМЕР» UPPERCASE.

Список «симптомов/ошибок»

Строки с UPPERCASE-тэгом слева (в красной плашке) и текстом справа, левый бордер красным приглушённым.

Центральная иерархия

Главный элемент в золотой рамке по центру, вокруг — 4 второстепенных карточки.

Финальный блок-якорь

Большая центрированная плашка с радиальным градиентом и 2–3 строками возрастающего размера.

9. КОНТЕНТ

Текст тезиса (body + →-следствие) — строго из v6.4, слово в слово. Никакого перефраза, даже «улучшения».
Допускается художественное переформулирование только в intro-плашке блока (§7.4) и в подписях к визуальным паттернам.
Названия блоков — строго как в исходнике (см. §7.3).
Эпиграфы блоков (если есть в исходнике, в «ёлочках») — курсивом, цвет #a78bfa.
Стрелка → перед следствием — как в исходнике.

10. ПОРЯДОК ОТВЕТА НА ЗАДАНИЕ

Заголовок-шапка:

Блок mv-thNN · Раздел N · Тезисы X–Y · Название

Один код-блок с готовой вёрсткой (CSS + HTML слитно).
В конце — краткое «что сделано» (1–3 строки) + визуальная схема ключевых паттернов (опционально) + вопрос: «делаем следующий?».

11. ЧЕК-ЛИСТ ПЕРЕД ОТПРАВКОЙ

Префикс mv-thNN во всех классах.
Фон #0f0f1a, палитра фиолет+золото (не охра, не синий).
Название блока — строчными, как в v6.4.
Шапка тезиса: пилл-бейдж «Тезис NN» → секция «N. Название блока» → название тезиса.
Тексты тезисов и следствий — дословно из v6.4.
Стрелка → перед следствием, золото.
Все свойства с !important.
@media (max-width: 700px) присутствует, сетки схлопываются в одну колонку.
Навигационный футер с номерами блоков/тезисов.
Разделитель mv-thd не добавлен.

Отзывы

Нет комментариев