---
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 или проверки доступности работающего интерфейса.
- Не считать утверждение дизайна разрешением на публикацию сервиса.