akyldash/DESIGN.md

name, description, colors, typography, rounded, spacing

name	description	colors	typography	rounded	spacing
Акылдаш · Түндүк	Утверждённая дизайн-система правового портала Кыргызской Республики	bg surface surface-muted text text-secondary border primary primary-hover primary-active on-primary primary-subtle accent highlight focus success success-bg warning warning-bg error error-bg info info-bg #F7F2E8 #FFFFFF #FBF8F4 #38262A #786469 #DED3CE #9D2633 #84202B #701B24 #FFFFFF #F8EBED #A37B32 #FFF0C7 #245C78 #246843 #EAF4EC #82520D #FFF3DA #9D2633 #FBEDEF #245C78 #EAF2F6	document-title section-title document-body control metadata fontFamily fontSize fontWeight lineHeight Noto Serif, serif 32px 700 1.2 fontFamily fontSize fontWeight lineHeight Noto Serif, serif 24px 600 1.3 fontFamily fontSize fontWeight lineHeight Noto Sans, sans-serif 18px 400 1.65 fontFamily fontSize fontWeight lineHeight Noto Sans, sans-serif 16px 500 1.5 fontFamily fontSize fontWeight lineHeight Noto Sans, sans-serif 14px 400 1.5	default 6px	xs sm compact md lg xl section 4px 8px 12px 16px 24px 32px 48px

Design System: Акылдаш · Түндүк

Overview

Статус: утверждено пользователем 10 октября 2026 года. Это нормативная дизайн-система портала и внутренней лаборатории проверки поисковой выдачи. Часть ресурсов и правил уже присутствует в исходном коде, но полное визуальное соответствие и доступность не подтверждаются одним наличием кода. Утверждение дизайна не означает готовность публичного сервиса или разрешение на deployment.

Creative North Star: "Түндүк — спокойное пространство для работы с правом".

Профессиональный правовой сервис с кыргызской идентичностью: светлый фон цвета войлока, белое поле документа, глубокий красный для действий, тёмный сливовый текст и небольшие золотистые геометрические детали. Главное — читаемость длинных документов и ясная иерархия.

Это единственная нормативная спецификация дизайна проекта. Требования исходного brief перенесены сюда; отдельный brief и ранние варианты удалены. Название продукта — Акылдаш; «УКУК» из ранних концепций не используется.

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

Key Characteristics:

• Спокойное чтение и компактные, понятные элементы управления.
• Национальная идентичность через палитру, знак и несколько точных деталей.
• Поиск и документ сохраняют общий контекст на широком экране.
• Единая визуальная система публичного сервиса и внутренней лаборатории.
• Содержимое и доступные функции определяются реальными данными и API.

Colors

Нормативные значения находятся в YAML выше. При реализации ключи colors переносятся в CSS custom properties --color-<ключ> либо эквивалентные семантические токены существующей системы тем. HEX не размножаются по компонентам.

Роль	Токен	Применение
Светлый войлок	bg	Общий фон и окружение рабочей области
Белый лист	surface	Документ, поля и основные поверхности
Мягкая поверхность	surface-muted	Вторичные панели
Сливовые чернила	text	Основной текст и заголовки
Вторичный текст	text-secondary	Метаданные и пояснения
Разделители	border	Контуры и границы панелей
Глубокий красный	primary	Главное действие, ссылки и активная навигация
Состояния красного	primary-hover, primary-active	Hover и нажатие
Текст на красном	on-primary	Главная кнопка и активный пункт меню
Мягкое красное выделение	primary-subtle	Выбранный результат, вторичная навигация
Золотистая геометрия	accent	Небольшие декоративные линии
Найденный фрагмент	highlight	Подсветка совпадения с исходным тёмным текстом
Фокус	focus	Контрастная обводка клавиатурного фокуса
Успех	success, success-bg	Подтверждение действия, подтверждённый статус
Предупреждение	warning, warning-bg	Важные ограничения с текстовым объяснением
Ошибка	error, error-bg	Ошибка с доступным действием для восстановления
Информация	info, info-bg	Информационные сообщения

Статус и ошибка всегда имеют текстовую подпись: цвет не передаёт смысл самостоятельно. Не назначать юридический статус по визуальной эвристике; использовать данные backend. Золотистый не используется для мелкого текста. Контраст проверяется на фактических сочетаниях: обычный текст не менее 4.5:1, крупный текст и необходимые графические элементы не менее 3:1.

Typography

Заголовки документа и разделов: Noto Serif, веса 600 и 700. Интерфейс и основной текст: Noto Sans, веса 400, 500 и 600. Шрифты подключаются штатным способом, предпочтительно локальными WOFF2 с font-display: swap. В исходном коде на сверенном main есть локальные Noto Sans/Serif WOFF2 и OFL-лицензии в backend/search/static/fonts/; review.html объявляет font-display: swap. Это подтверждает наличие ресурсов и CSS, но не их загрузку на production и не полный визуальный аудит символов Ө ө Ү ү Ң ң. См. план реализации и приёмки.

Элемент	Размер	Межстрочный интервал
Заголовок документа / страницы документа	30–32 px; на телефоне 24–26 px	1.2
Заголовок раздела	22–24 px	1.3
Текст документа	17–18 px	1.6–1.7
Элементы управления	14–16 px	По токену control
Метаданные	13–14 px	По токену metadata

Мелкий текст не ниже 12 px. Ориентир ширины документа — 65–75 символов в строке. Длинные названия документов и кыргызские подписи переносятся, не обрезаются. Даты, суммы и числовые колонки используют tabular-nums, обычные данные не оформляются моноширинным шрифтом.

Layout

Шкала отступов определяется spacing. Шапка на desktop — ориентировочно 72–88 px. Навигация / фильтры — 220–240 px. Панель контекста, когда существуют соответствующие данные и функции, — 300–340 px. Центральная колонка занимает остаток; это адаптивные ориентиры, а не фиксированная ширина всей страницы.

Для поискового рабочего экрана: шапка с брендом, поиском и языком; фильтры слева, результаты в середине, открытый документ справа. Оглавление можно сворачивать в подписанную кнопку, чтобы не сужать область чтения. Разворачивание документа и поиск внутри него реализуются только вместе с работающим поведением, а не как декоративные кнопки.

Композиция поискового экрана

• Первая строка desktop: знак и название, разделитель и подпись продукта слева; подписанное поле поиска с очисткой и кнопкой «Найти» в центре; переключатель языка интерфейса справа. Служебные действия авторизованного пользователя не вытесняют поиск и не меняют эту иерархию.
• Вторая строка: навигация «Поиск» / «Об источниках» и удаляемые активные фильтры. Сведения о демонстрационном режиме показываются только в нём.
• Ниже расположены три смежные панели: фильтры, результаты, документ. Иерархия создаётся фонами и непрерывными тонкими разделителями, без промежутков между самостоятельными карточками панелей.
• Фильтры имеют компактные группы, текстовое действие сброса, выбор органа и пару полей даты в одной строке при достаточной ширине. Вид элемента выбора соответствует одиночному или множественному контракту API.
• Заголовок результатов и счётчик находятся слева, сортировка справа. Высота строк зависит от содержимого; едины отступы и типографика. Выбранный результат имеет мягкий красный фон, тонкую красную рамку и текстовый признак открытия.
• Панель документа начинается с контекстной навигации и разворачивания, затем идут название, компактные метаданные, действия, поиск внутри документа и единое поле чтения. Название документа имеет отдельную типографическую роль, отличную от заголовков интерфейсных панелей.
• При коротком содержимом footer расположен у нижней границы окна; длинное содержимое доступно прокруткой без перекрытия текста и управления. Бренд находится слева, фактические версии frontend и backend справа.
• Поисковая страница не показывает инструменты оценивания лаборатории. Общие стили и ресурсы не смешивают композицию этих двух сценариев.

Внутренняя лаборатория сохраняет свой двухпанельный сценарий: фактический порядок результатов и оценивание слева, текст выбранной редакции справа. Она не получает фильтры, аналитику или публичную навигацию исключительно для сходства с концепцией. Панель проверяющего и сохранения не перекрывает результаты и текст документа.

При недостатке места сначала сворачивается дополнительная панель контекста, затем навигация. На телефоне — одна колонка; связанные материалы и оглавление доступны через подписанные кнопки. В лаборатории сохраняется существующее мобильное открытие документа и возврат фокуса при закрытии. Поиск, действия и метаданные переносятся. Основной текст не требует горизонтальной прокрутки; широкие таблицы имеют отдельную обозначенную область прокрутки.

Проверочные размеры при реализации: 1280×800, 1440, 1024 и 390 px. 1280×800 — основной размер сравнения поискового экрана с референсом. Это размеры проверки, а не заранее навязанные CSS breakpoints.

Elevation & Depth

Основные поверхности плоские. Иерархия создаётся белым листом на тёплом фоне, отступами, типографикой и тонкими разделителями. Мягкая тень нужна главным образом выпадающим меню и временным панелям. Значения теней уточняются при реализации; декоративное размытие и обилие теней запрещены.

Shapes

Основное скругление — rounded.default (6 px), контуры — 1 px. Небольшие статусные метки могут быть округлее. Кнопки не превращаются в капсулы. Границы интерактивных полей обозначаются явным контуром, а не только фоновым цветом или разделителем соседней панели.

Если утверждённый логотип уже существует, он сохраняется. При отсутствии логотипа допускается небольшой оригинальный геометрический знак, вдохновлённый круглым верхним элементом юрты — түндүком. Знак из генеративного макета является направлением, а не готовым SVG-ассетом. Государственная символика не копируется.

Тонкий симметричный орнамент по мотивам шырдака допустим на краях шапки и в пустой нижней части навигации. Он выполняется простым SVG, помечается aria-hidden, не находится под текстом и не мешает нажатию. На телефоне орнамент сокращается либо убирается.

Поисковый desktop включает небольшой золотистый орнамент в свободной нижней части панели фильтров. Он не перекрывает длинные списки и не резервирует место ценой недоступности управления. Знак бренда и орнамент поставляются как SVG-ресурсы. Favicon использует тот же знак, адаптированный для малых размеров; проверяется читаемость 16×16 и 32×32. Иконки управления имеют согласованные толщину линий, оптический размер и выравнивание.

Components

Это требования к будущей реализации, а не перечень уже обновлённых компонентов.

Кнопки и поля

• Главная кнопка: primary и on-primary, высота около 40 px.
• Вторичная кнопка: светлая поверхность и явный контур.
• На touch-экране область нажатия не менее 44×44 px.
• Поля белые, с постоянной подписью; placeholder не заменяет label.
• Видимый фокус: обводка focus около 2 px с отступом.
• Hover, active, focus-visible, disabled, loading, empty и error реализуются последовательно, с понятными сообщениями.
• Переходы 120–180 мс, без анимации текста документа; учитывается prefers-reduced-motion.

Навигация, результаты и документ

• Активный пункт меню — красный фон и белая подпись; вторичная навигация — primary-subtle и тёмно-красный текст.
• Активная вкладка обозначена подписью и нижней линией. Длинные подписи переносятся либо прокручиваются без обрезки.
• Результаты — упорядоченные строки: название, тип, статус, дата при наличии и выдержка. Каждое поле не оборачивается в отдельную карточку.
• Выбранный результат обозначается мягким красным выделением и текстом.
• Документ — единый белый лист: заголовок, реальные метаданные, доступные действия, оглавление и текст. Абзацы не разбиваются на карточки.
• Подсветка совпадения сохраняет исходный текст; число совпадений и переходы между ними показываются только при работающем поиске.
• Источник и выбранная редакция доступны рядом с документом. Недоступный язык не подменяется выдуманным переводом.
• Язык интерфейса и язык документа — отдельные состояния: смена интерфейса не должна самовольно менять текст документа.
• Footer сохраняет версии frontend и backend. Отсутствующий frontend или макет явно обозначаются, версия не придумывается.

Внутренняя оценка выдачи

Сохраняются шкала 0–3 с полными текстовыми подписями, комментарии, черновик, идентификация проверяющего, сохранение подписанного снимка, обучение и существующие ограничения доступа. Оценки не передаются только цветом. Служебные данные не становятся публичными из-за редизайна.

Доступность и состояния

Семантические заголовки, labels, ссылки и кнопки; иконки без текста имеют доступное имя. Проверяются Tab, Enter, Escape, возврат фокуса и отсутствие клавиатурных ловушек. Статусы доступны скринридеру. Пустая выдача предлагает изменить запрос; ошибка предлагает повторное действие. Ошибка сохранения не уничтожает черновик.

Do's and Don'ts

Do:

• Сохранять название «Акылдаш», реальные данные, маршруты, API и права доступа.
• Использовать общий слой семантических токенов, существующие компоненты и CSS Modules / BEM согласно правилам соответствующей части проекта.
• Разделять официальный текст, сведения о происхождении и выводы системы.
• Проверять чтение длинных RU/KY-документов и одноязычные редакции.
• Использовать этот документ как нормативную спецификацию для новых экранов.

Don't:

• Не переносить демонстрационные даты, судебные материалы, связи и юридические формулировки из изображения в продукт.
• Не добавлять аналитику, сравнение редакций, регистрацию и другие функции только ради сходства с концепцией.
• Не менять поисковое ранжирование или сохранение разметки ради оформления.
• Не использовать ковровые текстуры, фотографии гор, иллюстрации юрт, крупные флаги, золотые градиенты и декоративное размытие.
• Не делать золотистыми мелкие подписи и не передавать смысл одним цветом.
• Не добавлять отдельную тёмную тему без задачи; существующую сохранять.
• Не считать генеративный скриншот доказательством точных HEX, загрузки Noto или проверки доступности работающего интерфейса.
• Не считать утверждение дизайна разрешением на публикацию сервиса.