// UI KIT · v1

Библиотека интерфейсных элементов

Все элементы блога в фирменном стиле «Мандарин»: цвет, типографика, кнопки, формы, карточки, теги, алерты, таблицы, реальные компоненты сайта.

01 · Цвет

Палитра

Фон#FAF7F2
Поверхность#FFFFFF
Поверхность 2#F3ECE2
Линии#EBE1D2
Keyline#DCCBB2
Акцент#FF9500
Акцент active#E07F00
Акцент-текст#B5650A
Текст#1A130A
Текст 2#6B6052
Coral · ошибки#FF5C5C

02 · Типографика

Шкала · Onest + JetBrains Mono

Заголовок H1Onest 800 · 48/−2px
Заголовок H2Onest 800 · 30px
Заголовок H3Onest 800 · 22px
Основной текст — Onest 400/500. Дружелюбно, от первого лица, без канцелярита.Onest 400 · 18px
Вторичный / подписьOnest 400 · 14px
// КИКЕР · @chernovdevJetBrains Mono

03 · Кнопки

Кнопки и состояния

Наведи мышь — состояние hover живое.

Основная (soft)
Заливка
Контур
Размеры

04 · Теги и бейджи

Теги, фильтры, статусы

Тег-чип qlikai2026
Фильтр ВсеОсновныеПатчи
Бейджи Qlik основной патч P11 пред-релиз
Статусы опубликовано черновик

05 · Формы

Поля ввода и контролы

06 · Карточки

Карточки

ai

Карточка статьи

Обложка, теги, заголовок и эксцерпт. Hover: подъём + рамка.

Простая карточка

Контейнер для контента: радиус 18px, рамка 1px.

176статей опубликовано

07 · Алерты · код · таблица

Элементы статьи (prose)

! Инфо-коллаут для важной мысли в статье — акцентная плашка.

Инлайн-код выглядит так: npm run build — на мягкой плашке. А ссылка вот такая.

# блок кода
def hello(name):
    return f"Привет, {name}"
Цитата выделяется акцентной линией слева и приглушённым курсивом.
  • Маркер списка — в акценте
  • Второй пункт
МетрикаЗначение
Авто-PR62%
Приняты88%

10 · Навигация

Крошки, пагинация, прогресс

Главная/Статьи/Текущая
←123…→
62%

11 · Реальные компоненты

Блоки страниц сайта

Заголовок статьи в поиске
…фрагмент текста с найденным запросом и контекстом вокруг…
2026-06-20 · qlik, ai