Obsidian
FreeDark developer design system inspired by Linear and Vercel. Deep backgrounds, purple-blue accents, and monospace details for developer tools and dashboards.
Style: Dark Developer·16 components·Fonts: Inter, JetBrains Mono
Quick Install
Install a single component:
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian/button
Or tell your AI agent:
Use the Obsidian design system from vibedesign.systems. Read https://vibedesign.systems/systems/obsidian/llms.txt for details.
Components
Alert: Something happened
alert
obsidian/alertVD
AB
avatar
obsidian/avatarDefault
Secondary
badge
obsidian/badgePrimary
Outline
button
obsidian/buttonCard Title
Description text here
card
obsidian/card✓
checkbox
obsidian/checkboxDialog Title
Dialog content goes here
Confirm
dialog
obsidian/dialogPlaceholder text...
input
obsidian/inputForm Label
label
obsidian/labelSelect option...▾
select
obsidian/selectseparator
obsidian/separatorskeleton
obsidian/skeletonswitch
obsidian/switchTab 1
Tab 2
tabs
obsidian/tabsEnter text...
textarea
obsidian/textareaTooltip text
tooltip
obsidian/tooltipDesign Tokens
| Token | Value | Preview |
|---|---|---|
| --primary | oklch(0.65 0.20 275) | |
| --primary-foreground | oklch(0.98 0 0) | |
| --background | oklch(0.15 0.02 270) | |
| --foreground | oklch(0.93 0.01 270) | |
| --muted | oklch(0.22 0.02 270) | |
| --muted-foreground | oklch(0.60 0.02 270) | |
| --border | oklch(0.30 0.02 270) | |
| --card | oklch(0.18 0.02 270) | |
| --accent | oklch(0.70 0.18 280) | |
| --destructive | oklch(0.60 0.22 25) | |
| --radius | 0.5rem |