name: panel-pop-design
version: alpha
description: >
  A risograph manga-zine reader UI on a warm bone-paper surface (#F2EBDC) printed
  in two ink "voltages" — cobalt blue (#1B43D8) and vermillion (#F23C18) — over
  near-black ink (#16131A). The signature move is the CMYK-style misprint: every
  display headline is stacked three times, the ink layer flanked by cobalt and
  vermillion ghosts offset a few pixels and multiplied. Halftone dot fields and
  crosshatch textures fill the section backgrounds, everything is boxed in 3px
  ink borders with hard offset shadows, and chips, tickets and book-spines tilt
  off-axis. Type is loud condensed grotesque (Big Shoulders Display) for display,
  Archivo Black for subheads, Archivo for body, and Darker Grotesque for the
  tracked-out uppercase UI labels.
colors:
  # Surface
  bone: '#F2EBDC'          # primary paper surface, light fills, light text on dark
  bone2: '#E4D9C0'         # darker paper tint (declared; secondary surface)
  # Ink / Text
  ink: '#16131A'           # near-black text, all 3px borders, hard shadows
  # Brand voltages
  cobalt: '#1B43D8'        # primary blue ink — accent fills, ghost layer, progress
  vermillion: '#F23C18'    # secondary red-orange ink — CTAs, stamps, hover shadow
  cobalt-deep: '#0E2A8C'   # deep-blue section backgrounds (shelf, rail, footer)
  # Hairlines / Tints (derived from ink/bone via rgba)
  ink-hairline: 'rgba(22,19,26,.45)'   # dashed ticket divider
  ink-placeholder: 'rgba(22,19,26,.5)' # search placeholder text
  bone-hairline: 'rgba(242,235,220,.2)' # footer copyright rule on deep blue
typography:
  display:
    fontFamily: "'Big Shoulders Display', sans-serif"
    fontSize: clamp(3rem, 9vw, 7.2rem)
    fontWeight: 900
    lineHeight: 0.8
    textTransform: uppercase
  subhead:
    fontFamily: "'Archivo Black', sans-serif"
    fontSize: 1.5rem
    fontWeight: 400
    lineHeight: 0.95
    textTransform: uppercase
  body:
    fontFamily: "'Archivo', sans-serif"
    fontSize: 0.95rem
    fontWeight: 400
    lineHeight: 1.55
  ui-label:
    fontFamily: "'Darker Grotesque', sans-serif"
    fontSize: 0.92rem
    fontWeight: 800
    lineHeight: 1
    letterSpacing: 0.18em
    textTransform: uppercase
rounded:                    # near-zero geometry; rounding reserved for coins/dots
  none: 0px
  full: 9999px
spacing:                    # base unit 4px; section padding in px, component in rem
  xs: 4px
  sm: 8px
  md: 14px
  lg: 24px
  xl: 40px
  xxl: 64px
components:
  button:
    backgroundColor: '{colors.bone}'
    textColor: '{colors.ink}'
    typography: '{typography.ui-label}'
    border: '3px solid {colors.ink}'
    rounded: '{rounded.none}'
    shadow: '4px 4px 0 {colors.ink}'
    padding: '.5rem 1rem'
    # .btn.verm fills vermillion, .btn.cobalt fills cobalt; .btn.sm shrinks + 3px shadow
  tag:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.bone}'
    typography: '{typography.ui-label}'
    rounded: '{rounded.none}'
    padding: '.18rem .55rem'
  bubble:
    backgroundColor: '{colors.bone}'
    textColor: '{colors.ink}'
    typography: '{typography.ui-label}'
    border: '3px solid {colors.ink}'
    rounded: '{rounded.none}'
    padding: '.32rem .8rem'
    # .bubble.verm / .bubble.cobalt swap fill to voltage, text to bone
  starburst:
    backgroundColor: '{colors.vermillion}'
    textColor: '{colors.bone}'
    typography: '{typography.ui-label}'
    border: '3px solid {colors.ink}'
    shadow: '4px 4px 0 {colors.ink}'
    transform: 'rotate(-3deg)'
    # two ::before/::after squares behind it form the burst points
  bento-tile:
    textColor: '{colors.bone}'
    border: '3px solid {colors.ink}'
    rounded: '{rounded.none}'
    shadow: '6px 6px 0 {colors.ink}'
    padding: '20px'
    # halftone fill (cobalt/verm/bone/deep); hover lifts to 9px verm shadow
  vcard:
    backgroundColor: '{colors.bone}'
    border: '3px solid {colors.ink}'
    rounded: '{rounded.none}'
    shadow: '5px 5px 0 {colors.vermillion}'
    # 3:4 cover, hover reveals a rotated "READ NOW" pop badge
  crcard:
    backgroundColor: '{colors.bone}'
    border: '3px solid {colors.ink}'
    rounded: '{rounded.none}'
    shadow: '5px 5px 0 {colors.cobalt}'
    # side cover + progress track (ink bg, cobalt fill)
  ticket:
    backgroundColor: '{colors.bone}'
    border: '3px solid {colors.ink}'
    rounded: '{rounded.none}'
    shadow: '6px 6px 0 {colors.ink}'
    padding: '22px 26px'
    # punched ::before/::after circles on each side; round date stamp badge
  spine:
    border: '3px solid {colors.ink}'
    typography: '{typography.subhead}'
    rounded: '{rounded.none}'
    # vertical-rl book spine, color variants s-verm/s-cob/s-bone/s-ink, hover lifts
  search:
    backgroundColor: '{colors.bone}'
    border: '3px solid {colors.ink}'
    rounded: '{rounded.none}'
    shadow: '3px 3px 0 {colors.ink}'
    padding: '.35rem .6rem'
motion:
  ease: 'cubic-bezier(.2,.8,.2,1) — global --ease for every transition'
  reveal: 'opacity + translateY(28px) over .7s on scroll-into-view (IntersectionObserver)'
  clipline: 'headline lines wipe in via clip-path inset(0 100% 0 0) -> 0 over .9s'
  windup: 'letter-spacing .34em -> .01em with opacity over .9s'
  blursharp: 'blur(16px) -> 0 over .8s'
  word-rise: 'per-word translateY(.7em) + fade, staggered 60ms via --i'
  mosaic-assemble: 'tiles fly in from random translate/rotate to settled, staggered 38ms'
  btn-press: 'hover nudges -1px/-1px and grows shadow to 6px; active sinks to 2px shadow'
  pop-badge: 'vcard hover scales READ NOW from .5 rotate(-12deg) to 1 rotate(-4deg)'
  hero-parallax: 'rAF loop drifts mosaic tiles by per-tile data-depth on scroll'
  count-scrub: 'Continue-Reading counter scrubs 0 -> 78 with section scroll position'
  spine-drift: 'shelf spines parallax-translate by --d factor on scroll'
  horizontal-pin: 'New Volumes section pins (240vh) and translates the reel horizontally'
  velocity-rail: 'autonomous marquee whose speed boosts with scroll velocity'
icons:
  library: inline unicode glyphs (no icon font)
  style: 'typographic — ⌕ search, ◔ bell/remind, ⌖ mark, ▶ play, ↗ ↘ → arrows, ＋ ⚑ ✓, kanji 頂 読む方向'
  sizes: { sm: 16px, md: 20px, lg: 24px }
  color: '{colors.ink}'

PANEL/POP

panel-pop-design · alpha

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

Overview

PANEL/POP is a seinen manga-weekly reader rendered as a risograph-printed zine. The page is warm bone paper (--bone #F2EBDC) inked in near-black (--ink #16131A) and run through a two-color press: cobalt blue (--cobalt #1B43D8) and vermillion (--vermillion #F23C18), with a deep cobalt (--cobalt-deep #0E2A8C) for full-bleed dark sections. The defining gesture is the CMYK misprint: every display headline is layered three times — the ink word plus a cobalt ghost shoved +3/+3px and a vermillion ghost shoved -3/-2px, both mix-blend-mode: multiply — so each title looks like a mis-registered print. Section backgrounds are not flat: halftone-* radial-dot fields and a 45° crosshatch give every band a printed grain. Everything is enclosed in 3px ink borders with hard, un-blurred offset shadows (no soft elevation anywhere), and the composition is deliberately off-axis — the logo mark tilts -4°, the starburst -3°, book spines hover-tilt, date stamps rotate -10°. Type is brash: condensed Big Shoulders Display (900) for the huge stacked headlines, Archivo Black for card titles, Archivo for body, and a heavily tracked, uppercase Darker Grotesque (800) for every UI label and chip.

Colors

Surface — --bone #F2EBDC is the page background and the fill of most light boxes, also serving as text/border color on dark sections; --bone2 #E4D9C0 is a declared darker paper tint. Ink — --ink #16131A carries all body and heading text, every 3px border, and every hard shadow. Voltages — --cobalt #1B43D8 is the primary blue ink: the middle headline line, progress-bar fills, crcard shadow, several button/chip fills, and the cobalt ghost layer; --vermillion #F23C18 is the secondary red-orange: the logo mark, starburst, CTA buttons, the vcard shadow, date stamps, and active-state hover shadows. --cobalt-deep #0E2A8C backs the full-bleed dark bands — the volume rail, The Shelf, and the footer. Hairlines/tints are rgba derivations: dashed ticket dividers at rgba(22,19,26,.45), the search placeholder at rgba(22,19,26,.5), and the footer copyright rule at rgba(242,235,220,.2). Halftone dots are painted as radial-gradient patterns in black or bone at low alpha.

Typography

Four Google Fonts families, loaded in one @import link: Big Shoulders Display (600–900) is the condensed display face for stacked hero/section headlines; Archivo Black (subhead) for card and spine titles; Archivo (400–700) for body copy; Darker Grotesque (600–900) for all UI labels, eyebrows, tags, buttons and bubbles, always uppercase with heavy tracking. All faces are open-source from Google Fonts, so no substitution is needed.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(3rem,9vw,7.2rem)	900	0.8	—	Hero/section misprint headlines
subhead	1.5rem (1.35–1.7rem)	400 (Black)	0.95	—	Card titles, ticket/spine titles
body	0.95rem	400	1.55	—	Paragraphs, descriptions
ui-label	0.92rem (.7–1.05rem)	800	1	0.08em–0.22em	Eyebrows, tags, buttons, bubbles, nav

Layout

Base unit ~4px; section vertical padding runs in px (40/56/64px), component padding in rem. Content is centered in a max-width: 1400px wrap with 24px gutters. The page is a vertical stack of full-bleed bands separated by 3px ink borders: sticky top bar; a hero split (minmax(320px,.95fr) 1.25fr) pairing the stacked headline with an 18-tile assembling mosaic (repeat(6,1fr), 3:4 tiles) over a marquee volume rail; a Continue-Reading band with a sticky left column (chip + scrubbed % counter) beside a 2-up card grid; a six-cell bento (repeat(4,1fr), 185px rows, with big/tall/wide spans); The Shelf, a deep-blue sticky-split whose right side is a horizontally scrolling rack of book spines; New Volumes, a 240vh horizontal-pin section that scrubs a reel of tickets sideways; and a 4-column footer. Whitespace is tight and energetic — boxes nearly touch, tilts and overlaps create the zine density.

Elevation & Depth

No soft shadows exist. Depth is built from (1) 3px solid ink borders on every box; (2) hard offset shadows — box-shadow: Npx Npx 0 with no blur, in ink (buttons 4px, bento 6px), cobalt (crcard 5px), or vermillion (vcard 5px, shelf rack 9px, hover states up to 9px); (3) printed textures (halftone dot fields, crosshatch) that add tactile grain; and (4) layered z-index from the misprint ghosts and parallax drift. Hover deepens or recolors the offset shadow rather than blurring it.

Shapes

Resolutely rectangular — almost nothing is rounded. The radius story is binary: sharp 0 corners on every panel, card, button, chip, tag and spine, versus perfect circles (border-radius:50%) reserved for small coins — the avatar, spine number badges, bento arrow buttons, ticket punch-holes and the round date stamp. The flat geometry plus the off-axis rotations is the whole shape language.

Components

• button (.btn) — bone fill, 3px ink border, 4px 4px 0 ink shadow, uppercase Darker Grotesque; .verm/.cobalt swap to voltage fills, .sm shrinks to 3px shadow. Labels: "▶ Pick up", "⌖ Mark", "◔ Remind me", "＋ Add volume".
• tag (.tag) — solid ink chip, bone text, tiny tracked label. e.g. "VOL 12".
• bubble (.bubble) — bone box, 3px ink border, no shadow; .verm/.cobalt voltage variants. e.g. "4 in progress", genre badges.
• starburst — rotated -3° vermillion box with two square ::before/::after burst points and a hard shadow. "! New This Week".
• bento tile (.gtile) — halftone-filled panel, 6px ink shadow, corner image, large gttl, hidden arrow that slides in on hover (9px vermillion shadow).
• vcard — bone card, 5px vermillion shadow, 3:4 cover, hover-revealed rotated "▶ READ NOW" pop badge.
• crcard — horizontal card, 5px cobalt shadow, side cover + ink-track progress bar with cobalt fill.
• ticket — bone stub with 3px ink border, side punch-holes, dashed inner divider, and a circular dashed date stamp (vermillion or ink/cobalt .alt).
• spine — 56px vertical book spine, vertical-rl title, number coin, color variants (s-verm/s-cob/s-bone/s-ink), hover lifts and tilts with a tip bubble.
• search — bordered bone field with 3px ink shadow; hidden under 768px.

Motion

A single easing cubic-bezier(.2,.8,.2,1) drives everything. On scroll-in, .reveal rises+fades (.7s), headline lines wipe via clip-path (.clipline, .9s), .windup un-spaces letters, .blursharp sharpens from blur, and headings fade-rise per word with a 60ms --i stagger. The hero mosaic assembles from randomized scattered positions (38ms stagger). A requestAnimationFrame loop adds: per-tile mosaic parallax, a Continue-Reading counter that scrubs 0→78 with scroll, shelf-spine parallax drift, a 240vh horizontal pin that translates the New-Volumes reel sideways, and an autonomous velocity-boosted marquee on the volume rail. Buttons nudge and grow their offset shadow on hover, sink on active. All animation is gated by a reduce flag (hard-coded false).

Iconography

No icon font — all icons are typographic unicode glyphs in ink: ⌕ search, ◔ notifications/remind, ⌖ mark, ▶ play, ↗ ↘ → ⇆ arrows, ＋ ⚑ ✓ actions, and decorative kanji (頂 logo mark, 読む方向 "reading direction"). Nominal UI sizes ~16–24px; glyphs inherit text color (ink, or bone on dark fills).

Do's and Don'ts

• Do triple-print every display headline (ink + cobalt ghost + vermillion ghost, multiplied) — it is the brand.
• Do box everything in 3px ink borders with hard, un-blurred offset shadows.
• Do keep textures on (halftone dots, crosshatch) and tilt chips/stamps/spines off-axis for the zine energy.
• Do restrict the palette to bone, ink, cobalt, vermillion, deep cobalt.
• Don't introduce blurred/soft drop shadows or rounded panel corners — circles are only for coins, holes and stamps.
• Don't set display headlines in lowercase or in the body face, or drop the heavy uppercase tracking on UI labels.
• Don't add new accent hues or flat untextured dark fills.

Known Gaps

• The --scroll variable and several motion timings are JS-driven; values above describe the authored CSS/JS, not computed runtime states.
• --bone2 #E4D9C0 is declared in :root but not applied to a visible surface in the markup; recorded as the system's secondary paper tint.
• Mosaic tile start positions and rail/parallax offsets are randomized/scroll- derived at runtime, so exact transforms vary per session.
• Icon "sizes" are nominal — glyphs scale with their text context, not a fixed set.