24 KiB
name, description, colors, typography, rounded, spacing
| name | description | colors | typography | rounded | spacing | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Акылдаш · Түндүк | Утверждённая дизайн-система правового портала Кыргызской Республики |
|
|
|
|
Design System: Акылдаш · Түндүк
Overview
Статус: утверждено пользователем 10 октября 2026 года. Это целевая дизайн-система портала и внутренней лаборатории проверки поисковой выдачи. Она ещё не внедрена в работающий интерфейс. Утверждение дизайна не означает готовность публичного сервиса или разрешение на deployment.
Creative North Star: "Түндүк — спокойное пространство для работы с правом".
Профессиональный правовой сервис с кыргызской идентичностью: светлый фон цвета войлока, белое поле документа, глубокий красный для действий, тёмный сливовый текст и небольшие золотистые геометрические детали. Главное — читаемость длинных документов и ясная иерархия.
Это единственная нормативная спецификация дизайна проекта. Требования исходного brief перенесены сюда; отдельный brief и ранние варианты удалены. Визуальный ориентир — утверждённый пользователем концептуальный экран. Точные токены и правила этой спецификации важнее случайных деталей генеративного изображения. Название продукта — Акылдаш; «УКУК» из ранних концепций не используется.
Изображение определяет целевую композицию, пропорции панелей и расположение элементов поискового экрана. Эта спецификация определяет семантические токены, шрифты, доступность и правила поведения. Расхождения между ними фиксируются до реализации; утверждённые токены не заменяются цветами, взятыми пипеткой из растрового изображения. Изменения постоянных правил вносятся сюда явно. Этапы работ, исходные измерения и критерии визуальной приёмки находятся в едином плане корректировки UI/UX. План не является второй дизайн-системой и не означает завершение реализации.
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. До поставки проверить лицензии и символы
Ө ө Ү ү Ң ң. Файлы шрифтов пока не добавлены.
| Элемент | Размер | Межстрочный интервал |
|---|---|---|
| Заголовок документа / страницы документа | 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 или проверки доступности работающего интерфейса.
- Не считать утверждение дизайна разрешением на публикацию сервиса.