Терминология

Как пользоваться словарём

Термин. Короткое имя. Дальше — человеческое объяснение и зачем оно новичку.

Класс. То, что пишут в HTML: rounded, br4, col-md-8. Класс — это слово языка. Его не выдумывают.

Токен. Имя переменной вроде --1s или --c4. В разметке контента токен почти не пишут руками: за него говорит класс.

Не путать. Рядом часто стоит похожее слово из веба или из нейросети. Если перепутать — получится второй слой стилей, и тема ЮАИ перестанет управлять блоком.

Большая картина

Система дизайна ЮАИ. Общий договор: из каких атомов всё собрано и как эти атомы складываются от кнопки до биосферы. Это не галерея красивых скриншотов. Это правила плюс библиотека повторяемых частей плюс характер продукта.

Язык дизайна. Грамматика узнаваемости. Какие цвета о чём говорят, какой ритм паузы, какой голос у текста, как ведёт себя знак. На этом языке можно сказать и «листовка», и «сторис», и «сцена линейки».

Айдентика. Лицо ЮАИ: знак, характер, образцы на бумаге и на сцене. Айдентика отвечает: «это мы?». Система отвечает: «как это правильно собрать на любом носителе?». Не путать: логотип — часть айдентики, не вся система.

Брендбук ЮАИ. Все главы системы, прочитанные подряд. Онлайн — хаб документации. На принтере — те же секции без кнопок и полей. Если главу нельзя вложить в том, это ещё не глава системы.

Трансмедиа. Одна история и один характер живут в нескольких средах и не копируются слепо. Сайт, «ЮАИ Волна», ВКонтакте, Matrix, бот, сертификат, баннер 700×1800, сцена линейки — органы одной системы, не дубликаты главной страницы.

Носитель. Среда встречи с человеком: телефон, монитор, бумага А4, полотно у корпуса, сообщение в мессенджере, бейдж, слайд, площадка лагеря.

Канал. Конкретный путь до человека внутри носителя: пост в «ЮАИ Волна», карточка смены на сайте, рассылка. Не путать с носителем: бумага — носитель, листовка в руки родителю — канал.

Биологическая лестница

ЮАИ описывает сборку живой метафорой. Полный текст — в «Понимании основ». Здесь — карманная версия, чтобы не потеряться.

Атом. Самый низ: код, краска, рез плоттера. Менять атомы — работа программиста или производства.

Молекула. Точка морфинга, цвет, размер, отступ, символ. То, что собрали в визуальном редакторе и обязаны разобрать в атомы по правилам экспорта.

Макромолекула. Набор параметров связи: шрифт, геометрический характер, стиль. Как молекулы договариваются выглядеть вместе.

Органелла. Знак, иконка, кнопка, поле, бейдж. Есть ритуал использования, не только картинка.

Клетка. Блок, ячейка, строка.

Ткань. Сетка, список, контейнер, секция.

Орган. Форма, макет, меню, слайдер, разворот листовки, план сцены.

Система органов. Шаблоны для типов: смена, новость, локация, операция.

Организм. Целый клиент: сайт, бот, приложение, оформление смены.

Популяция, сообщество, экосистема. Распределённый сервис, пользовательский опыт, культура обмена данными.

Биом. Стык с чужими сервисами через API: соцсети, новости, реклама.

Биосфера. Среда целиком: интернет, полиграфия, архитектура, индустриальный дизайн.

Мутация, морфинг, токены

Это сердце ЮАИ. Если понять три слова ниже, станет ясно, почему нейросети запрещают свой CSS.

Токен. Именованная величина: «один шаг», «цвет действия», «скругление карточки». На экране токен звучит как CSS-переменная. На бумаге — как та же роль в миллиметрах. Имя одно, единица может быть разной.

Точка морфинга --1s. База шкалы. Обычно около 16px, на узком экране считается от ширины, в печати задаётся отдельно. Все отступы и многие радиусы кратны ей: --05s это полшага, --2s два шага.

Шкала --*s. Лестница шагов: --01s, --025s, --05s, --075s, --1s, --1_25s, --1_5s, --2s, --2_5s, --3s … --20s. В контенте её почти не пишут цифрами — пишут классы pad, margin, width--5s.

Мутация. Величина живёт в переменной и меняется под экран, тему и носитель. Класс держит роль, токен считает число. Свой 13px и цвет #4F46E5 мутировать не умеют: тема их не знает.

Морфинг. Допустимое изменение под носитель. Телеграм-пост не обязан повторять двенадцать колонок сайта. Он обязан сохранить роль акцента, ритм и голос.

Инвариант. То, что нельзя потерять при морфинге: знак, роль акцента, иерархия, тон. Если инвариант сломан — это уже другой бренд.

Роль. Зачем нужен цвет или край, а не «какой hex». Роль «поверхность страницы», роль «действие», роль «рамка акцента». Классы .bg0, .c4, .br5 называют роли.

Цвет

--c0 … --c11. Шкала цвета. В светлой теме --c0 почти чёрный текст, --c10 фон страницы, --c11 прозрачность. --c4 голубой действия, --c5 салатовый отклик. В тёмной теме шкала зеркалится сама, имена ролей не меняют.

.c0 … .c10. Цвет текста по роли.

.bg0 … .bg11. Цвет фона. Важно для новичка: .bg0 это поверхность страницы и берёт --c10. Нумерация фона зеркальная. Кто думает «bg0 значит тёмный» — путает имя класса и номер токена.

.br и .br0–.br10. .br включает рамку. .br0–.br10 красят край в --c0–--c10. Пишут вместе: br br4. Один .br4 без .br цвет не проявит как задумано.

.ui_fil0 … .ui_fil11. Заливка SVG по той же шкале.

Hex / rgb. Сырой код цвета вроде #0AA2CB. В контенте ЮАИ его не пишут: он не слушается темы.

Тема. Светлая, тёмная или кастомная окраска тех же токенов. Тема меняет среду, не конструкцию. Блок на классах ЮАИ перекрашивается сам. Блок со своими hex — наклейка.

Форма, сетка, ритм

.rounded. Скругление через var(--1_5s). Острота углов подстраивается под тему и под --1s. Не заменять на border-radius: 16px.

.rounded-top. Скруглены только верхние углы.

.circle. Круг. Для аватара и метки, не для текстовой карточки.

.boxshadow. Системная тень. Свою тень в стилях не рисуют.

.pad, .pad2, .pad--05s. Внутренний отступ кратный шкале. .pad — один шаг, .pad2 — два, .pad--05s — половина.

.margin, .margintop, .nomargin. Внешний отступ той же шкалы.

.container. Ограничитель ширины. На большом экране блок не растягивается на всю стену. Сетку .row кладут внутрь container.

.row. Ткань из двенадцати колонок, зазор --1s.

.col-sm-* и .col-md-*. Доля ряда. sm — узкий экран, md — широкий и ландшафт. На мобильном колонка по умолчанию на всю ширину.

.fullwidth, .fullheight. На всю доступную ширину или высоту экрана. Не путать с container: fullwidth отменяет ограничение, container его ставит.

Редактор и контент

Редактор контента. Место, куда вставляют HTML страницы. Он умеет кастомный CSS и JS — и именно поэтому опасен. Чужой стиль внутри контента тема уже не вылечит.

Контентный слой. То, что лежит внутри страницы сверх оболочки ЮАИ. Законный слой говорит классами системы. Незаконный приносит <style> и style="".

Метаданные. Название, описание, обложка страницы. В обычном режиме заголовок h1 берётся отсюда. Второй h1 в контенте ломает SEO.

Обычный режим. Статья, новость, гайд. В тексте начинают с h2. Нет полного HTML, нет тега article, нет h1.

Режим лендинга. Целевая страница и презентация. Здесь можно h1 и .title-1, секции с .scrollsnap, атрибуты data-e. Эталон органов: шаблоны лендингов.

Секция <section>. Единица контента. Редактор сортирует, дублирует и удаляет блоки по секциям. Страница без section — сплошное полотно, его нельзя собрать как книгу.

Фрагмент. То, что нейросеть должна вернуть: внутренность контента, не сайт целиком.

data-e. Пометка в лендинге, что элемент можно править: text, image, video, svg, audio, form, code. У сетки-родителя часто data-e="false", у колонок data-e="true".

hljs. Подсветка кода в контенте. Пишут так:

<pre class="pad bg2 c1 rounded"><code class="hljs language-html">...</code></pre>

Формы, слайдер, скрипты

Редактор форм. Отдельный конструктор ЮАИ. Собирает живую форму и привязывает отправку. Пример: «Форма воды».

xform. Готовая форма системы: <form class="xform">, поля внутри .xform-fields.

.xform-field. Одно поле. Обычно классы pad bg1 rounded blog marginbottom, подпись — label.block.marginbottom.

data-xform-id. Служебный номер формы. Его выдаёт редактор. Нейросеть его не выдумывает.

Слайдер. Орган .slider → .slides → .slide, кнопки .moveleft и .moveright. Свой Swiper не подключают. Без JS слайды видны и листаются прокруткой.

Тогглер. Пара input.toggleinput и сосед .toggled. Открывает блок без скрипта, как checkbox.

Прогрессивное улучшение. База работает без JavaScript: текст виден поисковику и человеку, ссылки открываются, форма уходит method="post". JS добавляет кнопки слайдера, жесты, анимацию. Не прячет единственную копию смысла.

Генератор на фронте. Скрипт, который рисует эффект или превью и не несёт текст для SEO. Допустим, если без него основной контент и форма всё равно живы.

Люди и процесс

Вайбкодинг контента. Сборка HTML нейросетью. В ЮАИ это разрешено только с системным промптом: модель пишет фрагмент на классах системы, не inventирует кожу.

Промпт ЮАИ. Инструкция для любой нейросети. Без него модель принесёт Tailwind, второй h1 и style="".

Хранитель атомов. Меняет токены, темы, код системы.

Сборщик органов. Собирает шаблоны и макеты носителей.

Редактор. Наполняет органы текстом и медиа, не перекрашивает их.

Вайбкодер. Просит модель собрать блок. Не автор новой палитры.

Брак генерации. Ответ с <style>, style="", чужим фреймворком, лишним h1, формой без post, контентом, который исчезает без JS. Такое не «чуть правят» — перегенерируют.

Частые путаницы

Мини-шпаргалка классов

Этого хватает, чтобы собрать первый блок и не сломать тему.

Карточка. bg1 rounded pad boxshadow

Рамка. br br4

Текст. c1, заголовок блока — h2

Кнопка. <button> или class="button", крупнее — midbutton, bigbutton

Ряд. container → row → col-md-8 и col-md-4

Скрыть на печати. noprint

Класса нет в этом списке и нет в yuaidesignsystem.css — его нельзя выдумать. Собери из того, что есть, или упрости блок.