Vignelli: A Serif, Gold-Ruled Theme for Obsidian

Most Obsidian themes treat headings like a docs site does: a bit bigger, a bit bolder, maybe a color. Fine for a wiki. Less fine when you want a note to feel like a page someone actually set, with hierarchy you can see from across the room.

vignelli-obsidian-theme is my answer to that. It's a serif, rule-driven Obsidian theme in black, bone-white and gold, with a teal highlighter, and it's a screen port of a print house style I'd already built.

The idea

Massimo Vignelli's approach boils down to a few typefaces, a rigorous grid, and discipline about where emphasis goes. I've written about designing with Vignelli's rules on the web; this is the same thinking applied to a notes app.

The theme's visual language comes from vignelli.py, a house-style engine that typesets documents for print. Same rule hierarchy, same type pairing, retuned for a screen.

The core rule: nothing gets tinted unless it's doing a job. Gold carries structure, meaning headers, dividers, table bars, links and accents. Teal is the highlighter and selection color. Hierarchy comes from the weight of the gold rules, not from color scattered around the page.

The palette

Mode	Background	Body text	Headers, dividers, table bars	Highlight
Dark	black #2F2F2F	white #F8F4F9	gold #D1AC23	teal #74D2B4
Light	white #F8F4F9	black #2F2F2F	gold #D1AC23	teal #74D2B4

Gold and teal stay pinned in both modes. The black and white pair just reverses.

What it styles

• Type. Bodoni for headings, Georgia for reading, Courier for code, on a perfect-fourth scale so an H1 reads like a masthead instead of a Word heading.
• Headings on rules. H1 sits on a gold masthead rule, H2 on a gold hairline, and --- becomes the gold divider.
• Tables. The header row sits between gold bars, the body closes on one, and rows get hairlines. No vertical lines, no zebra striping, tabular numerals.
• Callouts. A faint panel with a gold left rule and a small-caps label, closer to a print set-off than an admonition box.
• Code. Syntax colors pulled down into the palette: bone text, muted italic comments, gold keywords, in reading, live preview and source mode.

It also covers the long tail: tags, checkboxes, properties, embeds, the graph, canvas, math, mermaid, scrollbars, tooltips and a print stylesheet.

More than one highlight color

Stock Obsidian gives you one highlight color. Vignelli adds six (teal, gold, rust, slate, plum and rose), and four of them work with plain Markdown:

Markup	Color
==text==	teal (default)
==**text**==	gold
==*text*==	rust
==~~text~~==	slate

Those render the same in reading, live preview and source mode.

Tip

Want all six from a color menu? Install the Highlightr plugin, set its method to "CSS classes", and name your highlights teal, gold, rust, slate, plum and rose. Common names like yellow or blue get mapped too.

Installing it

It's submitted to Obsidian's community theme browser, but approval was still pending when I wrote the README. Until then, install it by hand: make a Vignelli folder in your vault's themes folder and drop in the two files.

<vault>/.obsidian/themes/Vignelli/
├── manifest.json
└── theme.css

Then pick Vignelli under Settings, Appearance, Themes.

If you also run the Style Settings plugin, you get live controls for the display, body and mono fonts, body size, line height and reading width, the gold and teal colors, and toggles for gold headings, an uppercase H1 masthead, justified text and hiding the inline title. None of it is required. The defaults are baked in.

Heads up

Headings want Bodoni MT, which ships with Microsoft Office and Windows. Without it, the theme falls back through Bodoni 72, Bodoni Moda and Didot to Georgia, so it'll still look intentional, just a little less sharp.

It's MIT licensed. If you like your notes quiet and structured, give it a try.