# Ember Design System > Warm creative design system inspired by Suno and Spotify. Dark backgrounds with glowing orange-red accents and expressive serif typography for music and media platforms. ## Overview - Style: Warm Creative - Tier: free - Fonts: Plus Jakarta Sans (--font-sans), Instrument Serif (--font-display) - Border radius: 0.75rem - Spacing base: 4px - Components: 16 ## Design Tokens ### Colors - --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) ### Typography - Plus Jakarta Sans: var(--font-sans) - Instrument Serif: var(--font-display) ## Components ### alert Ember alert — warm dark informational banner with icon support for creative platforms. Supports default and destructive variants. Dependencies: class-variance-authority Install: npx shadcn@latest add https://vibedesign.systems/api/registry/ember/alert ### avatar Ember avatar — circular image container with warm dark fallback styling for creative and media platforms. Dependencies: @radix-ui/react-avatar Install: npx shadcn@latest add https://vibedesign.systems/api/registry/ember/avatar ### badge Ember badge — small label with warm orange accent for creative platforms. Supports default, secondary, destructive, and outline variants. Dependencies: class-variance-authority Install: npx shadcn@latest add https://vibedesign.systems/api/registry/ember/badge ### button Ember button — warm creative style with glowing orange-red accents inspired by Suno and Spotify. Supports default, destructive, outline, secondary, ghost, and link variants. Dependencies: class-variance-authority Install: npx shadcn@latest add https://vibedesign.systems/api/registry/ember/button ### card Ember card — warm dark container with subtle warm border for creative and media interfaces. Includes Card, CardHeader, CardTitle, CardDescription, CardContent, and CardFooter. No external dependencies Install: npx shadcn@latest add https://vibedesign.systems/api/registry/ember/card ### checkbox Ember checkbox — accessible checkbox with checked state using the system's primary color. Dependencies: @radix-ui/react-checkbox Install: npx shadcn@latest add https://vibedesign.systems/api/registry/ember/checkbox ### dialog Ember dialog — modal overlay with header, footer, title, and description. Includes close button and animations. Dependencies: @radix-ui/react-dialog Install: npx shadcn@latest add https://vibedesign.systems/api/registry/ember/dialog ### input Ember input — dark text input with warm orange focus ring for creative and media interfaces. No external dependencies Install: npx shadcn@latest add https://vibedesign.systems/api/registry/ember/input ### label Ember label — form label with consistent typography and disabled state handling. No external dependencies Install: npx shadcn@latest add https://vibedesign.systems/api/registry/ember/label ### select Ember select — accessible dropdown select with trigger, content, item, label, and separator components. Dependencies: @radix-ui/react-select Install: npx shadcn@latest add https://vibedesign.systems/api/registry/ember/select ### separator Ember separator — horizontal or vertical divider line using the system's border color. No external dependencies Install: npx shadcn@latest add https://vibedesign.systems/api/registry/ember/separator ### skeleton Ember skeleton — animated loading placeholder using the system's muted color. No external dependencies Install: npx shadcn@latest add https://vibedesign.systems/api/registry/ember/skeleton ### switch Ember switch — toggle switch with the system's primary color when checked. Dependencies: @radix-ui/react-switch Install: npx shadcn@latest add https://vibedesign.systems/api/registry/ember/switch ### tabs Ember tabs — accessible tab navigation with list, trigger, and content components. Dependencies: @radix-ui/react-tabs Install: npx shadcn@latest add https://vibedesign.systems/api/registry/ember/tabs ### textarea Ember textarea — multi-line text input with focus ring matching the system's primary color. No external dependencies Install: npx shadcn@latest add https://vibedesign.systems/api/registry/ember/textarea ### tooltip Ember tooltip — small popup on hover with provider, trigger, and content components. Dependencies: @radix-ui/react-tooltip Install: npx shadcn@latest add https://vibedesign.systems/api/registry/ember/tooltip ## Quick Start Install all components: npx shadcn@latest add https://vibedesign.systems/api/registry/ember/alert npx shadcn@latest add https://vibedesign.systems/api/registry/ember/avatar npx shadcn@latest add https://vibedesign.systems/api/registry/ember/badge npx shadcn@latest add https://vibedesign.systems/api/registry/ember/button npx shadcn@latest add https://vibedesign.systems/api/registry/ember/card npx shadcn@latest add https://vibedesign.systems/api/registry/ember/checkbox npx shadcn@latest add https://vibedesign.systems/api/registry/ember/dialog npx shadcn@latest add https://vibedesign.systems/api/registry/ember/input npx shadcn@latest add https://vibedesign.systems/api/registry/ember/label npx shadcn@latest add https://vibedesign.systems/api/registry/ember/select npx shadcn@latest add https://vibedesign.systems/api/registry/ember/separator npx shadcn@latest add https://vibedesign.systems/api/registry/ember/skeleton npx shadcn@latest add https://vibedesign.systems/api/registry/ember/switch npx shadcn@latest add https://vibedesign.systems/api/registry/ember/tabs npx shadcn@latest add https://vibedesign.systems/api/registry/ember/textarea npx shadcn@latest add https://vibedesign.systems/api/registry/ember/tooltip ## Links - System page: https://vibedesign.systems/systems/ember - Registry API: https://vibedesign.systems/api/registry/ember - Platform: https://vibedesign.systems/llms.txt