name: verdant-prize-design
version: alpha
description: >
  An editorial, gallery-grade microsite for a fictional literary prize, set on a
  warm parchment surface (`#EFE6D0`) with near-black ink text (`#222018`). The
  voltage is a single cadmium red (`#C03A29`) used for hairline accents, arrows,
  and the shortlist brushstroke, with a chrome-yellow gold (`#E8B23A`) reserved
  for award labels on dark scenes. The type story is a high-contrast italic
  Cormorant display against a Lora serif body and an all-caps Courier Prime mono
  for labels and metadata. Signature moves: a scroll-pinned three-chapter "Cycle"
  that inverts from parchment to ink, a cursor-following polaroid on the
  shortlist, brushstroke hover marks, and hairline-ruled editorial grids — no
  rounded corners, no shadows beyond the polaroid.
colors:
  # Surface
  parchment: '#EFE6D0'        # page background; hero, all light sections
  ink-deep: '#1c1a10'         # cycle ch2 dark background (scroll-driven)
  ink: '#222018'              # cycle ch3 dark background; body text color; hairlines
  ink-black: '#111008'        # hero headline + hero label text
  ink-overlay: '#16140e'      # judge image bottom gradient stops (rgba 22,20,14)
  # Text
  text-body: '#222018'        # default body/heading ink on parchment
  text-on-dark: '#EFE6D0'     # parchment used as text on dark scenes
  # Brand / Voltage
  cadmium-red: '#C03A29'      # primary accent: mono eyebrows, arrows, rules, brushstroke
  chrome-gold: '#E8B23A'      # award/winner labels on dark; footer underline; archive smear
  cobalt: '#253BA0'           # single hero gestural accent stroke
  # Hairlines
  hairline: '#222018'         # solid 1px section dividers / grid lines
  hairline-soft: 'rgba(34,32,24,0.1)'   # nav border, faint dividers
  hairline-15: 'rgba(34,32,24,0.15)'    # longlist / list row borders
  # Gradient
  hero-veil: 'linear-gradient(to bottom,rgba(239,230,208,0.35) 0%,rgba(239,230,208,0.1) 35%,rgba(239,230,208,0.6) 100%)'  # hero video overlay
  winner-fade: 'linear-gradient(to right,transparent 65%,#222018 100%)'  # winner portrait fade
typography:
  display:
    fontFamily: "'Cormorant', serif"
    fontSize: clamp(4.5rem,12vw,14rem)
    fontWeight: 700
    lineHeight: 0.88
    letterSpacing: -0.02em
  display-light:
    fontFamily: "'Cormorant', serif"
    fontSize: clamp(2.5rem,4vw,5rem)
    fontWeight: 300
  body:
    fontFamily: "'Lora', serif"
    fontSize: 1.02rem
    fontWeight: 400
    lineHeight: 1.78
  mono-label:
    fontFamily: "'Courier Prime', monospace"
    fontSize: 0.6rem
    fontWeight: 700
    letterSpacing: 0.2em
    textTransform: uppercase
rounded:                      # effectively none; only the polaroid + tiny gesture dots
  none: 0px
  dot: 2px                    # hero gestural accent strokes
spacing:                      # rem-based; ~4px base (0.25rem) with editorial macro steps
  xs: 0.5rem
  sm: 1rem
  md: 1.5rem
  lg: 2.5rem
  xl: 4rem
  xxl: 5rem
components:
  nav:
    backgroundColor: 'rgba(239,230,208,0.75)'
    textColor: '{colors.ink}'
    typography: '{typography.mono-label}'
    border: '1px solid {colors.hairline-soft}'
    padding: '1.4rem 3rem'
    note: 'fixed; backdrop-filter blur(8px); wordmark in italic Cormorant'
  mono-eyebrow:
    textColor: '{colors.cadmium-red}'
    typography: '{typography.mono-label}'
    note: 'section labels e.g. "— Section III: The Jury"'
  shortlist-item:
    textColor: '{colors.text-on-dark}'
    typography: '{typography.display-light}'
    accent: '{colors.cadmium-red}'
    note: 'crosshair cursor; hover swipes a 0.75-opacity red brushstroke behind the name'
  judge-cell:
    backgroundColor: '{colors.ink}'
    labelColor: '{colors.chrome-gold}'
    quoteColor: '{colors.text-on-dark}'
    typography: '{typography.mono-label}'
    note: '240px image cell; grayscale(25%)→100% + dark overlay + italic quote reveal on hover'
  outline-button:
    textColor: '{colors.ink}'
    typography: '{typography.mono-label}'
    border: '1px solid {colors.hairline}'
    rounded: '{rounded.none}'
    padding: '2.5rem'
    note: 'CTA band; arrow glyph in cadmium-red'
  cursor-polaroid:
    backgroundColor: '#fff'
    rounded: '{rounded.none}'
    padding: '6px 6px 36px'
    elevation: '3px 5px 22px rgba(0,0,0,0.28)'
    note: '155x200 white frame following cursor on shortlist hover, rotated -4deg'
motion:
  hero-title: 'clipPath inset wipe left→right, 1.8s power2.inOut, delay 0.4'
  hero-bg: 'fade + scale 1.06→1, 2.2s power2.out'
  cycle-pin: 'ScrollTrigger pinned 1800px, scrub 1; 3 chapters cross-fade, bg parchment→#1c1a10→#222018'
  shortlist-brush: 'anime.js scaleX 0→1 brushstroke, 300ms out(3)'
  judge-hover: 'overlay to rgba(34,32,24,0.88), img grayscale→100%, quote fade-up, ~350ms'
  archive-preview: 'cursor-driven right-panel image cross-fade, opacity+scale 1.08→1, 0.4s power2.out'
  pull-quote: 'clipPath inset wipe reveal, 1.4s power2.inOut on scroll'
  footer-link: 'gold underline bar scaleX from left, 280ms out(3)'
icons:
  library: inline text glyphs
  style: 'unicode arrow "→" used as the only directional mark'
  color: '{colors.cadmium-red}'
  sizes: { sm: 1rem }

The Verdant Prize

verdant-prize-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 Verdant Prize is an editorial, museum-catalogue treatment of a fictional literary award. The whole site sits on a warm parchment field (#EFE6D0) with near-black olive ink (#222018, headlines pushed to #111008). It reads like a printed prize brochure: hairline rules everywhere, generous whitespace, and a high-contrast italic serif display face. The single voltage is cadmium red (#C03A29) — it appears only as thin accent rules, the "→" arrows, mono eyebrows, and the shortlist brushstroke — while a chrome-yellow gold (#E8B23A) is held in reserve for award labels and the winner reveal on the dark scenes. A lone cobalt (#253BA0) gestural stroke appears once in the hero. The signature move is the scroll-pinned "Cycle" section that walks through Longlist → Shortlist → Winner while the background inverts from parchment to deep ink, paired with a cursor-following polaroid and brushstroke hover marks. Geometry is strictly square: no rounded corners anywhere except the 2px gesture dots, and the only shadow in the entire page is on the cursor polaroid.

Colors

Surface. The page background is parchment #EFE6D0, set on #page and repeated on every light section. The pinned Cycle section animates its background through two dark stops: #1c1a10 (deep ink) for the shortlist chapter and #222018 (ink) for the winner chapter. Hero and winner headlines use the darkest #111008.

Text. Body and headings are ink #222018 on parchment, often at reduced opacity (rgba(34,32,24,0.65/0.78)) for paragraphs. On the dark Cycle scenes the text flips to parchment #EFE6D0 (and rgba(239,230,208,0.4–0.82) for muted metadata).

Brand / Voltage. Cadmium red #C03A29 is the one accent voltage — mono eyebrows ("— Section III: The Jury"), the "→" arrows, the 1px accent rules under titles, and the hover brushstroke (at 0.75 opacity). Chrome gold #E8B23A is the award color: "2025 Winner", juror name labels on dark, the footer underline bar, and the archive panel smear. Cobalt #253BA0 appears once as a faint hero gestural stroke.

Hairlines. Solid #222018 1px lines divide the major sections and form the jury grid; softer variants rgba(34,32,24,0.1/0.12/0.15) rule the nav border and list rows.

Gradient. The hero video is veiled top-to-bottom with a parchment gradient; the winner portrait fades right into #222018; juror cells use a bottom rgba(22,20,14,0.85) gradient for legibility.

Typography

Three faces, all loaded from Google Fonts in one @import: Cormorant (display serif), Lora (body serif), and Courier Prime (mono). Cormorant is used almost exclusively in italic — a tall, high-contrast didone-ish serif that carries every headline and name. Lora handles running body copy and italic pull-quotes. Courier Prime, always uppercase with wide tracking, handles every label, eyebrow, and metadata string.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(4.5rem,12vw,14rem)	700	0.88	-0.02em	hero title (italic)
display-light	clamp(2.5rem,4vw,5rem)	300	—	—	section/chapter titles, names (italic)
body	1.02rem	400	1.78	—	paragraphs, pull-quote, juror quotes (italic)
mono-label	0.6rem	700	—	0.2em	nav links, eyebrows; smaller variants 0.5–0.65rem at 0.12–0.35em

Layout

Spacing is rem-based on a ~4px (0.25rem) foundation, expressed in editorial macro steps (1rem, 1.5rem, 2.5rem, 4rem section padding, 5rem reading-column padding). The page is a vertical sequence of full-bleed sections, most capped at max-width:1280px and centered, with prose reading columns narrowed to 640px. The hero is a 100vh full-bleed video composition with centered display title and flanking 1px rules. The Cycle section is 100vh and scroll-pinned for 1800px, stacking three absolutely-positioned chapters. The Jury is a hairline-ruled 2-up grid (text cell + 2×2 portrait grid); the Archive is a 60/38 split list with a cursor-driven hover-preview panel. Whitespace is generous and gallery-like; structure is communicated almost entirely through 1px hairlines rather than boxes.

Elevation & Depth

The system is flat by design. There are no card shadows and no glass beyond the nav's backdrop-filter:blur(8px) over a translucent parchment fill. Depth comes from hairline rules, gradient veils on imagery, grayscale photo treatment, and the background inversion of the pinned section. The single literal shadow in the page is on the cursor polaroid: 3px 5px 22px rgba(0,0,0,0.28).

Shapes

Strictly rectilinear. No rounded-* anywhere; section dividers, grid cells, buttons, and the CTA band are all hard 90° corners. The only radius in the file is border-radius:2px on the three thin hero gesture strokes. Photos are full- bleed rectangles, often grayscale, with no rounding.

Components

• Nav — fixed bar, translucent parchment rgba(239,230,208,0.75) with blur(8px), 1px soft bottom border, italic Cormorant wordmark left, mono uppercase links right with a gold hover underline.
• Mono eyebrow — cadmium-red Courier Prime, uppercase, wide tracking; section labels like "— Section III: The Jury".
• Shortlist item — parchment italic name on dark; crosshair cursor; hover swipes a 0.75-opacity cadmium-red brushstroke behind the name and shows the cursor polaroid.
• Judge cell — 240px image cell on ink, grayscale(25%); hover darkens overlay to rgba(34,32,24,0.88), pushes image to grayscale(100%), reveals a gold name label and italic quote.
• Outline button / CTA band — 1px ink border, square, mono uppercase label, cadmium-red "→"; no fill.
• Cursor polaroid — 155×200 white frame, square corners, 6px 6px 36px padding, the page's only drop shadow, rotated -4deg, follows the cursor with easing.

Motion

Heavily animated via GSAP + ScrollTrigger + TextPlugin, with anime.js for hover micro-interactions. Hero title does a clipPath inset wipe (1.8s power2.inOut); the background fades and scales in. The Cycle section is pinned for 1800px and scrubbed: three chapters cross-fade while the background animates parchment → #1c1a10 → #222018 and the progress label flips to parchment. Judges and archive rows stagger-reveal on scroll; the pull-quote wipes via clipPath. Hover motion: the shortlist brushstroke (anime.js scaleX, 300ms out(3)), judge-cell overlay/quote reveal (~350ms), footer gold underline (280ms), and the archive right-panel image cross-fade (0.4s power2.out). A rAF loop eases the cursor polaroid toward the pointer.

Iconography

No icon library. The only recurring mark is the unicode arrow "→", always in cadmium-red, used for CTAs and "Read More" links. Directional and decorative marks are otherwise pure 1px <div> rules.

Do's and Don'ts

• Do keep the surface parchment and the ink near-black; let 1px hairlines do the structural work.
• Do reserve cadmium red for thin accents, arrows, and the brushstroke, and gold strictly for award/winner moments on dark.
• Do set headlines in italic Cormorant and labels in uppercase wide-tracked Courier Prime.
• Don't add rounded corners or drop shadows (the polaroid is the sole exception).
• Don't introduce filled buttons or color blocks — outlines and hairlines only.
• Don't spread the gold or cobalt around; they are single-purpose accents.

Known Gaps

• ink-overlay (#16140e) is read from the juror gradient's rgba(22,20,14,…) stops and named approximately.
• The spacing scale is inferred from the rem values actually used (0.5/1/1.5/2.5/4/5rem); no explicit numeric token system exists in the HTML.
• Hover/scroll animation values come from the GSAP/anime.js calls; the scroll-scrubbed Cycle background colors are exact from the timeline.
• Type sizes vary widely inline (0.48rem–14rem); the table lists the representative roles rather than every one-off size.