Almanac
The brand & design system for evanharmon.com — an aged-paper, woodcut-engraving almanac: antique serif typography, gilt ornaments, a tactile printed grain, and bold colour-block sections, in a light Parchment theme and a dark Midnight theme.
Toggle the theme top-right. This page is the at-a-glance reference; the exhaustive spec lives in DESIGN.md and the canonical runtime tokens in src/styles/global.css.
Open Graph · share card
The card follows the theme — Midnight shows the dark default; Parchment shows the green colour-block card. Serve the dark one from the site root for the live og:image tags (dark cards read best in feeds).
Brand & voice
A technologist's almanac — equal parts engineer's notebook and 18th-century broadsheet. Precise and literate, with dry wit; it treats a personal site like a finely-printed object.
“Cantankerous contraptions & philosophical piffle.”
Tone
Do
- Favour the archaic register — “Send a word”, “Elsewhere on the machines”, “The full account” — never at the expense of clarity.
- Number your sections: No. 1, No. 2 …
- Keep one accent per theme; use type, scale & the tint band for rhythm.
- Draw depth with engraved inset keylines.
Avoid
- Startup-speak, emoji, neon gradients.
- Drop-shadow card soup & floating elements.
- Sans-serif body text.
- A second hue per section, or fixing the grain to the viewport.
Logo & monogram
Wordmark “Evan Harmon” in the display serif. The EH monogram in the cover serif (Old Standard TT) inside a gilt circle with a double inset keyline — the brand-mark; 32 px in the header, also the favicon.
Ceremonial marks
The Crest is the cover / frontispiece seal; the Bookplate is the ownership mark for covers, about pages and printed matter. Both are token-driven — gilt follows the theme (gold on Midnight, antique gold on Parchment).
Colour
Dual-theme & token-driven: semantic variables (paper, ink, accent …) swap per theme, so one set of utilities is theme-aware. Every swatch lists its hex and OKLCH.
One accent per theme. Green carries Parchment, gold carries Midnight. The accent is for eyebrows, numerals, links, hovers & ornaments only — body text stays ink / ink-soft. Colour-blocks (hero & contact) are the only filled surfaces.
Typography
Four antique serifs, each with one job. Self-hosted with @fontsource in Astro.
Specimens
Type scale
| Token | Size | Use |
|---|---|---|
| hero | clamp(2.8rem, 9.5vw, 7rem) | Hero wordmark |
| cta | clamp(2.6rem, 7vw, 5rem) | “Let's Talk” heading |
| section | clamp(2rem, 4.4vw, 3.1rem) | Section titles |
| h3 | 1.55rem | Catalog entry titles |
| body | 1.16rem · lh 1.62 | Default body |
| numeral | 2.1rem / 1.5rem | Catalog / section “No.” |
| eyebrow | 0.72rem · tracking 0.28em | Eyebrows (small-caps) |
| label / nav | 0.74rem / 0.76rem | Tags, dates, nav |
Tailwind utilities: font-display, font-body, font-cover, font-numeral.
Ornaments & texture
Engraved divider
❦ ❖ ❧
Crest ❦ · diamond ❖ · leaf ❧ — all in the display serif, accent-coloured, on a 1px emboss.
The printed grain
A fine monochrome noise tile (grain-noise.png, 400 px) laid over every surface that scrolls with the page — it is part of the material, never a fixed screen filter. opacity ≈ 0.36, z-index 50, pointer-events: none.
Buttons, gilt & components
Buttons
Engraved outline by default (double inset keyline, small-caps label, trailing → in the display serif). .btn--solid fills ink; .btn--invert / .btn--ghost ride colour-blocks.
Catalog & rail
Harmon Stack
A project template to bootstrap & streamline new work — CI/CD, security tests, linting, docs.
Harmon Ops
Scripts, dotfiles, automation & IaC for a developer environment and homelab.
Hover: tint + content slides inward. Numerals Playfair italic. A single emblem only — the gilt ↗ seal, top-right, marking links that leave the site (it lifts on hover); no second horizontal arrow.
Heroes
Two ceremonial page heroes beyond the Celestial home hero. Frontispiece is an inlaid book-cover board with a rotating engraved sun; Plate splits the wordmark against an engraved printer's-device colophon. Both carry the colour-block treatment and gold foil.
Var. I · Frontispiece
Var. II · Plate
The sun's spin and all motion are gated behind prefers-reduced-motion. CTAs are the shared .btn family; on the book-cover they recolour to foil automatically.
Forms & controls
Engraved fields with small-caps labels; focus turns the keyline accent, and the invalid state turns it madder/oxblood (the --c-error token). Buttons share one .btn family; tags are the quiet small-caps metadata mark.
Inputs
Buttons
.btn default · --solid ink · --invert / --ghost ride the colour-block · --sm compact · [disabled] dims.
Tags
Colour-block
The only filled surfaces — green on light, blue on dark — always carrying gold foil ornaments & warm-white text. The closing “Let's Talk” block below is the canonical example.