# vibedesign.systems

> Agent-friendly design systems. Each system ships with design tokens, shadcn-compatible components, and structured docs for AI coding agents.

## How to use

1. Pick a design system below
2. Read its llms.txt for full component list and design philosophy
3. Install components via the shadcn CLI:
   npx shadcn@latest add https://vibedesign.systems/api/registry/{system}/{component}

## Registry API

- List system components: GET /api/registry/{system}
- Get component: GET /api/registry/{system}/{component}
- Free systems: no auth required
- Paid systems: Authorization: Bearer vd_live_xxx

## Available Design Systems

## Canvas (free)
Style: Bold E-commerce
Components: 16
Fonts: Outfit, Space Mono
Description: 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.
Detail: https://vibedesign.systems/systems/canvas/llms.txt
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/canvas/{component}

## Clarity (free)
Style: Clean SaaS
Components: 16
Fonts: Inter, DM Sans
Description: Clean SaaS design system inspired by Stripe. Precise typography, restrained palette, and generous whitespace for professional web applications.
Detail: https://vibedesign.systems/systems/clarity/llms.txt
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/clarity/{component}

## Ember (free)
Style: Warm Creative
Components: 16
Fonts: Plus Jakarta Sans, Instrument Serif
Description: 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.
Detail: https://vibedesign.systems/systems/ember/llms.txt
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/ember/{component}

## Ledger (free)
Style: Financial Professional
Components: 16
Fonts: DM Sans, DM Sans
Description: Financial professional design system inspired by Wise and Revolut. Clean layouts, teal accents, and tabular number typography for fintech dashboards and banking applications.
Detail: https://vibedesign.systems/systems/ledger/llms.txt
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/ledger/{component}

## Monograph (free)
Style: Minimal Editorial
Components: 16
Fonts: Source Serif 4, Noto Sans
Description: Minimal editorial design system inspired by Notion and Medium. Serif typography, warm neutrals, and restrained minimalism for blogs, content platforms, and knowledge bases.
Detail: https://vibedesign.systems/systems/monograph/llms.txt
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/monograph/{component}

## Obsidian (free)
Style: Dark Developer
Components: 16
Fonts: Inter, JetBrains Mono
Description: Dark developer design system inspired by Linear and Vercel. Deep backgrounds, purple-blue accents, and monospace details for developer tools and dashboards.
Detail: https://vibedesign.systems/systems/obsidian/llms.txt
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian/{component}

## Obsidian Pro (paid)
Style: Dark Developer
Components: 46
Fonts: Inter, JetBrains Mono
Description: Premium dark developer design system with 46 components. Everything in Obsidian plus advanced form controls, navigation, overlays, data display, and composite patterns.
Detail: https://vibedesign.systems/systems/obsidian-pro/llms.txt
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/{component}

## Prism (free)
Style: Vibrant Brand
Components: 16
Fonts: Space Grotesk, IBM Plex Mono
Description: Vibrant brand design system inspired by Resend and Supabase. White backgrounds with bold emerald-green primary and strong geometric typography for API products and developer platforms.
Detail: https://vibedesign.systems/systems/prism/llms.txt
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/prism/{component}

## Links

- Website: https://vibedesign.systems
- Pricing: https://vibedesign.systems/pricing
- All systems: https://vibedesign.systems/systems