Brand Cheat Sheet

Use these frontmatter classes to change the feel of a note.

Wide reading layout

---
cssclasses:
  - brand-wide
---

Good for long-form essays that should breathe more on larger screens.

Ultra-wide layout

---
cssclasses:
  - brand-ultra
---

Good for dashboards, galleries, landing-page notes, and more visual layouts.

Focused layout

---
cssclasses:
  - brand-focus
---

Good for tighter reading width and distraction-free writing.

Story layout

---
cssclasses:
  - brand-story
---

Good for editorial notes with stronger title and heading rhythm.

Combine classes

---
cssclasses:
  - brand-wide
  - brand-story
---

Use this when you want both a wider canvas and a more editorial feel.

Full-bleed blocks

Add full-bleed to a block when you want it to stretch wider than the body copy.

> [!hero]
> {.full-bleed}
> ![[your-image.jpg]]

Use this mostly for hero blocks, banners, cards, and large visual sections.

Brand tuning

The snippet system exposes Style Settings controls for:

• accent color
• paper background
• ink color
• default line width
• wide line width
• callout radius

Open Settings -> Style Settings -> Besso Brand Foundations.

Good defaults

• Essay or article: brand-wide
• Dense reference note: default or brand-focus
• Homepage or visual note: brand-ultra
• Narrative/polished piece: brand-wide + brand-story