name: linkmonger-design
version: alpha
description: >
  The Linkmonger is a broadsheet newspaper rendered as a link blog: warm
  newsprint paper (#F2F0EA), near-black ink (#1A1A18), and a single editorial
  ink-blue accent (#1B4DBF). Its signature moves are heavy 2px masthead rules
  over hairline 1px column dividers, a scrolling mono ticker in a paper-yellow
  (#F7E98E) "Latest" tab, and a four-up CSS multi-column dispatch flow with
  drop-pilcrow (¶) markers. Type is a three-face press kit: black Playfair
  Display for the masthead and numerals, Georgia body for annotations, and
  Courier Prime mono for every label, dateline, and meta line. Everything is
  flat — no shadows, no radii — held together entirely by rules and tracking.
colors:
  # Surface
  paper: '#F2F0EA'        # page background; light text on dark bars
  # Brand / Ink
  ink: '#1A1A18'          # primary ink: headings, body text, all 2px rules, ticker bar
  accent: '#1B4DBF'       # editorial ink-blue: links on hover, arrows, bullet dots
  highlight: '#F7E98E'    # paper-yellow: "Latest" tab + NEW flag flash
  # Text
  text-muted: '#6a685f'   # datelines, "via" sources, secondary meta
  text-dim: '#9a9890'     # ticker timestamps, dotted index rules
  # Hairlines
  hairline: '#cfccc1'     # 1px column/list dividers on paper
  rule-dark: '#3a3a36'    # 1px ticker-item dividers on the dark bar

The Linkmonger

linkmonger-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 Linkmonger dresses a link blog as a hand-set broadsheet newspaper. The surface is warm newsprint #F2F0EA, printed in near-black ink #1A1A18, with exactly one chromatic note: an editorial ink-blue #1B4DBF reserved for link hovers, the diagonal ↗ arrows, and the masthead bullet dots. A second accent, paper-yellow #F7E98E, runs only the "Latest" ticker tab and the NEW flags that flash on load. The masthead stacks a folio line (Vol. XII · No. 318), a tiny tracked-out kicker, a black 56px/80px Playfair Display wordmark, a dateline strip, and a tracked mono nav — all banded by alternating 2px and 1px horizontal rules. The body is a four-column (lg:columns-4) CSS multi-column flow where each dispatch begins with a floated Playfair pilcrow ¶, a mono timestamp, and an ↗ permalink, separated by #cfccc1 hairlines. The whole thing is flat: zero border-radius, zero shadows, depth carried entirely by rule weight and letter-spacing.

Colors

Surface. paper #F2F0EA is the single page background. On the dark masthead ticker bar and "Latest" stripe the paper color flips to a foreground (light text on ink).

Ink / Brand. ink #1A1A18 is the workhorse: all headings, body copy, the heavy 2px masthead and section rules, and the solid dark ticker bar. accent #1B4DBF is the lone editorial color — it tints permalinks on :hover, every ↗ arrow, the • separators in the dateline, and footer-link hovers. highlight #F7E98E paints the mono "Latest" tab and the NEW flag, which GSAP fades to transparent shortly after load.

Text. text-muted #6a685f carries datelines, "via source.com" credits, and secondary meta. text-dim #9a9890 is lighter still — ticker timestamps and the dotted index leader rules.

Hairlines. hairline #cfccc1 is the 1px divider between dispatches and list rows on paper; rule-dark #3a3a36 is its dark-bar counterpart, separating ticker items inside the black bar.

Typography

Three real faces, all web-loaded. Display is Playfair Display (Google Fonts, weights 400/700/900 + italics) — used black (900) for the masthead, section heads, ranked numerals, and the pilcrow. Body is Georgia (system serif, fallback 'Times New Roman', serif) for dispatch headlines and annotations. Mono is Courier Prime (Google Fonts, 400/700 + italic) for every label, folio, dateline, nav item, source credit, and the ticker — the typewriter voice of the masthead.

Token	Size	Weight	Line-height	Tracking	Usage
display-masthead	56–80px	900	1 (none)	tight	"The Linkmonger" wordmark
display-section	20px	900	normal	normal	"Most Clicked Today" head
display-numeral	22px	900	1	normal	ranked list numbers 1–6
body-headline	15px	700	1.15	normal	dispatch link headlines
body-copy	12.5px	400	1.3	normal	dispatch annotations
mono-label	10–11px	700	normal	0.18–0.3em	section labels, "Latest" tab, nav
mono-meta	10–12px	400	normal	wide	datelines, timestamps, "via", folio

Layout

Base unit is 4px; the spacing scale runs 4 / 8 / 12 / 16 / 24 / 28px (Tailwind p-4, gap-7, pt-7). The page is centered at max-w-[1180px] with px-6 gutters. Composition top to bottom: a full-bleed dark ticker bar with a yellow "Latest" tab; a masthead (folio rule, kicker, wordmark, dateline rule, mono nav) banded by 2px/1px rules; the dispatch flow as a 1→2→4 responsive CSS multi-column (md:columns-2 lg:columns-4, column-gap:1.75rem) of break-inside-avoid articles; then a 3-column bottom grid pairing a 2-col "Most Clicked" ranked list with a 1-col "Index · On This Day" rail; and a footer of rules and underlined links. Whitespace is tight and editorial — content packs against the rules like newsprint columns.

Elevation & Depth

Entirely flat. No box-shadow, no glass, no glow anywhere. Depth comes from rule hierarchy: heavy border-2 (2px) #1A1A18 rules frame the masthead bands, section headers, and the two bottom panels; hairline 1px #cfccc1 rules divide dispatches and list rows; border-dotted #9a9890 leaders run the index. The only "fill" panels are the dark ticker bar (#1A1A18) and the yellow tab.

Shapes

Strictly rectangular. Zero border-radius across the entire page — no rounded-* classes, no pills. The aesthetic is squared newsprint blocks bounded by ink rules; the only curves are in the glyphs themselves (Playfair's ¶ and the ↗ arrows).

Components

• Ticker bar — dark #1A1A18 fill, #F2F0EA text, 2px bottom ink rule; a yellow #F7E98E "Latest" tab (mono 11px bold, tracked, 2px right rule), then a GSAP-driven marquee-track of mono 12px items split by 1px #3a3a36 rules.
• Masthead bands — folio + dateline rows on mono 10–10.5px tracked uppercase, fenced by alternating border-t-2/border-b ink rules; nav links hover to #1B4DBF.
• Dispatch article (.disp) — no fill, border-b 1px #cfccc1, pb-3 mb-3; floated ¶ pilcrow (Playfair 15px), mono meta row (NEW flag + timestamp + ↗), Georgia bold 15px headline (.permalink, hover #1B4DBF), 12.5px copy, mono "via" credit.
• Most-Clicked panel — border-2 ink frame, p-4; 2-col ol with Playfair black numerals, bold 13.5px permalinks + inline ↗, mono click-count meta, 1px row hairlines.
• Index rail — border-2 ink frame, p-4; mono 11px rows with dotted #9a9890 leaders, an "On this day" note below a 1px top rule.
• NEW flag (.flash-new) — yellow #F7E98E px-1 highlight on mono bold "NEW"; fades to transparent via GSAP after load.
• Footer — 2px/1px rule bands, mono 10px colophon line, underlined underline-offset-2 links hovering to #1B4DBF.

Motion

GSAP 3 (jsDelivr CDN) drives three effects. (1) Ticker marquee — the .ticker-set is duplicated; on load the track translates x: -setWidth over width/55s, ease:'none', repeat:-1 for a seamless loop. (2) Stagger reveal — all .disp articles animate from {opacity:0, y:14} over 0.5s, stagger:0.03, power2.out. (3) NEW flash — .flash-new tweens backgroundColor from #F7E98E to rgba(247,233,142,0) over 1.2s, delay:0.8, power1.out. CSS adds an .arrow hover micro-move: transform:translate(2px,-2px) over .18s ease when a .disp is hovered.

Iconography

No icon library. The only "icons" are Unicode glyphs: the diagonal ↗ (U+2197) link/permalink arrow in #1B4DBF, the pilcrow ¶ drop marker in Playfair, and • bullet separators tinted #1B4DBF. All are typographic, not SVG — consistent with the hand-set-newspaper conceit.

Do's and Don'ts

• Do keep the system flat — rules, not shadows; rectangles, not radii.
• Do reserve #1B4DBF for links/arrows/dots and #F7E98E for the ticker tab and NEW flags only; the page is otherwise ink-on-paper.
• Do use mono (Courier Prime) for all labels/meta and Playfair black for display moments; keep body in Georgia.
• Do band sections with 2px ink rules and divide items with 1px #cfccc1 hairlines; use dotted leaders only in the index.
• Don't introduce color fills, gradients, rounded corners, or drop shadows.
• Don't widen the measure past 1180px or loosen the tight newsprint spacing — the density is the point.

Known Gaps

• "tight" tracking on the masthead is Tailwind tracking-tight (-0.025em); other tracking values (tracking-widest ≈ 0.1em, tracking-[0.3em], [0.45em], [0.18em]) are read directly from classes.
• Playfair weight 900 is mapped to the font-black class and the loaded wght@…;0,900 import; intermediate weights (400/700) load but are used sparingly.
• Spacing scale is inferred from the Tailwind utilities actually present (4/8/12/16/24/28px); not every step is exercised.