name: antiform-design
version: alpha
description: >
  A xeroxed punk-zine fashion manifesto. Newsprint paper (#D9D6CE) under a
  multiply grain overlay, agitprop red (#C42B22) and acid chart-green (#C7D436)
  as the only voltages, and ink-black (#16150F) hairlines four pixels thick on
  every section seam. The signature move is the ransom-note logotype — every
  letter set in a different face (Anton, DM Serif, Special Elite, Space Mono,
  Archivo Black) and rotated a degree or two — over a torn-edge photo collage of
  grayscale Xerox prints held up by translucent tape. Type is loud and mixed;
  geometry is sharp and crooked; nothing is centered and nothing is for sale.
colors:
  # Brand / voltage
  red: '#C42B22'        # agitprop red — stamps, red-box knockouts, accents, caveat scrawl
  chart: '#C7D436'      # acid chart-green — highlight knockout, look 07 badge, footer scrawl
  # Surface
  paper: '#D9D6CE'      # page surface — warm newsprint
  white: '#FFFFFF'      # photo-print mounts behind every torn image
  # Text / ink
  ink: '#16150F'        # body + heading ink, 4px section borders, knock knockout fill
  # Hairlines
  border-ink: '#16150F' # 4px bottom borders dividing every section (border-[var(--ink)])
  # Tape / paper props
  tape: 'rgba(180,178,168,0.55)' # translucent masking-tape strips over photos

Antiform

antiform-design · alpha

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

Overview

Antiform is a punk fashion zine rendered as a web page — Issue 00, "Not For Sale". The surface is warm newsprint paper (#D9D6CE) carpeted by a fixed SVG fractal-noise grain layer (opacity 0.18, mix-blend-mode: multiply) that ages the whole page. Two voltages do all the shouting: agitprop red (#C42B22) and acid chart green (#C7D436), set against ink-black (#16150F) which also forms the heavy 4px borders that wall off every section. The hallmark is the ransom-note wordmark: the letters A-n-T-I-F-o-R-M are each a different typeface (Archivo Black, DM Serif italic, Special Elite, Anton, Space Mono) rotated 1–3 degrees and randomly knocked out in knock (ink), red-box (red), or chart-hl (green). Photography is a torn-paper collage — grayscale xerox- filtered prints on white mounts, clipped with jagged clip-path "torn" edges, mounted at tilts and pinned with translucent tape, scattered in absolute position and shuffled in on load by GSAP. Everything is crooked, mixed, and loud: a deliberately half-built, photostatted look.

Colors

Brand / voltage. red #C42B22 is the agitprop accent: it fills red-box knockouts, draws the 3px stamp borders and circular seals, colors the caveat handwritten scrawls, and is the selection color. chart #C7D436 is the acid counter-voltage — the chart-hl highlight knockout, the Look 07 badge, and a footer scrawl.

Surface. paper #D9D6CE is the page background (bg-[var(--paper)]). white #FFFFFF is reserved for the photo mounts — every torn image sits on a white card (bg-white p-2).

Text / ink. ink #16150F is body and heading color, the knock knockout fill, and the footer background (the one section that inverts to ink with paper text).

Hairlines. There are no soft dividers — sections are separated by border-b-4 border-[var(--ink)], a 4px solid ink rule.

Tape. tape rgba(180,178,168,0.55) is the translucent masking-tape strip (80×26px) with a faint repeating-linear-gradient ribbing and a small drop shadow, layered over photo corners.

Typography

Eight loaded faces, mixed deliberately. Display headlines stack Anton (condensed grotesque), Archivo Black (heavy grotesque), and DM Serif Display (high-contrast serif, often italic). Mono/typewriter labels use Space Mono (f-mono) and Special Elite (f-elite, typewriter). Handwritten asides are Caveat (f-caveat, cursive). Oswald appears on one stamp; Spectral is loaded but barely used. The manifesto body is system Times New Roman (f-times) for an editorial column feel. All families load from one Google Fonts @import.

Token	Family	Size	Weight	Line-height	Tracking	Usage
display-anton	Anton	clamp 44→160px	400	1 (leading-none)	—	logotype letters, big section heads
display-archivo	Archivo Black	3xl→6xl	400	—	—	logotype, "THE", "JOIN" knockouts
display-serif	DM Serif Display	3xl→7xl, italic	400	—	—	logotype italic letters, "Plates", "Anti", drop-cap
label-mono	Space Mono	9–14px	400/700	—	wide → 0.3em	captions, stamps, metadata, inputs
label-elite	Special Elite	text-2xl–4xl	400	—	—	typewriter accent letters/words
script-caveat	Caveat	text-2xl–3xl	500/700	—	—	handwritten red/ink asides
label-oswald	Oswald	text-lg	700	—	widest	"Season Zero" stamp
body-times	Times New Roman	19px	400	1.7	—	manifesto columns, justified

Layout

No base spacing token system — Tailwind utilities (4px grid) used ad hoc. Sections are full-bleed, padded px-6 with generous vertical rhythm (py-16 to py-24), each closed by a 4px ink bottom border. The page is a vertical stack: ransom-note header → an 860px-tall absolute-positioned hero collage with a centered two-row logotype and floating stamps/seals → "The Plates" gallery (7 looks, md:absolute scattered across a 1000px canvas, flex-wrapped on mobile) → the Manifesto (two-column columns-2, max-width 1100px, justified Times with a 110px serif drop-cap) → a horizontal "process index" contact sheet of small tilted prints → an ink-inverted footer with a ransom-note CTA, an email capture, and a circular "Issue 00 ·closed·" seal. Composition is intentionally chaotic: absolute placement, overlap, and per-element rotation everywhere.

Elevation & Depth

Depth comes from drop shadows on the photo mounts, not from elevation tokens. Hero/look cards use large soft offset shadows, e.g. 0 20px 40px rgba(0,0,0,0.35), 0 22px 44px rgba(0,0,0,0.33), scaling down to 0 14px 28px rgba(0,0,0,0.28) on smaller cards; contact-sheet prints use shadow-lg. Tape strips carry a tiny 0 1px 3px rgba(0,0,0,0.15). On GSAP hover, look cards lift to 0 28px 50px rgba(0,0,0,0.4). The fixed grain overlay (z-60, multiply) adds texture across everything. Section seams are flat 4px borders, never shadows.

Shapes

Two shape languages. Rectangles are hard-cornered (no border-radius anywhere on cards, stamps, knockouts, or the email input/button) — brutalist and crooked via rotation. Photos break the rectangle entirely with three jagged torn-a/b/c clip-path polygons that simulate hand-torn paper edges. The only true curves are rounded-full circular seals (120–130px) with 3px red borders. Everything else is angular, and almost everything is rotated a few degrees off-axis.

Components

• Header logotype — eight inline letters, each a different .f-* face, sizes 2xl–4xl, individually rotated -rotate-3→rotate-2; some wear knock (ink) or red-box (red) knockouts with px-1/px-2. Right side: mono "Issue 00 / Manifesto" + a stamp "Not For Sale".
• Stamp — border:3px solid red; color:red; padding:4px 12px; uppercase, rotated; used for "Not For Sale", "Season Zero" (oswald), look numbers, "DISPOSABILITY".
• Knockout chips — knock (ink bg / paper text), red-box (red bg / paper text), chart-hl (green bg / ink text); flat, no radius, used as inline highlights and logotype letters.
• Photo mount (frag) — bg-white p-2 (or p-2.5), a torn clip-path, a big offset shadow, rotated; inner <img> is xerox (grayscale contrast) or xerox2 (partial-desaturate), also clipped. Often pinned with a tape strip.
• Look card — photo mount + absolute mono caption ("Look 01 — Untailored") and a corner stamp number; Look 07 uses a chart-hl badge with 2px ink border.
• Circular seal — rounded-full, 120–130px, 3px red border, red mono micro- caps text, rotated ("Wearable Art · Not Product", "Issue 00 ·closed·").
• Email capture — flat paper input with ink text and mono placeholder "YOUR.NAME@VOID", tilted -rotate-1, paired with a red-box Archivo "Cut me in" button tilted rotate-1. No radius, no focus ring (outline-hidden).
• Footer — full ink panel, paper text, ransom-note "JOIN the REFUSAL" CTA, two-column grid, opacity-dimmed colophon.

Motion

GSAP 3 + ScrollTrigger drive everything; there are no CSS transitions. On load, hero fragments ([data-jit]) shuffle in from random x/y/rotation with scale 0.85, duration 0.9, ease back.out(1.6), random stagger 0.08 — a collage being tossed onto the page. Look plates ([data-look]) jitter in on scroll (start: top 90%, duration 0.7, random y 40–90 / x ±50 / rotation ±18, back.out(1.5)). Hover is GSAP-tweened, not CSS: look cards lift y:-10, scale 1.03, settle to a small random rotation, deepen shadow (duration 0.3, power2.out); hero fragments do a lighter y:-8 scale:1.02 lift.

Iconography

No icon library. The only "icons" are inline Unicode glyphs in handwritten scrawls — a heavy arrow ⤷ (⤷) and "→"/"←" arrows in Caveat — plus the circular rubber-stamp seals. All decorative, drawn in red or ink.

Do's and Don'ts

• Do mix typefaces letter-by-letter and rotate everything a degree or two — the crookedness is the system.
• Do keep the palette to four values: paper, ink, red, chart (plus white photo mounts).
• Do mount every photo on white, clip it with a torn clip-path, apply a xerox grayscale filter, and let the grain overlay sit on top.
• Do divide sections with 4px ink borders, not shadows.
• Don't round corners on cards, stamps, or inputs — only seals are circular.
• Don't add CSS transitions; motion is GSAP-only.
• Don't introduce new colors, gradients, or polished/centered layouts — the point is half-built, photostatted, not-for-sale chaos.

Known Gaps

• The grain texture is an inline SVG fractal-noise data URI; its appearance is procedural, not a fixed value.
• The three torn-a/b/c edges are hand-authored clip-path polygons (not a token); listed as a shape primitive rather than a numeric value.
• tape color rgba(180,178,168,0.55) is the only rgba surface; approximated as a warm grey.
• Display sizes are rotation- and breakpoint-dependent (text-[..px] md:text-[..px]); the table gives the responsive range, not a single value.