name: posterhaus-design
version: alpha
description: >
  A maximalist psychedelic-poster storefront ("Vibratorium") soaked in 1960s–70s
  San Francisco acid-rock graphics. The signature move is a full-screen rotating
  mandala — stacked SVG/conic-gradient rings spinning at different speeds around a
  glowing black void CTA. Six saturated "voltages" (grape, orange, lime, magenta,
  gold, cream over near-black ink) collide on every section, each section flipping
  the page background to a different hue. Typography is a fat-display swash face
  ('Bagel Fat One') for poster headlines, JetBrains Mono for tracked-out micro
  labels, and Inter for body. Geometry is loud: hard offset shadows, 2–3px ink
  borders, near-zero radius on cards (rounded-sm) but full pills on buttons/tags,
  conic/radial gradient ornaments, repeating eye-dot dividers, and constant
  rotation.
colors:
  # Brand / voltages
  grape: '#6B2FA0'      # primary brand purple; default page/body background
  orange: '#E87830'     # voltage; newsletter section bg, stripes, ornaments
  lime: '#A8D040'       # voltage; acid-green CTA fill, framing section bg, accents
  magenta: '#E03A8A'    # voltage; curated-walls section bg, accents, prices
  gold: '#F4CC40'       # voltage; logo/headline accent, offset shadows, rings
  cream: '#F2EBD0'      # paper surface; card fills, provenance section bg, body text on dark
  # Text / ink
  ink: '#1a0f25'        # near-black aubergine; borders, ticker/footer bg, body text
  # One-off surfaces
  void-purple: '#2a0040' # inner void radial-gradient stop (center CTA)
  void-black: '#000000'  # inner void radial-gradient outer stop
  poster-paper: '#f7f0d8' # poster image placeholder behind product photos
  mat-paper: '#eee5c2'    # framing mat / inner-mount paper
  accordion-paper: '#e9e0bf' # provenance accordion item fill
typography:
  display:
    fontFamily: "'Bagel Fat One', 'Rubik Puddles', cursive"
    fontSize: clamp(48px, 9vw, 130px)
    fontWeight: 400
    lineHeight: 0.85
  display-glitch:
    fontFamily: "'Rubik Glitch', cursive"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1
  body:
    fontFamily: "'Inter', sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
  mono:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 2.75px
    textTransform: uppercase
  tag:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 1.2px
    textTransform: uppercase
rounded:
  sm: 2px        # Tailwind rounded-sm; cards, panels, inputs(panel)
  full: 9999px   # buttons, tags, pills, mandala rings
spacing:          # base unit 4px (Tailwind scale)
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  section: 96px   # py-24 section rhythm (96–112px)
components:
  btn-acid:
    backgroundColor: '{colors.lime}'
    textColor: '{colors.grape}'
    typography: '{typography.display}'
    rounded: '{rounded.full}'
    padding: '12px 24px'
    border: '3px solid {colors.ink}'
    boxShadow: '6px 6px 0 {colors.magenta}, 6px 6px 0 4px {colors.ink}'
    hoverBackground: '{colors.gold}'
  poster-card:
    backgroundColor: '{colors.cream}'
    textColor: '{colors.ink}'
    rounded: '{rounded.sm}'
    padding: '20px'
    border: '2px solid {colors.ink}'
    boxShadow: '6px 6px 0 {colors.gold}'
    hoverBoxShadow: '0 24px 50px rgba(0,0,0,0.35)'
  tag:
    typography: '{typography.tag}'
    rounded: '{rounded.full}'
    padding: '3px 8px'
    border: '1px solid currentColor'
  grade-badge:
    typography: '{typography.mono}'
    textColor: '{colors.grape}'
    border: '1px solid {colors.ink}'
    padding: '4px 8px'
    note: 'fill varies by grade — lime(NM)/gold(VF)/magenta(NM)/orange(VG)'
  acquire-button:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.cream}'
    typography: '{typography.mono}'
    rounded: '{rounded.sm}'
    padding: '8px 12px'
  newsletter-input:
    backgroundColor: '{colors.cream}'
    textColor: '{colors.grape}'
    typography: '{typography.mono}'
    rounded: '{rounded.full}'
    border: '2px solid {colors.ink}'
    padding: '8px (panel) / px-5 (field)'
  framing-tier-card:
    rounded: '{rounded.sm}'
    border: '2px solid {colors.ink}'
    padding: '24px'
    note: 'fill cycles grape/orange/magenta per tier'
  accordion-item:
    backgroundColor: '{colors.accordion-paper}'
    rounded: '{rounded.sm}'
    border: '1px solid rgba(26,15,37,0.2)'
    padding: '20px'
motion:
  spin-cw: 'rotate 0→360deg, 60s linear infinite'
  spin-ccw: 'rotate 0→-360deg, 45s linear infinite'
  spin-cw-slow: 'rotate 0→360deg, 120s linear infinite'
  spin-ccw-fast: 'rotate 0→-360deg, 28s linear infinite'
  marquee: 'translateX 0→-50%, 30s linear infinite (top ticker)'
  card-img-zoom: 'scale(1.06) rotate(-1deg) on card hover, .6s cubic-bezier(.2,.7,.2,1)'
  card-lift: 'translateY(-6px) on poster-card hover'
  accordion-arrow: 'rotate 45deg on [open], .3s ease'
  reveal-cards: 'GSAP ScrollTrigger.batch — autoAlpha 0→1, y 40→0, .7s power3.out, .08 stagger'
  reveal-headlines: 'GSAP — .swash-huge from y 60, autoAlpha 0, 1s power3.out at top 85%'
icons:
  library: game-icons (lorc / delapouite via game-icons-transparent CDN), inline SVG mandala, unicode ✺ ★
  style: solid silhouettes, recolored via CSS filter (brightness/invert/sepia/saturate/hue-rotate)
  sizes: { sm: 40px, md: 80px, lg: 96px, xl: 320px }
  color: 'tinted to voltages via filter (gold/magenta/lime/orange/grape)'

Posterhaus — Vibratorium

posterhaus-design · alpha

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

Overview

Posterhaus is "Vibratorium," a fictional San Francisco vault for authenticated 1960s–70s psychedelic concert posters, and the design leans all the way into the acid-rock graphic tradition. The default page surface is deep grape (#6B2FA0), but every section flips the background to a different voltage — magenta for the curated walls, lime for framing, cream for the provenance editorial, orange for the newsletter, near-black ink for ticker and footer. The signature move is the hero: a full-viewport stacked mandala built from SVG ring-text, conic-gradient scallops, twelve hand-placed petals, and tinted game-icon ornaments, all rotating clockwise and counter-clockwise at four different speeds around a glowing black "void" that holds the primary CTA. Headlines are set in the fat poster face 'Bagel Fat One' with hard same-direction text-shadows; micro-labels are tracked-out JetBrains Mono uppercase; body copy is Inter. Geometry is brash: 2–3px ink borders, hard offset shadows (6px 6px 0), near-zero radius on cards (rounded-sm = 2px) against full pills on buttons and tags, plus repeating-radial "vibration" backgrounds, eye-dot dividers, and a top marquee ticker.

Colors

Brand / voltages. Six saturated hues defined as CSS variables drive the whole system. grape #6B2FA0 is the primary purple and the default body/html background. orange #E87830, lime #A8D040, magenta #E03A8A, and gold #F4CC40 are the supporting voltages, each used both as full section backgrounds and as accent fills/text. cream #F2EBD0 is the paper surface — card fills, the provenance section background, and the light text color on dark sections.

Ink / text. ink #1a0f25 is a near-black aubergine used for all the heavy borders, the top ticker and footer backgrounds, the dark "acquire" buttons, and body text on light cards.

One-off surfaces. The center void blends void-purple #2a0040 into void-black #000 with a magenta inner glow. Product images sit on poster-paper #f7f0d8; framing mats use mat-paper #eee5c2; provenance accordion items use accordion-paper #e9e0bf. Section overlays repeatedly use black/white alphas (rgba(0,0,0,0.15–0.35), cream/20–70, ink/20–80).

Typography

Four families load via one Google Fonts @import: Bagel Fat One and Rubik Puddles (display swash), Rubik Glitch (glitch accent), Inter (body), and JetBrains Mono (mono labels, tabular-nums for prices). Bagel Fat One is the dominant poster face — used at huge clamp() sizes with line-height: 0.85 and hard text-shadows. Closest open-source substitutes if unavailable: the loaded faces are themselves open-source Google Fonts, so no substitution is needed.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(48px,9vw,130px)	400	0.85	—	Poster headlines (.swash-huge), logo, CTA labels
display-glitch	~24px	400	1	—	.font-glitch accent (Rubik Glitch)
body	18px (text-lg)	400	1.6	—	Inter paragraphs, card descriptions
mono	11px	400	1.4	0.25–0.4em	Nav, section §-labels, prices, footer
tag	10px	400	1.2	0.12em	Pill tags, dates, filter chips

Layout

Base unit is 4px (Tailwind scale); sections use a py-24–py-28 rhythm (~96–112px) inside a max-w-7xl mx-auto px-8 container (provenance narrows to max-w-5xl, newsletter to max-w-4xl). The page is a single long scroll of full-bleed colored sections, each opened by a tracked-mono § 0n eyebrow and a giant swash headline. Signature structural moves: the full-screen rotating mandala hero with vertical side-set headlines (writing-mode: vertical-rl); a scroll-snapping horizontal scroller of circular "wall" cards; a deliberately offset three-column cascade grid for the vault listings (columns nudged with md:mt-8/md:mt-20); a two-up before/after framing comparison; and repeating eye-dot divider strips between sections. Whitespace is dense and energetic, never calm — backgrounds are layered with repeating-radial/linear "vibration" overlays and a multiply noise dot texture (.noise::before).

Elevation & Depth

Depth is poster/sticker-style, not soft. The hallmarks are hard offset shadows with no blur: poster-card uses 6px 6px 0 gold; btn-acid stacks 6px 6px 0 magenta plus a 6px 6px 0 4px ink outline. Heavy 2–3px ink borders do most of the structural work. The center void is the one place with real glow: layered solid ring shadows (0 0 0 6px gold, 0 0 0 10px magenta, 0 0 0 14px lime) plus an inset pink radial glow. On hover, poster-card swaps its hard shadow for a soft lifted 0 24px 50px rgba(0,0,0,0.35) and translates up 6px. A multiply noise texture (.noise) and per-section repeating-gradient overlays add grain.

Shapes

A two-mode radius story. Cards, panels, and editorial blocks use rounded-sm (2px) — effectively crisp rectangles framed by ink borders. Everything interactive or decorative is a full pill / circle: buttons, tags, filter chips, the newsletter input shell, the nav cart button, and of course the stacked mandala rings (rounded-full). Conic and radial gradients supply the curved geometry — scalloped masked rings, petal ellipses, eye-dots, and the mandala-mini logo.

Components

• btn-acid — lime fill, grape text, 3px ink border, stacked hard magenta+ink offset shadow, full pill, swash text; hover → gold. Labels: "browse the vault →", "load 2,335 more relics →".
• poster-card — cream fill, 2px ink border, 6px 6px 0 gold shadow, rounded-sm, 20px padding; hover lifts 6px with soft shadow and zooms the inner image. Holds swash title, grade badge, mono spec grid, magenta price.
• acquire-button — ink fill, cream mono text, rounded-sm. Label "acquire →".
• tag / chip — mono 10px uppercase, 1px currentColor border, full pill, 3px 8px. Used for dates ("1966–74") and filters ("NM Grade", "Signed").
• grade-badge — small mono box, 1px ink border, fill cycles by grade (lime NM, gold VF, magenta NM, orange VG).
• framing-tier-card — rounded-sm, 2px ink border; fill cycles grape/orange/magenta across the three tiers (Conservator, Vibration, Astral).
• accordion (acc-item) — accordion-paper #e9e0bf fill, rounded-sm, swash question + mono + arrow that rotates 45° when open.
• newsletter form — cream pill shell with 2px ink border, transparent mono input, magenta swash "subscribe →" button.
• top ticker — ink bar, cream mono uppercase, gold bottom border, infinite marquee with ✺ separators in alternating voltages.

Motion

Constant rotation is the soul of the page. Four spin classes run forever at different speeds and directions: spin-cw 60s, spin-ccw 45s, spin-cw-slow 120s, spin-ccw-fast 28s — applied to mandala rings, ornaments, the logo, and a giant footer ring. The top ticker marquees translateX(0→-50%) over 30s. On scroll, GSAP ScrollTrigger reveals: poster cards batch in (autoAlpha 0→1, y 40→0, .7s power3.out, .08 stagger) and every .swash-huge headline rises from y 60 over 1s power3.out. Poster-card hover zooms the image to scale(1.06) rotate(-1deg) over .6s and lifts the card; the accordion arrow rotates 45° over .3s. GSAP + ScrollTrigger load from CDN and are active.

Iconography

Decorative iconography comes from the game-icons-transparent CDN (lorc & delapouite sets) — sun-radiations, spiral/curled tentacles, kaleidoscope pearls, marbles, wood-frame, wax-seal — all solid silhouettes recolored to the voltage palette via long CSS filter chains (brightness/invert/sepia/saturate/hue-rotate) and many of them spinning. The mandala itself is hand-authored inline SVG (ring-text on a circular path, petal ellipses, scalloped conic rings). Unicode ✺ and ★ act as marquee/footer dingbats. Sizes range from 40px logo/seal up to 320–384px corner sunbursts. There is no UI icon set (no Tabler/Feather); arrows are typed "→".

Do's and Don'ts

• Do keep every section on its own full-bleed voltage background and open it with a mono § 0n eyebrow + giant swash headline with a hard text-shadow.
• Do frame cards and panels with 2–3px ink borders and hard offset shadows; reserve soft blurred shadows for hover only.
• Do keep the rotation alive — rings, ornaments, and the logo should spin.
• Do pair the fat Bagel Fat One display face with tracked-out mono labels.
• Don't soften the look: avoid rounding cards beyond rounded-sm, avoid drop shadows with blur on resting states, avoid muting the palette.
• Don't mix in a flat UI icon set — decorative game-icons + inline SVG only.
• Don't let backgrounds go plain; layer the repeating-gradient vibration and noise textures.

Known Gaps

• The swash display face is set to load clamp()-scaled sizes; the table size is the upper hero bound — actual rendered size varies per section (60–130px range).
• display-glitch / Rubik Puddles are loaded (.font-glitch, swash fallback) but not visibly used in the markup; sizes are inferred.
• One-off surface hexes (#f7f0d8, #eee5c2, #e9e0bf, #2a0040) are read directly from inline styles; their token names are descriptive, not from source.
• Icon filter chains produce approximate voltage tints, not exact hex matches.
• Spacing scale beyond the base unit is the standard Tailwind scale observed in use, not an explicitly declared system.