Monograph
FreeMinimal editorial design system inspired by Notion and Medium. Serif typography, warm neutrals, and restrained minimalism for blogs, content platforms, and knowledge bases.
Style: Minimal Editorial·16 components·Fonts: Source Serif 4, Noto Sans
Quick Install
Install a single component:
npx shadcn@latest add https://vibedesign.systems/api/registry/monograph/button
Or tell your AI agent:
Use the Monograph design system from vibedesign.systems. Read https://vibedesign.systems/systems/monograph/llms.txt for details.
Components
Alert: Something happened
alert
monograph/alertVD
AB
avatar
monograph/avatarDefault
Secondary
badge
monograph/badgePrimary
Outline
button
monograph/buttonCard Title
Description text here
card
monograph/card✓
checkbox
monograph/checkboxDialog Title
Dialog content goes here
Confirm
dialog
monograph/dialogPlaceholder text...
input
monograph/inputForm Label
label
monograph/labelSelect option...▾
select
monograph/selectseparator
monograph/separatorskeleton
monograph/skeletonswitch
monograph/switchTab 1
Tab 2
tabs
monograph/tabsEnter text...
textarea
monograph/textareaTooltip text
tooltip
monograph/tooltipDesign Tokens
| Token | Value | Preview |
|---|---|---|
| --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) | |
| --radius | 0.25rem |