---
version: alpha
name: marginalia-design
description: "A warm paper canvas (#faf6ee) with near-black ink (#241f1a), ink-blue (#2b4570) for links and marginal notes, and a highlighter-yellow (#f4d35e) reserved for inline emphasis inside a sentence. Fraunces carries display headlines and titles at weight 600, sometimes italic; Source Serif 4 carries every word the reader is meant to actually read, including nav, form, and button labels, no sans-serif anywhere. The system reads as a newsletter that trusts its reader to sit still and read, quiet until the headline types itself out."
---

## Brand Positioning

Marginalia is for readers who miss the specific pleasure of a book with someone else's pencil marks in it, an underline, a "yes, exactly" in the margin, a dog-eared corner marking the spot. It exists because most newsletter software renders every issue as a scroll of undifferentiated paragraphs inside a UI chrome built for dashboards, share buttons stacked on the left, a popup asking for an email before the reader has read a single sentence. Marginalia's bet: a newsletter is a reading experience first and a product second, and the interface should get out of the way of that. Every visual decision below serves that one bet. If a component announces itself as software before it lets someone read, it doesn't belong in this system. That is also why there is no icon library, no share row, and no modal, the page is a page, not a dashboard wearing serif fonts.

colors:
  accent: "#2b4570"
  accent-alt: "#f4d35e"
  ink: "#241f1a"
  ink-muted: "#766a5c"
  canvas: "#faf6ee"
  surface: "#f2ecdf"
  border: "#e3d9c6"
  focus-ring: "#2b4570"

## Logo / Wordmark System

The mark is a folded page corner, the "dog-ear" a reader leaves to find their place again. It's drawn as a simple document outline with the top-right corner cut away and a small filled triangle standing in for the folded-down flap, the whole mark tilted a few degrees off the grid, the same slight cant every marginal note on the page carries. It is not a generic bookmark icon repurposed for the brand, it's a literal drawing of the single physical gesture "written in the margins" describes: marking a page by hand.

```svg
<svg width="22" height="22" viewBox="0 0 24 24" aria-hidden="true">
  <g transform="rotate(-4 12 12)">
    <path d="M5 3 H15 L20 8 V21 H5 Z" fill="none" stroke="var(--accent)" stroke-width="1.5" stroke-linejoin="round"/>
    <path d="M15 3 L20 8 H15 Z" fill="var(--accent)"/>
  </g>
</svg>
```

- **Lockup**: mark, then a `0.5rem` gap, then the wordmark "Marginalia" in Fraunces italic/600, mark always left of the wordmark, never stacked, never reversed, never right-aligned.
- **Minimum size**: mark not smaller than `18px` square, below that the fold triangle stops reading as a separate shape from the outline. Wordmark not smaller than `0.85rem`.
- **Clearspace**: empty margin equal to the mark's own height (22px at default size) on all sides of the lockup.
- **Don't**: don't unrotate the mark to "straighten" it, the tilt is the point, a perfectly square page-corner icon would read as generic UI chrome, not a hand-placed mark. Don't recolor it, it only ever renders in `--accent` on `--bg` or `--surface`, never inverted for a dark panel because this system has no dark panels. Don't fill the outline solid. Don't use the mark as a repeating bullet or divider, one mark means "this is Marginalia," not "here is a list item." Don't pair the wordmark with a sans-serif weight substitute if Fraunces italic fails to load, fall back to a serif italic system stack, never to a grotesque.

## Color System

### Roles

| Role | Token | Value | Used for |
|---|---|---|---|
| Canvas | `--bg` | `#faf6ee` | Page background |
| Surface | `--surface` | `#f2ecdf` | Paper-panel teasers, the archive's issue rows on hover, anywhere content needs to sit a shade "above" the page without a shadow |
| Border | `--border` | `#e3d9c6` | Hairline rules between sections, under article teasers, around panels and the signup input |
| Ink | `--ink` | `#241f1a` | Primary text, headings |
| Ink muted | `--ink-muted` | `#766a5c` | Secondary text, dates, captions, placeholder text (never placeholder-as-label) |
| Notes / links | `--accent` | `#2b4570` | All links, the logo mark, marginal annotations, focus ring |
| Inline emphasis | `--accent-alt` | `#f4d35e` | `<mark>` highlight fill only, nothing else |

There is deliberately no third accent, no "success green" or "error red." A reading page doesn't have system states the way a dashboard does, the worst thing that happens on this page is a malformed email address, and that's handled with `--accent` and a plain sentence, not a semaphore of status colors. Adding one would be the first step toward the dashboard-chrome this brand exists to avoid.

### Contrast (computed from the hex values above via WCAG relative luminance, this is a light warm-paper canvas so every pairing below is text-on-light rather than patchline's text-on-dark)

| Pairing | Ratio | Passes |
|---|---|---|
| `--ink` text on `--bg` | 15.15:1 | AAA |
| `--ink-muted` text on `--bg` | 4.89:1 | AA (body text), not AAA |
| `--accent` text on `--bg` (links) | 8.90:1 | AAA |
| `--accent-alt` text on `--bg` | 1.36:1 | Fails, and is never used this way |
| `--ink` text on `--accent-alt` fill (the `<mark>` case) | 11.14:1 | AAA |
| `--ink` text on `--surface` | 13.87:1 | AAA |
| `--ink-muted` text on `--surface` | 4.47:1 | Fails AA by a hair (needs 4.5:1) |
| `--accent` text on `--surface` | 8.15:1 | AAA |
| white text on `--accent` fill | 9.60:1 | AAA |

Two rules this table exists to enforce. First, `--accent-alt` (the highlighter yellow) is unreadable as text on the canvas, 1.36:1, which is exactly why the Do's/Don'ts restrict it to `<mark>` backgrounds under dark `--ink` text, never as a text color, a button fill, or a link color. It is a highlighter, not a brand color you can drop text on. Second, `--ink-muted` measured on `--surface` (4.47:1) sits just under the 4.5:1 AA floor, close enough that it isn't safe to promise. In practice this means muted/secondary text (dates, captions) is only set in `--ink-muted` directly on `--bg`, never inside a `--surface` panel, inside a panel secondary text steps up to full `--ink` at a smaller size instead. That distinction is documented here so a future page doesn't casually put a caption in `--ink-muted` inside a teaser card and fail contrast by a hair.

typography:
  display:
    fontFamily: Fraunces
    fontWeight: 600
  body:
    fontFamily: Source Serif 4
    fontWeight: 400

## Type Scale

| Token | Size | Weight/Style | Family | Line-height | Letter-spacing | Used for |
|---|---|---|---|---|---|---|
| `--text-display` | `clamp(2.75rem, 6vw, 4.75rem)` | 600 | Fraunces | 1.05 | -0.01em | Hero H1 only (the typewriter headline) |
| `--text-h2` | `1.75rem` | 600 | Fraunces | 1.2 | 0 | Section headings |
| `--text-h3` | `1.35rem` | 600 | Fraunces | 1.3 | 0 | Article/issue/entry titles |
| `--text-pullquote` | `1.4rem` | 500 italic | Fraunces | 1.4 | 0 | Pull-quotes inside long-form copy |
| `--text-body` | `1.0625rem` | 400 | Source Serif 4 | 1.7 | 0 | Paragraph copy, the reading column |
| `--text-small` | `0.85rem` | 400 | Source Serif 4 | 1.5 | 0.01em | Nav links, footer, form labels, helper/error text, issue dates |
| `--text-meta` | `0.8rem` | 500 italic | Source Serif 4 | 1.4 | 0 | Issue numbers, marginal-note strings, timestamps |

Rule for Fraunces vs. Source Serif 4, both are serif, the split is not "serif vs. sans," it's display moment vs. reading copy. Fraunces (a display optical-size cut with real personality at large sizes) is reserved for the hero headline, section headings, article and issue titles, pull-quotes, and the wordmark, the handful of moments meant to be looked at before they're read. Source Serif 4 carries everything meant to be read continuously or interacted with: paragraph copy, nav labels, link and button text, form labels and input text, footnotes, the archive list, the footer. This is a stricter rule than it looks, it means nav links, the signup button label, and table-of-contents entries in the archive are all Source Serif 4, not Fraunces and not a sans-serif borrowed in from a "UI chrome" instinct. If a string is longer than about a sentence, or the reader clicks/types into it, it's Source Serif 4. If it's a short display moment that sets the tone for what follows, it's Fraunces.

## Spacing Scale

Base unit `8px`. Tokens in use: `--space-2: 0.5rem`, `--space-3: 1rem`, `--space-4: 1.5rem`, `--space-6: 2rem`, `--space-8: 3rem`, `--space-12: 4rem`.

## Shape

One radius scale, and it's nearly flat because paper doesn't round. `--radius: 2px`, used exactly once, on the signup input, just enough to soften a text box without turning it into rounded UI chrome. Every panel, teaser, and card in this system has square (`0`) corners, paper is cut, not rounded, elevation is never communicated with a shadow. There is no pill radius anywhere, because there are no filled pill buttons in this system, see Components below, the interactive vocabulary is underlined links, and an underlined link has no corners to round.

## Iconography

No icon library, and no substitute set of Unicode glyphs standing in for one either. A hand-drawn-annotation aesthetic, slight rotation, imperfect alignment, never gridded, is fundamentally at odds with a geometric icon library's job, which is to be perfectly uniform stroke-width, perfectly centered, perfectly reusable across contexts. Importing one (even a "line style, 1.5 stroke" set the way patchline keeps in reserve) would immediately read as software UI dropped into a reading page. Where a signal is needed, this system reaches for typography instead: a `→` after "Read the latest issue," the `§` numerals that already mark each article in the margin, an em-space-free `No. 14` in the archive. The one exception, and it's the only non-text mark on the page, is the logo, and it exists because a lockup needs some graphic anchor, not because the page needed icons.

## Signature Interaction

Article teasers unfurl from hand-drawn-style marginal annotations as you scroll, headlines type themselves out letter by letter on first view. Implemented deliberately without GSAP: the headline reveal is a per-character `<span>` with a staggered CSS `transition-delay`, flipped to visible on `requestAnimationFrame`, and the marginal-note reveal is a plain `IntersectionObserver` toggling a `.is-visible` class at a 0.4 threshold, no scroll-scrubbing, no pinning. GSAP and ScrollTrigger are vendored and available site-wide, but this brand's one flourish doesn't need a timeline, a threshold-triggered class toggle is enough, and reaching for a heavier tool here would contradict the "calm, not cinematic" motion principle below. Both effects respect `prefers-reduced-motion` by disabling their CSS transitions so the end state renders immediately.

## Voice & Tone

Literary, dry wit, first-person, the newsletter's author is a specific "I," not a brand account. In practice:
- **CTA label**: "Read the latest issue", not "Subscribe now and never miss a post!"
- **Empty/terminal state** (end of the archive list): "That's everything, for now. I haven't written the next one yet.", not "Oops, nothing here! Check back soon."
- **Inline note** (a marginal aside beside the long-form excerpt): "This is the part I'd cut if an editor were watching.", not a generic tooltip or disclaimer.

## Accessibility Baseline

- Focus ring: `2px solid var(--accent)`, `2px` offset, applied via `:focus-visible` on every link, button, and input, never removed without a visible replacement.
- Reduced motion: the typewriter headline and the marginal-note reveal both disable their CSS transitions under `prefers-reduced-motion: reduce`, rendering the finished state immediately.
- Minimum tap target: interactive links and the form's submit action carry enough padding to clear `44px` in the smallest dimension on touch viewports, even though the visible underline is thin.
- Color is never the only signal: the signup form pairs a border-color change with an inline sentence on both success and error, never color alone, and `<mark>` emphasis is a background fill plus the surrounding sentence, not a color cue standing alone.
- `--ink-muted` is only set on `--bg`, never on `--surface`, per the contrast table above.

## Components

### Navigation
Single-line bar, `60px` tall (shorter than a typical product nav on purpose, this brand doesn't need to hold much), `--bg` background with a `--border` bottom hairline, sticky to the top. Left: a small "back to gallery" utility link. Center-left: the mark and wordmark lockup. Right: one "Archive" link. No dropdown, no hamburger, two links don't need to collapse into anything.

### Link system (this brand has no filled buttons)
Three tiers, no pill shape, no fill, because a filled button is the fastest way to make a reading page look like a product:
- **Primary**: Fraunces italic/600, `--accent`, a `1.5px` underline offset `4px`. Used once per view for the single real action ("Read the latest issue").
- **Secondary**: Source Serif 4/500, `--accent`, a `1px` underline offset `3px`. Same-page or adjacent-page navigation, like "Browse the archive."
- **Utility**: Source Serif 4/400, `--ink-muted`, no underline until hover. Nav chrome like "back to gallery" and footer links.

All three define `:hover` (underline darkens to full `--accent` / color shifts from `--ink-muted` to `--ink`), `:active` (`opacity: .7`, a soft press rather than a translate, since these are inline text, not boxes), `:disabled`/`.is-disabled` (`--ink-muted`, underline removed, `opacity: .6`, `pointer-events: none`, never color alone since the underline also disappears), and `:focus-visible` (accent outline, `2px` offset). Padding is added around the clickable text so the true hit area clears 44px even though the visible underline stays thin.

### Forms
The one form on the page is the inline signup. Label above input, `--text-small`. Input: `--bg` background, `1px solid --border`, `--radius` (`2px`), `--ink` text, `--ink-muted` placeholder, real label present so the placeholder is never doing the label's job. On `:focus`, border becomes `--accent` and the focus ring applies. Helper text sits below in `--text-small`/`--ink-muted` by default. On error, the border becomes `--accent` (still, this system has no red, the sentence itself carries the meaning: "That doesn't look like an email.") and the helper text switches to that sentence. On success, the input and submit disable and the helper text becomes "You're on the list. No confetti, I promise." The submit control is styled as a Primary link inside a real `<button type="submit">`, not a filled pill.

### Paper panels (teasers)
A flat `.panel`: `--surface` background, `1px solid --border`, `0` radius, no shadow, no gradient. Used for the secondary "more from the margins" teasers, distinct from the marginal-note article list, which stays exactly as it shipped in the pilot demo. Elevation is the tonal step from `--bg` to `--surface` plus a hairline, never a drop shadow.

### Long-form reading layout
A `--measure: 38rem` reading column (roughly 60 to 64 characters at `--text-body` size), a drop-cap first letter on the opening paragraph set in Fraunces, a pull-quote in `--text-pullquote` marked by a large hand-placed Fraunces quotation glyph rather than a colored side border (a left-bordered card is the most recognizable AI-slop tell, and a literary quotation mark fits this brand's own hand-annotated visual language better), and a static marginal aside styled with the same rotated, hand-placed language as the signature interaction's notes (Fraunces italic, `--accent`, a few degrees of rotation) but without the scroll-observer hook, since the brief for this page is to keep the existing signature interaction unmodified, this is a separate, static instance of the same visual idea, not a second copy of the mechanic.

### Archive list (table of contents, not a data grid)
Past issues are not genuinely tabular data, there's a title, a date, and a one-line description, no columns worth comparing side by side. A bordered `<table>` with a shaded header row would read instantly as dashboard software, exactly the register this brand avoids. Instead the archive is a serif list grouped by year, each entry a `No. NN` / date pairing in `--text-meta`, a Fraunces title link, and a one-line description in `--text-small`/`--ink-muted`, separated by one `--border` hairline between entries (never both a top and bottom rule per row, that reads as a grid). It reads like the contents page of a book, because that's what it is.

### Footer
One row: brand tagline on the left, real page links on the right (Home or Archive depending on which page you're on, back to gallery). No invented legal text, no links to pages that don't exist, no social-share icons, per the Don'ts below.

## Do's and Don'ts

### Do
- Let marginal notes and the logo mark feel hand-placed, slight rotation, imperfect alignment, never gridded.
- Use `--accent-alt` sparingly, only as an inline `<mark>` background under dark `--ink` text, never as a text color, link color, or fill.
- Keep the reading column narrow (`--measure: 38rem`), this is a reading experience first.
- Set every interactive label, nav, button, form, in Source Serif 4, never a sans-serif, even for the smallest utility link.
- Let the typewriter headline be the one flourish, everything else uses instant or gently-eased CSS transitions, never a scroll-scrubbed timeline.

### Don't
- Don't use sans-serif anywhere in body copy, or anywhere else on the page, the literary voice depends on the serif holding all the way down to a nav label.
- Don't over-animate, the typewriter headline is the one flourish, the rest stays calm and paper-like.
- Don't add social share buttons or subscribe popups, they undermine the "written in the margins" intimacy. The inline signup field on the homepage is not an exception dressed up, it never appears as an overlay or modal, has no urgent marketing copy, and is never labeled "Subscribe."
- Don't fill a button or badge solid with `--accent` or `--accent-alt`, there are no filled buttons in this system, only underlined links.
- Don't set `--ink-muted` text on `--surface`, it lands at 4.47:1, just under AA. Use full `--ink` at a smaller size instead.
- Don't add a third accent color for "success" or "error," a plain sentence carries that meaning here.
- Don't add an icon library, or a substitute set of Unicode glyphs playing the same role, typography carries every signal this page needs.
- Don't mark a pull-quote with a colored side border, that's a generic card tell, use a hand-placed typographic quotation mark instead.

## Known Constraints

- Two routes now exist (the homepage and the archive), still no search or filtering across issues, no per-issue permalink pages (the archive links to same-page anchors, not standalone issue pages that don't exist yet), no authenticated states, the inline signup is not wired to a real list, this is a concept demo. There is intentionally no dark-mode variant, this brand is a single warm-paper theme, not a light/dark pair, in the same way it's intentionally a single accent rather than a system of semantic colors.