Standard Garden for Obsidian

Your vault is already beautiful. Now the world can see it too.

The idea

You open Obsidian. You choose a font. You pick your colors. You adjust the spacing until it feels right. The words sit on the page exactly the way you imagined them. This is your space — a place shaped by your taste, your rhythm, your eye.

Then you hit publish.

And the page that appears online looks… nothing like what you built.

We think that’s broken. So we fixed it.

Standard Garden’s Obsidian plugin bridges the gap between your vault and the web. The design tokens you set in Obsidian — fonts, colors, weights, spacing — are the same tokens that render your published page. What you see is what they see.

“The medium is the message.”
— Marshall McLuhan

What it does

The plugin turns your Obsidian vault into a living design system. Three layers of customization, all from within your notes:

1. Snippets as notes

CSS snippets are not hidden config files — they’re markdown notes. A note with a css code block is a stylesheet. Mark it global with stnd: true in frontmatter, or load it per-note via cssclasses. Your styles live next to your words.

---
stnd: my-base-theme
---

```css
body {
    --font-text: "Literata";
    --font-header: "Bricolage Grotesque";
    --font-header-weight: 800;
    --font-header-letter-spacing: -0.03em;
    --color-light-background: #faf8f4;
    --color-light-foreground: #2a2520;
    --color-light-accent: oklch(55% 0.18 30);
}
```

2. Frontmatter as design tokens

Frontmatter keys map directly to CSS custom properties. The key name is the variable name — no prefix, no translation. Just type and see.

font-header: "Playfair Display"
font-header-weight: 900
font-header-letter-spacing: -0.04em
color-light-background: "#fefcf7"
color-light-accent: "#b5432a"
optical-ratio: 1.4

font-header: "Playfair Display" in your frontmatter becomes --font-header: "Playfair Display" in CSS. That’s the whole system — the key minus --.

This is per-note theming. One note can be a Swiss poster. The next can be a quiet book page. The frontmatter is the lever.

3. Themes you compose

A theme is just a snippet — a note with colors, fonts, and rhythm defined in CSS variables. Apply it to any note with theme: my-theme in frontmatter. In Obsidian, you can also use cssclasses: [my-theme] for local preview — but only the theme: field carries over to the web.

We ship over 30 built-in themes to start from — forest, book, kernel, swiss, editorial, baroque, mono, avantgarde, and many more. Each one a different voice for your words.

The tokens

The Standard design system uses CSS custom properties as its backbone. These tokens are shared between Obsidian and the web — same names, same behavior, same result.

Typography

Token	What it controls	Example
`--font-text`	Body typeface	`"Literata"`
`--font-header`	Heading typeface	`"Inter"`
`--font-monospace`	Code blocks	`"Berkeley Mono"`
`--font-interface`	UI elements	`"System-UI"`
`--font-header-weight`	Heading boldness	`800`
`--font-header-letter-spacing`	Heading tracking	`-0.02em`
`--font-header-line-height`	Heading leading	`1.1em`
`--font-weight`	Body text weight	`400`
`--font-weight-bold`	Bold text weight	`700`
`--font-feature`	OpenType features	`"liga", "kern"`
`--optical-ratio`	Modular type scale	`1.33`
`--font-density`	Line height multiplier	`1.5`

Colors

Light and dark palettes are defined separately — the system switches automatically based on the reader’s preference.

Token	What it controls
`--color-light-background`	Page background (light)
`--color-light-foreground`	Text color (light)
`--color-light-accent`	Links, emphasis (light)
`--color-dark-background`	Page background (dark)
`--color-dark-foreground`	Text color (dark)
`--color-dark-accent`	Links, emphasis (dark)
`--color-bold`	Bold text color
`--color-italic`	Italic text color
`--color-header`	Heading color

Plus a full chromatic palette — red, orange, yellow, green, cyan, blue, purple, pink — in both light and dark variants.

Publish what you see

When you publish a note to Standard Garden, the plugin doesn’t just send your markdown. It sends your intent — the frontmatter tokens, the theme, the CSS you composed. The web renderer reads the same variables and produces the same result.

Obsidian (your vault)                Standard Garden (the web)
━━━━━━━━━━━━━━━━━━━                  ━━━━━━━━━━━━━━━━━━━━━━━━
font-header: "Inter"     ──────►     style="--font-header: Inter"
theme: forest            ──────►     data-theme="forest"
cssclasses: [apex]       ──────►     (local only — Obsidian snippet loader)
@stnd design system      ──────►     @stnd design system

Three layers, same cascade:

@stnd/styles — The base design tokens (:root defaults)
Theme — A named set of overrides ([data-theme="forest"])
Frontmatter — Per-note inline overrides (highest specificity)

Your frontmatter says font-header: "Bricolage Grotesque". Your vault renders --font-header: "Bricolage Grotesque". The published page renders --font-header: "Bricolage Grotesque". Same key. Same value. No translation layer. No surprises.

Making a theme

A theme starts as a note. Open a new file. Add a CSS code block. Start setting variables.

Here’s a complete theme in 20 lines:

---
stnd: true
cssclasses: []
---

```css
body {
    --color-light-foreground: oklch(0.39 0.05 67);
    --color-light-background: #f7f3ee;
    --color-light-accent: var(--color-yellow);
    --color-dark-background: #231e1a;
    --color-dark-foreground: #dcc7b2;
    --color-dark-accent: var(--color-yellow);

    --font-text: "Forrest";
    --font-header: "Forrest";
    --font-header-weight: 800;
    --font-header-letter-spacing: 0em;
    --optical-ratio: 1.5;
    --font-density: 1.8;
}
```

Apply it by adding theme: your-theme-name to any note’s frontmatter. You can also add cssclasses: [your-theme-name] to preview it locally in Obsidian. Iterate in real time — change a value, see it instantly. When it feels right, publish. The theme: field ensures the web version inherits everything.

You don’t need to be a developer. You need taste.

Getting started

Install

Copy the plugin files into your vault:

.obsidian/plugins/standard/
├── main.js
├── manifest.json
└── styles.css

Enable it in Settings → Community Plugins.

Connect

Get your API key from your Standard Garden account
Paste it in Settings → Standard → API Key
The plugin verifies it and shows your username

Publish

Use the command palette or the ribbon icons:

Publish current note — Uploads the active note
Sync all published notes — Re-uploads every note marked publish: true

Wiki-links and local images are resolved and uploaded automatically. Your note goes live at:

standard.garden/@username/your-note-title

Set a theme

Add theme: forest to your frontmatter — or any of the 30+ built-in themes. Or build your own. The choice is always yours.

Philosophy

Most publishing tools treat the writing tool and the publishing tool as separate worlds. You write in one place, you configure the look somewhere else, and you hope the output matches.

We think that’s backwards.

Your vault is not a drafting table. It is the publication. The fonts you chose, the colors you picked, the spacing you adjusted — that’s not decoration. That’s voice. And voice should survive the journey from your screen to your reader’s screen.

Standard Garden exists so that the web can look like the thing you already made. Nothing more. Nothing less.

Write beautifully. Publish faithfully.