Vire / Design System
Токены, компоненты и паттерны движения. Тёмная платформа, OKLCH-нейтраль с тёплой подкраской, принципы Impeccable.
background
foreground
card
muted
secondary
accent
primary
destructive
border
muted-foreground
ring
Инжектируются как CSS-переменные в корневой div страницы артиста через theme_tokens из базы. Без них — fallback на платформенные токены.
Пример: violet preset
Компоненты пишутся на bg-[var(--artist-bg)] — никаких форков кода на каждый артист.
variant
default
secondary
outline
ghost
destructive
link
size
sm / h-8
default / h-9
lg / h-10
icon / 36×36
disabled
text-5xl / font-bold
text-4xl / font-bold
text-3xl / font-semibold
text-2xl / font-semibold
text-xl / font-semibold
text-lg / font-medium
text-base
text-sm / muted
text-xs / muted
font-mono / uppercase / tracking-widest
code snippetfont-mono / bg-secondary
bg-card / rounded-lg / shadow-md. Используется для контентных блоков.
+ border border-border — для разграничения на тёмном фоне.
Вариация на bg-secondary — чуть светлее card.
rounded-sm
--radius-sm (4px)
rounded-md
--radius-md (6px)
rounded-lg
--radius-lg (10px)
rounded-xl
--radius-xl (14px)
rounded-2xl
16px
rounded-full
9999px
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 — с лёгкой инерцией.
ease.soft
cubic-bezier(0.22, 1, 0.36, 1)
easeOutQuint — совпадает с CSS-переменной --ease-soft в globals.css.
FadeUp — появление снизу вверх
Заголовок с FadeUp
Используется для заголовков и одиночных блоков. initial: opacity 0, y +10px.
Stagger / StaggerItem — каскадное появление
Reveal — появление при scroll
Срабатывает один раз при попадании в вьюпорт (once: true). Хорошо для секций ниже первого экрана. Этот блок — пример Reveal внутри Reveal.
Press — тактильная карточка
Карточка
Hover: y−2px, Tap: scale 0.97
lift=−4
Усиленный подъём
Название релиза
Артист · 2024
Название трека
Артист · 3:47
120 BPM
Пусто
Здесь пока ничего нет
Статусные бейджи
Код и моноширинные блоки
const spring = {
snappy: {
stiffness: 380,
damping: 30,
}
}Корневой лейаут — фиксированная высота. Документ не скроллится.
body (h-full, overflow-hidden, flex flex-col)
Nav — закреплён сверху
div (flex-1 min-h-0
overflow-y-auto) — единственная scroll-область
{children} — min-h-full
Player — h-16, только когда играетmin-h-screen / h-screen на страницахmin-h-full для растягивания фонаVire Design System — OKLCH tokens + Radix + motion/react
Принципы: Impeccable. Tint your grays.