---
version: alpha
name: Obsidian
website: "https://obsidian.md"
description: >-
  A dark-canvas marketing system for the local-first note-taking app, anchored on a near-black zinc-900 floor ("#171717"), light-gray body ink ("#e5e5e5"), and a single violet voltage at "#a78bfa" that carries the wordmark, the "Get Obsidian for macOS" pill, and the underlined link accents. The entire page renders in the platform system-font stack — no custom face, no web-font payload — with display headings at 60px weight 600 and -1.2px tracking, large 36px deks at weight 400, and dense card grids where every tile hosts a real product screenshot framed by a 1px hairline at "#262626" with a 4px-radius corner. The brand voice is privacy-software documentation rather than SaaS marketing.

seo:
  title: "Obsidian Design System for React — Violet #a78bfa, system-ui, 19 components"
  metaDescription: "Obsidian's design system as a DESIGN.md file. Violet #a78bfa on zinc-900 canvas, system-ui stack, 19 colors, 19 components. For React, Next.js, and AI tools."
  highlights:
    - "System-font sovereignty — every 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 hairlines — a four-step dark ladder (#171717, #1e1e1e, #262626, #363636) where most dark sites flatten to a single near-black"
    - "4px-dominant corner vocabulary — 34 occurrences of 4px versus 7 pill instances, anchoring a software-documentation rectangle geometry rather than consumer pill softness"
    - "Card-as-screenshot frame — every feature card hosts a real product capture (vault graph, canvas board, mobile sync sheet), so the chrome is a hairline frame around app evidence"
  tags:
    - "Productivity & SaaS"
    - "Documentation & Knowledge"
  lastUpdated: "2026-05-13"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    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.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://obsidian.md"
      title: "Obsidian — official site"
      description: "The local-first markdown note-taking app — knowledge graph, plugins, end-to-end encrypted sync."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files."
  questions:
    - id: "primary-color"
      title: "What is Obsidian's primary brand color?"
      answer: "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."
    - id: "dark-mode"
      title: "Does Obsidian's marketing site have a light mode?"
      answer: "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."
    - id: "typography"
      title: "What font does Obsidian use, and what should I use if I want exact parity?"
      answer: "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."
    - id: "shape-language"
      title: "Why does Obsidian use 4px corners on cards instead of softer 12-16px rounding?"
      answer: "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."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own React knowledge-base tool?"
      answer: "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."
    - id: "known-gaps"
      title: "What's missing from this DESIGN.md spec?"
      answer: "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."

colors:
  primary: "#a78bfa"
  primary-bold: "#8a5cf5"
  primary-pressed: "#7c3aed"
  on-primary: "#ffffff"
  canvas: "#171717"
  surface-1: "#1e1e1e"
  surface-2: "#262626"
  surface-3: "#363636"
  hairline: "#262626"
  hairline-strong: "#404040"
  hairline-soft: "#525252"
  ink: "#e5e5e5"
  ink-muted: "#b3b3b3"
  ink-subtle: "#a3a3a3"
  ink-tertiary: "#666666"
  ink-deepest: "#0f0f0f"
  window-chrome-red: "#ff5f57"
  window-chrome-amber: "#febc2e"
  window-chrome-green: "#28c840"

typography:
  display-xl:
    fontFamily: "ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 60px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: "-1.2px"
  display-lg:
    fontFamily: "ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.11
    letterSpacing: "-0.4px"
  heading-md:
    fontFamily: "ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: "-0.2px"
  heading-sm:
    fontFamily: "ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  subhead:
    fontFamily: "ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0
  body-lg:
    fontFamily: "ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-md:
    fontFamily: "ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0
  body-sm:
    fontFamily: "ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  label-md:
    fontFamily: "ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0
  button-md:
    fontFamily: "ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0
  caption:
    fontFamily: "ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0
  micro:
    fontFamily: "ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0

rounded:
  none: "0px"
  xs: "2px"
  sm: "4px"
  md: "6px"
  lg: "8px"
  xl: "12px"
  pill: "9999px"

spacing:
  xxs: "2px"
  xs: "4px"
  sm: "6px"
  md: "8px"
  base: "12px"
  lg: "16px"
  xl: "24px"

components:
  button-primary:
    backgroundColor: "{colors.primary-bold}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "8px 16px"
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "8px 16px"
  button-primary-pressed:
    backgroundColor: "{colors.primary-pressed}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "8px 16px"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "8px 12px"
  link-accent:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.none}"
    padding: "0"
  feature-card:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "24px"
    border: "1px solid {colors.hairline}"
  feature-card-title:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink}"
    typography: "{typography.heading-sm}"
    rounded: "{rounded.lg}"
    padding: "0"
  hero-screenshot-frame:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "12px"
    border: "1px solid {colors.hairline}"
  window-chrome-bar:
    backgroundColor: "{colors.surface-2}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
    rounded: "{rounded.lg}"
    padding: "8px 12px"
    height: 32px
  plugin-row:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "12px 16px"
    border: "1px solid {colors.hairline}"
  toggle-on:
    backgroundColor: "{colors.primary-bold}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: "2px"
    height: 20px
  toggle-off:
    backgroundColor: "{colors.surface-3}"
    textColor: "{colors.ink-subtle}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: "2px"
    height: 20px
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.label-md}"
    rounded: "{rounded.none}"
    padding: "12px 24px"
    height: 56px
  nav-link:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "4px 8px"
  text-input:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "8px 12px"
    border: "1px solid {colors.hairline-soft}"
  vault-row:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "12px 16px"
    border: "1px solid {colors.hairline}"
  bullet-marker:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.pill}"
    padding: "0"
    height: 16px
  footer-band:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-subtle}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: "48px 24px"
  graph-node:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: "0"
    height: 8px
---

## Overview

Obsidian's marketing page is a dark-canvas software-documentation system that reads as a privacy app's readme rather than a productivity SaaS landing. The page floor is `{colors.canvas}` ("#171717") — zinc-900, with a faint warm cast and a four-step surface ladder running through `{colors.surface-1}` ("#1e1e1e"), `{colors.surface-2}` ("#262626"), and `{colors.surface-3}` ("#363636") for cards, hairline borders, and the publish-instantly band. Body ink sits at `{colors.ink}` ("#e5e5e5") with a quiet `{colors.ink-muted}` ("#b3b3b3") for deks and secondary copy. There is no atmospheric gradient anywhere on the page.

The single chromatic voltage is **violet scarcity**: `{colors.primary}` ("#a78bfa") carries the wordmark, the underlined link accents, the keyword color in code samples, and the crystal-mascot fill — appearing 17 times across the page. The macOS-download pill steps one tier deeper to `{colors.primary-bold}` ("#8a5cf5"), the only filled-button background on the entire page. Pressed lands on `{colors.primary-pressed}` ("#7c3aed"). Where most note-taking and project-management brands deploy a chromatic accent and a secondary accent and a gradient mesh, Obsidian commits to one violet and one geometry — a pill on macOS, a 4px rectangle on everything else.

The named principle is **system-font sovereignty**. Every word on the page rides `ui-sans-serif, system-ui, -apple-system` with zero web-font request. Display headings render at 60px weight 600 with -1.2px tracking in whatever face the operating system supplies — San Francisco on macOS, Segoe UI on Windows, Roboto on Android. The 36px / weight 400 dek immediately under each display line is the brand's signature typographic gesture: a near-display weight at near-body color, used to soften the headline rather than reinforce it.

Page rhythm leans on **card-as-screenshot frame**. Below the hero, a 2×2 card grid hosts real product captures — the vault knowledge graph, the canvas board, the plugin list, the mobile sync sheet. Each card is `{colors.surface-1}` filled with a 1px `{colors.hairline}` border and a 4-8px `{rounded.lg}` corner; the marketing chrome is a hairline frame around app evidence. There are no illustrations, no stock photography, no decorative iconography.

**Key Characteristics:**
- **Dark-canvas marketing system** — `{colors.canvas}` ("#171717") zinc-900, never pure black, with a four-step surface ladder.
- **Single violet voltage** — `{colors.primary}` ("#a78bfa") at 17 occurrences, the only chromatic color on the entire page.
- **System-font sovereignty** — every text role on `ui-sans-serif` with zero web-font payload.
- **Display tracking** pulls to -1.2px at 60px; body holds at 0.
- **Cards** render at `{rounded.lg}` 8px with 1px `{colors.hairline}` borders — 4px corners dominate the radius vocabulary.
- **Product screenshots** dominate the page. Each card is a hairline frame around an app capture.
- No atmospheric gradients. No second chromatic color. No custom typeface.

## Colors

- **Obsidian Violet (`#a78bfa`)** — frequency 17. Used as text (16), bg (1). Registered under `--color-violet-400`, `--color-accent-400`, and `--code-value`. The brand voltage, reserved for the wordmark, the underlined link accents, and the crystal mascot.
- **Violet Bold (`#8a5cf5`)** — frequency 8. Used as bg (8). The macOS-download pill background and the only filled-button color anywhere on the page. Steps to `#7c3aed` on press.
- **Violet Pressed (`#7c3aed`)** — frequency 2. Used as bg (2). The deepest pressed-state for the macOS pill; appears only on active button events.
- **Canvas Zinc (`#171717`)** — frequency 4. Used as bg (4). The page floor across every section, holding the entire dark marketing rhythm without an alternating-band pattern.
- **Surface-1 (`#1e1e1e`)** — frequency 4. Used as bg (4). Card and feature-tile fills, one tier lighter than canvas, with hairline borders.
- **Surface-2 (`#262626`)** — frequency 36. Used as text (12), bg (18), border (6). Doubles as the dominant hairline color (`{colors.hairline}`) and as the lifted top-nav surface fill.
- **Surface-3 (`#363636`)** — frequency 4. Used as border (4). The strongest hairline tier, used on hovered cards and on the encrypted-sync band separator.
- **Ink (`#e5e5e5`)** — frequency 751. Used as text (284), border (467). The workhorse body color, also doubling as a faint hairline inside the embedded mobile-app screenshot.
- **Ink Muted (`#b3b3b3`)** — frequency 124. Used as text (124). The hero dek color and secondary body copy — the "free and lightweight app for your private thoughts" sentence under each display headline.
- **Ink Subtle (`#a3a3a3`)** — frequency 17. Used as text (17). Caption-tier copy on footer rows and feature-card metadata.
- **Hairline Strong (`#404040`)** — frequency 12. Used as bg (1), border (11). The card-divider color on the plugin list and the inset hairline on toggle backgrounds.
- **Hairline Soft (`#525252`)** — frequency 6. Used as bg (3), border (3). Tertiary divider on FAQ rows and the encrypted-sync surface inner border.
- **Ink Deepest (`#0f0f0f`)** — frequency 2. Used as bg (1), gradient (1). The footer floor, one shade deeper than canvas to mark the band transition.
- **Window-chrome Red (`#ff5f57`)** — frequency 1. Used as bg (1). The macOS-style close-window dot inside the hero screenshot mockup.
- **Window-chrome Amber (`#febc2e`)** — frequency 1. Used as bg (1). The minimize dot in the same hero mockup.
- **Window-chrome Green (`#28c840`)** — frequency 1. Used as bg (1). The maximize dot completing the macOS chrome triad.

## Typography

Obsidian runs the platform system-font stack across every text role — `ui-sans-serif, system-ui, -apple-system, "system-ui", Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", sans-serif`. There is no custom typeface, no Google Fonts request, no web-font payload anywhere in the page. Display headlines render in San Francisco on macOS, Segoe UI on Windows, Roboto on Android — whatever the operating system supplies natively.

The display tier sits at 60px weight 600 with -1.2px tracking; the matching `display-lg` dek lands at 36px weight 400 with -0.4px tracking — a deliberately large secondary line that absorbs the visual weight of the headline above it. Body copy holds at 16px weight 400 / 1.5 line-height for the primary paragraph and 14px / 1.43 for inside-card body. Captions run 12px / 1.33 and the smallest tier — micro labels and footer fine print — sits at 11px / 1.5. Weight discipline is restrained: 400 carries body, 500 marks links and labels, 600 marks display and section headings. There is no weight 700 anywhere except inside the in-card screenshot mockups.

## Layout

The page rides a centered single-column layout capped at roughly 672px for prose blocks and a 2-column grid for feature cards. Section padding lands at 96px top/bottom on the hero and the spark-ideas band, with 48px between dense rows. Card interiors use 24px padding, with 12px inner spacing between metadata rows. The 4px base spacing unit anchors a `4 / 6 / 8 / 12 / 16 / 24` scale — none of the larger tokens you would find on a fintech or marketplace page. Card grids hold a 24px gap between tiles; the feature-card pair on the second band uses a 16px gap to read as one unit.

## Elevation & Depth

Obsidian carries hierarchy with **surface ladder over shadows**. Canvas at `{colors.canvas}` is the page floor; `{colors.surface-1}` lifts cards one tier; `{colors.surface-2}` lifts the top-nav and the encrypted-sync band one tier above that; `{colors.surface-3}` marks hovered cards. There is no drop shadow on any card in the marketing chrome — every elevation cue is a surface-fill change paired with a 1px hairline border at `{colors.hairline}` ("#262626"). The only shadows in the system live inside the embedded mobile-app screenshot, where iOS-style elevation is rendered as part of the product capture rather than as marketing chrome.

## Shapes

The radius vocabulary is anchored on 4px — `{rounded.sm}` appears 34 times across the page, more than any other value. `{rounded.md}` 6px and `{rounded.lg}` 8px follow at 14 and 19 occurrences; `{rounded.xl}` 12px lands on hero-screenshot frames and the encrypted-sync surface; `{rounded.pill}` 9999px is reserved for one place — the violet macOS-download pill in the hero. Cards default to 8px corners; toggles, badges, and the bullet markers next to feature copy use the pill. The 4px-dominant geometry inverts the consumer-SaaS convention of 12-16px rounded cards and reads as software-documentation rather than marketing.

## Components

- **button-primary**: violet macOS-download pill at `{colors.primary-bold}` ("#8a5cf5"), `{rounded.pill}`, 8/16px padding. The only filled button on the page.
- **button-primary-hover** / **button-primary-pressed**: hover lightens to `{colors.primary}` ("#a78bfa"); pressed deepens to `{colors.primary-pressed}` ("#7c3aed").
- **button-secondary**: ghost violet "More platforms" link at `{colors.primary}` text on canvas, `{rounded.sm}`, 8/12px padding.
- **link-accent**: inline underlined violet links inside body copy ("thousands of plugins", "Learn more"), `{colors.primary}` text, no padding, no radius.
- **feature-card**: dark zinc-900 card at `{colors.surface-1}` with a 1px `{colors.hairline}` border, `{rounded.lg}` corner, 24px padding. The repeating tile shape across "Links / Graph / Canvas / Plugins" and the encrypted-sync band.
- **feature-card-title**: `{typography.heading-sm}` at 20px weight 600 sitting inside each feature card above the body block.
- **hero-screenshot-frame**: dark card holding the "Writing is telepathy" hero capture, 1px `{colors.hairline}` border, 12px inner padding, 8px corner.
- **window-chrome-bar**: the macOS-style window chrome inside the hero screenshot — `{colors.surface-2}` fill, 32px height, hosting the red/amber/green dots.
- **plugin-row**: dark card row with the toggle on the right (Calendar / Kanban / Dataview / Outliner), `{colors.surface-1}` fill, 12/16px padding, 4px corner.
- **toggle-on** / **toggle-off**: pill-shaped toggle, 20px height, `{colors.primary-bold}` violet when on and `{colors.surface-3}` gray when off.
- **top-nav**: canvas-color nav bar at 56px height, 12/24px padding, label-md typography, wordmark in violet on the left.
- **nav-link**: muted top-nav items ("Download", "Pricing", "Sync", "Publish", "Enterprise") in `{colors.ink-muted}` body-md.
- **text-input**: dark form input on `{colors.surface-1}` with 1px `{colors.hairline-soft}` border, 8/12px padding, 4px corner — used on the encrypted-sync waitlist form.
- **vault-row**: row showing a vault entry in the encrypted-sync mockup, `{colors.surface-1}` fill, 12/16px padding, 4px corner.
- **bullet-marker**: violet inline pill marker preceding the three sync-feature rows (editing, collaboration, fine-grained control) in the encrypted-sync band.
- **footer-band**: deepest-canvas band at the bottom of the page, `{colors.ink-deepest}` floor, 48/24px padding, caption-tier copy in `{colors.ink-subtle}`.
- **graph-node**: dot in the knowledge-graph visualization inside the "Writing is telepathy" hero card, 8px pill, `{colors.ink}` fill.

## Do's and Don'ts

**Do** keep `{colors.primary-bold}` ("#8a5cf5") as the only filled-button background on the page. Adding a second filled button at any chromatic color — green, blue, even a violet hover variant — collapses the page's signal-to-noise ratio.

**Do** render every text role in `ui-sans-serif, system-ui` without a web-font fallback. The system-font choice is the brand identity; substituting Inter or a custom face is the loudest change you can make.

**Do** frame product screenshots in a `{colors.surface-1}` card with a 1px `{colors.hairline}` border and a 4-8px corner. The hairline frame is the page's only chrome treatment.

**Don't** use `{colors.surface-2}` ("#262626") for card backgrounds — it appears 36 times but 467 of those uses are as `borderColor` rather than fill. Mistaking it for a surface-1 substitute reads as a 1-tier darker card than the rest of the grid.

**Don't** reach for `{colors.hairline-strong}` ("#404040") as a body-text color. It appears as `borderColor` 11 times and as `backgroundColor` once — it is a divider, not ink. For body copy use `{colors.ink}` ("#e5e5e5") or `{colors.ink-muted}` ("#b3b3b3").

**Don't** add a second chromatic accent (a blue link, an orange CTA, a teal badge). The page commits to one violet and one geometry. Any second hue reads as theme drift, since the violet is intentionally the only chromatic event in 18,000+ rendered pixels of dark canvas.

**Don't** use the `{rounded.pill}` 9999px radius anywhere except the macOS-download pill and the toggle bullet markers. The 4px-dominant geometry is what reads as software-documentation; rounding cards to pills would push the system toward consumer-app softness.

**Don't** load the Tailwind violet-50, violet-100, or violet-200 tints inside the dark canvas — they appear in the CSS variable table but never paint a surface. Light-tint violet on `{colors.canvas}` reads as a different theme entirely.

## Known Gaps

- The marketing site is dark-only; light-mode tokens are not captured. The Obsidian desktop and mobile apps both ship a light theme that lives in product surfaces.
- Hover state is documented for the macOS-download pill; secondary ghost-link hover is observation-based.
- Animation and transition timings were not extracted; 150-200ms ease is a safe default.
- The in-app plugin and theme gallery uses a richer multi-color tag palette that is not represented in marketing chrome.
- Mobile responsive breakpoints are inferred from the captured 1440px page; the mobile composition of the feature-card grid is not separately captured.
- The window-chrome triad ("#ff5f57", "#febc2e", "#28c840") inside the hero screenshot is part of the macOS UI mockup rather than Obsidian brand tokens; they appear in the spec for fidelity but should not propagate to non-screenshot surfaces.