name: codex-marginalia-design
version: alpha
description: >
  A medieval-manuscript broadsheet for a fictional quarterly journal of
  manuscript culture. The page is set on warm parchment (`#EDE2C2`) with ink-brown
  body type, ruled throughout with gold hairline rules (`#C9A227`). Three scribal
  voltages carry the system — lapis blue (`#1B3A8C`), vermillion (`#C0341F`) and
  illuminator's gold (`#C9A227`) — set against the parchment ground. The type story
  is wholly serif: an IM Fell English display face for incipits and headings, a
  Spectral italic for body and glosses, and a Sorts Mill Goudy small-caps face for
  eyebrows, kickers and meta. Signature moves are the candlelit looping hero video
  with light-on-dark recolor, a scroll-drawn illuminated vine SVG, count-up essay
  numerals, drop-caps with marginal glosses, a gilded archive timeline, and a
  bento of facsimile tiles. Geometry is near-flat: tiny radii (2–6px), gold
  borders instead of shadows, dotted underlines and ❧/✦ printer's ornaments.
colors:
  # Brand / voltages
  lapis: '#1B3A8C'        # primary blue voltage — nav, glosses, attributions, tile fills, timeline gradient
  vermillion: '#C0341F'   # red voltage — eyebrows, drop-caps, essay numerals, "red" emphasis spans
  gold: '#C9A227'         # illuminator's gold — hairline rules, borders, frames, timeline fill, ornaments
  # Surface
  parchment: '#EDE2C2'    # page surface / body background, light text over dark sections
  parchment-deep: '#DFCF9F' # deeper parchment — sententia & colophon panels, hero video poster bg
  # Text
  ink: '#1C1813'          # primary text / headings on parchment
  muted: '#6B5A3E'        # muted brown — meta right column, credits, footer baseline
  # Hero recolor (light-on-dark over candlelit video)
  hero-amber: '#EAD08A'   # hero metabar left
  hero-coral: '#F0A487'   # hero "The", dot, dek emphasis
  hero-gold-bright: '#E6BB3E' # hero "Marginalia" + quod ornament
  hero-cream: '#F0D27F'   # hero subscriber chip text
  # Semantic / gradient
  archive-bg-from: '#1B3A8C'  # archives section gradient start (lapis)
  archive-bg-mid: '#0F1E47'   # archives gradient mid (deep navy)
  archive-bg-to: '#13100C'    # archives gradient end (near-black ink)
  overlay-shadow: 'rgba(18, 12, 6, 0.86)' # hero candlelight overlay (warm near-black)
typography:
  display:
    fontFamily: "'IM Fell English', Georgia, serif"
    fontSize: clamp(58px, 11vw, 128px)
    fontWeight: 400
    lineHeight: 0.86
    letterSpacing: -0.01em
  heading:
    fontFamily: "'IM Fell English', Georgia, serif"
    fontSize: clamp(34px, 5vw, 54px)
    fontWeight: 400
    lineHeight: 0.98
  body:
    fontFamily: "'Spectral', Georgia, serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.78
  gloss:
    fontFamily: "'Spectral', Georgia, serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.65
    fontStyle: italic
  eyebrow:
    fontFamily: "'Sorts Mill Goudy', Georgia, serif"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 0.34em
    textTransform: uppercase
  meta:
    fontFamily: "'Sorts Mill Goudy', Georgia, serif"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 0.24em
    textTransform: uppercase
rounded:
  xs: 2px      # sub-chip, spines
  sm: 3px      # inner frame, hero image
  md: 4px      # essay inset, gloss
  lg: 6px      # initial frame, bento tiles
  full: 9999px # timeline dots
spacing:        # base unit 2px; common steps below
  xs: 4px
  sm: 8px
  md: 14px
  lg: 22px
  xl: 30px
  2xl: 48px
  3xl: clamp(60px, 9vw, 110px)
components:
  navLink:
    textColor: '{colors.lapis}'
    typography: '{typography.meta}'
    # gold underline (1px) wipes in on hover via scaleX
  eyebrow:
    textColor: '{colors.vermillion}'
    typography: '{typography.eyebrow}'
  subChip:
    textColor: '{colors.vermillion}'
    border: '1px solid {colors.gold}'
    rounded: '{rounded.xs}'
    padding: '3px 10px'
  goldRule:
    # 1px linear-gradient(transparent → gold → transparent)
    backgroundColor: '{colors.gold}'
  initialFrame:
    backgroundColor: 'rgba(27, 58, 140, 0.92)'  # lapis
    border: '2px solid {colors.gold}'
    rounded: '{rounded.lg}'
    padding: '7px'
    # inner 1px gold hairline frame via ::before; shadow 0 30px 60px rgba(0,0,0,.35)
  essayNum:
    textColor: '{colors.vermillion}'   # or {colors.lapis} on .lapisnum
    fontFamily: "'Sorts Mill Goudy', serif"
    fontSize: clamp(120px, 17vw, 220px)
    lineHeight: 0.8
  dropCap:
    textColor: '{colors.vermillion}'   # or {colors.lapis} on .blue
    fontFamily: "'IM Fell English', serif"
    fontSize: 80px
    lineHeight: 0.72
  essayInset:
    backgroundColor: '{colors.lapis}'
    border: '1px solid {colors.gold}'
    rounded: '{rounded.md}'
    # 74x74 thumbnail
  readMore:
    textColor: '{colors.lapis}'
    typography: '{typography.meta}'
    # gold arrow slides 6px right on hover
  bentoTile:
    backgroundColor: '{colors.lapis}'
    border: '2px solid {colors.gold}'
    rounded: '{rounded.lg}'
    padding: '24px'
    textColor: '{colors.parchment}'
    # lapis→ink scrim gradient over image; lifts to scale 1.04 + shadow on hover
  timelineDot:
    backgroundColor: '{colors.lapis}'
    border: '2px solid {colors.gold}'
    rounded: '{rounded.full}'
    # active state: gold fill, pulsing ring
motion:
  wordRise: 'staggered word reveal — translateY(40px) skewY(6deg) → 0, opacity 0→1, .7s cubic-bezier(.2,.8,.2,1), 45ms per-word delay'
  clipReveal: 'clip-path inset(0 100% 0 0) → inset(0), 1s cubic-bezier(.2,.8,.2,1)'
  blurSharp: 'filter blur(16px)→0 + opacity 0→1, 1s cubic-bezier(.2,.8,.2,1)'
  rise: 'translateY(26px)→0 + opacity, .8s cubic-bezier(.2,.8,.2,1), 90ms stagger'
  windup: 'letter-spacing .4em→.01em + opacity .35→1, 1s cubic-bezier(.2,.8,.2,1)'
  vineDraw: 'scroll-scrubbed SVG path stroke-dashoffset over a 250vh pinned/sticky stage'
  countUp: 'essay numerals count 0→target (e.g. 247) over 1100ms, cubic ease-out'
  heroParallax: 'rAF translate3d of hero grain layer by scroll * --depth'
  timelineFill: 'gold gradient fill scaleY(0→1) as the timeline scrolls past'
  qmarkScrub: 'sententia quote-mark translateX(-180px→0) on scroll'
  bentoDrift: 'tile background images translateY drift on scroll; dim/desaturate siblings on hover'
  pulse: '@keyframes pulse — active timeline dot ring 4px→10px, 2.4s ease-in-out infinite'
icons:
  library: typographic printer's ornaments + inline SVG
  style: 'glyph ornaments (❧ ✦ ●) and a hand-drawn illuminated vine SVG (lapis/vermillion/gold strokes, round caps)'
  sizes: { sm: 11px, md: 18px, lg: 24px }
  color: '{colors.gold}'

The Codex Marginalia

codex-marginalia-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

The Codex Marginalia is a medieval-manuscript broadsheet dressed as the landing page of a fictional quarterly journal of manuscript culture. The whole page rests on warm parchment (#EDE2C2), with a second, deeper parchment (#DFCF9F) panelling the pull-quote and colophon, and an ambient pair of faint radial washes (vermillion and lapis at ~5–6% opacity) that suggest pooled candlelight. Text is ink-brown (#1C1813) and muted-brown (#6B5A3E). Three scribal voltages do all the illumination work: lapis blue #1B3A8C (navigation, glosses, attributions, tile and inset fills, the archive gradient), vermillion #C0341F (eyebrows, drop-caps, essay numerals, the "red" emphasis spans), and illuminator's gold #C9A227 (every hairline rule, every border and frame, the timeline fill, and the ❧/✦ ornaments). The type story is purely serif and tri-faced: IM Fell English for the display incipit and all headings, Spectral (mostly italic) for body copy and marginal glosses, and Sorts Mill Goudy set in wide-tracked uppercase for eyebrows, kickers, meta and credits. Signature moves are the candlelit looping hero video — over which the palette flips to light-on-dark amber/coral/gold — a 250vh pinned stage where an illuminated vine SVG draws itself in on scroll, count-up essay numerals beside floated drop-caps and right-margin glosses, a gilded bookspine timeline that fills as you scroll, and a six-tile facsimile bento. Geometry is near-flat: radii stay tiny (2–6px), depth comes from gold borders and hairlines rather than shadows, underlines are dotted, and printer's ornaments punctuate every rule.

Colors

Brand / voltages. Three illuminator's colours carry the identity. lapis #1B3A8C is the primary blue — hero nav, gloss text, attributions, the essay-inset and bento-tile fills, and the start of the archive background gradient. vermillion #C0341F is the red — eyebrows, drop-caps, the giant essay numerals, the read-more and "red" emphasis spans. gold #C9A227 is the connective tissue: every .rule hairline (a transparent→gold→transparent gradient), every border/frame (sub-chip, initial frame, essay inset, bento tile, all-essays band), the timeline fill and dots, and the ❧/✦ glyph ornaments.

Surface. parchment #EDE2C2 is the page body. parchment-deep #DFCF9F panels the Sententia pull-quote and the colophon footer, and is the hero-video poster background.

Text. ink #1C1813 is primary text and headings; lede/dek bodies use it at ~90% (rgba(28,24,19,.9)). muted #6B5A3E is the meta right column, credits and footer baseline.

Hero recolor. Over the dark candlelit video the palette flips warm: metabar left #EAD08A, "The" / dot / dek-emphasis #F0A487 (coral), "Marginalia" and the quod ornament #E6BB3E (bright gold), subscriber chip #F0D27F, with body text in parchment at 82–92% opacity. The hero overlay is a layered rgba(18,12,6,.86→0) warm near-black gradient.

Semantic / gradient. The Archives section is a 165deg gradient from lapis #1B3A8C → deep navy #0F1E47 → near-black #13100C, with text in parchment and gold headings. Bento tiles carry a 165deg scrim from rgba(27,58,140,.28) (lapis) to rgba(19,16,12,.82) (ink).

Typography

All three faces load from Google Fonts in one request: IM Fell English (roman + italic), Spectral (400/500/600 + italics), and Sorts Mill Goudy (roman + italic). The fallback stack is Georgia, serif. IM Fell English is a digitised 17th-century Fell type — its rough, inked edges set the historic display tone; Spectral is the readable transitional-serif body; Sorts Mill Goudy is a delicate Goudy revival used only in wide uppercase tracking for labels.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(58px,11vw,128px)	400	0.86	-0.01em	Hero "Codex / Marginalia" wordmark
heading	clamp(34px,5vw,54px)	400	0.98	—	Section H2s (also up to clamp(40px,6vw,76px) in the vine intro)
body	16px	400	1.78	—	Essay ledes, dek (italic), tile/gloss copy
gloss	13px	400 italic	1.65	—	Right-margin glosses, archive captions
eyebrow	11px	400	—	0.34em	Section eyebrows (Pars Prima/Secunda/Tertia)
meta	11px	400	—	0.24em	Metabar, nav, kickers, credits, footer baseline

Headline sizes scale fluidly with clamp(); essay numerals reach clamp(120px,17vw,220px) in Sorts Mill Goudy, and the sententia quote runs clamp(28px,4.4vw,56px) in IM Fell italic.

Layout

Base unit is effectively 2px; the recurring steps are 4 / 8 / 14 / 22 / 30 / 48px and a fluid clamp(60px,9vw,110px) for section vertical rhythm. Content sits in a .wrap capped at 1240px with clamp(20px,5vw,64px) side padding. The page is a single scrolling broadsheet: a full-viewport hero (100vh, min 640px) with a looping background video, layered grain, and a warm overlay; a 250vh pinned/sticky vine intro (two-column SVG + copy) for "Pars Prima"; an essay list of two-column rows (a 300px gloss column beside a 1fr essay body, alternating sides via .flip); a centred Sententia pull-quote on deep parchment; a Pars Secunda archive timeline (centre axis, alternating left/right nodes, max 920px); a Pars Tertia 4-column / 200px-row facsimile bento with spanning tiles; and a colophon footer in a 4-column grid. Whitespace is generous and editorial — wide tracked labels, hairline rules between every block, and right-aligned sidenotes that read like true margin notes.

Elevation & Depth

Depth is overwhelmingly border-and-hairline, not shadow. Gold hairlines (1px transparent→gold→transparent gradients) rule between sections; gold borders (1–2px) frame the hero initial, essay insets, bento tiles and the all-essays band. Real shadows are reserved: the hero initial frame 0 30px 60px rgba(0,0,0,.35), the timeline spines inset 0 0 0 1px rgba(0,0,0,.4), 0 8px 16px rgba(0,0,0,.4), and bento tiles lift to 0 24px 50px rgba(0,0,0,.4) on hover. The active timeline dot carries a soft pulsing gold ring. There is no glassmorphism; the only "filter" effects are the blur-to-sharp entrance and the hover desaturation of non-hovered bento siblings.

Shapes

Near-flat and bookish. Radii are deliberately small: 2px on the sub-chip and timeline spines, 3px on inner frames and hero imagery, 4px on essay insets and glosses, 6px on the hero initial frame and bento tiles. The only fully round elements are the 9999px timeline dots. The geometry leans on straight ruled lines, dotted underlines (text-decoration: underline dotted), top/bottom hairline borders on the all-essays link, and printer's-ornament dividers (❧, ✦, ❧) rather than soft rounded cards.

Components

• Nav link — lapis #1B3A8C uppercase Sorts Mill Goudy (.2em); a 1px gold underline wipes in left-to-right (scaleX) on hover.
• Eyebrow — vermillion, 11px, .34em uppercase Sorts Mill Goudy ("Pars Prima").
• Sub-chip — vermillion text, 1px gold border, 2px radius, 3px 10px ("Subscribers : 4,812").
• Gold rule — 1px transparent→gold→transparent hairline; .rule-dim at 55% opacity.
• Initial frame (hero) — lapis fill at 92%, 2px gold border, 6px radius, 7px pad, inner 1px gold hairline frame and a corner caption; 0 30px 60px shadow.
• Essay numeral — vermillion (or lapis on .lapisnum) Sorts Mill Goudy at clamp(120–220px), count-up animated from 0 and parallax-drifted.
• Drop-cap — vermillion (or lapis .blue) IM Fell English, 80px, floated into the lede.
• Essay inset — 74×74 lapis-filled thumbnail, 1px gold border, 4px radius.
• Read-more — lapis uppercase Sorts Mill Goudy with a gold → arrow that slides 6px right on hover.
• Bento tile — lapis fill, 2px gold border, 6px radius, 24px pad, parchment text over a lapis→ink scrim; lifts to scale(1.04) with shadow on hover while siblings dim and desaturate; an accent rule grows to 48px vermillion.
• Timeline node — alternating left/right; lapis dot with 2px gold border (active = gold fill + pulsing ring), a gilded bookspine with banded repeating-linear-gradient ends, Sorts Mill Goudy year label.
• All-essays link — IM Fell English 22px lapis, top+bottom 1px gold borders, 10px 40px pad.

Motion

Entrances are one-shot via IntersectionObserver (threshold ~0.18) toggling .is-in; scroll-scrubbed effects run in a single rAF loop. The vocabulary: wordRise (staggered translateY+skewY word reveal, .7s, 45ms/word) for the sententia and colophon; clipReveal (clip-path wipe, 1s); blurSharp (blur 16px→0, 1s) on the archives heading; rise (translateY 26px, .8s, 90ms stagger); windup (letter-spacing .4em→.01em, 1s) on "Digital Facsimiles". Scroll-driven: the vine SVG draws its eight paths via stroke-dashoffset across a 250vh pinned stage; essay numerals count up 0→target over 1100ms (cubic ease-out) and parallax-drift; the hero grain parallaxes by scroll * --depth; the timeline fill scales its gold gradient from 0→1; the sententia quote-mark scrubs translateX −180→0; bento images drift vertically. The active timeline dot runs a 2.4s infinite pulse ring. All easing is cubic-bezier(.2,.8,.2,1). A reduce flag is authored in JS but hard-set to false.

Iconography

There is no icon font. "Icons" are typographic printer's ornaments — ❧ (fleuron), ✦ (star), ● (dot), and ↦/→ arrows — set in the serif faces and coloured gold, vermillion or coral. The one true graphic is the hand-authored illuminated vine SVG (viewBox 0 0 400 600), eight bezier paths stroked in lapis, vermillion and gold with round caps/joins, that draws itself in on scroll. Sizes run roughly 11px (meta dots) to 18px (read-more arrow, quod) to the large decorative qmark at 140px. Ornaments are decorative; the only UI glyph is the read-more arrow.

Do's and Don'ts

• Do keep everything serif — IM Fell English for display/headings, Spectral for body/glosses, Sorts Mill Goudy for wide-tracked uppercase labels.
• Do rule between blocks with gold hairlines and punctuate with ❧/✦ ornaments.
• Do hold the three voltages distinct: lapis for structure/links, vermillion for emphasis/numerals, gold for rules/borders/illumination.
• Do keep radii tiny (2–6px) and lean on borders, not shadows, for depth.
• Don't introduce sans-serif type, large rounded "cards", or glassmorphism.
• Don't recolor body sections with the hero's light-on-dark amber/coral palette — that flip only lives over the candlelit video.
• Don't add bright UI shadows; reserve heavy shadows for the hero initial, timeline spines and bento hover.

Known Gaps

• Spacing scale is inferred from the recurring pixel values in the CSS (4/8/14/22/30/48 plus fluid section padding); no formal token scale exists in the source.
• The hero, grain texture, essay thumbnails and facsimile imagery are remote video/image assets (Kombai CDN, Unsplash, Pexels) and a few local ./assets/*.png; their content is not part of the token system.
• Several one-off bookspine gradients in the timeline (e.g. #5a2018, #1f2b5c, #2a4a3a) are decorative inline values, not named tokens, and are omitted from the palette.
• letterSpacing / fontStyle are recorded only where the source sets them; weights default to 400 since no bold weights are used.