---
title: "Obsidian design system"
variant: extended
source: https://obsidian.md/
captured_at: 2026-10-12
theme: dark
industry: productivity
generator: Design DNA (https://four.wiralomi.com/style/obsidian-md)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Obsidian · Design System

> A quiet dark canvas for connected thinking.

**Theme:** dark · **Industry:** productivity · **Source:** https://obsidian.md/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Obsidian’s homepage pairs a near-black canvas with restrained violet accents and direct views of the product. Spacious sections and concise copy frame the app as a private, flexible workspace for thinking.

## North star

Keep the canvas nearly black and spacious; use violet sparingly to direct attention toward actions and meaningful links.

## Overview

The page is built on a nearly black canvas, with subtle charcoal bands and cards creating contrast without breaking the dark, quiet mood. Off-white headings and two close shades of gray carry most of the reading; violet is reserved for the primary download action, selected links, and small interface details. System sans-serif typography keeps the page crisp and familiar, moving from a large, tightly tracked hero headline to compact descriptive copy. A centered, constrained content area alternates between product-led showcases and feature sections, with generous vertical pauses between them. Screenshots of the desktop and mobile app do most of the storytelling: they are framed as dark interface surfaces rather than decorative lifestyle imagery. Rounded cards, fine borders, and restrained inset highlights establish depth, while the mostly flat canvas prevents the long page from feeling crowded. The overall effect is calm, technical, and focused on the product itself.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Obsidian Canvas | `#0f0f0f` | `--color-obsidian-canvas` | brand | Dominant page background across the hero and all major sections. |
| Soft Ash | `#bcbcbc` | `--color-soft-ash` | neutral | Muted navigation, footer, and link text against the dark canvas. |
| Lavender Signal | `#a78bfa` | `--color-lavender-signal` | accent | Prominent text links and small violet accents. |
| Charcoal Panel | `#1f1f1f` | `--color-charcoal-panel` | surface | Feature cards and community link panels. |
| Cloud Text | `#eeeeee` | `--color-cloud-text` | neutral | Headings, card copy, and high-contrast interface text. |
| Muted Silver | `#b3b3b3` | `--color-muted-silver` | neutral | Supporting body copy and secondary information. |
| Violet Edge | `#8a5cf5` | `--color-violet-edge` | accent | Sparse badge and decorative details; not a dominant page color. |
| Action Violet | `#7c3aed` | `--color-action-violet` | accent | Primary download buttons with white text. |
| Graph Green | `#22c55e` | `--color-graph-green` | semantic | Small status badges and green nodes inside product interface imagery. |
| Deep Panel | `#171717` | `--color-deep-panel` | surface | Subtle card and inset surface variation. |
| Divider Charcoal | `#262626` | `--color-divider-charcoal` | surface | Fine card borders and understated content separators. |
| Graph Gold | `#eab308` | `--color-graph-gold` | semantic | Badge color appearing in embedded product content, not core branding. |
| Interface Indigo | `#6366f1` | `--color-interface-indigo` | semantic | Minor badge or UI detail; keep limited to product imagery. |
| Interface Coral | `#f87171` | `--color-interface-coral` | semantic | Minor badge or UI detail; not a defining page color. |
| Graphite Line | `#404040` | `--color-graphite-line` | neutral | Hairline borders and subdued control backgrounds. |
| Slate Border | `#363636` | `--color-slate-border` | neutral | Occasional outlines and media boundaries. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Light surfaces within interface previews and badge details. |
| Earth Accent | `#713f12` | `--color-earth-accent` | semantic | Color found in embedded product content; avoid using as a page-level brand accent. |

### Semantic aliases

`--color-canvas` → `#0f0f0f` (Obsidian Canvas) · `--color-surface` → `#1f1f1f` (Charcoal Panel) · `--color-surface-2` → `#171717` (Deep Panel) · `--color-surface-3` → `#ffffff` (Paper White) · `--color-surface-4` → `#713f12` (Earth Accent) · `--color-text` → `#eeeeee` (Cloud Text) · `--color-text-muted` → `#bcbcbc` (Soft Ash) · `--color-text-subtle` → `#b3b3b3` (Muted Silver) · `--color-border` → `#404040` (Graphite Line) · `--color-accent` → `#a78bfa` (Lavender Signal) · `--color-accent-2` → `#7c3aed` (Action Violet) · `--color-accent-3` → `#713f12` (Earth Accent) · `--color-on-accent` → `#ffffff` (Paper White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#eeeeee` | `#0f0f0f` | 16.52:1 | AAA |
| `#eeeeee` | `#1f1f1f` | 14.21:1 | AAA |
| `#eeeeee` | `#171717` | 15.45:1 | AAA |
| `#eeeeee` | `#ffffff` | 1.16:1 | fail |
| `#bcbcbc` | `#0f0f0f` | 10.09:1 | AAA |
| `#bcbcbc` | `#1f1f1f` | 8.68:1 | AAA |
| `#bcbcbc` | `#171717` | 9.44:1 | AAA |
| `#bcbcbc` | `#ffffff` | 1.9:1 | fail |
| `#b3b3b3` | `#0f0f0f` | 9.14:1 | AAA |
| `#b3b3b3` | `#1f1f1f` | 7.86:1 | AAA |

### Gradients

- `linear-gradient(to top, rgb(15, 15, 15), rgba(15, 15, 15, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ui-sans-serif | `--font-body` | system | 400, 500, 600, 700 | Navigation, hero and section headings, body copy, links, and buttons. | Inter |

- **ui-sans-serif:** System sans-serif throughout; use regular to semibold weights, with slight negative tracking on display text and no forced uppercase.

### Type scale — Perfect Fourth (ratio ≈ 1.338, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 600 | 1 | -0.02em | — | ui-sans-serif | Oversized hero headline, set compactly with slightly tight tracking. |
| h1 | 36px | 400 | 1.11 | 0 | — | ui-sans-serif | Primary section headings and large feature titles. |
| h2 | 24px | 400 | 1.33 | 0 | — | ui-sans-serif | Secondary feature headings and prominent supporting copy. |
| h3 | 20px | 400 | 1.25 | 0 | — | ui-sans-serif | Card titles and smaller feature headings. |
| h4 | 18px | 400 | 1.33 | 0 | — | ui-sans-serif | Tertiary headings and compact content group labels. |
| body | 14px | 400 | 1.4 | 0 | — | ui-sans-serif | Main descriptive copy and supporting feature text. |
| caption | 13px | 400 | 1.5 | 0 | — | ui-sans-serif | Small labels and secondary interface-like details. |
| button | 20px | 500 | 1.4 | 0 | — | ui-sans-serif | Primary download call-to-action labels. |
| nav | 14px | 500 | 1.43 | 0 | — | ui-sans-serif | Header links and compact navigation controls. |
| link | 24px | 500 | 1.33 | 0 | — | ui-sans-serif | Large standalone action links such as download prompts. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 3, 4, 6, 8, 12, 16, 23, 24, 32, 48, 96 px.
- Section rhythm 96px · element gap 6px · card padding — · max content width 1120px.

Use a centered content frame with a measured maximum width of 1120px and generous side margins. The hero is left-aligned, with headline and download actions above a large product preview. Lower sections alternate between single-column narratives, two-column feature splits, and card grids; the final CTA is centered. Preserve the spacious rhythm: the measured section gap is 96px, while compact text and card groupings sit closer together. Keep overall density low and avoid introducing strong background bands, since the page sections share one canvas.

## Shape & elevation

- Radius: button `8px` · card `12px` · media `4px` · badge `2px` · nav `8px` · link `12px` · xs `2px` · sm `4px` · md `6px` · lg `8px` · xl `12px` · pill `9999px`
- Shadow `inset` (card, link): `rgb(255, 255, 255) 0px 0px 0px 0px inset, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px`
- Shadow `inset-2` (button, footer): `rgb(255, 255, 255) 0px 0px 0px 0px inset, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `inset-3` (button): `rgb(255, 255, 255) 0px 0px 0px 0px inset, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px`
- Shadow `inset-4` (card): `rgba(255, 255, 255, 0.024) 0px 1px 0px 1px inset, rgba(0, 0, 0, 0.05) 0px 5px 10px 5px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The canvas is mostly flat. Cards gain separation through charcoal fills, subtle borders, and faint inset highlights rather than strong outlines. Layer product screenshots and small device previews over dark surfaces; reserve deeper shadows for media and card emphasis, keeping them understated.

## Imagery

Lead with detailed desktop and mobile screenshots of the app, showing notes, graph views, and real interface content. Feature cards use cropped interface previews as evidence of functionality rather than decorative photography. Product imagery stays dark and framed within rounded media surfaces, with occasional violet or green interface details. No prominent photography or video-led treatment is visible.

## Components

### Header navigation

Compact horizontal navigation on the dark canvas, with subdued links and brand mark; selected controls use a quiet outlined treatment.

### Hero download action

Violet button with white text, an 8px radius, and generous horizontal padding; a muted text link sits alongside it.

### Product showcase

Large desktop app preview with a smaller mobile screen layered near its lower edge, both set against the dark canvas.

### Feature card

Charcoal card with a rounded 12px corner, product-focused title and copy, and an embedded interface image.

### Feature split

Text and feature details share a broad two-column composition with a prominent app or sync interface preview.

### Community link card

Dark rounded panel with a concise destination title and explanatory copy, presented as a clickable support resource.

### Footer

Dense multi-column directory on the dark canvas, with a brand and social area beside grouped navigation links.

### Measured component styles

- **Primary button** (“Get Obsidian for Windows”): background #7c3aed · text #ffffff · radius 8px · padding 16px 24px · 500 20px ui-sans-serif · shadow rgb(255, 255, 255) 0px 0px 0px 0px inset, rgba(255, 255, 255, 0.1) 0px 0px 0px 1
- **Secondary button**: background #404040 · text #e5e5e5 · radius 6px · padding 6px 12px · 500 14px ui-sans-serif
- **Link** (“Join us on Discord Get help, ask questio”): background #1f1f1f · text #eeeeee · radius 12px · padding 24px · 400 18px ui-sans-serif · shadow rgb(255, 255, 255) 0px 0px 0px 0px inset, rgba(255, 255, 255, 0.05) 0px 0px 0px 
- **Card** (“Links Create connections between your no”): background #1f1f1f · text #eeeeee · radius 12px · padding 0px · 400 20px ui-sans-serif · shadow rgb(255, 255, 255) 0px 0px 0px 0px inset, rgba(255, 255, 255, 0.05) 0px 0px 0px 
- **Badge** (“Lecture 1”): background #22c55e · text #000000 · radius 2px · padding 0px 2px · 400 12px ui-sans-serif
- **Navigation item** (“Download Pricing Sync Publish Enterprise”): transparent background · text #eeeeee · radius 0px · padding 0px · 400 14px ui-sans-serif

## Do

- Use #0f0f0f as the continuous page canvas.
- Reserve #7c3aed for the primary download action.
- Use #a78bfa for select text links and accents.
- Show realistic product interfaces as the main visual proof.
- Leave generous vertical pauses between major sections.
- Use charcoal surfaces and fine borders to define cards.

## Don't

- Do not introduce bright section backgrounds.
- Do not use violet as a large decorative field.
- Do not replace product screenshots with lifestyle photography.
- Do not crowd the page with dense copy or controls.
- Do not add heavy shadows or thick borders.
- Do not treat illustration-only badge colors as core brand colors.

## Agent prompt

Build a new page in Obsidian’s restrained dark product style. Use Obsidian Canvas (#0f0f0f) as the continuous background, Cloud Text (#eeeeee) for headings, and Soft Ash (#bcbcbc) or Muted Silver (#b3b3b3) for supporting copy. Use Action Violet (#7c3aed) only for the main CTA, with Lavender Signal (#a78bfa) on selected text links. Keep content within a centered 1120px maximum-width frame and preserve spacious section breaks. Use system sans-serif typography, crisp headings, and compact readable body copy. Make product screenshots or interface mockups the primary imagery. Build cards from Charcoal Panel (#1f1f1f) and Deep Panel (#171717), with subtle borders and rounded corners. Keep the overall page calm, technical, and uncluttered; avoid loud gradients, decorative photography, and excessive shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Left-aligned headline and copy above download actions, followed by a wide desktop and mobile product showcase. | Primary download action, Secondary platform link, Product preview | Dark canvas, Large headline, Violet CTA, Layered app screenshots |
| 2 | feature-split | Single-column section with explanatory text and a separate product identity panel. | Privacy reassurance, Offline access, Learn-more links | Muted copy, Fine separators, Product mark panel |
| 3 | feature-grid | Section heading and intro above a two-column grid of four feature cards. | Feature discovery, Interface previews, Links to more details | Charcoal rounded cards, Compact descriptions, Embedded app screenshots |
| 4 | feature-split | Feature copy and stacked benefits on one side, with a large sync interface preview on the other. | Security explanation, Feature list, Learn-more link | Dark feature copy, Violet-framed media, Compact benefit rows |
| 5 | product-showcase | Section introduction and three short benefits lead into a wide documentation-site preview. | Learn-more link, Benefit scan, Explore published example | Feature labels, Wide dark browser preview, Subtle text links |
| 6 | cta | Centered closing headline and download action above three resource cards, followed by a multi-column footer. | Final download action, Community destinations, Footer navigation | Centered CTA, Rounded resource cards, Grouped footer links |

## Source CSS custom properties (selected)

```css
--color-red: #fb464c;
--color-orange: #e9973f;
--color-yellow: #e0de71;
--color-green: #44cf6e;
--color-cyan: #53dfdd;
--color-blue: #027aff;
--color-purple: #a882ff;
--color-pink: #fa99cd;
--star-color: #404040;
--star-background: #fb923c;
--color-inherit: inherit;
--color-current: currentColor;
--color-transparent: transparent;
--color-black: #000;
--color-white: #fff;
--color-slate-50: #f8fafc;
--color-slate-100: #f1f5f9;
--color-slate-200: #e2e8f0;
--color-slate-300: #cbd5e1;
--color-slate-400: #94a3b8;
--color-slate-500: #64748b;
--color-slate-600: #475569;
--color-slate-700: #334155;
--color-slate-800: #1e293b;
--color-slate-900: #0f172a;
--color-slate-950: #020617;
--color-gray-50: #fafafa;
--color-gray-100: #f5f5f5;
--color-gray-200: #e5e5e5;
--color-gray-300: #d4d4d4;
--color-gray-400: #a3a3a3;
--color-gray-500: #737373;
--color-gray-600: #525252;
--color-gray-700: #404040;
--color-gray-800: #262626;
--color-gray-900: #171717;
--color-gray-950: #0a0a0a;
--color-zinc-50: #fafafa;
--color-zinc-100: #f4f4f5;
--color-zinc-200: #e4e4e7;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/obsidian-md