# Obsidian Design System

> Dark developer design system inspired by Linear and Vercel. Deep backgrounds, purple-blue accents, and monospace details for developer tools and dashboards.

## Overview

- Style: Dark Developer
- Tier: free
- Fonts: Inter (--font-sans), JetBrains Mono (--font-code)
- Border radius: 0.5rem
- Spacing base: 4px
- Components: 16

## Design Tokens

### Colors
- --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)

### Typography
- Inter: var(--font-sans)
- JetBrains Mono: var(--font-code)

## Components

### alert
Obsidian alert — dark informational banner with icon support for developer tools. Supports default and destructive variants.
Dependencies: class-variance-authority
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian/alert

### avatar
Obsidian avatar — circular image container with dark fallback styling for developer dashboards.
Dependencies: @radix-ui/react-avatar
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian/avatar

### badge
Obsidian badge — small label with purple-blue accent for developer dashboards. Supports default, secondary, destructive, and outline variants.
Dependencies: class-variance-authority
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian/badge

### button
Obsidian button — dark developer style with purple-blue accents inspired by Linear and Vercel. Supports default, destructive, outline, secondary, ghost, and link variants.
Dependencies: class-variance-authority
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian/button

### card
Obsidian card — dark container with subtle border for developer dashboards. Includes Card, CardHeader, CardTitle, CardDescription, CardContent, and CardFooter.
No external dependencies
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian/card

### checkbox
Obsidian 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/obsidian/checkbox

### dialog
Obsidian 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/obsidian/dialog

### input
Obsidian input — dark text input with purple-blue focus ring for developer interfaces.
No external dependencies
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian/input

### label
Obsidian label — form label with consistent typography and disabled state handling.
No external dependencies
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian/label

### select
Obsidian 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/obsidian/select

### separator
Obsidian 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/obsidian/separator

### skeleton
Obsidian skeleton — animated loading placeholder using the system's muted color.
No external dependencies
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian/skeleton

### switch
Obsidian 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/obsidian/switch

### tabs
Obsidian 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/obsidian/tabs

### textarea
Obsidian 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/obsidian/textarea

### tooltip
Obsidian 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/obsidian/tooltip

## Quick Start

Install all components:
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian/alert
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian/avatar
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian/badge
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian/button
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian/card
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian/checkbox
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian/dialog
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian/input
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian/label
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian/select
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian/separator
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian/skeleton
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian/switch
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian/tabs
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian/textarea
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian/tooltip

## Links

- System page: https://vibedesign.systems/systems/obsidian
- Registry API: https://vibedesign.systems/api/registry/obsidian
- Platform: https://vibedesign.systems/llms.txt