Obsidian — Free Core and Optional Add-on Pricing

---
version: alpha
name: Obsidian — Free Core and Optional Add-on Pricing
colors:
  canvas: '#0F0F0F'
  text: '#EEEEEE'
  observed-1: '#BCBCBC'
  observed-2: '#FFFFFF'
  observed-3: '#262626'
  observed-4: '#7C3AED'
typography:
  heading:
    fontFamily: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Roboto,
      Inter, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
    fontSize: 60px
    fontWeight: 600
    lineHeight: 60px
  body:
    fontFamily: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Roboto,
      Inter, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 40px
---

## Overview
A full dark pricing page that separates free core access from paired Sync/Publish services and Catalyst/Commercial support cards, with a compact billing switch and FAQ. Inspected on 2026-10-01 at 1440px and 390px viewport widths. This is a complete page/screen capture, not an isolated element crop.

## Colors
The YAML palette records computed opaque CSS text/action colors. The canvas is the computed background where opaque; for transparent roots it is sampled from the native screenshot corner. Gradients are described visually rather than assigned invented stop values. Gradients, illustration hues and brand-logo colors should not be flattened into one universal accent. The near-black/charcoal base supports pale text and selective violet.

## Typography
The selected h2 sample uses ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", 60px / 60px, weight 600; supporting text uses 36px / 40px. Its corresponding mobile sample is 44px / 48.4px. These are computed source samples, not a claim that all text uses the same style. Use properly licensed fonts or appropriate fallbacks when adapting.

## Layout
At desktop, centered introductory text leads to two side-by-side service cards and another two-card support tier. At 390px the headline becomes left-aligned, wraps across lines, and each pair stacks into a single reading column. The Yearly/Monthly control stays above the service cards; the FAQ remains below the support section. Measured screenshot bounds: 1440 × 3724px desktop and 390 × 5082px mobile. Two observed widths do not establish the exact CSS breakpoint rules.

## Elevation & Depth
Charcoal cards are only one subtle surface step above the black page. Green checks and violet buttons organize dense lists without large shadows.

## Shapes
Modestly rounded plan cards, a small segmented billing track, full-width rectangular actions and understated FAQ divider rows.

## Components
Free-core introduction, Yearly default billing state, Sync and Publish cards, optional Catalyst and Commercial support cards, FAQ and footer. Displayed prices are source evidence from the capture date, not current-price promises. Billing switching and FAQ expansion were not tested. Both service sign-up links lead to the same account-authentication shell, with different return destinations.

## Do's and Don'ts
Separate optional add-ons from the free product so the hierarchy stays honest. Keep billing cadence attached to each displayed amount. Do not flatten one-time and annual support pricing into a single subscription comparison. Provide keyboard focus, meaningful labels and reduced-motion alternatives in any implementation; those recommendations are not claims of source behavior tested here.