Standard Garden — Note Writing Guide

Everything you can do with a note. One file, complete reference.

Frontmatter
Visibility
Fonts & Typography
Colors & Theming
Layout
Obsidian Compatibility
Callouts
Syntax Patterns (::)
Custom Profile Page
Custom CSS (Global)
Short Links
Anonymous Notes
Auto-computed Fields

Frontmatter

Frontmatter is a YAML block at the very top of your note, between — markers. All fields are optional.

—
title: My Note
slug: my-note
visibility: public
date: 2025-12-27
lang: en
theme: garden
—

Your note content starts here.

All supported keys

Key	Type	Default	Description
`title`	string	Auto from first `# H1`	Overrides auto-extracted title
`slug`	string	Slugified title	Custom URL path segment
`visibility`	`public` \| `unlisted` \| `private`	`public`	Who can see the note
`date`	ISO date string	`created_at`	Publication date
`lang`	string	`en`	Language for typography rules (`fr`, `de`, etc.)
`theme`	string	Garden default	Theme applied to this note
`accent`	CSS color	—	Accent color for this note
`foreground`	CSS color	—	Text/ink color
`background`	CSS color	—	Background/paper color
`stnd_color_foreground`	CSS color	—	Maps to `—color-foreground`
`stnd_color_background`	CSS color	—	Maps to `—color-background`
`stnd_font_text_header`	font-family string	—	Header font stack
`stnd_font_text_text`	font-family string	—	Body text font stack
`stnd_optical_ratio`	number	—	Optical scaling ratio
`stnd_line_width`	number	—	Reading line width
`garden-layout`	boolean	`true`	`false` hides header/footer (paid users only)
`scripts`	array of URLs	`[]`	Scripts injected in `<head>`
`styles`	array of URLs	`[]`	Stylesheets injected in `<head>`

Visibility

Three levels control who can access a note.

Level	Listed in feed	Accessible by URL	Searchable
`public`	✅ Yes	✅ Everyone	✅ Yes
`unlisted`	❌ No	✅ Anyone with the link	❌ No
`private`	❌ No	🔒 Owner only	❌ No

Set it in frontmatter:

—
visibility: unlisted
—

Note: Anonymous (guest) notes cannot be set to private — they are automatically downgraded to unlisted.

Fonts & Typography

System fonts

Any valid CSS font stack works as a value:

—
stnd_font_text_header: “Georgia, serif”
stnd_font_text_text: “Georgia, serif”
—

Google Fonts

Load Google Fonts via the styles or scripts frontmatter key, then reference the font name in stnd_font_text_*:

—
styles: – “https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;1,400&display=swap”
stnd_font_text_text: “Lora, serif”
stnd_font_text_header: “Lora, serif”
—

Global fonts (all your notes)

Put font loading in your profile.standard note’s CSS block (see Custom CSS) and it will apply to all your notes automatically:

@import url(‘https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;1,400&display=swap’);

:root {
  —font-text: “Lora”, serif;
  —font-header: “Lora”, serif;
}

Automatic typography

The following transformations are applied automatically to all notes — no configuration needed:

Input	Output	Rule
`—`	—	Em dash
`…`	…	Ellipsis
`“quoted”`	“quoted”	Smart double quotes
`‘quoted’`	‘quoted’	Smart single quotes
`½`, `¾`	½, ¾	Fractions
`→`, `←`	→, ←	Arrows
`:smile:` `:heart:`	😊 ❤️	Emoji shortcodes
Lone word at end of line	non-breaking space	Orphan prevention

Colors & Theming

Override any color per note with CSS color values (hex, oklch, rgb, named colors):

—
accent: “#e85d04”
foreground: “#1a1a1a”
background: “#fffdf7”
—

Or use the explicit design system keys:

—
stnd_color_foreground: “oklch(15% 0.02 250)”
stnd_color_background: “oklch(97% 0.01 80)”
—

These get injected as CSS custom properties on the note’s root element. Set them globally for all your notes via Custom CSS.

Layout

Hiding the header and footer

—
garden-layout: false
—

Available to paid gardeners only.

Injecting custom scripts and styles per note

—
scripts: – “https://cdn.example.com/chart.js”
styles: – “https://cdn.example.com/chart.css”
—

URLs are injected directly into <head> when the note loads.

Obsidian Compatibility

Standard Garden understands Obsidian-native syntax out of the box.

Comments

Obsidian-style comments are stripped before publishing — they never appear in the rendered note:

Wikilinks

Link to other notes using double brackets:

[[note-slug]]                   → link to a note by its slug
[[note-slug|Display Text]]      → custom link label
[[@username/note-slug]]         → link to another gardener's note
[[a/abc123]]                    → link to an anonymous note by nano_id

Broken wikilinks (note not found) render as <span class=“broken-link”> instead of crashing.

Callouts (Obsidian blockquote style)

Standard Obsidian callout syntax works natively — see Callouts below.

Callouts

Two equivalent syntaxes, both fully supported.

Obsidian blockquote style

> [!NOTE]
> This is a note.

> [!TIP] Custom title
> A tip with a custom title.

> [!+ WARNING]
> Collapsible callout, starts open.

> [!- DANGER]
> Collapsible callout, starts closed.

`::callout` block style

<div class=“callout” data-callout=“note”>
<div class=“callout-title”>
<span class=“callout-icon”>📝</span>
<span class=“callout-title-inner”>Note</span>
</div>
<div class=“callout-content”>

Content here. Full **markdown** supported.

</div>
</div>


<details class=“callout” data-callout=“tip” open>
<summary class=“callout-title”>
<span class=“callout-icon”>💡</span>
<span class=“callout-title-inner”>Tip</span>
</summary>
<div class=“callout-content”>

Collapsible, starts open.

</div>
</details>


<details class=“callout” data-callout=“warning”>
<summary class=“callout-title”>
<span class=“callout-icon”>⚠️</span>
<span class=“callout-title-inner”>Warning</span>
</summary>
<div class=“callout-content”>

Collapsible, starts closed.

</div>
</details>

Available callout types

Type	Icon	Type	Icon
`note`	📝	`question`	❓
`tip`	💡	`quote`	💬
`info`	ℹ️	`abstract`	📋
`warning`	⚠️	`bug`	🐛
`danger`	⚡	`example`	📄
`success`	✅	`failure`	❌
`todo`	☑️

Syntax Patterns (`::`)

The :: system adds rich layout and components to plain markdown. All patterns start at the beginning of a line.

Inline patterns — single line, no closing tag

<aside class=“note”>This is a side note.</aside>
<div class=“alert”>Something to be aware of.</div>
<div class=“alert warning”>Careful with this.</div>
<div class=“alert error”>This is broken.</div>
<div class=“alert success”>It worked!</div>
<p class=“muted”>Some less important text.</p>
<p class=“subtle”>Even more recessed.</p>
<div class=“space-4”></div>

Smart paragraph patterns — affects the next paragraph only

<div class=“hero”>

This paragraph renders with hero-sized text (extra large).

</div>

<div class=“feature”>

This paragraph renders with feature-sized text (large).

Block patterns — multi-line, closed with `::end`

Callouts

<div class=“callout” data-callout=“tip”>
<div class=“callout-title”>
<span class=“callout-icon”>💡</span>
<span class=“callout-title-inner”>Tip</span>
</div>
<div class=“callout-content”>

A helpful tip with **markdown** support.

</div>
</div>

Layout containers

::hero center

# Big Headline

Centered hero section content.

::end

<div class=“container-small”>

Narrow reading container. Good for footnotes or sidebars.

</div>


<div class=“container-accent”>

Highlighted content area with accent background.

</div>


<div class=“center”>

Centered content block.

</div>


<div class=“container-feature”>

Feature-width content.

</div>

Columns and grids

<div class=“columns-2”>
<div class=“column”>

Left column content.

</div>
<div class=“column”>

Right column content.

</div>
</div>


<div class=“columns-3”>
<div class=“column”>

First.

</div>
<div class=“column”>

Second.

</div>
<div class=“column”>

Third.

</div>
</div>


<div class=“grid”>
<div class=“sm:row col-8”>

Main content area (wider).

</div>
<div class=“sm:row col-4”>

Sidebar (narrower).

</div>
</div>


<div class=“grid-3”>
<div class=“sm:row”>

Item one.

</div>
<div class=“sm:row”>

Item two.

</div>
<div class=“sm:row”>

Item three.

</div>
</div>

Cards

<div class=“grid-3”>
<div class=“sm:row card”>

## Card Title One

Description for the first card.

</div>
<div class=“sm:row card”>

## Card Title Two

Description for the second card.

</div>
<div class=“sm:row card”>

## Card Title Three

Description for the third card.

</div>
</div>

Media

<figure class=“image-wide”>
  <img src=“/path/to/image.jpg” alt=“Caption text displayed below the image.“>
  <figcaption>Caption text displayed below the image.</figcaption>
</figure>


<div class=“gallery grid gap-4”>
  <div class=“col-12 md:col-4”>
    <img src=“/images/photo1.jpg” alt=“”>
  </div>
  <div class=“col-12 md:col-4”>
    <img src=“/images/photo2.jpg” alt=“”>
  </div>
  <div class=“col-12 md:col-4”>
    <img src=“/images/photo3.jpg” alt=“”>
  </div>
</div>

Interactive

<a href=“/destination” class=“button button-primary”>Click Here</a>


<form class=“form form-contact” method=“POST” action=“/api/contact”>
  <div class=“form-field”>
    <label for=“name”>Name</label>
    <input type=“text” id=“name” name=“name” required>
  </div>
  <div class=“form-field”>
    <label for=“email”>Email</label>
    <input type=“email” id=“email” name=“email” required>
  </div>
  <div class=“form-field”>
    <label for=“message”>Message</label>
    <textarea id=“message” name=“message” required></textarea>
  </div>
  <button type=“submit” class=“button button-primary”>Send</button>
</form>

Form fields auto-detect type: Email → type=“email”, Message → <textarea>, others → type=“text”.

Custom Profile Page

profile.standard is a special note slug that defines your garden’s defaults. When anyone views one of your notes, the system reads your profile.standard note and applies its frontmatter as base defaults — your individual notes can override anything.

How to create it

Create a note with the slug profile.standard. Its content controls:

Default frontmatter for all your notes (colors, fonts, theme)
Custom CSS — extracted from the first ```css ``` block
Custom profile page — the rendered content shown at /@yourusername

Example `profile.standard`

—
visibility: public
stnd_color_foreground: “#1a1a1a”
stnd_color_background: “#fffdf7”
stnd_font_text_header: “Georgia, serif”
stnd_font_text_text: “Georgia, serif”
accent: “#e85d04”
—

# My Garden

Welcome to my little corner of the internet.

```css
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;1,400&display=swap');

:root {
  —font-text: “Lora”, serif;
  —font-header: “Lora”, serif;
  —color-accent: #e85d04;
}
```

What it controls

Feature	How
Default colors for all notes	Frontmatter color keys
Default fonts for all notes	`stnd_font_text_*` frontmatter
Global custom CSS	First ```css ``` code block
Google Fonts (global)	`@import` inside the CSS block
Your public profile page at `/@username`	The rendered note content

Note: Individual note frontmatter always wins over profile.standard defaults.

Custom CSS (Global)

The CSS block inside your profile.standard note is extracted, cached, and injected on every one of your note pages.

/* Anything valid CSS works */
@import url(‘https://fonts.googleapis.com/css2?family=Merriweather&display=swap’);

:root {
  —color-accent: #2563eb;
  —color-foreground: #111;
  —color-background: #fafaf9;
  —font-text: “Merriweather”, serif;
  —font-header: “Merriweather”, serif;
}

/* You can also target specific elements */
h1, h2, h3 {
  letter-spacing: -0.02em;
}

blockquote {
  border-left: 3px solid var(—color-accent);
}

Limits: 50 KB maximum. The CSS is served from /api/users/{id}/custom.css with ETags for caching.

Short Links

Every note automatically gets a short URL using its nano_id:

https://stnd.gd/{nano_id}

This redirects to the canonical URL:

https://standard.garden/@{username}/{slug}

Short links are permanent — they survive slug changes. Share the short link when you want a stable URL.

Anonymous Notes

Notes created without an account get a special URL:

https://standard.garden/a/{nano_id}

Limitations of anonymous notes:

Expire automatically after 7 days
Cannot be set to private (forced to unlisted)
No custom slug — URL is always the nano_id
Not listed in any feed
Cannot have a profile.standard

Auto-computed Fields

These are calculated automatically — you don’t need to set them, but they’re available in the note’s metadata:

Field	Description	Example
`readingTime`	Estimated reading time	`“5 mins”`
`wordCount`	Total word count	`847`
`excerpt`	First ~100 words, markdown stripped	Auto-generated preview
`nano_id`	Short permanent ID	`abc123def`

Controlling the excerpt

By default, the excerpt is auto-extracted from the first paragraph. To control exactly where it ends, add a ::excerpt directive:

This is the part that appears in previews and feed cards.

::excerpt

The rest of this note is not included in the preview.

Quick Reference Card

—
# Identity
title: Note Title
slug: custom-url-slug
visibility: public           # public | unlisted | private

# Appearance
accent: “#e85d04”
foreground: “#1a1a1a”
background: “#fffdf7”
stnd_font_text_header: “Georgia, serif”
stnd_font_text_text: “Georgia, serif”

# Layout
lang: en
theme: garden
garden-layout: false         # paid only — hides header/footer

# Inject resources
styles: – “https://fonts.googleapis.com/css2?family=Lora&display=swap”
scripts: – “https://cdn.example.com/something.js”
—

# Syntax cheatsheet



[[wikilink]]
[[slug|Custom label]]

> [!TIP] Callout title
> Callout content.

<aside class=“note”>Inline note.</aside>
<div class=“alert warning”>Inline warning.</div>

<div class=“callout” data-callout=“info”>
<div class=“callout-title”>
<span class=“callout-icon”>ℹ️</span>
<span class=“callout-title-inner”>Info</span>
</div>
<div class=“callout-content”>

Block callout with **markdown**.

</div>
</div>


<div class=“columns-2”>
<div class=“column”>

Left side.

</div>
<div class=“column”>

Right side.

</div>
</div>


<div class=“grid-2”>
<div class=“sm:row card”>

## Card One
First card content.

</div>
<div class=“sm:row card”>

## Card Two
Second card content.

</div>
</div>

Standard Garden — Note Writing Guide

Table of Contents

Frontmatter

All supported keys

Visibility

Fonts & Typography

System fonts

Google Fonts

Global fonts (all your notes)

Automatic typography

Colors & Theming

Layout

Hiding the header and footer

Injecting custom scripts and styles per note

Obsidian Compatibility

Comments

Wikilinks

Callouts (Obsidian blockquote style)

Callouts

Obsidian blockquote style

::callout block style

Available callout types

Syntax Patterns (::)

Inline patterns — single line, no closing tag

Smart paragraph patterns — affects the next paragraph only

Block patterns — multi-line, closed with ::end

Callouts

Layout containers

Columns and grids

Cards

Media

Interactive

Custom Profile Page

How to create it

Example profile.standard

What it controls

Custom CSS (Global)

Short Links

Anonymous Notes

Auto-computed Fields

Controlling the excerpt

Quick Reference Card

`::callout` block style

Syntax Patterns (`::`)

Block patterns — multi-line, closed with `::end`

Example `profile.standard`