# Canvas Design System > Bold e-commerce design system inspired by Shopify and Gumroad. Vivid pink-magenta accents, generous rounded corners, and expressive typography for product pages and digital storefronts. ## Overview - Style: Bold E-commerce - Tier: free - Fonts: Outfit (--font-display), Space Mono (--font-code) - Border radius: 1rem - Spacing base: 4px - Components: 16 ## Design Tokens ### Colors - --primary: oklch(0.62 0.22 350) - --primary-foreground: oklch(0.98 0 0) - --background: oklch(0.995 0 0) - --foreground: oklch(0.15 0.01 260) - --muted: oklch(0.96 0.01 350) - --muted-foreground: oklch(0.50 0.02 260) - --border: oklch(0.91 0.005 260) - --card: oklch(1 0 0) - --accent: oklch(0.58 0.18 280) - --destructive: oklch(0.58 0.22 25) ### Typography - Outfit: var(--font-display) - Space Mono: var(--font-code) ## Components ### alert Canvas alert — rounded informational banner for order confirmations, promotions, and store notifications. Supports default and destructive variants. Dependencies: class-variance-authority Install: npx shadcn@latest add https://vibedesign.systems/api/registry/canvas/alert ### avatar Canvas avatar — circular profile image with pink-tinted fallback. Bold styling for user profiles and seller pages. Dependencies: @radix-ui/react-avatar Install: npx shadcn@latest add https://vibedesign.systems/api/registry/canvas/avatar ### badge Canvas badge — vivid pill-shaped label for product tags, sale indicators, and category markers. Supports default, secondary, destructive, and outline variants. Dependencies: class-variance-authority Install: npx shadcn@latest add https://vibedesign.systems/api/registry/canvas/badge ### button Canvas button — bold e-commerce styling with pink-magenta accents and generous rounding. Supports default, destructive, outline, secondary, ghost, and link variants. Dependencies: class-variance-authority Install: npx shadcn@latest add https://vibedesign.systems/api/registry/canvas/button ### card Canvas card — bold container with generous rounding for product displays and storefront layouts. Includes Card, CardHeader, CardTitle, CardDescription, CardContent, and CardFooter. No external dependencies Install: npx shadcn@latest add https://vibedesign.systems/api/registry/canvas/card ### checkbox Canvas 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/canvas/checkbox ### dialog Canvas 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/canvas/dialog ### input Canvas input — rounded text input with pink-magenta focus ring for product search and checkout forms. No external dependencies Install: npx shadcn@latest add https://vibedesign.systems/api/registry/canvas/input ### label Canvas label — form label with consistent typography and disabled state handling. No external dependencies Install: npx shadcn@latest add https://vibedesign.systems/api/registry/canvas/label ### select Canvas 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/canvas/select ### separator Canvas 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/canvas/separator ### skeleton Canvas skeleton — animated loading placeholder using the system's muted color. No external dependencies Install: npx shadcn@latest add https://vibedesign.systems/api/registry/canvas/skeleton ### switch Canvas 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/canvas/switch ### tabs Canvas 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/canvas/tabs ### textarea Canvas 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/canvas/textarea ### tooltip Canvas 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/canvas/tooltip ## Quick Start Install all components: npx shadcn@latest add https://vibedesign.systems/api/registry/canvas/alert npx shadcn@latest add https://vibedesign.systems/api/registry/canvas/avatar npx shadcn@latest add https://vibedesign.systems/api/registry/canvas/badge npx shadcn@latest add https://vibedesign.systems/api/registry/canvas/button npx shadcn@latest add https://vibedesign.systems/api/registry/canvas/card npx shadcn@latest add https://vibedesign.systems/api/registry/canvas/checkbox npx shadcn@latest add https://vibedesign.systems/api/registry/canvas/dialog npx shadcn@latest add https://vibedesign.systems/api/registry/canvas/input npx shadcn@latest add https://vibedesign.systems/api/registry/canvas/label npx shadcn@latest add https://vibedesign.systems/api/registry/canvas/select npx shadcn@latest add https://vibedesign.systems/api/registry/canvas/separator npx shadcn@latest add https://vibedesign.systems/api/registry/canvas/skeleton npx shadcn@latest add https://vibedesign.systems/api/registry/canvas/switch npx shadcn@latest add https://vibedesign.systems/api/registry/canvas/tabs npx shadcn@latest add https://vibedesign.systems/api/registry/canvas/textarea npx shadcn@latest add https://vibedesign.systems/api/registry/canvas/tooltip ## Links - System page: https://vibedesign.systems/systems/canvas - Registry API: https://vibedesign.systems/api/registry/canvas - Platform: https://vibedesign.systems/llms.txt