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.
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; ❧ seal top-right.
Colour-block
The only filled surfaces — green on light, blue on dark — always carrying gold foil ornaments & warm-white text.