Obsidian — Basalt Canvas and Purple Product Story

---
version: alpha
name: Obsidian — Basalt Canvas and Purple Product Story
colors:
  canvas: '#0F0F0F'
  text: '#EEEEEE'
  observed-1: '#BCBCBC'
  observed-2: '#FFFFFF'
  observed-3: '#7C3AED'
  observed-4: '#A78BFA'
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: 400
    lineHeight: 40px
---

## Overview
A dark knowledge-tool landing page with a left-aligned headline, desktop/mobile product collage, linked-note feature cards, alternating Sync and Publish sections, and a restrained purple closing action. 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 h1 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 50.7px / 55.77px. 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
A wide centered desktop container holds the left-aligned opening copy and a large app demonstration. Feature cards form two columns; Sync and Publish combine prose and product surfaces. At 390px navigation becomes a menu control, the opening copy is centered and wraps, and cards and feature rows stack. The app demonstration deliberately extends outside its masked mobile frame; its offscreen sidebar has a nested scroller and is not expanded into the page. Measured screenshot bounds: 1440 × 6715px desktop and 390 × 9263px mobile. Two observed widths do not establish the exact CSS breakpoint rules.

## Elevation & Depth
Near-black canvas and slightly lighter card surfaces create shallow layers. The purple gem and app-window collage supply most of the perceived depth; do not turn every text block into a floating panel.

## Shapes
Soft rectangular cards, rounded purple download buttons, fine app-panel separators and a phone-shaped inset. Large areas of darkness separate the major product stories.

## Components
Desktop navigation, platform-aware download action, interactive-looking app preview, Links/Graph/Canvas/Plugins cards, Sync benefits, Publish showcase, community links and multi-column footer. Only resting states and two widths were inspected; product-demo interactions, downloads and menu expansion were not tested.

## Do's and Don'ts
Keep the bright violet action rare and the long explanatory copy muted. Preserve the separation between the marketing page and embedded product preview. Do not reproduce the demo as a functional editor or claim every clipped sidebar item was inspected. Provide keyboard focus, meaningful labels and reduced-motion alternatives in any implementation; those recommendations are not claims of source behavior tested here.