Canvas
FreeBold 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.
Style: Bold E-commerce·16 components·Fonts: Outfit, Space Mono
Quick Install
Install a single component:
npx shadcn@latest add https://vibedesign.systems/api/registry/canvas/button
Or tell your AI agent:
Use the Canvas design system from vibedesign.systems. Read https://vibedesign.systems/systems/canvas/llms.txt for details.
Components
Alert: Something happened
alert
canvas/alertVD
AB
avatar
canvas/avatarDefault
Secondary
badge
canvas/badgePrimary
Outline
button
canvas/buttonCard Title
Description text here
card
canvas/card✓
checkbox
canvas/checkboxDialog Title
Dialog content goes here
Confirm
dialog
canvas/dialogPlaceholder text...
input
canvas/inputForm Label
label
canvas/labelSelect option...▾
select
canvas/selectseparator
canvas/separatorskeleton
canvas/skeletonswitch
canvas/switchTab 1
Tab 2
tabs
canvas/tabsEnter text...
textarea
canvas/textareaTooltip text
tooltip
canvas/tooltipDesign Tokens
| Token | Value | Preview |
|---|---|---|
| --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) | |
| --radius | 1rem |