Vignelli

Vignelli

A serif, rule-driven theme for Obsidian — a screen port of the "Vignelli reference" print house style. Black · bone-white · gold, with a teal highlighter.

Install — In Obsidian: Settings → Appearance → Themes → Manage → Browse, search Vignelli (pending community-store approval). Or manually: drop manifest.json and theme.css into <vault>/.obsidian/themes/Vignelli/ and select Vignelli under Appearance. Full steps ↓

Massimo Vignelli aesthetic: serif type (Bodoni display / Georgia body), a rigorous grid, and a strict rule hierarchy carried in gold. Headers, dividers (---), and table bars are gold in both themes; the black/bone ground simply reverses.

"The life of a designer is a life of fight: fight against the ugliness." — Massimo Vignelli

---

The palette

Gold and teal are pinned across both modes; the black/white pair swaps. Gold carries structure (headers, rules, table bars, links, accents); teal is the highlighter and selection color. Nothing else is tinted — hierarchy is expressed through gold rule weight, not scattered color.

---

What it does

• Type — Bodoni (Moda → Didot → Bodoni MT) for headings, Georgia for reading, Courier for code. A proper perfect-fourth type scale so H1 reads as a masthead, not a Word heading.
• Headers on gold rules — H1 on a gold masthead rule, H2 on a gold hairline; --- is the gold divider.
• Tables — the header sits between gold bars, the body closes on a gold bar, hairline rules between rows. No vertical lines, no zebra, tabular numerals.
• Callouts — a faint panel with a gold left rule and a gold small-caps label (a Vignelli set-off, not a docs-site admonition box).
• Code — syntax desaturated into the palette: bone body, muted-italic comments, gold keywords — in reading, live-preview and source mode.
• Everything else — links, tags, checkboxes, properties, embeds, graph, canvas, math, mermaid, scrollbars, tooltips, and a print stylesheet, all in black/bone/gold.

---

Gallery

The same theme across different kinds of notes — prose, code, checklists, data — in both light and dark.

---

Multiple highlight colours

Native Obsidian gives you exactly one highlight color. Vignelli adds six tones — teal, gold, rust, slate, plum, rose — two ways:

No plugin required — combine ==highlight== with an inner wrapper:

These render identically in reading, live-preview, and source mode.

With the Highlightr plugin (for a color menu / all six + more): set Highlightr's method to "CSS classes", and name your highlights teal, gold, rust, slate, plum, rose (common names like mint, green, yellow, red, blue, purple, pink are mapped too). The plugin then emits <mark class="hltr-…">, which this theme styles.

So: multi-color highlighting works out of the box, and the plugin is optional sugar.

---

Install

1. Open your vault's .obsidian/themes/ folder.
2. Create a Vignelli folder inside it and copy in manifest.json + theme.css:

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

3. Settings → Appearance → Themes → Vignelli.

---

Style Settings

Install the Style Settings plugin for live controls (all optional; defaults are baked in):

---

Fonts

Fonts match the original Vignelli doc engine: headings use Bodoni MT (ships with Microsoft Office / Windows), body uses Georgia, code uses Courier New. If Bodoni MT isn't present, headings fall back through Bodoni 72 → Bodoni Moda → Didot → Georgia. Point the Style Settings font fields anywhere you like.

---

Provenance

The visual language derives from vignelli.py, the house-style engine that typesets these documents for print — the same rule hierarchy and type pairing, retuned for a screen and dressed in chalkboard/bone/gold.

License

MIT © Wesley Ellis