# Monograph Design System > Minimal editorial design system inspired by Notion and Medium. Serif typography, warm neutrals, and restrained minimalism for blogs, content platforms, and knowledge bases. ## Overview - Style: Minimal Editorial - Tier: free - Fonts: Source Serif 4 (--font-display), Noto Sans (--font-sans) - Border radius: 0.25rem - Spacing base: 4px - Components: 16 ## Design Tokens ### Colors - --primary: oklch(0.25 0.01 260) - --primary-foreground: oklch(0.98 0.005 80) - --background: oklch(0.985 0.005 80) - --foreground: oklch(0.20 0.01 260) - --muted: oklch(0.95 0.008 80) - --muted-foreground: oklch(0.50 0.01 260) - --border: oklch(0.90 0.008 80) - --card: oklch(1 0.005 80) - --accent: oklch(0.55 0.10 250) - --destructive: oklch(0.55 0.20 25) ### Typography - Source Serif 4: var(--font-display) - Noto Sans: var(--font-sans) ## Components ### alert Monograph alert — warm editorial banner with icon support. Supports default and destructive variants. Dependencies: class-variance-authority Install: npx shadcn@latest add https://vibedesign.systems/api/registry/monograph/alert ### avatar Monograph avatar — circular image container with warm neutral fallback for editorial layouts. Dependencies: @radix-ui/react-avatar Install: npx shadcn@latest add https://vibedesign.systems/api/registry/monograph/avatar ### badge Monograph badge — understated editorial label for tags and categories. Supports default, secondary, destructive, and outline variants. Dependencies: class-variance-authority Install: npx shadcn@latest add https://vibedesign.systems/api/registry/monograph/badge ### button Monograph button — editorial near-black primary with warm hover states. Supports default, destructive, outline, secondary, ghost, and link variants. Dependencies: class-variance-authority Install: npx shadcn@latest add https://vibedesign.systems/api/registry/monograph/button ### card Monograph card — warm-white container with subtle warm border for editorial content. Includes Card, CardHeader, CardTitle, CardDescription, CardContent, and CardFooter. No external dependencies Install: npx shadcn@latest add https://vibedesign.systems/api/registry/monograph/card ### checkbox Monograph 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/monograph/checkbox ### dialog Monograph 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/monograph/dialog ### input Monograph input — warm-toned text input with near-black focus ring for editorial clarity. No external dependencies Install: npx shadcn@latest add https://vibedesign.systems/api/registry/monograph/input ### label Monograph label — form label with consistent typography and disabled state handling. No external dependencies Install: npx shadcn@latest add https://vibedesign.systems/api/registry/monograph/label ### select Monograph 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/monograph/select ### separator Monograph 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/monograph/separator ### skeleton Monograph skeleton — animated loading placeholder using the system's muted color. No external dependencies Install: npx shadcn@latest add https://vibedesign.systems/api/registry/monograph/skeleton ### switch Monograph 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/monograph/switch ### tabs Monograph 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/monograph/tabs ### textarea Monograph 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/monograph/textarea ### tooltip Monograph 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/monograph/tooltip ## Quick Start Install all components: npx shadcn@latest add https://vibedesign.systems/api/registry/monograph/alert npx shadcn@latest add https://vibedesign.systems/api/registry/monograph/avatar npx shadcn@latest add https://vibedesign.systems/api/registry/monograph/badge npx shadcn@latest add https://vibedesign.systems/api/registry/monograph/button npx shadcn@latest add https://vibedesign.systems/api/registry/monograph/card npx shadcn@latest add https://vibedesign.systems/api/registry/monograph/checkbox npx shadcn@latest add https://vibedesign.systems/api/registry/monograph/dialog npx shadcn@latest add https://vibedesign.systems/api/registry/monograph/input npx shadcn@latest add https://vibedesign.systems/api/registry/monograph/label npx shadcn@latest add https://vibedesign.systems/api/registry/monograph/select npx shadcn@latest add https://vibedesign.systems/api/registry/monograph/separator npx shadcn@latest add https://vibedesign.systems/api/registry/monograph/skeleton npx shadcn@latest add https://vibedesign.systems/api/registry/monograph/switch npx shadcn@latest add https://vibedesign.systems/api/registry/monograph/tabs npx shadcn@latest add https://vibedesign.systems/api/registry/monograph/textarea npx shadcn@latest add https://vibedesign.systems/api/registry/monograph/tooltip ## Links - System page: https://vibedesign.systems/systems/monograph - Registry API: https://vibedesign.systems/api/registry/monograph - Platform: https://vibedesign.systems/llms.txt