Lyrii — Design System
Components
Every colour derives from one foreground triple and a per-mode alpha ramp, so a single switch retunes the whole surface — try the theme toggle in the sidebar. Surfaces are lit from above: raised means pressable, sunk means it receives input, everything else stays flat.
Elevation
Flat
Raised
Sunk
Pressed
Disc
Accent glow
8 · 16 · pill
GlassPanel
Default — blur 20, ambient shadow, border
Custom — blur 40, opacity 0.5, no shadow
AppInput
Tell people what you're into.
0/280Must be at least 8 characters
Controls
Segmented
Switch
Checkbox
Radio
Chips
AppCard
Default card with hover lift
No hover, small padding
Clickable card — click me
AppAvatar
sm
md
lg
xl + bordered
LyricsSnippet
“Every piece of me holds every part of you
I'm falling into feelings that I never knew
“Every piece of me holds every part of you
I'm falling into feelings that I never knew
And darling I can't help but wonder if it's true
That every piece of me is falling into you”
EmptyState
Quiet in here
Follow people to fill your feed with songs.
LoadingSkeleton
text
avatar
card
rect
ErrorView
Something went wrong loading your feed.