Obsidian — Linked-Thought Feature Grid

---
version: alpha
name: Obsidian — Linked-Thought Feature Grid
colors:
  canvas: '#0F0F0F'
  text: '#EEEEEE'
  observed-1: '#BCBCBC'
  observed-2: '#FFFFFF'
  observed-3: '#1F1F1F'
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: 24px
    fontWeight: 400
    lineHeight: 32px
---

## Overview
An isolated Spark ideas section pairing a large heading with four dark cards for Links, Graph, Canvas and Plugins, each using a concrete product visualization. Inspected on 2026-10-01 at 1440px and 390px viewport widths. This reference crops only `.container.cards:has(h2)` from the source page.

## 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 24px / 32px. 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
A constrained heading and supporting paragraph introduce a two-column desktop grid of four cards. At 390px the cards stack vertically, keeping each product illustration attached to its label and description. The capture preserves the entire section rather than separate nested crops of each card. Measured screenshot bounds: 1120 × 1351px desktop and 352 × 2682px mobile. Two observed widths do not establish the exact CSS breakpoint rules.

## Elevation & Depth
Dark charcoal card surfaces sit on a nearly black canvas. Interface imagery supplies internal borders and violet emphasis; graph nodes and canvas panels stay inside their respective examples.

## Shapes
Gently rounded rectangles and restrained gutters unify the four very different product demonstrations.

## Components
Spark ideas introduction followed by Links, Graph, Canvas and Plugins. The illustrations communicate back-links, networked notes, spatial boards and community extensions. Product controls inside the demonstrations were not tested.

## Do's and Don'ts
Choose one concrete visualization per feature and keep the label above it. Preserve equal visual weight across the grid. Do not invent feature metrics or turn the illustrations into claims of tested functionality. Provide keyboard focus, meaningful labels and reduced-motion alternatives in any implementation; those recommendations are not claims of source behavior tested here.