VireMusic / Design System
Живые компоненты, токены и паттерны движения. Тёмная платформа, OKLCH-нейтраль с тёплой подкраской, принципы Impeccable.
Цветовые токены, типографика, радиусы — база всего интерфейса.
background
foreground
card
muted
secondary
primary
destructive
border
Artist layer · violet preset
Инжектируются как CSS-переменные из theme_tokens в корневой div страницы артиста.
Типографика
Радиусы
rounded-sm
4px
rounded-md
6px
rounded-lg
10px
rounded-xl
14px
rounded-2xl
16px
rounded-full
9999px
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 — каскадное появление
Reveal — появление при scroll
once: true). Хорошо для секций ниже первого экрана.Press — тактильная обёртка
Карточка
hover: y−2px · tap: scale 0.97
lift=−4
Усиленный подъём
Button, Input, Card — базовые блоки пакета @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
search
Card
bg-card · rounded-lg · shadow-md
+ border border-border
Вариация bg-secondary
Компоненты публичных и маркетинговых поверхностей.
Eyebrow / StatusPill
VireMusic · Независимая площадка
Eyebrow
StatusPill · dot=true
StatusPill · dot=false
FeatureCard
FLAC → ffmpeg → HLS-чанки. Только signed URL — никаких прямых mp3/flac.
Optimistic UI — состояние меняется мгновенно, синхронизируется с сервером.
Два регистра: публичный контент-хаб и дашборд артиста.
PillLink
Компоненты продуктовых поверхностей: Admin, Dashboard.
PageHeader · btnPrimary / btnGhost
Badge · tone
Статусные бейджи
RoleBadge
TrackStatusBadge
ReleaseStatusBadge
StatCard · MetricGrid
FilterTabs
Table
| Трек | Артист | Статус | Слушаний |
|---|---|---|---|
| Северный ветер | АртистМорозко | Статусготов | Слушаний12 483 |
| В темноте | АртистПолночь | Статусобработка | Слушаний— |
| Город спит | АртистНева | Статусготов | Слушаний4 102 |
EmptyState
Ничего не найдено
Попробуйте изменить фильтры или сбросить поиск
Field
Switch / Check — интерактив
Switch
Check
ExplicitBadge и VerifiedBadge — единые чипы домена.
ExplicitBadge — 18+, ненормативная лексика
VerifiedBadge · violet (--artist-accent)
VerifiedBadge · platform primary
VerifiedBadge · green preset
VireMusic Design System — OKLCH tokens · Radix · motion/react
Impeccable · Tint your grays.