Creative North Star: “The Systems Paper — Retro-Modern”
System built like well-authored academic paper from the 90s USENIX/SIGOPS era, rendered with modern precision. Typography does heavy lifting, structure immediately legible, nothing competes with argument. Recursive carries headings and all structural scaffolding — weight 300, MONO=1 on structural/metadata elements (section stamps, titles, nav, filter buttons, venue lines, date columns), MONO=0.5 on display name only. Section stamps push to MONO=1, letter-spacing 0.20em for full typewriter authority. Publication titles at MONO=1, letter-spacing 0.01em. Newsreader handles body: optical-size serif reads like printed editorial at every size, justified (no hyphens) to match academic proceedings typesetting. Two fonts constitute the entire visual identity.
Light mode background is warm paper stock (oklch(98.5% 0.006 80)) — not blue-cast white. Feels like a printed CMU tech report, not a browser default. Ink and UI elements stay blue-cast (hue 264) for coherence with dark mode. Dark mode is the opposite: deep blue-void, monitor at night.
Color disciplined to single accent: Reference Blue oklch(46% 0.27 264). Appears on links, citations, interactive states — never decoration. Rarity is the point. Blue link in sea of black Newsreader text signals meaning like blue hyperlink in research PDF — precise, functional, expected.
Publication link buttons render as [pdf], [slides] — bracket notation from 90s paper conventions. About page header reads like a paper author block: name, affiliation line, provenance metadata.
System explicitly rejects: generic al-folio defaults (white pages, teal accents, uniform card grids), flashy portfolio theatrics (gradient heroes, scroll animations, floating elements), corporate/LinkedIn register (achievement bullets, navy-and-gold safety). Also rejects over-designed academic pages where visual novelty competes with research content. Goal: site feels built by someone who grew up reading SOSP proceedings and now works in 2024.
Key Characteristics:
font-variation-settings: "MONO" 0.5, "CASL" 0, "slnt" 0 on *; structural elements explicitly override to MONO=1One accent, tinted neutrals, two modes. Palette minimal by design — hiring committee reading publication list should focus on titles, not color choices.
oklch(46% 0.27 264) light / oklch(61% 0.22 264) dark): Sole interactive color. Links, citations, nav active states, hover treatments, focus rings, filter button active state, topic tag hover/active, publication title underline on hover. Never background fill, never decorative stripe. Dark-mode value is lighter to maintain contrast against void-dark background.Light mode:
oklch(98.5% 0.006 80)): Warm paper stock tint. Hue 80 (amber-neutral) — reads like a printed tech report, not a browser default. Not pure white, not blue-cast.oklch(96.5% 0.007 80)): Slightly darker warm tint for code backgrounds and surface elements.oklch(5% 0.004 264)): Primary text. Near-black with residual blue cast. Ink.oklch(48% 0.002 264)): Secondary text, captions, metadata. Author lines, venue abbreviations, dates, filter button labels, topic tag default state. Near achromatic at this lightness.oklch(91% 0.003 264)): Publication list dividers, section borders, flat-list separators.Dark mode:
oklch(13% 0.003 264)): Background. Near-black with residual blue-grey — monitor at night, not void.oklch(21% 0.004 264)): Elevated surface background, footer, code blocks in dark mode.oklch(90% 0.002 264)): Primary text on dark backgrounds.oklch(62% 0.002 264)): Secondary text on dark backgrounds.oklch(28% 0.003 264)): Structural dividers in dark mode.The Reference Rule. Reference Blue on interactive elements only. No colored section headings, no accent borders, no decorative usage. Eye lands on blue = link or citation. Diluting this signal anywhere dilutes it everywhere.
The Tinted Neutral Rule. No raw oklch(0% 0 0) or oklch(100% 0 0). Light mode background uses warm paper tint (hue 80, chroma ≥ 0.005). All ink and UI neutrals tilt toward hue 264. The split — warm ground, cool text — mirrors printed paper under fluorescent light. Dark mode stays all-264.
Display Font: Recursive MONO=0.5, CASL=0 — display name only (h1). Half-mono contrast point. Structural/Heading Font: Recursive MONO=1, CASL=0 — section stamps, publication titles, nav, filter buttons, metadata labels, date columns, venue lines. Full typewriter register. Body Font: Newsreader (with Georgia, serif fallback) — justified, no hyphens. Sidebar Mono Font: Recursive MONO=1, CASL=0 (contact info, location). Label Font: Recursive MONO=1 (email contact; matches sidebar metadata register).
Character: Recursive at MONO=1 reads as full typewriter — letterforms carry terminal-manual authority, precise and mechanical. Used on all structural scaffolding. Display name stays MONO=0.5 as the one point of contrast: slightly softer, distinguishes identity from document structure. Newsreader weight 300 reads like a well-printed journal article. Justified body without hyphens matches USENIX/SIGOPS proceedings typesetting — the deliberate gap in word spacing at short lines is a feature, not a flaw.
clamp(2.25rem, 5.5vw, 3.5rem), line-height 1.05, letter-spacing -0.025em): Page-level name only. About page h1. The one element held at MONO=0.5 — softer, contrasts against the typewritten structure surrounding it.0.8125rem, uppercase, letter-spacing 0.20em, ink-secondary color): About page section labels. Full typewriter register. Border-bottom 1px divider line.0.9375rem, line-height 1.4, letter-spacing 0.01em): Publication titles, project names. Typewriter register — mechanical authority on content headings.1rem, line-height 1.7, font-optical-sizing: auto, text-align: justify): All prose — bio, abstract excerpts, post content. Justified, no hyphens. Matches academic proceedings typesetting.0.8125rem, letter-spacing 0.02em): Contact info, office location in profile sidebar.0.75rem, letter-spacing 0.04em): Publication venue/year periodical lines, date columns (flat-year, news-date). Tabular numerals.0.75rem, letter-spacing 0.05–0.06em): Filter bar buttons and topic tags.0.8125rem, letter-spacing 0.04em): [pdf], [slides] link buttons and email contact.The Weight Floor Rule. Recursive at weight 300 only for display and headings. Weight 400+ collapses contrast between headings and body. Emphasis within heading: use size, not weight.
The Optical Size Rule. Newsreader is an optical-size font (opsz axis 6–72). Always load with font-optical-sizing: auto. Without it, body text looks too heavy and captions look wrong.
The Axis Lock Rule. Global lock on * sets MONO=0.5 as baseline. All structural elements (stamps, titles, nav, filters, tags, venue lines, date columns, link buttons) explicitly override to MONO=1. Display name (h1) is the only element intentionally left at MONO=0.5. At MONO=0 (browser default), Recursive is indistinguishable from generic geometric sans — the global lock prevents this.
The Global Lock. _typography.scss sets font-variation-settings: "MONO" 0.5, "CASL" 0, "slnt" 0 on * globally. Newsreader silently ignores unknown axes. Never remove this global rule.
The Justification Rule. Body prose (p) uses text-align: justify without hyphens: auto. Matches typesetting convention of academic proceedings (USENIX, SIGOPS). Word-spacing gaps at short lines are acceptable — do not add hyphens to suppress them.
System is flat. No shadow vocabulary. Depth via typographic hierarchy and thin dividers (border-top: 1px solid var(--global-divider-color)), not z-axis theater. Publication entry distinguished from neighbors by whitespace and a 1px line, not card shadow or elevation.
Dark mode surface layers (code blocks, footer) use tonal step — oklch(21% 0.004 264) on oklch(13% 0.003 264) — not shadow. Separation structural, not decorative.
The Flat-By-Default Rule. Surfaces flat at rest. No hover shadows, no float effects. Element needs interactivity signal: use color (Reference Blue) or underline, not elevation. Link that grows shadow on hover is wrong answer.
Thin, sticky top bar. Links in Recursive weight 300, MONO=0.75, letter-spacing 0.06em — partial typewriter, lighter than stamps. Brand name MONO=0.75, letter-spacing 0.02em. Default: ink / ink-on-dark. Active/current: Reference Blue. Hover: Reference Blue. No background fill change on hover — color shift is the signal. Focus: outline: 2px solid var(--global-theme-color); outline-offset: 2px. Bootstrap 4 collapse for mobile.
Body text in Newsreader. Link color: Reference Blue at rest. Hover: underline added. No other treatment. Underline on hover (not default) keeps reading flow clean, confirms link on intent.
Primary content unit. Not a card — no border, no background fill, no shadow. Structured column: title in Recursive (title scale, weight 300, MONO=1, letter-spacing 0.01em), authors in Newsreader weight 300, coauthor links with Reference Blue underline, venue/year in Ink Secondary (Recursive MONO=1, 0.75rem, letter-spacing 0.04em). Internal padding: 8px top/bottom, 0 horizontal. Separated by 1px var(--global-divider-color) top divider. Title link: default color matches body text, ::after pseudo underline (Reference Blue, opacity 0.25 at rest → 1.0 on hover), full color shift on hover. All transitions guarded by @media (prefers-reduced-motion: no-preference).
The Anti-Card Rule. Publication lists, project lists, news items are not cards. Structured text. No border-radius, no background tint, no box-shadow on list entries. 1px top divider only. Card UI on publication entries is the most visible sign of a generic template — prohibited.
Row of filter buttons above the publication list. Recursive 0.75rem weight 300, MONO=0.5. padding: 3px 10px, border: 1px solid var(--global-divider-color), no radius. Inactive: Ink Secondary + divider border. Active/hover: Reference Blue + Reference Blue border. Transition: color 120ms, border-color 180ms. Focus: outline: 2px solid var(--global-theme-color); outline-offset: 2px. Built dynamically from rendered topic tags via JS.
.pub-topic-tag)Inline chip used in publication entries and about page bio. padding: 1px 7px, Recursive 0.7rem weight 300. Same inactive/active color behavior as filter buttons. Keyboard accessible: role="button", onkeydown handler, focus-visible outline. Clicking on about page redirects to /publications/?topic=...; clicking on publications page triggers filter directly. Tooltip on hover (about page only) shows linked paper list — lazy-fetched, cached after first load.
[pdf], [abstract], [bibtex], [slides], etc. Bracket notation — 90s paper convention. Zero visual weight: padding: 0, no border, no background. Recursive 0.8125rem weight 300, MONO=1. Default: Ink Secondary. Hover: Reference Blue. Transition color 120ms. Focus-visible outline. Render label text with brackets in markup, not CSS content.
Conference abbreviation (e.g. CCS, USENIX). Reference Blue fill, ink-on-dark text (Recursive MONO=1, weight 300, 0.7rem, letter-spacing 0.04em), no radius. Appears when abbr field set in bib entry.
h2).post article > h2 elements are styled as section stamps, not traditional headings: Recursive 0.8125rem, weight 300, MONO=0.75, letter-spacing 0.14em, uppercase, var(--global-text-color-light) color, border-bottom: 1px solid var(--global-divider-color). Labels sections without competing with content beneath. Links inside stamps inherit color — no accent on section labels.
2-column CSS grid: 44px year column + 1fr text column, gap: 20px, padding: 12px 0, 1px top divider. Year: Recursive 0.75rem, Ink Secondary, font-variant-numeric: tabular-nums. Text: Newsreader body. Same structural logic as publication entries — text, not cards.
Same 2-column grid pattern as flat list. Date column is 72px. Date in Recursive tabular numerals, Ink Secondary. News text in Newsreader with font-optical-sizing: auto.
About page top reads like a paper author block, not a hero section. Structure (flush left, no centering):
clamp(2rem, 5vw, 3rem))0.875rem, MONO=0.5, uppercase, letter-spacing 0.08em, Ink Secondary0.75rem, MONO=1, Ink Secondary: Vancouver, BC · email@domain · 2024. Full monospace register — same as sidebar metadata.0.8125rem, Ink Secondary at rest, Reference Blue on hoverPhoto: present but subordinated (96px, top-right, border 1px divider). Layout: CSS grid 1fr 96px. Photo never the focus — this is a text document.
Minimal footer. Border-top 1px divider. Two-column: left = Name · Institution · Location in Recursive MONO=1, 0.75rem, Ink Secondary. Right = last updated Month Year. Same provenance line logic as header — site signs itself like a tech report.
Full 1px border (color-mix(in oklch, var(--global-theme-color) 20%, var(--global-bg-color))) + background tint (color-mix(in oklch, var(--global-theme-color) 5%, var(--global-bg-color))). Not side-stripe — full perimeter border. Newsreader 1.2rem. Tip/warning/danger variants use semantic color tokens (--global-tip-block, --global-warning-block, --global-danger-block) defined in _themes.scss.
Light mode: near-white var(--global-code-bg-color), ink text. Dark mode: near-black (oklch(5% 0.002 264)), light-grey text. No radius, no tint, no decoration.
font-variation-settings: "MONO" 0.5, "CASL" 0, "slnt" 0 for all headings. Contrast with Newsreader body is the system’s core visual move.oklch(46% 0.27 264) light / oklch(61% 0.22 264) dark) to interactive states: links, citations, nav active, focus rings, filter active, tag hover. Rarity is signal.var(--global-divider-color)) to separate list entries. Structure via spacing and line, not card borders.font-optical-sizing: auto on Newsreader at every size. Font designed for it.oklch(98.5% 0.006 80), hue 80). Ink and UI neutrals stay at hue 264. The split — warm ground, cool text — is intentional.color-mix(in oklch, ...) for tinted state backgrounds (ToC active, blockquote fill). Stays on-hue under theme switch.@media (prefers-reduced-motion: no-preference).border-left greater than 1px as a colored accent stripe on any element. Not blockquotes, not publication entries, not callouts. Most recognizable al-folio default. Replace with background tints or full borders.background-clip: text with a gradient). Single solid color only.border-radius + box-shadow + background-color on list entries. Publications are not products.font-variation-settings: "MONO" 0.5, "CASL" 0. At MONO=0, indistinguishable from generic geometric sans, loses all character.oklch(0% 0 0) or oklch(100% 0 0) for text or background. Light bg: tint hue 80. Ink: tint hue 264.[pdf], [slides]. Brackets in markup, not CSS content pseudo-element.