Дизайн-язык
панели JPXL.

Холодно-смещённые серые, не чистые. Глубина — из четырёх ступеней elevation и hairline, а не из тяжёлых теней.

Staff — lime, тратится только на главное действие и живой сигнал.

Artist — violet, та же сдержанность.

Значение постоянно в обеих комнатах и держится отдельно от акцента — успех никогда не в цвете главного действия.

cubic-bezier(0.22, 1, 0.36, 1) — быстрый, «оседающий» ease на шагах 120 / 180 / 280 мс. Движение подтверждает, а не играет.

Токены и компоненты живут в static/css/jpxl_admin.css (админка) и в beta_ui/base.html (кабинет артиста). Всё стилизуется через токены — не хардкодь цвета.

/* всегда через переменную */
color: var(--ja-ink);
background: var(--ja-elev-1);
border: 1px solid var(--ja-hairline);
/* акцент — только на главном */
background: var(--ja-lime);

<button class="adm-btn adm-btn-lime">Сохранить</button>
<button class="adm-btn adm-btn-ghost">Отмена</button>
<span class="adm-badge adm-badge-emerald">Оплачено</span>

<div class="adm-card">
  <div class="adm-card-header">…</div>
  <div class="adm-card-body">
    <div class="adm-field">
      <label class="adm-field-label">Ник</label>
      <input type="text">
    </div>
  </div>
</div>

<!-- декларативно: атрибут на кнопке/форме -->
<button class="adm-btn adm-btn-danger"
  data-ja-confirm="Удалить релиз?"
  data-ja-confirm-variant="danger">Удалить</button>

// из JS — Promise
jaModal.confirm({ message: 'Отправить?', variant: 'danger' })
  .then(ok => { if (ok) submit(); });

Полная библиотека компонентов — секции §23–§26 в jpxl_admin.css. Инструкция по бета-UI и токенам — в CLAUDE.md.