Основные компоненты

Как читать орган

У живого органа есть назначение, эталон сборки, состояния и форма на другом носителе. Нет своей палитры и нет второго слоя стилей: он берёт семантические классы из токенов. Нет класса в словаре — сборку упрощают. Новый атом заводят только когда роль повторилась на двух носителях.

Эталоны экрана лежат в шаблонах целевых страниц и в редакторе форм. Эталоны лица — в айдентике: сертификат, баннер, визитка.

Знак

Не украшение шапки. Точка сборки всех носителей. Правила живой зоны, минимального размера и запрета искажения — в айдентике.

В интерфейсе знак не конкурирует с кнопкой действия. Знак говорит «это ЮАИ». Кнопка говорит «сделай шаг». На баннере, на сертификате и в шапке клиента роли не меняются местами.

Кнопка — главное действие

На экране — нативный <button> или класс .button. Крупнее: .midbutton и .bigbutton. Подпись — глагол: «Забронировать смену», не регламент и не код.

На листовке та же роль становится плашкой. В боте — одной главной командой, не пятью разноцветными. Компонент один. Форм‑факторов несколько. Второй акцент рядом с главным действием орган не терпит: синтаксис ломается, человек не знает, куда нажать.

Поле — место для данных

На экране стили уже сидят на input, select, textarea. Свою оболочку form-control не изобретают. Подпись живая: человек и скринридер должны услышать одно и то же.

На бумаге поле становится линейкой «заполни». Роль та же: сюда кладут данные. Картинка вместо подписи — уже не поле, а декорация. Сбор ответов в ЮАИ делает не красивый input, а форма из редактора форм.

Пиктограмма

Собирается из молекул формы и роли цвета. На табличке территории — та же семья знаков. Иначе навигация по лагерю и навигация по сайту читаются как два учреждения.

Секция — клетка контента

Каждый смысловой блок страницы живёт в <section>. Редактор ЮАИ поднимает, опускает, копирует и удаляет именно секции. Страница без section — сплошное полотно. Его нельзя собрать как том брендбука и как посадочную.

Обычный режим: <section>. Лендинг и презентация: <section class="relative"> или <section class="scrollsnap relative"> — вертикальная зацепка между блоками. Внутри секции ширина через .container. Тег article уже есть у страницы. В контент его не кладут.

<section> <div class="container"> <h2>Заголовок блока</h2> <p>Текст блока.</p> </div> </section>

Сетка и карточка

.row — ткань из двенадцати колонок, зазор --1s. Доли: .col-sm-* на узком, .col-md-* на широком и в ландшафте. Мобильный стек — морфинг ткани, не ошибка. Сетку кладут внутрь .container. На бумаге колонок может быть шесть или восемь: имя экранных колонок туда не тащат, тащат принцип «ряд, доля ряда, зазор шкалы».

Карточка — орган «объект внимания». Экранная сборка: bg1 rounded pad boxshadow. Рамку, если нужна, включают br br4. В ленте та же роль: обложка, заголовок, одно действие. На стенде: фото, имя смены, QR. Три тела, один орган. Не три изобретения.

Слайдер — один фокус

Родственник сцены линейки и режима презентации. Горизонталь — свайп и стрелки. Вертикаль — секции. Эталон — шаблоны лендингов.

<section> <div class="container"> <div class="slider"> <div class="slides"> <div class="slide relative"></div> <div class="slide relative"></div> </div> <div class="moveleft"></div> <div class="moveright"></div> </div> </div> </section>

Свой скрипт карусели не подключают. Платформа уже вешает управление на .slider. Без JS слайды видны и листаются прокруткой — это база органа. Кнопки и перетаскивание — улучшение. Кнопки без скрипта молчат: это ожидаемо. Не повод тащить чужую карусель и не повод прятать слайды в пустой контейнер «пока не загрузится JS».

Форма из редактора форм

Сбор заявок собирают в редакторе форм ЮАИ, не из чата. Живой образец — Форма воды. Нейросеть не выдумывает служебный номер формы. В лендинге место помечают data-e="form" или вставляют готовую оболочку.

<form class="xform" method="post" action="/xforms" enctype="multipart/form-data"> <div class="xform-fields"> <div class="xform-field pad bg1 rounded blog marginbottom"> <label class="block marginbottom">Подпись</label> <input type="text" name="pole" placeholder="Введите текст…"> </div> </div> <button type="submit">Отправить</button> </form>

Поля: текст, textarea.rounded, select.rounded, radio. Подпись всегда label.block.marginbottom. Форма уходит без скрипта: method="post" и action. Скрипт может подсказать ошибку до отправки. Он не может быть единственным способом отправить ответы.

Тогглер и раскрытие

Пара .toggleinput и сосед .toggled открывает блок без скрипта, как переключатель. Раскрытие канона HTML — details и summary. Эталон вкладок лендинга — на той же странице шаблонов.

Это органы «показать / спрятать». Они не прячут единственную копию смысла, который должен индексироваться. Скрывают уточнение, не саму мысль.

Органы вне экрана

• Карточка объекта — смена, событие, новость. На сайте карточка, в ленте обложка, на стенде щит.
• Сертификат и листовка — печатные органы брендбука. Знак, поля, один акцент, модуль шага.
• Шапка клиента, сообщества, письма — ритуал «ты в ЮАИ».
• Сцена и навигация территории — те же роли знака, действия и паузы на дистанции шага.

Новый носитель начинают с вопроса «какой это орган», не с чистого листа. Если органа нет, сначала ищут ближайшего родственника в словаре.

Сначала база, потом скрипт

Орган собирают на HTML и классах системы. Тогглер работает как переключатель. Слайдер читается лентой. Форма уходит post‑запросом. Текст виден без оживления страницы.

Скрипт добавляет свайп, пульт, живую проверку поля. Если без него пропадает смысл или заявка не уходит — это не компонент, а генератор. Генератор допустим только там, где он не прячет текст от поиска и не запирает действие.

Чего орган не делает

• Не приносит свою палитру и свой радиус.
• Не подменяет эталон чужой каруселью или чужой формой.
• Не прячет единственную копию текста.
• Не заводит новый атом «под этот макет», пока роль не повторилась на двух носителях.

Креатив — в содержании органа и в сценарии встречи. Устройство уже есть. Его мутируют по осям носителя. Его не рисуют заново каждый раз, когда появилась новая смена.