Handoff: Mystery Spot — Personal Literary Blog #

Overview #

A personal blog with a "literary, slightly gothic" feel — warm near-black background, refined serif typography, and a quiet, restrained UI. The site hosts essays/observations (Posts), short microposts (Notes), and a "media diet" of Books / Movies / Television logs with star ratings.

About the Design Files #

The files in this bundle are design references created in HTML/React/Babel — prototypes that show the intended look, layout, type system, and interaction model. They are not production code to copy directly. The task is to recreate these designs in the target codebase's environment (Next.js, Astro, Eleventy, Jekyll, plain HTML, etc.) using its established patterns. If no codebase exists yet, pick the framework that fits the user's needs — for a personal blog with light interactivity, a static-site generator (Astro, Eleventy, or Next.js with SSG) is a very natural fit.

The prototype uses a Tweaks panel for switching theme + density + page. Do not ship the Tweaks panel — it's a design tool. Theme switching should be a real UI affordance (e.g. a small toggle in the header or footer) or driven by prefers-color-scheme. Density is a designer-only knob; pick compact (the current default) and remove the rest.

Fidelity #

High-fidelity. Colors, typography, spacing, and interactions are intentional and final. Match them pixel-close where reasonable. Use the codebase's existing component patterns where they exist; otherwise the markup in app.jsx is a faithful reference.

Stack Notes for the Implementer #

• This is a blog, so content should be markdown files or a CMS in the target codebase, not hard-coded arrays. The data.jsx file shows the expected content shape for each kind (post, note, book, movie, tv).
• Posts have a featured "top story" treatment on the home page; the rest is a chronological list.
• Notes are short, untitled microposts.
• Books / Movies / TV are simple lists with title, rating (0–5, .5 increments), short note, date, and one kind-specific field (author, year, season).

Screens / Views #

1. Header (every page) #

• Full-width, sits above all content.
• Wordmark "MYSTERY SPOT": IM Fell English, italic, ~1.55rem, text-transform: uppercase, letter-spacing: .02em. Preceded by a small 14px circular dot-in-circle icon (1px border, 4px filled center dot in accent color).
• Primary nav (right side, baseline-aligned with wordmark): Posts and Notes only. IBM Plex Sans, 500 weight, .82rem. Active item underlined with a 1px accent border.
• Below the header is a thin utility row: italic label Media diet: followed by Books, Movies, Television. IBM Plex Sans .78rem, ink-soft color, dotted underlines on hover, accent on active.
• Both header rows are separated from each other by a soft 1px rule.

2. Footer (every page) #

• Centered. Single fleuron ornament ❦ in display serif. Tagline Mystery Spot — observations, occasionally sharp, mostly sincere. Estd. line Est. 2026 · Brooklyn at reduced opacity. Top 1px rule.

3. Home Page #

Top Story block (full container width):

• Eyebrow: THE LATEST · APRIL 24, 2026 — IBM Plex Sans, .72rem, 600 weight, .14em tracking, accent color, uppercase. Date inline.
• Title: Source Serif 4 (or Publico Headline), 500 weight, clamp(1.85rem, 4.2vw, 2.85rem), letter-spacing: -.012em, text-wrap: balance.
• Excerpt: italic Source Serif 4 Text, 1.1rem, ink-soft color, max-width: 60ch.
• 1px rule-soft border-bottom separates it from the next section.

Two-column body (≥880px viewport):

• Left column (2fr): The archive — section label uppercase IBM Plex Sans .7rem 600 weight .18em tracking, with 1px rule-soft underline. Posts list with each item showing: date stacked above title.
  • Date: IBM Plex Sans .72rem, ink-meta color, uppercase, .04em tracking, tabular figures.
  • Title: Source Serif, 500 weight, 1.35rem, letter-spacing: -.008em.
  • Excerpt: italic, .95rem, ink-soft.
  • Each item: 1rem vertical padding, dotted bottom border, hovers left-pad by .4rem and shifts title to accent color.
• Right column (1fr): Notes — same label style with an all notes → link on the right. Stack of notes, each with a 2px left border (rule color → accent on hover), small uppercase date+time, body text in Source Serif Text 0.98rem.

Mobile (<880px):

• Notes column hides.
• Below the top story, a horizontal x-scroll notes row appears as a full-bleed band with a slightly lifted --bg-2 background and 1px rule borders top + bottom. Inside: a Recent notes label + All notes → link, then horizontally-scrolling cards. Each card: ~78vw wide (max 320px), --bg-3 background, 1px rule border, 3px radius, scroll-snap. Max 6 notes shown here.

4. Single Post Page #

• Centered measure (var(--measure) = 64ch).
• Meta row centered: MAY 19, 2026 · ESSAYS · ~ 4 MIN — IBM Plex Sans .76rem, ink-meta, with · dots at 55% opacity.
• Title: Source Serif 500, clamp(1.9rem, 4.2vw, 2.8rem), center-aligned, balance-wrapped.
• Scene break: A horizontal gradient rule with the ❦ glyph centered on it. The rule fades to transparent at the edges.
• Body: Source Serif Text, 18px base, line-height: 1.55 (compact density), text-wrap: pretty, hanging-punctuation: first last.
• Drop cap on the first paragraph: Source Serif, 2.8em, line-height: .9, floated left, padded .1em right, ink color (not accent — intentional, more restrained).
• Inline emphasis: text wrapped in {braces} in the source data becomes italic via a small custom span renderer.
• Blockquote: 2px accent left border, italic, ink-soft.
• Post nav at end (Older / Newer): IBM Plex Sans labels (.7rem 600 .12em uppercase) above italic Source Serif title links.

5. Notes Index Page #

• Same measure as posts.
• Header with title Notes and italic blurb.
• Vertical stack of full Note items (same component as the home page sidebar).

6. Books / Movies / Television Pages #

• Full-container width.
• Header: title in Source Serif 500, italic blurb below.
• Card grid: repeat(auto-fill, minmax(280px, 1fr)), 1px gap on rule-soft background (creating a thin divider effect between cards), 1px outer border.
• Each card:
  • Title (Source Serif 500, 1.1rem) on the left, star rating (IBM Plex Sans, accent color, ★/⯪/☆) on the right of the head row.
  • Italic subtitle: by Author / 2023 / Season 3 depending on kind.
  • Italic short note.
  • Date in IBM Plex Sans .68rem 500 uppercase tracking-.08em.
• Card hover: subtly lifts background to --bg-2.

7. 404 #

• Vertically + horizontally centered.
• Large 404 numerals in Source Serif 500, ~clamp(5rem, 14vw, 9rem), tight tracking.
• Italic message: What you seek is not here. Perhaps it was never here at all.
• Single underlined link Return to the index (accent color, IBM Plex Sans uppercase).

Design Tokens #

Colors — Dark (default) #

--bg:         #131210   (page background, warm near-black)
--bg-2:       #1b1814   (lifted band — mobile notes row)
--bg-3:       #221d16   (inset cards)
--ink:        #e8dfc9   (primary text)
--ink-soft:   #b8ad94   (secondary/italic copy)
--ink-faint:  #807761   (tertiary text, dates)
--ink-meta:   #aea48a   (meta/accent text — readable contrast)
--rule:       #2e2a22   (dividers)
--rule-soft:  #221f19   (faint dividers, card grid gap)
--accent:     #c8966a   (brand mark dot, eyebrow, hover, links)
--accent-2:   #8a6a4a   (deeper accent)

Colors — Light (parchment) #

--bg:         #f1e8d4
--bg-2:       #e7dcc1
--bg-3:       #ddd0b1
--ink:        #14110b
--ink-soft:   #44392a
--ink-faint:  #756a52
--ink-meta:   #56492f
--rule:       #b8a988
--rule-soft:  #cdc0a0
--accent:     #5a3a1a
--accent-2:   #7a4f2a

Typography Stacks #

--f-display:  'Publico Headline', 'Source Serif 4', Georgia, serif;
--f-body:     'Publico Text',     'Source Serif 4', Georgia, serif;
--f-title:    'IM Fell English',  'Publico Headline', Georgia, serif;
--f-meta:     'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;

• Publico Headline / Publico Text are commercial (Commercial Type). License if budget allows; Source Serif 4 (Adobe, free via Google Fonts) is the intended fallback and looks ~95% correct.
• IM Fell English (Google Fonts) is used ONLY for the wordmark.
• IBM Plex Sans (Google Fonts) is used for ALL meta/date/eyebrow text.

Sizes (compact density — default) #

base size:   17px
line-height: 1.55
gap:         .85rem
measure:     64ch
section-y:   clamp(1.1rem, 2.5vw, 2rem)

Letter-spacing #

• Display headings: -.005em to -.015em (slightly tight, refined)
• Meta/uppercase: .04em to .18em depending on size/role

Numerals #

• All meta text must use font-feature-settings: "tnum", "lnum" (tabular + lining figures) — this is critical for date readability. Numbers should never look small next to caps.

Borders / Radii / Shadows #

• 1px hairlines throughout (no thick borders).
• Card radii: 3px max (very subtle).
• No drop shadows.
• Dotted borders on archive list items and utility-row links.

Interactions & Behavior #

• Cursor: cursor: default on all clickable elements (the design intentionally avoids the pointing-finger — feels more print-like). When implementing real navigation, prefer subtle hover states (color shift, slight padding shift on archive items) over cursor changes.
• Hover states:
  • Archive list items: pad-left .4rem, title shifts to --accent.
  • Notes (sidebar): left border goes from --rule to --accent.
  • Utility links: dotted underline shifts to accent.
  • Shelf cards: subtle background lift to --bg-2.
• Theme switching: Sets data-theme="light|dark" on the <html> element (or app root). All theme work happens via CSS variables. Default = dark. Consider respecting prefers-color-scheme on first visit.
• Scroll behavior: window.scrollTo({top:0}) on every page change.
• Selection color: ::selection { background: var(--accent); color: var(--bg); }.

Responsive Breakpoints #

• 880px: Home goes from single-column (with mobile notes row) → two-column posts+notes layout.
• 720px: Header gap tightens, shelf grid collapses to 1 column, post nav stacks.

Content Shapes #

See data.jsx for examples. Schema:

Post:  { slug, title, date (YYYY-MM-DD), category, excerpt, body: string[] }
Note:  { slug, kind: "note", date, time?, body: string }
Book:  { title, author, rating, note, date }
Movie: { title, year, rating, note, date }
TV:    { title, season, rating, note, date }

• body strings support {wrapped text} for italic emphasis (custom inline renderer; trivial to port to a markdown processor — just teach it the syntax or use plain markdown asterisks).

Assets #

• All fonts are loaded from Google Fonts (Source Serif 4, IM Fell English, IBM Plex Sans). Self-host them for production for speed + privacy.
• The brand mark is pure CSS (a ringed dot). No image asset needed.
• The ❦ (fleuron) is a unicode character (U+2766) rendered in the display serif.
• No other imagery in the design.

Files In This Bundle #

• Mystery Spot.html — entry point.
• styles.css — full token + component CSS. The source of truth for the design system.
• app.jsx — React component structure for every page. Babel-transpiled in-browser in the prototype; treat as pseudocode for whatever framework you use.
• data.jsx — mock content showing the expected schema. Replace with markdown/CMS in production.
• tweaks-panel.jsx — the prototype's design control panel. Do not ship this.

Implementation Recommendations #

1. Strip the Tweaks panel entirely. Replace with a single small theme toggle if desired.
2. Move all content into markdown files (frontmatter for title/date/category) or a headless CMS. Map fields to the schema above.
3. Self-host fonts. If Publico isn't licensed, leave the stack as-is; Source Serif 4 carries the design competently.
4. Make sure tabular figures are enabled in meta text — it's the single biggest readability fix the design relies on.
5. Use semantic HTML: <article> for posts, <time> for dates, real <a> tags with cursor: default if you want to preserve the print feel.