stnd.buildSTANDARD MANUAL2026-07-15

2.7 Obsidian Design Tokens

Token mapping specifications, body classes, and CSS injection layers for the Obsidian integration.

2.7 Obsidian Design Tokens

Specifications for frontmatter key mapping, runtime body classes, and CSS stylesheet injection order within the Obsidian environment.

1. Token Mapping Protocol

The plugin parses bare frontmatter keys from the active Markdown document and maps them directly to CSS custom properties.

  • Mapping Invariant: The CSS custom property name corresponds exactly to the frontmatter key name, prefixed with --.
  • Target Container: Properties are injected onto the html body element with !important flags to ensure precedence.
# Frontmatter Input
font-text: "Inter"
optical-ratio: 1.25
color-light-accent: "#b45309"

Translates to:

/* Runtime Style Injection */
html body {
  --font-text: "Inter" !important;
  --optical-ratio: 1.25 !important;
  --color-light-accent: #b45309 !important;
}

2. Typography Tokens

Typography layout and scale variables are read when Settings → Typography is active.

Frontmatter Key CSS Custom Property Functional Role
font-text --font-text Body text typeface (auto-imported from Google Fonts).
font-header --font-header Heading typeface (H1–H6 and inline titles).
font-monospace --font-monospace Monospace typeface for code elements.
font-interface --font-interface Workspace UI typeface override.
optical-ratio --optical-ratio Modular type scale ratio (e.g. 1.25, 1.333).
font-density --font-density Line-height multiplier.
line-width --line-width Maximum width constraint of the prose line.
font-weight --font-weight Regular text weight.
font-weight-bold --font-weight-bold Bold text weight.
font-header-weight --font-header-weight Heading text weight.
font-header-letter-spacing --font-header-letter-spacing Heading letter-spacing tracking.

3. Color Tokens

Light Theme Spectrum

Active when Settings → Color is enabled.

Frontmatter Key CSS Custom Property Functional Role
color-light-foreground --color-light-foreground Primary text and line art.
color-light-background --color-light-background Canvas background.
color-light-accent --color-light-accent System accent, links, and focus boundaries.
color-light-red --color-light-red Warning/Error semantic color.
color-light-green --color-light-green Success semantic color.
color-light-bold --color-light-bold Targeted color override for bold elements.
color-light-italic --color-light-italic Targeted color override for italic elements.

Dark Theme Spectrum

Active when Settings → Color is enabled. Swap -light- for -dark- to target dark mode containers.

Frontmatter Key CSS Custom Property Functional Role
color-dark-foreground --color-dark-foreground Primary text and line art.
color-dark-background --color-dark-background Canvas background.
color-dark-accent --color-dark-accent System accent, links, and focus boundaries.

4. Runtime Body Classes

The plugin reflects the active workspace state by appending functional classes to the application <body> element:

Class Name Target State
stnd System plugin active.
stnd-note Active file is a valid Markdown document.
stnd-reading Active workspace leaf in Reading View.
stnd-editing Active workspace leaf in Source/Live Preview.
stnd-canvas Active file is an Obsidian Canvas.
stnd-typography Typography adapter layer enabled.
stnd-color Color adapter layer enabled.
stnd-vertical-rhythm Vertical rhythm grid adapter active.
stnd-note-published Active document contains publish: true.
cssclass-{name} Document contains {name} in its cssclasses array.

5. CSS Injection Hierarchy

Stylesheets are loaded at runtime in a deterministic hierarchy to guarantee styling predictability:

  1. #stnd-global: Vault-wide global style layer.
  2. #stnd-note: Stylesheet cache generated by cssclasses and Snippet compiler.
  3. #stnd-frontmatter: Specific document token variables. Since this layer is declared last, document-specific tokens override global settings.