Creative North Star: “The CV, Extended”
Every page reads as another sheet of the owner’s CV. A paper ground carries ink type; Antonio capitals announce sections and entries, Alegreya carries everything a person reads at length. Sections open with a capital heading whose ink rule runs out to the right edge; lists hang from a ruled line with yellow nodes ringed in charcoal, the CV’s timeline. Identity is a yellow block (the masthead, the author sidebar); the page closes on a charcoal band. The site should feel like the same person’s documents, not a theme with his colors.
The system is flat and typographic. Depth comes from rules, fills and white figure mounts, never from blurred shadow. Yellow is a material, not a voice: it fills, marks and underlines, and never sets text on a light ground. Real research figures and the instrument render are the imagery; nothing decorative stands in for them.
The homepage carries one signature motion: the scanning Fabry-Pérot interferometer comes apart, from assembled to exploded, as the visitor scrolls, with the chain of the work lighting along a ruled progress line beneath it. Without script the assembled still shows; with reduced motion the exploded still shows; every chain step stays fully visible either way.
Key Characteristics:
A two-color identity (yellow and charcoal) on warm paper, with near-black ink for text and one graphite grey for everything secondary.
signal-yellow): the identity color. Fills the masthead, the author block, the primary button and timeline nodes; draws link underlines, title hover bars and text selection. Never text on paper or white.pale-yellow): a 35% tint of Signal Yellow, used only as the mobile nav-icon hover in the theme.charcoal): the closing band (footer), the ring around every node, the timeline line, the scroll progress bar, the primary-button hover fill and the syntax-highlighting ground.paper): the page ground everywhere; also the text color on charcoal.ink): all text and headings, section rules, outline buttons, focus rings, active-nav underline.graphite-muted): venues, dates in tiles, captions, meta lines, pager labels, unlit chain steps. Excerpts mix ink and graphite 60/40 for a slightly quieter body.hairline): 1px ring around figure mounts and poster sheets, the share-row divider, the resting track of the progress rule.border) and Code Ground (code-ground): the theme’s quiet borders and inline-code fill.mount-white): only behind figure thumbnails, so research plots sit on their native white.The Yellow Is Material Rule. Signal Yellow appears as fill, marker, underline or selection. It never sets text on paper or white (insufficient contrast); on charcoal it may color a hovered footer link.
The Two Blocks Rule. Yellow blocks say who (masthead, author sidebar); the charcoal band says goodbye (footer). Do not add a third block color.
Display Font: Antonio (with Arial Narrow, Helvetica Neue, Arial) Body Font: Alegreya (with Georgia, Times)
Character: a condensed grotesque in capitals against a calligraphic book serif, exactly as on the CV. Antonio is always uppercase and tracked; Alegreya is never uppercased. Both are self-hosted variable woff2 files (Latin subset, SIL OFL); no third-party font requests.
The Capitals Speak, the Serif Reads Rule. Antonio, uppercase and tracked, for anything that names or navigates; Alegreya for anything read as a sentence. Venues and captions are Alegreya italic in graphite.
The Lining Dates Rule. Prose uses old-style figures; entry dates switch to lining tabular figures so years align at the right edge.
Minimal Mistakes’ grid underlies inner pages: a left author sidebar from 1024px and the content column to its right. Archive and timeline content holds to 56rem; prose and excerpts to 68ch. The homepage breaks out of the theme container: sections run to 84rem with a fluid side gutter (clamp(1rem, 4vw, 4rem)) and generous section tops (clamp(3.5rem, 8vw, 7rem)). The masthead and footer also use that gutter at x-large.
Breakpoints are the theme’s: 600px small, 768px medium, 1024px large, 1280px x-large. At medium, lab-note entries with a figure become a two-column grid (text, 11rem thumbnail); the footer splits 1.2fr / 1fr. At large, the homepage assembly becomes a 5fr / 7fr split pinned for one extra viewport of scroll, the render bleeding off the right edge. Below 600px, poster strips stack to a single 22rem column.
Grids of figures (related posts, poster grid) use auto-fill columns with a 12rem minimum and 2rem gaps. Entries in a timeline are separated by 2.4em (2em on the homepage).
The system is flat. There is no blurred shadow anywhere in the Nibe layer; depth is conveyed by fill (yellow and charcoal blocks against paper), by rules (2px ink), and by white mounts ringed with a 1px hairline. box-shadow is used only as a crisp zero-blur ring, because it draws an outline without shifting layout.
box-shadow: 0 0 0 1px #dcdad8): figure mounts, poster sheets, the CV sheet at rest.box-shadow: 0 0 0 1.5px #231f20): the same surfaces on hover.box-shadow: inset 0 0 0 2px #231f20): the outline button; 1.5px for share buttons.box-shadow: inset 0 0 0 3px #2c2d30): timeline and chain nodes; the small meta separator and prize marker use an outer 1.5–2px charcoal ring.The Ring, Not Shadow Rule. Any edge is a zero-blur ring or a solid rule. A blurred or offset shadow does not belong to this world.
Square by default: buttons, menus, mounts, blocks and sheets have no radius. The only round forms are the CV’s markers: 0.85rem timeline nodes, the 0.45em meta separator dots and the prize marker, all yellow ringed in charcoal. Rules are 2px ink (section headings, citation and pager tops, the timeline line in charcoal); hairlines are 1px. The theme’s 4px radius survives only in untouched upstream parts.
Square, capitalised, confident.
Ink text with a 0.15em yellow underline offset 0.2em; hover darkens the underline to charcoal. Titles that are links use a growing yellow bar (0.18em) drawn under the text on hover instead.
The CV’s list. A 2px charcoal line runs through all entries; each carries a 0.85rem yellow node with a 3px charcoal ring at its title. Title in Antonio caps left, year at the right in lining figures. Below: venue in graphite Alegreya italic (“Journal article, Venue”), an excerpt clamped to 68ch (three lines for lab notes), Antonio entry links with yellow underlines, and a “Recommended citation” disclosure marked with a plus/minus sign. Lab notes with a figure place an 11rem mounted thumbnail beside the text from 768px.
White panel, 0.5rem padding, hairline ring, image at 4:3 with object-fit: contain so plots are never cropped. Hover changes the ring to ink. Used for lab-note thumbnails and related-post tiles. Post figures (raw <center><img><figcaption>) get 2.2em vertical margin and italic graphite captions.
From 1024px the sidebar author card is a yellow block: centered avatar (7.5rem), name in Antonio caps, bio in ink at 0.85rem, then left-aligned contact rows in Antonio caps.
Charcoal, paper text at 78%. The owner’s name is a section heading in paper whose rule is yellow; bio beneath; contact links in Antonio caps turning yellow on hover; a legal line above a 16% paper hairline.
Name at display size beside the instrument render; a canvas scrubs 30 frames from exploded to assembled as the section scrolls (pinned at 1024px and up, scroll-driven in the stacked layout). Beneath, a hairline track with a charcoal progress bar and four chain steps whose nodes light in sequence; unlit steps sit in graphite with paper nodes. Reduced motion or no script: the still exploded frame and all steps shown lit.
object-fit: contain).prefers-reduced-motion.math.div, no CSS min()/max(); clamp() is fine.