What is Obsidian's primary brand color?

Obsidian's brand voltage is the violet at "#a78bfa" — Tailwind's violet-400, registered in the page CSS under --color-violet-400, --color-accent-400, and --code-value. It carries the wordmark, the underlined link accents ("thousands of plugins", "Learn more"), the crystal-mascot fill on the vault icon, and the keyword color in code samples. The filled pill button on "Get Obsidian for macOS" steps one tier darker to "#8a5cf5" (violet-500), and the deepest pressed variant lands at "#7c3aed" (violet-600). Obsidian uses the violet scarcely — 17 total occurrences on the page, never decoratively, never on a card background fill.

Does Obsidian's marketing site have a light mode?

No — the public marketing page is dark-only. The canvas is "#171717" (zinc-900) with a four-step surface ladder running through "#1e1e1e", "#262626", and "#363636" for cards, hairline borders, and the publish-instantly band. Light-mode tokens for "#ffffff" and "#e5e5e5" exist as Tailwind defaults in the CSS variable table but never paint a section background; they appear only inside the mobile-app screenshot inside the hero card. The Obsidian desktop and mobile apps both ship a full light theme, but it is not represented in this DESIGN.md.

What font does Obsidian use, and what should I use if I want exact parity?

Obsidian runs the platform system-font stack across every text role — ui-sans-serif, system-ui, -apple-system, then Roboto, Inter, Helvetica Neue, Arial, Noto Sans. There is no custom typeface, no Google Fonts request, no web-font payload. Display headlines render in San Francisco on macOS, Segoe UI on Windows, Roboto on Android — whatever the OS provides. The display scale runs from 60px weight 600 with -1.2px tracking down to 11px weight 400 captions; body text holds at 16px / 400 / 1.5 line-height. For exact parity in a Tailwind project, set fontFamily to the documented stack and ship no font files.

Why does Obsidian use 4px corners on cards instead of softer 12-16px rounding?

Obsidian's radius vocabulary is anchored on 4px, which appears 34 times across the page versus 19 instances of 8px, 14 instances of 6px, 13 of 12px, and just 7 pill instances. Cards render at 4px with a 1px hairline at "#262626"; the macOS-download pill is the one place pill geometry shows up. The 4px-dominant pattern inverts the convention of consumer SaaS — which leans on 12-16px rounded cards — and reads as software-documentation rather than marketing copy. Rectangles feel like file panes; pills would feel like a chat app.

Can I use this DESIGN.md to build my own React knowledge-base tool?

Yes. The file is structured for AI consumption — drop it into Claude, Cursor, or Copilot and the agent reproduces Obsidian's restraint (single violet voltage, system-font stack, four-step dark ladder, 4px card corners, screenshots framed in hairline cards) instead of a generic dark shadcn theme. You can also reference tokens directly: every hex ("#a78bfa", "#171717", "#262626"), every radius, and every spacing value is a quoted scalar you can paste into Tailwind config, CSS variables, or your own component library. The 19 components cover the macOS pill, the ghost link, the feature card frame, the plugin row, and the encrypted-sync surface.

What's missing from this DESIGN.md spec?

A short list, documented in the Known Gaps section. The marketing site does not ship a light theme, so light-mode tokens are not captured; the desktop and mobile apps both have a full light mode that lives in the in-product surfaces. Hover and focus states are documented for the macOS pill only — secondary ghost-link hover is observation-based. Animation and transition timings were not extracted; 150-200ms ease is a safe default. And the in-app plugin / theme gallery uses a richer multi-color tag palette that is not represented here — those colors live inside the product, not the marketing chrome.

Obsidian Design System

Obsidian's design system as a DESIGN.md file.

About Obsidian DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source obsidian.md

Productivity & SaaS
Documentation & Knowledge

Obsidian's marketing page reads like the readme for a privacy-first piece of software, not a SaaS landing. The page floor is "#171717" — zinc-900, never pure "#000000" — and headlines like "Sharpen your thinking." sit at 60px weight 600 with -1.2px tracking in the platform system-font stack. There is no custom display family, no web-font request, no atmospheric gradient. The only chromatic voltage is a single violet — "#a78bfa" on the wordmark and link accents, "#8a5cf5" as the lone filled-button background on the "Get Obsidian for macOS" pill. Below the hero, a 2×2 card grid hosts real product captures (vault graph, canvas board, plugin list, sync sheet) framed by 1px hairlines at "#262626". The card-as-screenshot pattern carries the entire page rhythm.

This DESIGN.md packages the spec into one machine-readable file written to the Google Labs format. Inside: 19 color tokens grouped into a violet brand ramp, a four-step dark surface ladder, structural hairlines, and a window-chrome triad ("#ff5f57", "#febc2e", "#28c840") used on the hero screenshot mockup; 12 typography roles all running ui-sans-serif from a 60px display down to 11px caption; a 6-step rounded scale anchored on 4px with a pill exit; a 7-step spacing scale on a 4px base unit; and 19 component definitions covering the violet macOS-download pill, the secondary ghost link, the feature-card frame, the dark top-nav, the plugin row, the encrypted-sync surface, and the in-card product screenshot frame.

Feed the file to Claude, Cursor, or Copilot and the agent reproduces Obsidian's restraint — system-font stack, single violet, four-step dark ladder, screenshots framed in cards — instead of a generic dark-theme template. Reference the tokens directly: every hex, font, radius, and spacing value is a quoted scalar you can paste into Tailwind config, CSS variables, or a component library. Obsidian is worth studying because it inverts the prevailing convention that personal-knowledge tools must announce themselves with a custom typeface and a gradient mesh; the brand identity is built almost entirely on what is absent.

What makes it distinct

System-font sovereigntyevery word on the page rides ui-sans-serif with zero web-font payload, where competitors load Inter or a custom display family
Single violet voltage#a78bfa carries the wordmark and the macOS download pill, with #8a5cf5 as the only filled-button background across the whole page
Zinc-900 canvas with #262626 hairlinesa four-step dark ladder (#171717, #1e1e1e, #262626, #363636) where most dark sites flatten to a single near-black
4px-dominant corner vocabulary34 occurrences of 4px versus 7 pill instances, anchoring a software-documentation rectangle geometry rather than consumer pill softness
Card-as-screenshot frameevery feature card hosts a real product capture (vault graph, canvas board, mobile sync sheet), so the chrome is a hairline frame around app evidence

Live at obsidian.md

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

obsidian.md

Explore Obsidian

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Obsidian design system FAQ

Common questions about Obsidian's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Obsidian — official site

The local-first markdown note-taking app — knowledge graph, plugins, end-to-end encrypted sync.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files.

Use Obsidian in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→