name: wirewell-design
version: alpha
description: >
  A newspaper-broadsheet link blog rendered "on screen": warm newsprint
  (#F2F0EA) ruled by ink-black hairlines (#1A1A18), with a single electric
  cobalt (#1B4DBF) standing in for hyperlink ink and a paper-yellow highlighter
  (#F7E98E) for "new" flashes. The type story is editorial — a black Playfair
  Display for mastheads and headlines, Georgia for body, and Courier Prime for
  every label, slug, timestamp and rule. The signature moves are a sticky
  vertical masthead column, a CSS multi-column dispatch feed split by a hairline
  column rule, a paused-on-hover monospace ticker, and rectilinear bordered
  panels — zero radius, zero shadow, no gradients by design.
colors:
  # Brand / Accent
  link-cobalt: '#1B4DBF'      # hyperlink ink: arrows (↗), pilcrows (¶), hover slug color
  ticker-blue: '#5b85e6'      # lighter cobalt for ↗ arrows inside the dark ticker bar
  flash-yellow: '#F7E98E'     # highlighter — LATEST chip, new-flash background pulse
  # Surface
  newsprint: '#F2F0EA'        # page background, light text on dark bars
  ink: '#1A1A18'              # ink-black: text, dark bars, ticker, panel headers, NEW tag
  # Text
  text-body: '#1A1A18'        # all body + heading text (ink on newsprint)
  text-invert: '#F2F0EA'      # text on ink bars (ticker, panel headers, NEW tag)
  # Hairlines
  hairline: '#1A1A18'         # .hair — every border, divider, column-rule (ink)
  hairline-soft: 'rgba(242,240,234,0.30)'  # newsprint/30 divider inside LATEST chip

The Wire & Well

wirewell-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 Wire & Well is a link blog dressed as a morning broadsheet "printed on screen." The whole page sits on warm newsprint #F2F0EA with ink-black #1A1A18 doing everything structural — text, the top ticker bar, panel headers, the NEW tag, and crucially every border via the .hair class. A single electric cobalt #1B4DBF is the hyperlink voltage: it colors the ubiquitous ↗ arrow, the ¶ pilcrow before each headline, and the slug on hover. A paper-yellow #F7E98E is the highlighter — it fills the LATEST chip and flashes behind the three newest dispatches on load. The type is pure editorial: black Playfair Display for the stacked masthead ("THE / WIRE / & / WELL" at 72px) and headlines, Georgia for running body copy, and Courier Prime for every label, timestamp, slug, kicker and folio line. Geometry is strictly rectilinear — radius is zero everywhere, depth comes only from hairlines and solid ink bars (no shadows, no gradients, stated outright in the footer). The layout is a sticky 300px vertical masthead rail beside a CSS multi-column dispatch feed divided by a 1px column rule, capped by two bordered panels and a heavy ruled footer.

Colors

Brand / Accent. link-cobalt #1B4DBF is the hyperlink ink: the ↗ arrows in slugs, the ¶ pilcrow opening each headline, the RSS line, the archive bullets, and the slug color on .dispatch:hover. ticker-blue #5b85e6 is a lighter cobalt used only for the ↗ arrows inside the dark ticker (legible on ink). flash-yellow #F7E98E is the highlighter: it fills the bold LATEST chip and is the start color of the new-flash background pulse that fades to transparent on load.

Surface. newsprint #F2F0EA is the page background and the light text on all dark bars. ink #1A1A18 is the page text color and the fill of every dark element — the top ticker strip, the MOST CLICKED / ARCHIVE panel headers, and the NEW tag.

Text. text-body #1A1A18 is all heading and body text. text-invert #F2F0EA is text reversed out on ink bars.

Hairlines. hairline #1A1A18 (the .hair class) is the single most-used token — it sets the color of every border, divider (divide-y), the masthead rail border, the 4px section underline, the footer rules, and the column-rule:1px solid #1A1A18 between feed columns. hairline-soft rgba(242,240,234,0.30) is the only translucent value, dividing the LATEST chip from the scrolling ticker.

Typography

Three faces, all loaded from Google Fonts. Display is Playfair Display (weights 400/700/900 + italic) — a high-contrast Didone used black for the masthead and bold for headlines. Body is system Georgia (Georgia, 'Times New Roman', serif) — no web font, italic for the standfirst. Mono is Courier Prime (400/700 + italic), a typewriter monospace carrying all metadata, labels, slugs and rules. Open-source substitutes if needed: Playfair Display is already open (Google); Georgia substitutes with Source Serif 4 or PT Serif; Courier Prime is already open.

Token	Size	Weight	Line-height	Tracking	Usage
display-masthead	72px	900	0.82	tight	"THE WIRE & WELL" stacked title
display-section	34px	900	none(1)	—	"Today's Dispatches" header
display-headline	22px	700	tight	—	each dispatch headline
display-rank	26px	900	—	—	rank numerals in Most Clicked
display-footer	20px	900	—	—	footer wordmark
body	15px	400	snug	—	dispatch summaries, standfirst (italic)
mono-label	11px	400/700	relaxed	widest / 0.3em	slugs, timestamps, kickers, footer links
mono-micro	9–10px	400/700	relaxed	widest / 0.3em	NEW tag (9px), kicker (10px, uppercase), folio
ticker	12px	400	—	widest (LATEST)	scrolling ticker + LATEST chip

Layout

Base spacing is a 4px grid expressed through Tailwind utilities (px-4/6/8, py-2/3/8, mt-6/8/10, gap-8). The page is a full-bleed stack: a dark monospace ticker bar across the top, then a flex row that becomes md:flex-row. The left is a fixed 300px masthead aside — md:sticky md:top-0 md:h-screen, bordered right by a 2px hairline — holding the volume/number folio, the kicker, the 72px stacked title, the dateline, an italic standfirst, a filed-today register, and a masthead colophon pinned with mt-auto. The right main is the feed: a section header underlined by a 4px hairline, then a CSS column-count:2 / column-gap:2.5rem flow with a 1px solid #1A1A18 column rule, holding 18 hairline-separated .dispatch articles (break-inside:avoid). Below, a 2-column grid of bordered panels (Most Clicked, Archive), then a footer ruled by a 4px top border. Whitespace is generous within strict rules — the broadsheet reads dense but ordered.

Elevation & Depth

There is no elevation in the conventional sense — no box-shadow, no blur, no glass, no gradients (the footer literally declares "NO GRADIENTS"). Depth is created entirely by (a) solid ink #1A1A18 bars reversed against newsprint (ticker, panel headers, NEW tag) and (b) ink hairlines: 1px borders/dividers, 2px masthead and panel borders, and 4px section/footer rules. The single dynamic "layer" is the new-flash yellow background that fades out on load.

Shapes

Uniformly rectilinear. No rounded-* classes appear anywhere — every corner is 0px (chips, tags, panels, bars, the LATEST chip). The look is set by sharp right-angle boxes drawn in hairlines and filled ink rectangles. Even the NEW tag and LATEST chip are hard-cornered.

Components

• Ticker bar — bg ink / text newsprint, f-mono 12px; full-width strip, overflow-hidden, contains the LATEST chip + marquee track.
• LATEST chip — bg flash-yellow / text ink, bold, tracking-widest, px-4, border-right hairline-soft; radius 0.
• Masthead rail — bg newsprint, border-right 2px hairline, 300px wide, sticky full-height; folio row + stacked 72px title + register.
• Dispatch article — no fill, border-b 1px hairline, pb-5 mb-5; mono slug row with cobalt ↗ + optional NEW tag, 22px bold headline led by cobalt ¶, 15px body summary, mono "via …" source line at 70% opacity.
• NEW tag — bg ink / text newsprint, 9px tracking-widest, px-1.5 py-0.5; label "NEW"; radius 0.
• Panel — border-2 hairline; dark header bar (bg ink / text newsprint, mono 12px tracking-widest) over divide-y hairline rows.
• Most Clicked row — baseline flex: 26px black rank numeral, 15px body title with trailing cobalt ↗, mono count; hover nudges the arrow.
• Footer — border-t 4px hairline; black 20px wordmark, mono colophon, underlined mono links, 60%-opacity copyright folio.

Motion

GSAP drives the load sequence: .dispatch items fade up (opacity 0→1, y 14→0, duration .5, stagger .05, power2.out); .new-flash items animate background from #F7E98E to transparent (duration 1.2, delay .6, power1.out); .newtag pops in (opacity 0→1, scale .6→1, duration .4, delay .8, stagger .1, back.out(2)). CSS: the .marquee-track scrolls translateX(0 → -50%) over 38s linear infinite, paused on .ticker-wrap:hover. Hover micro-motion: arrows and slugs transition transform/color over .18s ease — on .dispatch:hover the slug turns cobalt and the ↗ nudges translate(2px,-2px); same arrow nudge on .clicked-row:hover.

Iconography

No icon library. All "icons" are typographic glyphs: ↗ (north-east arrow) as the universal link mark in cobalt #1B4DBF (lighter #5b85e6 on the dark ticker), and ¶ (pilcrow) in cobalt opening every dispatch headline. The .vrt class (vertical-rl writing mode) is defined for vertical text. Sizing follows the surrounding text; no SVG, no font-icon set.

Do's and Don'ts

• Do keep every border and divider on the hairline ink token via .hair; the broadsheet identity is hairline-ruled.
• Do reserve cobalt #1B4DBF strictly for link affordances — arrows, pilcrows, hover slugs — never as a fill or decoration.
• Do keep all four type roles distinct: Playfair for display, Georgia for body, Courier Prime for every label/metadata, yellow only as a highlight.
• Don't add border-radius, box-shadows, or gradients — the design explicitly forbids them ("NO GRADIENTS").
• Don't introduce additional colors; the palette is newsprint, ink, cobalt, and one yellow flash.
• Don't break the multi-column flow or the sticky masthead rail — they are the signature structure.

Known Gaps

Spacing is inferred from Tailwind utility classes (4px grid); no explicit spacing scale is declared in the HTML. ticker-blue #5b85e6 is the only arrow color that differs from the main cobalt and appears solely in the ticker. Body weights/line-heights for Georgia rely on browser defaults plus Tailwind leading-* classes. The new-flash start/end colors are read directly from the GSAP call (#F7E98E → rgba(247,233,142,0)).