Heather

A documentation-shape style: MkDocs Material in deep purple + indigo, with tabs, sidebar, integrated table of contents, and a dark/light toggle.

What you get

Heather is the only style here built from a real CMS theme rather than hand-authored HTML. Pages are written in Markdown and rendered by mkdocs-material at deploy time. Navigation is generated; the sidebar, the top tabs, and the right-hand table of contents all come from the page tree and the headings in the source.

Note

Material admonitions look like this — left-rule of the accent color, lightly tinted background, all-caps label.

Code

Code blocks ship with a copy button in the upper-right corner and per-language syntax highlighting:

# Heather mono uses JetBrains Mono with the accent indigo for keywords
def palette():
    return {
        'primary': 'deep purple',
        'accent':  'indigo',
        'scheme':  'slate',
    }

copy

Inline code like --md-primary-bright picks up the magenta-leaning purple to keep it readable against the dark slate.

Style breakdown

MkDocs Material configuration tokens, plus the chrome the theme renders for free.

Palette

#1b1226 bg

#221733 soft

#2c1d40 surface

#3a1f4f border

#6a3d8c primary

#b39ddb primary br

#5c6bc0 accent

#9fa8da accent br

In mkdocs.yml: palette.primary: deep purple, palette.accent: indigo, palette.scheme: slate (dark) with a default-light pair for the toggle.

Typography

theme.font.text: Inter · theme.font.code: JetBrains Mono. Material handles the loading; no <link> tag needed in source.

Chrome

navigation.tabs + navigation.tabs.sticky — the purple top bar with the section tabs.
navigation.sections + navigation.expand — the always-expanded left sidebar.
toc.integrate — the right-hand table of contents.
content.code.copy — the copy button on every code block.
content.action.edit — an “edit on GitHub” pencil per page.

Headlines

h1 at 2rem 700, no gradient. h2s carry a hairline underline (border-bottom: 1px solid --md-border) — visible on this page.

Components

Admonition — left-rule + tinted bg + caps label. Variants: note, warning, tip, danger.
Code block — --md-code-bg fill, hairline border, copy button overlay top-right, syntax highlighting via Pygments.
Tabs — sticky purple bar; active tab gets an accent-color underline.

Spacing

Three-column shell at 240 / 1fr / 220, max-width 1280 px. Main padding 36px 40px 100px. Sidebar / TOC padding 28px 18px. Collapses to two columns under 1100 px and one column under 740 px.

Signature motif

The three-column documentation shell with the purple top bar. Heather is the only style here that has persistent navigation chrome — everything else is single-column with a back-link. Combined with the dark slate scheme + deep purple primary it reads as “serious technical reference,” not “portfolio.”

In use: sutra (sutra.emmaleonhart.com). The only documentation-shape surface in the family — bringing it into a unified identity would mean either restyling MkDocs Material or replacing it with a hand-authored landing.