name: veridian-design
version: alpha
description: >
  An editorial literary-prize site set on warm cream paper (`#EFE6D0`) with near-black
  charcoal ink (`#222018`). The signature move is gestural: hand-painted SVG brushstrokes
  in red (`#C03A29`), cobalt (`#253BA0`) and ochre (`#E8B23A`) animate across an oversized
  italic Didone wordmark, all roughened by a single SVG turbulence/displacement filter.
  Type is a three-voice editorial system — DM Serif Display for the giant Didone headings,
  Cormorant Garamond italic for literary body copy, and Space Mono in wide uppercase tracking
  for meta labels. Geometry is flat and printerly: zero radius everywhere except round
  judge avatars, hairline charcoal rules dividing every section, no shadows, and a grain
  texture overlay on the page.
colors:
  # Surface
  cream: '#EFE6D0'        # page background; reversed to text on dark footer
  # Text / Ink
  char: '#222018'         # primary ink — headings, body, hairlines, footer fill
  # Brand voltages (the three brushstroke inks)
  red: '#C03A29'          # primary accent — links, winner hover, phase 01, brushstroke bs1
  cobalt: '#253BA0'       # secondary accent — phase 02, splatter, brushstroke bs2
  yellow: '#E8B23A'       # tertiary accent — phase 03/winner, footer email, brushstroke bs3
  # Hairlines & tints
  char-20: 'rgba(34,32,24,0.2)'   # inactive progress dots
  cream-70: 'rgba(239,230,208,0.7)' # frosted intro card over hero (with backdrop-blur)
typography:
  display:
    fontFamily: "'DM Serif Display','Playfair Display',serif"
    fontSize: clamp(80px, 18vw, 280px)
    fontWeight: 400
  heading:
    fontFamily: "'DM Serif Display','Playfair Display',serif"
    fontSize: 88px
    fontWeight: 400
  body:
    fontFamily: "'Cormorant Garamond',serif"
    fontSize: 17px
    fontWeight: 400
  meta:
    fontFamily: "'Space Mono',monospace"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 2px
    textTransform: uppercase
rounded:
  none: 0px
  full: 9999px
spacing:                  # base unit 4px; Tailwind scale
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
components:
  nav:
    backgroundColor: '{colors.cream}'
    borderBottom: '1px solid {colors.char}'
    typography: '{typography.meta}'
    padding: '20px 32px'
  hairline:
    backgroundColor: '{colors.char}'
    height: '1px'
  introCard:
    backgroundColor: '{colors.cream-70}'
    backdropFilter: 'blur(2px)'
    textColor: '{colors.char}'
    typography: '{typography.body}'
    rounded: '{rounded.none}'
    padding: '20px'
  judgeCell:
    backgroundColor: '{colors.cream}'
    border: '1px solid {colors.char}'
    rounded: '{rounded.none}'
    padding: '24px'
    avatarRounded: '{rounded.full}'
  submitButton:
    backgroundColor: '{colors.cream}'
    textColor: '{colors.char}'
    border: '1px solid {colors.char}'
    typography: '{typography.meta}'
    rounded: '{rounded.none}'
    padding: '16px 32px'
    hoverBackground: '{colors.char}'
    hoverText: '{colors.cream}'
  accordionItem:
    borderBottom: '1px solid {colors.char}'
    titleTypography: '{typography.heading}'
    bodyTypography: '{typography.body}'
    padding: '20px 0'
  footer:
    backgroundColor: '{colors.char}'
    textColor: '{colors.cream}'
    padding: '48px'
motion:
  brushPaint: 'GSAP stroke-dashoffset draw-in; bs1 1.6s / bs2 1.4s / bs3 1.2s, power2.out, staggered delay'
  splatterPop: 'GSAP scale 0→1 on spatter circles, back.out(2), 0.15s stagger, delay 1.5s'
  signatureLift: 'GSAP per-character translateY 110%→0 + fade, power3.out, 0.025s stagger'
  pinnedReveal: 'GSAP ScrollTrigger pin #pin-wrap, scrub:1, snap [0,0.5,1]; cards slide y 100%→0; phase text/color swap'
  parallaxBlob: 'GSAP rotation 180 + scale 1.5 across reveal scroll; #splatter yPercent -60 + rotation 120'
  judgesBatch: 'GSAP ScrollTrigger.batch fade+rise y40→0, 0.1s stagger, power2.out'
  winnerHover: 'anime.js floating image clip-path inset(0 100% 0 0)→inset(0), opacity 0→0.9, 500ms outQuart; name turns red italic'
  headingReveal: 'GSAP y60→0 + fade on h2.font-didone, power3.out, ScrollTrigger top 85%'
icons:
  library: 'Inline Unicode glyphs / typographic marks'
  style: 'Text symbols — ↗ ↳ → ↻ ◉ ★ ↑ ¶ § + ×'
  color: '{colors.char}'

The Veridian

veridian-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 Veridian is an editorial site for a fictional literary prize, built to feel like a hand-set art catalogue. The surface is warm cream paper (#EFE6D0) printed in near-black charcoal ink (#222018), with a fine grain texture (.grain, layered radial-gradient dots) laid over everything. The signature move is painterly: an oversized italic Didone wordmark ("Veridian — for the unwritten —") sits beneath three gestural SVG brushstrokes in red (#C03A29), cobalt (#253BA0) and ochre (#E8B23A), all run through a single SVG turbulence/displacement filter (#rough) so edges look dragged and wet. Type carries three distinct voices: DM Serif Display (falling back to Playfair) for the enormous Didone headings up to clamp(80px,18vw,280px), Cormorant Garamond italic for literary body and pull-quotes, and Space Mono in tight 11px uppercase with wide 0.2–0.3em tracking for every meta label, section marker, and date. The layout is flat and printerly — no rounded corners (except circular judge avatars), no drop shadows, just charcoal hairline rules dividing every section, with a scroll-pinned three-phase "Reveal" and a hover-reveal archive list as the interactive centrepieces.

Colors

Surface. cream #EFE6D0 is the single page background (set on body and the .grain wrapper). It reverses to become the text color on the dark footer.

Ink / Text. char #222018 is the universal near-black: headings, body copy, all 1px hairline rules and section borders, the footer fill, and the default brushstroke spatter dot.

Brand voltages. Three accents double as the brushstroke inks. red #C03A29 is the primary — the "Submit ↗" nav link, "Read the manifesto" cue, the winner-row hover (name turns red italic), Phase 01 progress, and the thickest hero stroke (bs1). cobalt #253BA0 is secondary — Phase 02, the submissions-section splatter, and stroke bs2. yellow #E8B23A is tertiary — Phase 03 / the laureate, the footer email address, and stroke bs3. The phase color is swapped live into the parallax blob and progress dots as the Reveal scrolls.

Hairlines & tints. rgba(34,32,24,0.2) fills inactive progress dots (also as Tailwind bg-[var(--char)]/20). The hero intro card sits on bg-[var(--cream)]/70 (~rgba(239,230,208,0.7)) with backdrop-blur-xs. The grain overlay uses rgba(34,32,24,.04) and .03 radial dots.

Typography

Loaded via one Google Fonts @import: DM Serif Display, Playfair Display, Cormorant Garamond, and Space Mono. DM Serif Display (display fallback Playfair) is the Didone headline face used for the wordmark, every section title, author names, winner names, and footer logo. Cormorant Garamond — almost always italic — is the literary body face for the charge, quotes, judge bios, and accordion copy. Space Mono is the monospace meta face: nav, dates, section markers (§), and captions, always uppercase with wide tracking. All open-source on Google Fonts, so no substitution needed.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(80px, 18vw, 280px)	400	0.82	-0.02em (sub)	Hero italic wordmark
heading	68–120px (also text-[88px], text-[92px], clamp(64px,9vw,160px))	400	0.85–0.9	—	Section titles, author/winner names
heading-sm	24–48px (text-2xl–text-5xl/6xl)	400	tight	—	Judge names, accordion titles, footer logo
body	14–19px (text-[17px], [19px], [14px])	400	1.45–1.55	—	Italic quotes, bios, manifesto copy
meta	10–11px	400/700	7 (mono)	0.15–0.3em	Nav, dates, §/¶ markers, captions, footer links

Layout

Base unit 4px on the Tailwind scale; horizontal padding is consistently px-8 (32px), section vertical rhythm py-20 (80px). Full-bleed sections stack and are separated by 1px charcoal border-t/border-y rules rather than gaps. The composition: a 92vh hero with absolutely-positioned brushstroke SVG, corner meta, a centered giant signature, and a frosted bottom-right intro card; a single-line calendar strip; a 100vh pinned "Reveal" split 34% / 66% (left meta column with progress dots, right stacked author cards); a 5-column bordered judges grid (grid-cols-5 with cell borders forming a table); a full-width archive list of grid-cols-[120px_1fr_auto] winner rows with a fixed hover-reveal image floating on the right; and a two-column submissions block (grid-cols-[1fr_1fr]) pairing a giant "How to Enter" heading with an accordion. The footer is a dark 4-column grid. Whitespace is generous and editorial; max widths are set locally (max-w-[640px], max-w-sm, max-w-md).

Elevation & Depth

Strictly flat — no box-shadow anywhere. Depth comes entirely from (1) 1px charcoal hairlines and section borders, (2) the SVG #rough turbulence/displacement filter giving brushstrokes and blobs a hand-painted edge, (3) one frosted-glass moment on the hero intro card (backdrop-blur-xs over cream/70), (4) mix-blend-mode:multiply on the archive hover image so it sinks into the paper, and (5) grayscale photography that recedes against the warm cream. Parallax motion (blob rotation, splatter drift) supplies the only layered-depth illusion.

Shapes

Resolutely rectangular: rounded is 0 everywhere — cards, buttons, images, the intro panel all have hard corners, reinforcing the printed-page feel. The sole exception is the judge avatars, which are rounded-full (9999px) circular crops. Brushstrokes use stroke-linecap:round so painted marks have soft ends, but no UI element is itself rounded.

Components

• Nav — cream bar, border-b charcoal hairline, px-8 py-5; left/right Space Mono meta in 0.2em uppercase, centered DM Serif text-xl wordmark; "Submit ↗" link in red.
• Hairline — var(--char) fill, height:1px (or .vhair width:1px); the universal divider, used inside cards and between meta blocks.
• Intro card (hero) — bg-[var(--cream)]/70 + backdrop-blur-xs, p-5, no radius; Space Mono ¶ 001 / The Charge label beside a 19px Cormorant italic charge.
• Author card (reveal) — full-bleed, grid-cols-[180px_1fr]; a 180×240 grayscale portrait, mono status label, large DM Serif name, colored italic book title (red/cobalt/ yellow by phase), Cormorant quote, hairline, mono publisher row.
• Judge cell — bordered grid cell p-6; 80px rounded-full grayscale avatar, DM Serif text-2xl name, colored mono role, 14px Cormorant bio.
• Winner row — grid-cols-[120px_1fr_auto] link, py-6, border-b; mono year, DM Serif text-[68px] name, Cormorant italic title; on hover name+year turn red italic and the floating image wipes in.
• Submit button — border border-[var(--char)], px-8 py-4, Space Mono text-xs 0.3em uppercase "→ Begin Submission"; hover inverts to charcoal fill / cream text.
• Accordion item — border-b charcoal, py-5; mono number + DM Serif text-3xl title, DM Serif + plus that rotates 45° to × on open; body max-height 0→600px reveal.
• Footer — bg-[var(--char)] / text-[var(--cream)], p-12, 4-column grid; DM Serif italic logo, mono link lists at reduced opacity, email in yellow.

Motion

Animation is the personality, driven by GSAP + ScrollTrigger with anime.js v4 for the hover wipe. On load: the three brushstrokes draw in via stroke-dashoffset (bs1 1.6s, bs2 1.4s, bs3 1.2s, power2.out, staggered), spatter dots pop with back.out(2), and the signature lifts character-by-character (translateY 110%→0, 0.025s stagger). The Reveal section pins #pin-wrap and scrubs through three phases with snap:[0,0.5,1]; author cards slide vertically while the phase title, meta, description, blob color, and progress dots swap live, and a #parablob rotates 180° / scales 1.5×. The submit splatter parallaxes (yPercent:-60, rotation:120). Judges fade+rise in a ScrollTrigger.batch with 0.1s stagger. Archive rows reveal a clip-path image wipe (inset(0 100% 0 0)→inset(0), 500ms outQuart) via anime.js. Section h2s rise 60px and fade on enter.

Iconography

No icon library — all glyphs are inline Unicode typographic marks rendered in the mono or serif faces: arrows ↗ ↳ → ↻ ↑, dots ◉, star ★, pilcrow ¶, section §, accordion + (rotating to ×). They inherit char ink unless tinted with a brand voltage (e.g. red ◉ and arrows). Marks are decorative-meta, not a functional UI icon set.

Do's and Don'ts

• Do keep the surface warm cream and ink near-black charcoal; let the grain texture sit under everything.
• Do reserve red/cobalt/yellow for the three brushstroke voltages and phase coding — one accent per moment, never crowded.
• Do run brushstrokes and organic blobs through the #rough SVG filter so edges stay hand-painted.
• Do keep three type voices distinct: DM Serif for display, Cormorant italic for prose, Space Mono uppercase for meta.
• Don't add border-radius (except circular avatars) or any drop shadow — depth is hairlines and grain, not elevation.
• Don't color photography; portraits stay grayscale to recede against the paper.
• Don't introduce flat geometric icons; the system speaks in typographic marks.

Known Gaps

• Spacing scale is the standard Tailwind 4px scale inferred from utility classes; only the used steps are listed.
• The cream-70 and char-20 tints are read from Tailwind opacity utilities (/70, /20) and expressed as approximate rgba() values.
• Exact animation timings are read directly from the GSAP/anime.js calls; the scroll-snap "feel" depends on viewport and is qualitative.
• backdrop-blur-xs maps to roughly a 2px blur (Tailwind's extra-small blur).