ghuneim.us · v1.0 · 2026
A specification for the rebuild. Type and content lead; chrome stays quiet. Legibility wins over aesthetics. Self-host everything.
The site is a personal-authority site: long-form essays, a serious career record, surveillance-art curation. The design's job is to recede and make the writing and work read as credible and considered. Three rules govern every decision:
The through-line is considered, archival, human, with a slightly severe edge, matching "Evolve or Perish."
The "Archive" light scheme is the default. A dark "After Hours" variant is available for an optional reading toggle but is not the default.
| Role | Hex | Notes |
|---|---|---|
| Page background | #F4F1EA | warm off-white / paper, not stark white |
| Surface (cards) | #FBFAF6 | barely lifted from the bg |
| Body text | #1F2421 | near-black with a green undertone, ~14:1 on the bg |
| Muted text (dates, tags) | #6B7069 | passes AA for the small grey metadata you already use |
| Primary accent (links, buttons) | #2F4A3C | your forest green, deepened slightly so link text on paper clears 7:1 |
| Hover / active | #436B54 | lighter green for hover states |
| Borders / hairlines | #E0DBD0 | the thin separators between list items |
A serif with character for headings (signals editorial, not SaaS) against a serif body for reading. Both self-hostable, both free.
Decide on cost later. Swap Fraunces for GT Sectra orTiempos Headline (Klim) for headings, andTiempos Text or Lyon Text for body. These push the site from "very good" to "distinctly high-end." Klim and Commercial Type both license well and self-host cleanly.
A 1.250 major-third ratio at 18px base for comfortable reading.
| Token | Size / line-height | Use |
|---|---|---|
--text-xs | 13px / 1.5 | tags, metadata, mono |
--text-sm | 15px / 1.6 | captions, muted |
--text-base | 18px / 1.7 | body, essays |
--text-lg | 22px / 1.5 | lead paragraphs |
--text-xl | 28px / 1.3 | h3 / project titles |
--text-2xl | 38px / 1.2 | h2 / section heads |
--text-3xl | 54px / 1.1 | h1 / name |
Reading measure. Cap essay body at 66–72ch. Headings can run wider.
An 8px base scale: 4, 8, 12, 16, 24, 32, 48, 64, 96. Content column max-width 720px for prose, 1100px for project and featured grids. Section vertical rhythm: 96px between major sections on desktop, 56px on mobile. The hairline borders (#E0DBD0) between blog-list items and citations are the main structural device. Keep them 1px and let space do the rest.
Worth defining explicitly so the build is consistent.
prefers-reduced-motion; keep any transitions ≤200ms and purely subtle (hover color shifts, not movement).prefers-color-scheme if you ship the dark variant.The featured-work thumbnails vary wildly in source — a 2019 JPG, an SVG, scanned book covers. Normalize them: consistent aspect ratio (4:3 or 16:9), consistent corner treatment (square or a uniform small radius; go square to match the severe / archival feel), and a 1px border in the hairline color so mismatched images sit in a consistent frame. Don't apply a green duotone or filter; let the work be itself.
Drop-in CSS, ready for the rebuild.
:root {
/* color */
--bg: #F4F1EA;
--surface: #FBFAF6;
--text: #1F2421;
--text-muted: #6B7069;
--accent: #2F4A3C;
--accent-hover: #436B54;
--border: #E0DBD0;
/* type */
--font-head: "Fraunces", Georgia, serif;
--font-body: "Source Serif 4", Georgia, serif;
--font-mono: "IBM Plex Mono", ui-monospace, monospace;
--text-xs: .8125rem; --text-sm: .9375rem;
--text-base: 1.125rem; --text-lg: 1.375rem;
--text-xl: 1.75rem; --text-2xl: 2.375rem; --text-3xl: 3.375rem;
/* space (8px base) */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
--s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px;
--measure: 70ch;
--radius: 0;
}