Themes & Design Tokens

The Standard Garden Obsidian plugin turns frontmatter metadata into a live, typographic design system. You can style individual notes or your entire workspace using bare frontmatter keys that map directly to CSS variables with zero abstraction.

1. How Tokens Work

The plugin reads frontmatter keys in the active note, checks them against the canonical token dictionary, and injects a matching CSS variable with !important onto html body:

---
font-text: "EB Garamond"
optical-ratio: 1.25
color-light-accent: "#b45309"
---

Translates at runtime directly to:

html body {
  --font-text: "EB Garamond" !important;
  --optical-ratio: 1.25 !important;
  --color-light-accent: #b45309 !important;
}

The key name is the CSS property name minus the -- prefix. No namespace prefix, no extra configuration.

2. Built-in Curated Themes

Standard Garden includes 27+ curated themes crafted for typography and long-form reading. You can activate a theme globally in plugin settings or apply it to a single note:

---
theme: humanist
---

Popular Themes

Every theme in the plugin’s Default Theme menu works as a theme: value. A few to start from:

You can also switch themes dynamically using the command palette: Standard Garden: Set note theme or by clicking Let’s Hyphe design this in the side panel to generate a custom palette tailored to your note’s subject matter.

3. Typography Tokens

Active when Settings → Standard Garden → Appearance → Standard Design System is enabled. It is off by default, so enabling the plugin never changes how your notes look.

4. Color Tokens

Light Theme Palettes

Dark Theme Palettes

The dark mode palette mirrors the exact same structure: replace -light- with -dark- (e.g., color-dark-background, color-dark-foreground, color-dark-accent). Both sets can live simultaneously in the same note, adapting automatically when Obsidian toggles between light and dark modes.

5. Fine Color Control

You can also target specific semantic elements regardless of theme mode:

Live typographic mirroring: Obsidian as your visual canvas

Standard Garden eliminates the gap between local note-taking and web presentation. The official Obsidian plugin embeds our complete font foundry and design engine directly inside Obsidian. It is opt-in: turn it on in Settings → Standard Garden → Appearance → Standard Design System.

• Real-Time Display Mirroring: Whenever you specify a temperament in frontmatter (theme: humanist, theme: blueprint, theme: editorial, theme: academic, theme: international, theme: gallery, theme: forest, theme: eink), Obsidian instantly switches its live rendering to that exact atmosphere.
• Embedded Foundry Typography: The plugin bundles authentic typefaces (such as EB Garamond, Söhne, Newsreader, Instrument Sans, and MonoLisa) without requiring any local system font installation.
• True-to-Web Fidelity: Spacing, line heights, font contrasts, and margins in Obsidian mirror the live publication on standard.garden. What you compose locally is precisely what your readers experience online.
• Vault Default & Per-Note Overrides: Choose a default aesthetic in Garden panel → Design (or plugin settings) to grace your entire vault, or customize specific notes individually with the theme: key.

See Also

• The Obsidian Atelier — installation, sync, and publication workflow
• CSS & Rendering Hooks — classes injected onto notes for custom stylesheets
• Styling the Soil — full frontmatter metadata reference