Ember
FreeWarm creative design system inspired by Suno and Spotify. Dark backgrounds with glowing orange-red accents and expressive serif typography for music and media platforms.
Style: Warm Creative·16 components·Fonts: Plus Jakarta Sans, Instrument Serif
Quick Install
Install a single component:
npx shadcn@latest add https://vibedesign.systems/api/registry/ember/button
Or tell your AI agent:
Use the Ember design system from vibedesign.systems. Read https://vibedesign.systems/systems/ember/llms.txt for details.
Components
Alert: Something happened
alert
ember/alertVD
AB
avatar
ember/avatarDefault
Secondary
badge
ember/badgePrimary
Outline
button
ember/buttonCard Title
Description text here
card
ember/card✓
checkbox
ember/checkboxDialog Title
Dialog content goes here
Confirm
dialog
ember/dialogPlaceholder text...
input
ember/inputForm Label
label
ember/labelSelect option...▾
select
ember/selectseparator
ember/separatorskeleton
ember/skeletonswitch
ember/switchTab 1
Tab 2
tabs
ember/tabsEnter text...
textarea
ember/textareaTooltip text
tooltip
ember/tooltipDesign Tokens
| Token | Value | Preview |
|---|---|---|
| --primary | oklch(0.65 0.20 40) | |
| --primary-foreground | oklch(0.98 0 0) | |
| --background | oklch(0.14 0.02 30) | |
| --foreground | oklch(0.92 0.01 50) | |
| --muted | oklch(0.22 0.03 35) | |
| --muted-foreground | oklch(0.60 0.03 40) | |
| --border | oklch(0.30 0.03 35) | |
| --card | oklch(0.18 0.03 30) | |
| --accent | oklch(0.60 0.18 15) | |
| --destructive | oklch(0.55 0.25 25) | |
| --radius | 0.75rem |