The Avant-Garde Journal

avantgarde-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 Avant-Garde Journal is a creator-analytics report dressed as a printed broadsheet — "Printed on cream · Set in Fraunces," as the footer declares. The entire page sits on warm newsprint cream #FBF6EE and is inked in espresso near-black #2E241B, which doubles as the color of every border and rule on the page. The display voice is Fraunces, an optically-sized serif pushed to its extremes: a clamp(7rem,17vw,15.5rem) hero numeral ("8.4M") with line-height: 0.8 anchors the masthead, while section headlines run at 3xl–5xl. Body copy is Source Serif 4 set in a two-column, column-ruled article with a 5.4rem coral drop-cap, and all data/metadata speaks in Spline Sans Mono, uppercase, widely tracked (0.18em–0.35em). Three pigment voltages punctuate the ink: coral #FF6F61 (kickers, units, drop-cap, velocity), teal #1FB6A6 (every growth delta and positive signal), and ochre #E3B23C (the net-follows numeral and the solid-filled Key Insight callout). Signature moves: heavy 2px espresso rules bracketing every section, a 130-bar GSAP spectrogram that sweeps up on load, a bordered autoplaying video panel with a darkening veil and a faux REC overlay, and a fanned row of hard-shadowed Polaroid cards rotated ±2–3°. The geometry is uncompromisingly sharp — there is no border-radius anywhere.

Colors

Surface. A single page surface: paper #FBF6EE, a cream newsprint tone set once on the root container and re-asserted on full-bleed sections. It is also the fill of gallery cards and the color of mono text laid over the dark video.

Ink. Everything dark is ink #2E241B, an espresso near-black. It is the primary text color, every heading, and — crucially — the color of every border, rule, and divider on the page (2px section frames, 1px cell dividers). Text steps down through a ladder of opacities: ink-90 for article body, ink-85 for the hero lede, ink-70 footer, ink-60 stat captions, ink-55 axis/footnote, ink-45 for platform-row index numbers. Hairlines are hairline rgba(46,36,27,0.22) and hairline-soft rgba(46,36,27,0.18) (the article's column-rule).

Brand voltages. Three accents, each with a clear job. coral #FF6F61 carries identity — kickers ("Vol. XII", "Fig. 1"), the hero "M" unit, the trailing period after "Top Performing Content.", the drop-cap, and the velocity readout. teal #1FB6A6 is the growth/positive signal — every up-right delta, the 9.2% engagement-rate numeral, "POSITIVE 78%", and all gallery save-counts. ochre #E3B23C is tertiary — the "+184k" net-follows numeral and the solid fill of the Key Insight block.

Inverse & gradient. Over the hero video, text uses paper-90 rgba(251,246,238,0.90) with paper-30 hairlines, and a vertical video-veil gradient (rgba(46,36,27,0.55) → 0.1 at 40% → 0.65) darkens top and bottom for legibility.

Typography

Three families, all loaded from Google Fonts: Fraunces (variable, opsz 9–144, wght 300–900, with italics) is the display face; Source Serif 4 (variable, opsz 8–60) is the body/serif face; Spline Sans Mono (400–700) is the data/mono face. All are open-source, so no substitution is needed. Fraunces is the personality — high-contrast, optically-aware, pushed to enormous sizes with tight line-heights and slightly negative tracking. Mono is always uppercase and widely letter-spaced.

Special: a .drop-cap::first-letter rule sets a 5.4rem Fraunces 600 coral initial, floated left, line-height: 0.78.

Layout

Base unit is 4px (Tailwind's scale); horizontal rhythm is dominated by px-8 (32px) gutters and an 1440px max-width container repeated across every section. The page is a stack of full-width sections separated by 2px espresso rules (border-y-2, border-t-2). Composition top-to-bottom: a masthead header (mono kicker + Fraunces wordmark, bottom-ruled); an asymmetric hero (a 3/5 column of mega-numeral + lede + three stat cells, beside a 2/5 bordered video panel); a full-bleed spectrogram band; a 7/3 article-plus-sidebar split where the article is itself a two-column, column-ruled text block and the aside is a left-bordered mono "Platform Footnotes" list; a top-performing-content section with a centered/ fanned gallery; and a mono footer. Whitespace is generous and editorial — large type allowed to breathe, sections clearly demarcated by rules rather than cards.

Elevation & Depth

The system is deliberately flat — no soft shadows, no blur. Depth comes from two print devices: (1) hard offset shadows — .hard-shadow is box-shadow: 14px 14px 0 0 #2E241B, a solid espresso block-shadow on gallery cards that reads as physical paper stacked on a surface; and (2) z-index layering + rotation in the fanned gallery (z-40 → z-10 with -26px overlap). The hero video gains depth from its darkening video-veil gradient. Borders (1–2px espresso) do all the structural separation work that shadows usually do.

Shapes

Radically sharp. Border-radius is 0 everywhere — no rounded-* classes appear, no pills, no soft corners. Every card, tag, video frame, insight block, and spectrogram bar is a hard rectangle. This is the core aesthetic statement: print, ink, and right angles. The only curves on the page come from the type itself (Fraunces serifs) and photographic content.

Components

• Page header — cream, espresso text; 2px bottom rule (border-b-2); mono coral kicker over a Fraunces wordmark; right-side mono nav with a bordered "Q2 · 2026" tag. Padding pt-7 px-8 pb-4.
• Hero numeral — Fraunces 600, clamp-sized, line-height 0.8; the unit letter ("M") tinted coral.
• Stat cell — Fraunces 4xl numeral (ink / teal / ochre) over a mono uppercase caption (ink-60); cells separated by 1px left borders.
• Video panel — autoplay/muted/loop video in a 2px espresso frame, min-h 360px, with video-veil overlay and mono paper-90 REC/sentiment readouts.
• Insight block — solid ochre fill, 2px espresso border, mono kicker over a Fraunces medium statement; p-5, break-inside-avoid.
• Gallery card — cream, 1px espresso border, hard-shadow (14px offset), p-3 pb-12, 260px wide, rotated ±2–3° and overlapped -26px; mono caption with rank ("#01 · Reel") and teal save-count + Tabler arrow.
• Spectrogram bar — flex-1 bars, height-driven, alternating coral/teal, opacity 0.82–1 by height; 130 bars in a border-b-2 band.
• Tag / pill — 1px espresso border, no radius, px-3 py-1, mono uppercase (e.g. "Q2 · 2026").
• Divider rule — .rule = 1px hairline top border; used between platform rows and footnotes.

Motion

Two GSAP build-ins (GSAP 3 + ScrollTrigger via jsDelivr): (a) the spectrogram sweep — .spec-bar animates scaleY 0→1 from the bottom, duration 1s, ease power3.out, stagger 0.006 each from start, 0.2s delay — a laser-sweep that draws the chart left-to-right on load; (b) the gallery cascade — .gal-item enters with y:70, opacity:0, scale:0.9, duration 0.7, ease back.out(1.6), stagger 0.13, triggered when the gallery hits 85% of viewport. The hero video loops continuously (autoplay/muted/playsinline). No CSS transitions or hover states are authored.

Iconography

Tabler Icons via the tabler-icons-webfont CSS (jsDelivr), used sparingly and only as small UI glyphs. The dominant icon is ti-arrow-up-right (16px), appearing on every growth delta and gallery save-count, tinted teal #1FB6A6 to read as "up and to the right." Outline style; no decorative or oversized icon usage — icons are purely functional data ornaments.

Do's and Don'ts

• Do keep every corner sharp — radius is 0, always. Use 1–2px espresso borders and rules for all structure.
• Do reserve teal for growth/positive signals, coral for identity/units, and ochre for the single solid-fill callout.
• Do keep all metadata in uppercase Spline Sans Mono with wide tracking.
• Do let Fraunces go huge with tight line-heights; the mega-numeral is the hero of the page.
• Don't introduce soft drop-shadows or blur — depth is hard offset shadows and rotation only.
• Don't mix the voltages into gradients or use more than the three accents.
• Don't set body or data type in a sans — body is Source Serif 4, data is the mono, headings are Fraunces.

Known Gaps

• The spectrogram bar heights are procedurally generated in JS (sine + random noise, with forced peaks at indices 96 and 118); individual values are non-deterministic, so only the color/opacity rules and bar count (130) are specified.
• Heading sizes vary by breakpoint (text-3xl through text-5xl); the typography table records the representative range rather than every responsive step.
• Stat-cell left-border opacity appears as both 0.20 and 0.25 in the markup; the spec records the dominant 0.20 value.