Juris / Design system

Дизайн-система

Юридическая интеллектуальная ОС, оформленная в эстетике рукописного дела: бумага, чернила, печать, кожа. Без скруглений, без неонов — только то, что подходит профессиональной работе.

Палитра tokens.css · :root

Бумажная база (paper/parchment), угольный текст (ink), три акцента: красная сургучная печать, золотая позолота, переплётная кожа.

Бумага
--paper
#FAF7F2
Пергамент
--parchment
#F0EBE1
Чернила
--ink
#1A1714
Чернила мягкие
--ink-soft
#4A4540
Чернила глухие
--ink-mute
#7A7470
Сургуч
--seal
#8B1A1A
Позолота
--gold
#A0782B
Кожа
--leather
#2D3E2A
Линейка
--rule
#D9D3C7

Типографика Merriweather + Inter + JetBrains Mono

Сериф для смыслового — заголовки, цитаты, формулировки. Сан-сериф для интерфейса. Моно для метаданных, кодов дел, дат.

Display56 / 60 · 900
Гражданское дело
H140 / 48 · 700
Арбитражный спор
H228 / 36 · 700
Хронология производства
H320 / 28 · 700
Возражения на отзыв ответчика
Body serif16 / 26 · 400
Согласно ст. 38 Таможенного кодекса ЕАЭС, при наличии у декларанта надлежащих коммерческих документов таможенный орган обязан определять стоимость по методу № 1.
Body sans15 / 24 · 400
Подключите Google-сервисы, чтобы Juris автоматически собирал документы, переписку и заседания по делам.
Small13 / 20 · 400
Передано клиенту с водяным знаком. Скачивания и просмотры регистрируются.
Mono11 / 16 · 500
А40-12435/2026 · 21.04.2026 · ЗАЛ 512

Кнопки .btn / .btn-ghost / .btn-seal

<button class="btn">Спросить</button>
<button class="btn btn-ghost">Отмена</button>

Теги · бейджи .tag / .tag-seal / .tag-gold / .tag-leather

черновик срочно · 32 ч резерв даты прошло PDF · 312 КБ
<span class="tag tag-seal">срочно</span>

Формы

<input type="text" placeholder="…"/>
<textarea rows="3"/>

Отступы --s1…--s9 · 4px база

--s1
4 px
--s2
8 px
--s3
12 px
--s4
16 px
--s5
24 px
--s6
32 px
--s7
48 px
--s8
64 px
--s9
96 px

Темы data-theme="" · default + leather

Бумага

Светлая дневная тема. Используется по умолчанию. Эстетика юридического документа на белой бумаге с чёрными чернилами.

data-theme="" по умолч.

Кожа

Тёмная тема — переплётная кожа. Для вечерней работы и долгих заседаний. Кириллический сериф остаётся читаемым.

data-theme="leather" опц.

Иконки stroke 1.5px · 24×24 viewBox

Линейные одношторочные. Без заливок, без скруглений. Сочетаются с чёрным сериф-текстом.

Документ
Часы · срок
Календарь
Шаринг
Drive
Почта
Аудио
Досье
Готово
Добавить
Закрыть
Sync

Движение --dur 160ms · --ease cubic

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

160ms · cubic-bezier(.2,.6,.2,1)

Радиусы и тени --r1 · --r2 · shadow

0px · square
--r1 · 2px
--r2 · 4px
--shadow-card
--shadow-pop

Принципы

1. Бумага → экран

Каждый экран — рабочий стол юриста. Папка дела, лист протокола, страница досье. Никаких карточек-таблеток и неоновых акцентов.

2. Сериф для смыслового

Заголовки, цитаты из определений, выводы агента — все в Merriweather. Это эстетика документа, а не SaaS-сервиса.

3. Сургуч и позолота

Красная печать — для срочного и рискованного. Золото — для дат, сроков, ритма работы. Кожа — для подтверждённого, прошедшего.

4. Прямые углы

Радиусы 0–4px. Никаких pill-кнопок, никаких больших скруглений. Это не игрушка — это инструмент работы с документами.

Лендинг Кабинет Дело Досье Интеграции Клиент Privacy Terms Токены