name: poph-design
version: alpha
description: >
  POPH is a loud, maximalist eyewear landing page built on a near-black canvas
  (#0D0D0D) and warm off-white ink (#F5F0E8), supercharged by a four-colour
  voltage set — orange #FF6B1A, pink #FF2D78, lime #BFFF00, blue #0057FF —
  that each "own" a hero slide, a product strip, a craft stage, and a footer
  column. The type story is a poster-scale Bebas Neue condensed display against
  Space Grotesk for all UI/body copy, with everything set in heavy uppercase
  tracking. Signature moves: full-bleed colour-block hero slides driven by a
  scroll-hijack GSAP slider, oversized outlined numerals, a wobbling die-cut
  lime sticker CTA, scattered "type collision" headlines, marquee tickers, and
  hard offset block-shadows. Geometry is brutally square — zero border-radius
  everywhere except 6px circular dots.
colors:
  # Brand voltages (the four-colour set)
  orange: '#FF6B1A'      # voltage 1 — slide 01, Solar Flare strip, CTA word 4, footer Shop head
  pink: '#FF2D78'        # voltage 2 — slide 02, Cherry Bomb strip, craft ticker, CTA word 2, accent stars
  lime: '#BFFF00'        # voltage 3 — slide 03, Acid Lime strip, sticker CTA, hover/link accent
  blue: '#0057FF'        # voltage 4 — slide 04, Deep Dive strip, craft stage 03
  # Surface
  black: '#0D0D0D'       # page surface, nav scrolled glass base, dark text on bright fills
  # Text / ink
  off-white: '#F5F0E8'   # primary ink on dark, light text on pink/blue fills
  # Hairlines (off-white at low alpha on black)
  hairline: 'rgba(245, 240, 232, 0.08)'   # strip/section dividers, nav border
  hairline-faint: 'rgba(245, 240, 232, 0.07)'  # marquee + footer-colophon borders
  # Glass / scrim
  nav-glass: 'rgba(13, 13, 13, 0.45)'     # scrolled nav background (blur 20px saturate 160%)
  offset-shadow: 'rgba(13, 13, 13, 0.85)' # hard block-shadow under coupon
typography:
  display:
    fontFamily: "'Bebas Neue', sans-serif"
    fontSize: clamp(8rem, 19vw, 19rem)   # hero brand wordmark; many display sizes derive from this face
    fontWeight: 400
    lineHeight: 0.86
    letterSpacing: -0.01em
  display-section:
    fontFamily: "'Bebas Neue', sans-serif"
    fontSize: clamp(4.5rem, 10vw, 12rem)  # collections title
    fontWeight: 400
    lineHeight: 0.86
    letterSpacing: -0.005em
  eyebrow:
    fontFamily: "'Space Grotesk', sans-serif"
    fontSize: 0.68rem
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0.36em
    textTransform: uppercase
  body:
    fontFamily: "'Space Grotesk', sans-serif"
    fontSize: clamp(1rem, 1.15vw, 1.2rem)   # craft stage description
    fontWeight: 400
    lineHeight: 1.55
  button:
    fontFamily: "'Space Grotesk', sans-serif"
    fontSize: 0.75rem
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.2em
    textTransform: uppercase
  nav-link:
    fontFamily: "'Space Grotesk', sans-serif"
    fontSize: 0.72rem
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.18em
    textTransform: uppercase
rounded:               # radius scale — brutally square system
  none: 0px            # everything: buttons, cards, strips, inputs, sticker
  full: 9999px         # 6px hero dots only (border-radius:50%)
spacing:               # base unit 8px (rem-based; 0.5rem steps); viewport units for layout
  xs: 4px
  sm: 8px
  md: 16px
  lg: 28px
  xl: 40px
  xxl: 56px
  section: 128px       # 8rem vertical section padding
components:
  nav:
    backgroundColor: 'transparent → {colors.nav-glass}'   # transparent at top, glass when scrolled
    textColor: '{colors.off-white}'
    typography: '{typography.nav-link}'
    rounded: '{rounded.none}'
    padding: '1.75rem 3.5rem (1rem 3.5rem when scrolled)'
    # fixed top bar, backdrop-filter blur(20px) saturate(160%) + 1px hairline when scrolled
  btnPrimary:
    backgroundColor: 'transparent'
    textColor: 'currentColor (inherits slide ink)'
    border: '2px solid currentColor'
    typography: '{typography.button}'
    rounded: '{rounded.none}'
    padding: '1.1rem 2.6rem'
    # label "Shop Now"; hover inverts to black-on-white or white-on-black per slide
  btnSecondary:
    backgroundColor: 'transparent'
    textColor: 'currentColor'
    border: '1.5px solid currentColor (bottom only)'
    typography: '{typography.button}'
    rounded: '{rounded.none}'
    padding: '0 0 3px'
    # underlined link "Collections", opacity 0.7 → 1 on hover
  strip:
    backgroundColor: '{colors.black} (image + info panel use --strip-color voltage)'
    textColor: '{colors.black} (off-white on pink/blue strips)'
    typography: '{typography.display}'
    rounded: '{rounded.none}'
    padding: '2.5rem 2.5rem 2.25rem (info panel)'
    # 60px rail / image / 360px info grid, 340px tall, voltage top-bar + outlined numeral, slides on hover
  stripTag:
    backgroundColor: 'transparent'
    textColor: 'currentColor'
    border: '1.5px solid currentColor'
    typography: '{typography.button}'
    rounded: '{rounded.none}'
    padding: '0.35rem 0.7rem'
    # tiny outlined chip — "New", "Hot", "Loud", "Cult"
  ctaSticker:
    backgroundColor: '{colors.lime}'
    textColor: '{colors.black}'
    typography: '{typography.button}'
    rounded: '{rounded.none}'
    padding: '1.4rem 3.2rem'
    # die-cut starburst clip-path, box-shadow 0 8px 0 black, wobble animation; "Grab A Pair →"
  couponInput:
    backgroundColor: 'transparent'
    textColor: '{colors.black}'
    border: '1.5px solid {colors.black} (no right border)'
    typography: '{typography.body}'
    rounded: '{rounded.none}'
    padding: '1rem 1.5rem'
    # email field on off-white coupon card
  couponBtn:
    backgroundColor: '{colors.black}'
    textColor: '{colors.off-white}'
    typography: '{typography.button}'
    rounded: '{rounded.none}'
    padding: '1rem 1.75rem'
    # "Join"; hover fills lime on black
  socialChip:
    backgroundColor: '{colors.orange} / {colors.pink} / {colors.lime} (rotating per child)'
    textColor: '{colors.black}'
    typography: '{typography.button}'
    rounded: '{rounded.none}'
    padding: '0.5rem 0.95rem'
    # slightly rotated stickers, straighten + scale on hover
motion:
  hero-slider: 'GSAP scroll-hijack: wheel/touch/keys page through 4 slides, body overflow locked until last slide exits; power3.inOut, ~0.65s slide + blur/defocus on leaving image, text reveal yPercent 115 skewY 7 stagger 0.09'
  craft-pin: 'ScrollTrigger pinned 3-stage horizontal scrub (scrub 0.6, end +=300%); stages translate xPercent -100/0, progress dots toggle active'
  stage-graphics: 'on stage-active: wavelength bars scaleY staggered, gauge arc stroke-dashoffset 264→26 over 1.2s, weight list items slide in translateX 24→0 staggered'
  marquee: 'marqueeScroll translateX 0 → -50%, 24s linear infinite (marquee strip) / 22s (craft ticker)'
  scroll-hint: 'scrollDrop 1.6s ease-in-out infinite — vertical line scaleY pulse'
  sticker-wobble: 'stickerWobble 4s ease-in-out infinite rotate -6° ↔ -3°'
  star-spin: 'starSpin 30s linear infinite — outlined CTA star rotation'
  scroll-reveals: 'ScrollTrigger entrances on collections/strips/cta/footer: yPercent/skew/opacity, power3.out, ~0.6–0.85s'
  footer-wordmark: 'parallax xPercent -3 scrubbed across footer'
icons:
  library: inline glyphs (no icon font) — typographic ✦ stars, → arrows, ✂ scissors, — em-dashes
  style: glyph / character
  sizes: { sm: 0.6rem, md: 0.9rem, lg: 1rem }
  color: '{colors.lime} / {colors.pink} / {colors.orange} (accent stars), currentColor (arrows)'

POPH

poph-design · alpha

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

Overview

POPH is an unapologetically loud, editorial eyewear landing page that treats the browser like a printed zine ("Issue 04 · SS26"). The whole site sits on a near-black canvas #0D0D0D with warm off-white ink #F5F0E8, and is driven by a four-colour voltage set — orange #FF6B1A, pink #FF2D78, lime #BFFF00, blue #0057FF — where each colour consistently owns one slide, one product strip ("Solar Flare", "Cherry Bomb", "Acid Lime", "Deep Dive"), one craft stage, and one footer column. The type story is poster-maximalist: a condensed Bebas Neue display set at clamp sizes up to 19rem (and outlined -webkit-text-stroke numerals up to 28rem) for headlines, brand marks and prices, with Space Grotesk carrying every eyebrow, button, spec and body line in heavy uppercase tracking (0.18em–0.4em). Signature moves stack up fast: a scroll-hijacked colour-block hero slider that locks the page until you page through all four slides; oversized ghost numerals stroked in the strip's voltage colour; a pinned horizontal "spec sheet" with animated wavelength bars, a 400nm SVG gauge and a weight- comparison list; a "type collision" CTA of scattered rotated words around a wobbling die-cut lime starburst sticker; and a back-cover footer with a dashed tear-off coupon, rotated sticker socials, and a giant outlined POPH wordmark bleeding off the page. The geometry is brutally square — radius is 0 on every surface; the only round thing is a 6px hero dot.

Colors

Brand voltages. Four equal-weight accents define the system: orange #FF6B1A, pink #FF2D78, lime #BFFF00, blue #0057FF. They are declared as CSS variables and assigned 1:1 across hero slides (.hero-slide:nth-child(1..4)), product strips (via --strip-color), craft stages, marquee separators, footer column heads (data-c), and rotated social chips. lime doubles as the universal interactive accent (link hover, sticker fill, coupon button hover). pink is the recurring star/sparkle and ticker colour.

Surface. black #0D0D0D is the page background for every section and the dark ink used on bright fills (orange/lime strips and stages). Bright voltage fills are used full-bleed as backgrounds, never as small tints.

Text / ink. off-white #F5F0E8 is the primary ink on the black canvas and the light text colour on the darker pink/blue fills. On orange/lime fills text flips to black.

Hairlines. Dividers are off-white at very low alpha: rgba(245,240,232,0.08) for strip and footer-nav borders, rgba(245,240,232,0.07) for the marquee and colophon rules, and 0.1 for the colophon top/bottom. Outlined display type uses off-white strokes at 0.12–0.55 alpha (CTA star, footer wordmark).

Glass / scrim. The scrolled nav uses rgba(13,13,13,0.45) with backdrop-filter: blur(20px) saturate(160%). The coupon's hard block shadow is rgba(13,13,13,0.85).

Typography

Two Google Fonts, loaded via one <link>: Bebas+Neue (display) and Space+Grotesk:wght@300;400;500;600;700 (UI/body). Bebas Neue is a single-weight tall condensed caps face used for all big statements — substitute Anton or Oswald if unavailable. Space Grotesk handles eyebrows, nav, buttons, specs, body and inputs; substitute any geometric grotesk. Everything functional is uppercase with wide tracking.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(8rem,19vw,19rem)	400	0.86	-0.01em	Hero brand "POPH"
display-section	clamp(4.5rem,10vw,12rem)	400	0.86	-0.005em	Collections title
(numeral)	clamp(18rem,28vw,28rem)	400	0.78	-0.04em	Outlined strip numbers
eyebrow	0.66–0.72rem	600	—	0.18–0.4em	Eyebrows / labels / nav
body	clamp(1rem,1.15vw,1.2rem)	400	1.55	—	Stage descriptions
button	0.75rem	700	—	0.2em	CTAs, tags, coupon button
(tagline)	clamp(0.95rem,1.5vw,1.3rem)	500	1.35	0.1em	Hero slide taglines

Layout

Base spacing is rem/0.5rem-stepped (effective 8px unit), but the page leans on viewport units (5vw gutters, vh/vw type) for its full-bleed editorial feel; sections use 8rem (128px) vertical padding. The page is a vertical stack of full-height moments rather than a constrained content column: a 100vh scroll-hijacked hero of four absolutely-stacked colour slides (text in the left 48%, image full-bleed); a black marquee strip; a "Drop Sheet" collections section with a 1fr 1.5fr 1fr header grid and a column of four 60px 1fr 360px product strips (alternating ones indented 4vw); a pinned 100vh craft frame of three horizontally-scrubbed stages; a 100vh CTA of absolutely-positioned scattered words; and a footer with a colophon bar, a rotated coupon, a four-column nav grid, and a giant bleeding wordmark. Whitespace is generous and asymmetric — content is pushed to edges, numerals overflow their containers, and elements deliberately overlap and lean.

Elevation & Depth

Depth is achieved with flat colour blocking and hard graphic-design shadows, not soft elevation. The two real shadows are hard offsets with zero blur: the lime sticker's 0 8px 0 var(--black) and the coupon card's 0 12px 0 rgba(13,13,13, 0.85). The only blur is the scrolled nav's glassmorphism (backdrop-filter: blur(20px) saturate(160%) over a 45%-black scrim with a hairline border). Everything else relies on layering (z-index), low-alpha hairlines, outlined ghost type, and mix-blend-mode: difference on the craft overlay/progress.

Shapes

Brutally rectangular. border-radius is effectively 0 on every surface — buttons, strips, cards, tags, inputs, social chips, even the coupon. The two exceptions are circular: the 6px hero progress dots (border-radius:50%) and the SVG gauge arc. Character comes instead from rotation (coupon -0.7deg, social chips ±1.5–3deg, scattered CTA words ±1–4deg) and from a hand-drawn die-cut clip-path starburst on the lime sticker.

Components

• Nav — fixed transparent bar (1.75rem 3.5rem), Bebas Neue logo + Space Grotesk uppercase links; on scroll collapses to 1rem padding, glass background rgba(13,13,13,0.45) blur 20px, hairline border; link colour adapts to slide.
• Primary button — transparent, 2px solid currentColor, no radius, 1.1rem 2.6rem; hover inverts to solid black/white per slide. Label "Shop Now".
• Secondary button — bottom-underlined link at 0.7 opacity → 1. "Collections".
• Product strip — full-width link card, 340px tall, 60px / 1fr / 360px grid; voltage top bar (6px→12px on hover), outlined giant numeral, image panel and voltage-filled info panel; slides translateX(4vw/8vw) on hover. Holds name, outlined tag chip, dash-bulleted spec list, Bebas price, "Shop →".
• Tag chip — tiny 1.5px solid currentColor, uppercase, 0.35rem 0.7rem.
• CTA sticker — lime die-cut starburst (clip-path), black text, hard 0 8px 0 shadow, wobble animation. "Grab A Pair →".
• Coupon card — off-white block rotated -0.7deg, dashed top rule + ✂ glyph, Bebas headline with pink <em>, email input (1.5px black border, no radius)
  • black "Join" button (hover → lime).
• Social chips — off-white/voltage rotated stickers ("Instagram/TikTok/X"), straighten and scale on hover.
• Marquee / ticker — infinite-scroll Bebas strips with voltage ✦ separators.

Motion

Heavily animated via GSAP 3.12.5 + ScrollTrigger (both CDN). The hallmark is the hero scroll-hijack: the body scroll is locked and wheel/touch/arrow input pages through four slides (power3.inOut, ~0.65s) with the leaving image blurring/ defocusing and the entering text revealing up (yPercent:115, skewY:7, stagger 0.09); only after the last slide does the page release. The craft section is a pinned horizontal scrub (end:+=300%, scrub 0.6) advancing three stages, each firing its own graphic on stage-active (wavelength bars scaleY stagger, a gauge arc animating stroke-dashoffset 264→26 over 1.2s, a weight list sliding in). CSS-level loops run continuously: marqueeScroll (24s / 22s), scrollDrop (1.6s line pulse), stickerWobble (4s rotation), starSpin (30s). Section entrances (collections, strips, CTA words arriving from scattered vectors, footer coupon, wordmark parallax) are ScrollTrigger reveals, power3.out, ~0.6–0.95s.

Iconography

No icon font — all "icons" are typographic glyphs: ✦ sparkles (in lime, pink, orange, blue as accents and eyebrow prefixes/suffixes via ::before/::after), → arrows on CTAs and links, ✂ scissors on the coupon tear line, and — em-dashes as spec-list bullets. Sizes run small (0.6rem dots) to ~1rem; arrows inherit currentColor, stars take voltage colours. Decorative use dominates; functional UI affordance is carried by text labels, not iconography.

Do's and Don'ts

• Do keep the four voltages equal and consistent — each colour owns its slide, strip, stage and footer column; never reassign them ad hoc.
• Do set all functional text in uppercase Space Grotesk with wide tracking and reserve Bebas Neue for poster-scale display, numerals and prices.
• Do keep surfaces square (radius 0) and express depth with hard offset shadows, flat colour blocks, outlined type and rotation.
• Do use lime as the single interactive-accent colour for hovers and links.
• Don't add soft drop shadows, gradients, or rounded corners — they break the brutalist zine geometry.
• Don't mute the palette or introduce a fifth accent; the voltage set is the brand.
• Don't disable the hero hijack or craft pin lightly — the choreographed scroll is the signature experience.

Known Gaps

• Spacing tokens are inferred from rem-stepped values (mostly 0.5rem multiples) plus heavy use of viewport units (vw/vh) for gutters and type; there is no formal numeric scale in the source, so the spacing scale is a reasonable reconstruction.
• Bebas Neue and Space Grotesk load from Google Fonts; suggested open-source substitutes (Anton/Oswald, any geometric grotesk) are approximations.
• Display type sizes are responsive clamp() ranges; the single value recorded per token is the headline/max case.
• The empty /* REDUCED MOTION */ comment block in the source has no rules — no prefers-reduced-motion handling is actually implemented despite the heading.