name: public-right-design
version: alpha
description: >
  A letterpress-broadside identity for an arts-education nonprofit. The surface
  is warm aged paper (`#EEE0BE`) printed in near-black ink (`#141210`), with a
  blood-red (`#8A1818`) for calls-to-action and a woad-blue (`#2A3A6A`) for full-
  bleed sections. The voice is set in blackletter (UnifrakturMaguntia) display,
  condensed Oswald "tungsten" headlines, EB Garamond body, and Roboto Mono for
  tags and figures. The signature moves are heavy printer's rules, drop caps in
  blood-red blackletter, hard offset shadows (no soft elevation), grayscale
  woodcut/duotone imagery, cut-frame double borders, an SVG grain overlay, and a
  torn-paper edge. Everything reads like a hand-set public notice.
colors:
  # Brand / accent
  blood: '#8A1818'    # primary CTA fill, featured-tier border, drop-cap letter, blockquote rule
  woad: '#2A3A6A'     # full-bleed Donate section + petition card background
  # Surface
  paper: '#EEE0BE'    # page background (aged paper), text-on-dark color, light card fills
  # Text
  ink: '#141210'      # body + heading text, all rules/borders, dark section fills
  # Hairlines / borders (all use ink)
  ink-border: '#141210'   # 2-3px borders, 6px printer's rules, divides
  # Overlays
  vignette: 'rgba(20,18,16,.35)'   # radial vignette over hero woodcut
  paper-tint: 'rgba(20,18,16,.06)' # faint radial tints on paper background
typography:
  display:
    fontFamily: "'UnifrakturMaguntia', serif"
    fontSize: clamp(72px,12vw,168px)
    fontWeight: 400
    lineHeight: 0.9
  tungsten:
    fontFamily: "'Oswald', sans-serif"
    fontSize: 72px
    fontWeight: 700
    lineHeight: 0.85
    letterSpacing: -0.005em
    textTransform: uppercase
  body:
    fontFamily: "'EB Garamond', serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.55
  mono:
    fontFamily: "'Roboto Mono', monospace"
    fontSize: 11px
    fontWeight: 400
  tag:
    fontFamily: "'Roboto Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 0.25em
    textTransform: uppercase
rounded:
  none: 0px      # default: every card, frame, rule and button is sharp-cornered
  full: 9999px   # only the rotated "FUNDED 2024" wax-seal badge
spacing:          # base unit 4px; Tailwind scale; sections separated by mt-16/24
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  '2xl': 40px
  '3xl': 56px
components:
  bloodButton:
    backgroundColor: '{colors.blood}'
    textColor: '{colors.paper}'
    typography: '{typography.tungsten}'
    rounded: '{rounded.none}'
    padding: '14px 26px'
    border: '2px solid {colors.ink}'
    shadow: '4px 4px 0 {colors.ink}'   # hover -> 6px 6px 0, translate(-2px,-2px)
  inkButton:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.paper}'
    typography: '{typography.tungsten}'
    rounded: '{rounded.none}'
    padding: '14px 26px'
    border: '2px solid {colors.ink}'
  projectCard:
    backgroundColor: '{colors.paper}'
    textColor: '{colors.ink}'
    rounded: '{rounded.none}'
    border: '3px solid {colors.ink}'
    padding: '16px'
  tierCard:
    backgroundColor: '{colors.paper}'
    textColor: '{colors.ink}'
    rounded: '{rounded.none}'
    border: '3px solid {colors.ink}'   # featured tier uses {colors.blood} border + 10px 10px 0 ink shadow
    padding: '32px'
  cutFrame:
    backgroundColor: '{colors.paper}'
    border: '3px solid {colors.ink}'
    rounded: '{rounded.none}'
    shadow: 'inset 0 0 0 6px {colors.paper}, inset 0 0 0 8px {colors.ink}'
  tag:
    typography: '{typography.tag}'
    textColor: '{colors.ink}'
  printerRule:
    border: 'top 6px / bottom 2px solid {colors.ink}'   # rule-thick; rule-double is 2px/2px
  newsletterInput:
    backgroundColor: 'transparent'
    textColor: '{colors.paper}'
    typography: '{typography.mono}'
    border: '2px solid {colors.paper}'
    rounded: '{rounded.none}'
motion:
  heroEntrance: 'GSAP: h1 y:60 fade in 1.2s power3.out; woodcut blur(12px)->0 1.2s; dropcap fade up'
  heroParallax: 'GSAP ScrollTrigger scrub: hero-h1 yPercent -20 across hero'
  counters: 'animejs count-up to data-target, 1800ms ease out(3), IntersectionObserver threshold .4'
  impactColumns: 'GSAP batch fade + y:40->0, stagger .12, power3.out'
  projects: 'GSAP batch blur(10px)->0 + y:30->0, stagger .1, power2.out'
  tierCards: 'GSAP batch fade + y:40 + scale .96->1, stagger .12, back.out(1.6)'
  eventRows: 'GSAP batch x:-40->0, stagger .08, power2.out'
  teachWipe: 'GSAP clipPath inset(0 100% 0 0)->inset(0) 1.1s power2.inOut'
  cursorBlink: 'animejs opacity 1->0 600ms alternate loop linear'
  buttonHover: 'blood-btn translate(-2px,-2px), shadow grows 4px->6px offset'
icons:
  library: Tabler icons (webfont) + game-icons (lorc/delapouite SVG)
  style: Tabler outline glyphs (ti-hand-finger, ti-book-2, ti-brush); game-icons solid SVG (flat-star, wax-seal, ticket)
  sizes: { sm: 16px, md: 20px, lg: 40px, xl: 96px }
  color: '{colors.ink}'   # ti icons inherit ink; SVGs inverted to paper on dark via filter

The Common Press — Art is a Public Right

public-right-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

This is a letterpress broadside dressed as a website: an arts-education nonprofit ("The Common Press") rendered as a public notice "pinned to the schoolhouse door." The surface is warm aged paper #EEE0BE, set over a faint multi-radial tint and an SVG feTurbulence grain overlay (mix-blend-mode:multiply, opacity .55) so every section reads as printed stock. Everything is inked in near-black #141210: the body type, the headlines, and every border and rule. Two accents punctuate the page — blood-red #8A1818 carries every call-to-action, the featured-tier border, drop-cap initials, and blockquote rules; woad-blue #2A3A6A floods the Donate section and the petition card. The type story is the core identity: blackletter UnifrakturMaguntia for masthead and grand display (line-height .9), condensed Oswald "tungsten" for uppercase headlines and big figures (line-height .85, slight negative tracking), EB Garamond italic for body prose, and Roboto Mono for tags, datelines, statistics and section markers (.25em tracking, uppercase). The geometry is unapologetically square — no rounded corners except one rotated round wax-seal badge — held together by heavy printer's rules (6px top / 2px bottom), 3px card borders, drop caps in blood-red blackletter, hard offset shadows in place of soft elevation, grayscale woodcut/duotone imagery, double-stroke cut-frames, and a torn-paper edge closing the Events ledger.

Colors

Brand / accent. blood #8A1818 is the action color: it fills .blood-btn, borders the featured donation tier, sets the drop-cap first-letter, the blockquote left-rules, the rotated "FUNDED 2024" badge, the "Most Chosen" flag, and the newsletter Send button. woad #2A3A6A is the section flood: it is the background of the full-bleed Donate section and the "Bring the Press to your School" petition card, always paired with paper text.

Surface. paper #EEE0BE is the page background (an aged stock), and inverts to become the text/border color on every dark (ink or woad) panel; it also fills light cards and tier cards.

Text & ink. ink #141210 does triple duty: it is the body and heading text on paper, the fill of dark sections (Impact center column, project card 2, footer), and the color of every hairline. All borders, the 6px/2px printer's rules, the divide-y-2 event separators, and button outlines are ink.

Overlays. A radial rgba(20,18,16,.35) vignette darkens the hero woodcut's edges; faint rgba(20,18,16,.06–.08) radials tint the paper background corners.

Typography

@import pulls all four families from Google Fonts in one request: UnifrakturMaguntia, Oswald (500/600/700), EB Garamond (incl. italics), and Roboto Mono (400/500/700). All are open-source Google faces, so no substitution is needed.

Token	Size	Weight	Line-height	Tracking	Usage
display (.h-display / .fraktur)	clamp(72px,12vw,168px)	400	0.9	—	Hero H1, masthead wordmark, donate/teach H2, tier names, footer wordmark
tungsten (.h-tungsten / .tungsten)	72px (text-6xl→8xl)	700	0.85	-0.005em	Section headlines, big figures ($3.4M, counters, event day numbers), buttons
body (.garamond)	15px	400	1.55	—	Prose, blockquotes (italic), list items, descriptions
mono (.mono)	11px	400	—	tabular-nums	Statistics, datelines, dl values, masthead meta
tag (.tag)	11px	400	—	0.25em	Section markers ("Section the Third"), kickers, all-caps labels

Oswald is set with font-stretch:condensed for the tungsten look. Body is the default serif at 15px / 1.55.

Layout

Base unit 4px on the Tailwind scale. The page is a single centered column, max-w-[1400px], px-8. It opens with a newspaper masthead (dateline row, 6px/2px rule, nav + centered blackletter wordmark + CTA, then a double rule). The hero is centered display type over a 12-column woodcut composition: a drop-cap aside (3), a center cut-frame plate (6) with PLATE I / CUT BY HAND labels and vignette, and a stats aside (3). Impact is a 3-up grid framed by 6px top/bottom rules with 3px column dividers, the center column inverted to ink. Projects is an asymmetric 12-col masonry of 5/7-span bordered cards. Donate is a full-bleed woad section with three pricing tiers (the middle lifted -translate-y-4 with a 10px hard shadow). Teach is a single .ornate double-outlined panel with a 2-up feature grid and a cut-frame portrait. Events is a divide-y-2 ledger of 12-col rows ending in a torn-paper edge. Whitespace is generous between sections (mt-16/mt-24) but type is densely set within them, as on a printed page.

Elevation & Depth

There is no soft elevation. Depth comes from (1) hard offset shadows — buttons carry 4px 4px 0 ink (growing to 6px 6px 0 on hover), the featured tier 10px 10px 0 ink; (2) heavy borders — 2px buttons, 3px cards, 6px printer's rules, double outline-offset:6px on the ornate panel; (3) the cut-frame's inset double stroke (inset 0 0 0 6px paper, inset 0 0 0 8px ink); (4) the grain overlay and paper radial tints that suggest physical stock; and (5) the woodcut vignette. Nothing blurs or floats except transient GSAP entrance states.

Shapes

Resolutely rectangular. Default radius is 0 — every card, frame, button, input, rule and image is square-cornered, matching the letterpress conceit. The only rounded-full element is the small rotated wax-seal "FUNDED 2024" badge on the first project card. The torn-bottom edge is a repeating radial-gradient scallop, not a border-radius.

Components

• Blood button (.blood-btn) — blood fill, paper text, Oswald uppercase, .12em tracking, 14px 26px, 2px ink border, 4px 4px 0 ink hard shadow; hover lifts translate(-2px,-2px) and grows shadow to 6px. Labels: "Give Now", "Give $250", "Apply for the Fellowship".
• Ink button (.ink-btn) — ink fill, paper text, same type/border, no shadow. Labels: "Reserve", "RSVP", "Tickets", "Attend".
• Project card — paper or ink fill, 3px ink border, 16px padding, grayscale .duotone image, blood blockquote rule, mono attribution.
• Tier card (.tier-card) — paper fill, 3px ink border, 32px padding; featured variant: 3px blood border, -translate-y-4, 10px 10px 0 ink, with a blood "Most Chosen" flag badge.
• Cut-frame (.cut-frame) — 3px ink border + inset paper/ink double stroke; wraps hero and teach woodcut plates with corner mono labels (PLATE I/II).
• Printer's rules — .rule-thick (6px top, 2px bottom) and .rule-double (2px/2px); .ink-line is a dashed repeating-gradient.
• Tag/kicker (.tag) — Roboto Mono 11px, .25em, uppercase; section markers.
• Newsletter form — transparent input in a 2px paper border, blood Send button, mono placeholder.
• Badges — rotated round blood wax-seal badge; blood "Most Chosen" flag.

Motion

Authored and active via GSAP + ScrollTrigger and anime.js (Locomotive Scroll is instantiated). Hero: H1 fades up y:60 1.2s power3.out, woodcut blurs in (blur(12px)->0), drop cap fades up; the H1 also parallax-scrubs yPercent:-20 across the hero. Counters count up to data-target over 1800ms (ease out(3)) on 40% intersection. Impact columns stagger up (y:40, .12), projects blur+rise in (.1 stagger), tier cards pop with back.out(1.6) + scale, event rows slide from x:-40 (.08 stagger). The teach portrait wipes via clipPath inset over 1.1s. The hero tagline ends with a mono cursor that blinks (opacity 1->0, 600ms, alternate loop).

Iconography

Two libraries. Tabler icon webfont supplies the outline UI/section glyphs in the Impact grid (ti-hand-finger, ti-book-2, ti-brush) at ~96px, inheriting ink (or paper on the dark center column). game-icons (lorc/delapouite) supply decorative solid SVGs — flat-star (hero divider, 20px), wax-seal (tier headers, 40-48px), ticket (event Reserve, 16px, invert to paper on ink). All icons are monochrome, sized large and used as woodcut-style emblems rather than small affordances.

Do's and Don'ts

• Do keep corners square — radius 0 everywhere except the one round seal.
• Do use hard offset shadows (Npx Npx 0 ink), never soft/blurred shadows.
• Do route all primary actions through the blood button; reserve woad for full-section floods.
• Do set headlines in blackletter or condensed Oswald; body always in EB Garamond, meta always in Roboto Mono with wide uppercase tracking.
• Do keep imagery grayscale/duotone with high contrast (woodcut look).
• Don't introduce new hues — the palette is paper, ink, blood, woad only.
• Don't soften with rounded cards, drop-shadow glows, or gradients beyond the paper tint/vignette.
• Don't drop the printer's rules, grain, or drop caps — they carry the broadside identity.

Known Gaps

• The grain texture is an inline SVG feTurbulence filter; its exact perceived density depends on the data-URI noise parameters (baseFrequency .9, opacity .45/.55), described qualitatively.
• Several Tailwind text sizes vary responsively (e.g. text-6xl md:text-8xl); the typography table cites a representative size, not every breakpoint.
• font-stretch:condensed on Oswald relies on the variable/condensed instance; exact rendered width is browser/font-dependent.
• Locomotive Scroll is instantiated in a try/catch and its smooth-scroll effect is environment-dependent.