---
name: Obsidian
description: "This site is a masterclass in focused, utility-driven dark mode design that prioritizes content readability and brand identity through a singular color strategy."
version: alpha

colors:
  background: "#1f1f1f"
  primary: "#eeeeee"
  secondary: "#b3b3b3"
  tertiary: "#8a5cf5"
  neutral: "#666666"
  bg-soft: "#262626"
  bg-quiet: "#0f0f0f"
  muted-soft: "#404040"
  line: "rgba(64, 64, 64, 0.6)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 600
    letterSpacing: "-1.2px"
  h2:
    fontFamily: humanist-sans
    fontSize: 36px
    lineHeight: 1.15
    fontWeight: 600
    letterSpacing: "0"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

A powerful, privacy-first knowledge base for linking ideas.

*A private, networked digital notebook that grows with your thoughts.*

## Colors

High-contrast dark mode prioritizing deep focus and information hierarchy with a single high-chroma accent.

- **Background (`#1f1f1f`)** — uses `bg` token
- **Primary text (`#eeeeee`)** — uses `ink` token
- **Secondary text (`#b3b3b3`)** — uses `ink-soft` token
- **Accent (`#8a5cf5`)** — uses `accent` token
- **Muted (`#666666`)** — uses `muted` token
- **Borders (`rgba(64, 64, 64, 0.6)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

- Keep headings bold and tightly tracked.
- Maintain clear vertical rhythm between headlines and body.
- Use sentence case for all UI text.

## Layout

Full-width dark background with a centered, constrained content column.

*Rhythm:* An 8px base unit with generous padding for section containment.

## Elevation & Depth

- 0 1px 3px rgba(0,0,0,0.1)
- 0 20px 25px -5px rgba(0,0,0,0.1)
- 0 25px 50px -12px rgba(0,0,0,0.25)
- inset 0 0 0 1px rgba(255,255,255,0.1)
- Borders: Subtle 1px solid borders in dark grays (#404040) to define surfaces without harsh contrast.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 9999px

## Components

- **button:** Primary buttons use the solid accent color (#8a5cf5) with generous padding and rounded corners.
- **card:** Subtle dark surfaces with a soft inset border for highlighting app screenshots or content blocks.
- **chip:** Small, rounded pill elements for tags or status indicators.
- **input:** Dark background fields with a subtle 1px border and placeholder text in muted gray.
- **hero:** A massive, left-aligned text block paired with a large interactive product screenshot.

## Do's and Don'ts

**Don't:**
- don't use a white or light background — screenshot shows a deep dark (#1f1f1f) theme.
- don't use serif fonts for headlines — screenshot shows a clean sans-serif for display type.
- don't use multiple competing accent colors — screenshot shows a single dominant purple (#8a5cf5).
- don't use sharp, 0px border-radius — screenshot shows rounded corners (4px to 12px) on UI elements.
- don't use dense, cluttered layouts — screenshot shows generous whitespace and clear hierarchy.
- don't use all-caps for body text — screenshot shows sentence case or title case consistently.

---

## System Prompt (paste into AI agent)

```
Obsidian is a knowledge management app for developers and power users. Its website uses a deep dark theme (#1f1f1f) with a single vibrant purple accent (#8a5cf5) to highlight primary actions. Typography is a clean humanist-sans-serif with bold, tightly tracked display headings. The layout is spacious, centered, and highly structured. Critical constraints: avoid any white backgrounds, never use serif fonts for headlines, and maintain high contrast for readability. Focus on a minimalist, functional aesthetic that mirrors the app's privacy-focused and flexible nature.
```