VireMusic / Design System

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

Живые компоненты, токены и паттерны движения. Тёмная платформа, OKLCH-нейтраль с тёплой подкраской, принципы Impeccable.

Foundations

Цветовые токены, типографика, радиусы — база всего интерфейса.

oklch(0.085 0.006 75)

background

oklch(0.93 0.008 83)

foreground

oklch(0.115 0.006 75)

card

oklch(0.165 0.006 75)

muted

oklch(0.165 0.006 75)

secondary

oklch(0.93 0.008 83)

primary

oklch(0.55 0.22 27)

destructive

oklch(0.225 0.006 75)

border

Artist layer · violet preset

--artist-bg

--artist-accent

--artist-text

Инжектируются как CSS-переменные из theme_tokens в корневой div страницы артиста.

Типографика

Размер 5xltext-5xl · font-bold

Размер 3xltext-3xl · font-semibold

Размер xltext-xl · font-semibold

Основной текстtext-base

Вспомогательныйtext-sm · muted

MONO LABELlabel-wide

Радиусы

rounded-sm

4px

rounded-md

6px

rounded-lg

10px

rounded-xl

14px

rounded-2xl

16px

rounded-full

9999px

Motion

Spring-пресеты и живые примеры всех motion-примитивов.

snappy

stiffness 380 · damping 30 · mass 0.8

Тапы, нажатия кнопок — короткий тактильный отклик.

smooth

stiffness 300 · damping 32 · mass 0.9

Layout-переходы, разворот плеера, морфинг состояний.

gentle

stiffness 170 · damping 24 · mass 1

Мягкие появления, scroll-reveal — с лёгкой инерцией.

FadeUp — появление снизу вверх

Заголовок с FadeUp

initial: opacity 0, y +10px → animate: opacity 1, y 0. Используется для заголовков и одиночных блоков.

Stagger / StaggerItem — каскадное появление

Элемент 1

Элемент 2

Элемент 3

Элемент 4

Reveal — появление при scroll

Срабатывает один раз при попадании в вьюпорт (once: true). Хорошо для секций ниже первого экрана.

Press — тактильная обёртка

Карточка

hover: y−2px · tap: scale 0.97

lift=−4

Усиленный подъём

Core UI · @vire/ui

Button, Input — базовые блоки пакета @vire/ui.

Button · variant

default

secondary

outline

ghost

destructive

link

Button · size

sm · h-8

default · h-9

lg · h-10

icon · 36×36

Button · disabled

Input

default

with value

disabled

Content Kit

Компоненты публичных и маркетинговых поверхностей.

Eyebrow / StatusPill

VireMusic · Независимая площадка

Eyebrow

Этап 1 · Friends & Family

StatusPill · dot=true

Архив

StatusPill · dot=false

FeatureCard

Музыка в HLS

FLAC → ffmpeg → HLS-чанки. Только signed URL — никаких прямых mp3/flac.

Лайки и плейлисты

Optimistic UI — состояние меняется мгновенно, синхронизируется с сервером.

Артисты и слушатели

Два регистра: публичный контент-хаб и дашборд артиста.

PillLink

Primary pill Outline pill Без иконки

Product Kit · ui-kit

Компоненты продуктовых поверхностей: Admin, Dashboard.

PageHeader · btnPrimary / btnGhost

Треки

1 284

Badge · tone

neutralsuccesswarnerrorinfoaccent

neutral · dotsuccess · dotwarn · doterror · dotinfo · dotaccent · dot

processing · pulselive · dot

Статусные бейджи

RoleBadge

SUPERADMINADMINMODERATORARTISTLISTENER

TrackStatusBadge

готовобработказаблокированошибка

ReleaseStatusBadge

опубликованзапланированчерновикархив

StatCard · MetricGrid

Прослушивания48 291за 30 дней

Артисты342

Треки1 28424 в обработке

Redisонлайн

FilterTabs

Все Активные Черновики Архив

Table

Трек	Артист	Статус	Слушаний
Северный ветер	АртистМорозко	Статусготов	Слушаний12 483
В темноте	АртистПолночь	Статусобработка	Слушаний—
Город спит	АртистНева	Статусготов	Слушаний4 102

EmptyState

Ничего не найдено

Попробуйте изменить фильтры или сбросить поиск

Field

Название трекаBPMцелое число

Switch / Check — интерактив

Switch

Уведомления

Автовоспроизведение

Отключено

Check

Explicit (ненормативная лексика)Отметьте, если трек содержит матПублично (виден всем)Заблокировано

Доменные бейджи

ExplicitBadge и VerifiedBadge — единые чипы домена.

Название трекаE

ExplicitBadge — 18+, ненормативная лексика

verified

VerifiedBadge · violet (--artist-accent)

verified

VerifiedBadge · platform primary

verified

VerifiedBadge · green preset

VireMusic Design System — OKLCH tokens · Radix · motion/react

Impeccable · Tint your grays.