326 lines
24 KiB
Markdown
326 lines
24 KiB
Markdown
---
|
||
name: "Акылдаш · Түндүк"
|
||
description: "Утверждённая дизайн-система правового портала Кыргызской Республики"
|
||
colors:
|
||
bg: "#F7F2E8"
|
||
surface: "#FFFFFF"
|
||
surface-muted: "#FBF8F4"
|
||
text: "#38262A"
|
||
text-secondary: "#786469"
|
||
border: "#DED3CE"
|
||
primary: "#9D2633"
|
||
primary-hover: "#84202B"
|
||
primary-active: "#701B24"
|
||
on-primary: "#FFFFFF"
|
||
primary-subtle: "#F8EBED"
|
||
accent: "#A37B32"
|
||
highlight: "#FFF0C7"
|
||
focus: "#245C78"
|
||
success: "#246843"
|
||
success-bg: "#EAF4EC"
|
||
warning: "#82520D"
|
||
warning-bg: "#FFF3DA"
|
||
error: "#9D2633"
|
||
error-bg: "#FBEDEF"
|
||
info: "#245C78"
|
||
info-bg: "#EAF2F6"
|
||
typography:
|
||
document-title:
|
||
fontFamily: "Noto Serif, serif"
|
||
fontSize: "32px"
|
||
fontWeight: 700
|
||
lineHeight: 1.2
|
||
section-title:
|
||
fontFamily: "Noto Serif, serif"
|
||
fontSize: "24px"
|
||
fontWeight: 600
|
||
lineHeight: 1.3
|
||
document-body:
|
||
fontFamily: "Noto Sans, sans-serif"
|
||
fontSize: "18px"
|
||
fontWeight: 400
|
||
lineHeight: 1.65
|
||
control:
|
||
fontFamily: "Noto Sans, sans-serif"
|
||
fontSize: "16px"
|
||
fontWeight: 500
|
||
lineHeight: 1.5
|
||
metadata:
|
||
fontFamily: "Noto Sans, sans-serif"
|
||
fontSize: "14px"
|
||
fontWeight: 400
|
||
lineHeight: 1.5
|
||
rounded:
|
||
default: "6px"
|
||
spacing:
|
||
xs: "4px"
|
||
sm: "8px"
|
||
compact: "12px"
|
||
md: "16px"
|
||
lg: "24px"
|
||
xl: "32px"
|
||
section: "48px"
|
||
---
|
||
|
||
# Design System: Акылдаш · Түндүк
|
||
|
||
## Overview
|
||
|
||
**Статус: утверждено пользователем 10 октября 2026 года.** Это нормативная
|
||
дизайн-система портала и внутренней лаборатории проверки поисковой выдачи.
|
||
Часть ресурсов и правил уже присутствует в исходном коде, но полное визуальное
|
||
соответствие и доступность не подтверждаются одним наличием кода. Утверждение
|
||
дизайна не означает готовность публичного сервиса или разрешение на deployment.
|
||
|
||
**Creative North Star: "Түндүк — спокойное пространство для работы с правом".**
|
||
|
||
Профессиональный правовой сервис с кыргызской идентичностью: светлый фон
|
||
цвета войлока, белое поле документа, глубокий красный для действий,
|
||
тёмный сливовый текст и небольшие золотистые геометрические детали.
|
||
Главное — читаемость длинных документов и ясная иерархия.
|
||
|
||
Это единственная нормативная спецификация дизайна проекта. Требования
|
||
исходного brief перенесены сюда; отдельный brief и ранние варианты удалены.
|
||
Название продукта — **Акылдаш**; «УКУК» из ранних концепций не используется.
|
||
|
||
Целевые редактируемые состояния, композиция, измерения и критерии приёмки
|
||
собраны в [плане реализации и приёмки](docs/product/implementation-roadmap.md).
|
||
Макеты задают визуальное направление, но не источник юридических данных и не
|
||
доказательство работающих функций. Утверждённые токены не заменяются цветами,
|
||
взятыми пипеткой из растрового изображения. Изменения постоянных правил
|
||
вносятся сюда явно.
|
||
|
||
**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 и не полный визуальный аудит символов
|
||
`Ө ө Ү ү Ң ң`. См. [план реализации и приёмки](docs/product/implementation-roadmap.md).
|
||
|
||
| Элемент | Размер | Межстрочный интервал |
|
||
|---|---|---|
|
||
| Заголовок документа / страницы документа | 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 или проверки доступности работающего интерфейса.
|
||
- Не считать утверждение дизайна разрешением на публикацию сервиса.
|