name: mangahaus-design
version: alpha
description: >
  A manga-bookshop reading app rendered as risograph print: a warm cream
  newsprint surface (#F5EEDC) inked in near-black (#141414), punched with manga
  yellow (#F5CA3D) and stop-red (#D64433). Every surface wears a halftone dot
  screen; every block is fenced by a 3px keyline and dropped on a hard offset
  shadow. The type is loud and condensed — Archivo Black display caps, a
  Special Elite typewriter stamp for metadata — and the geometry is square
  except for pill speech-bubble buttons. Signature moves: an auto-scrolling
  panel marquee, a hover-lift bookshelf of vertical spines, halftone-wipe genre
  tiles, and perforated "ticket" release cards.
colors:
  # Surface
  cream: '#F5EEDC'      # page background, light cards, button fills, stamp text on dark
  ink: '#141414'        # near-black; keylines, shadows, dark sections, body text
  # Brand / accent (the two voltages)
  yellow: '#F5CA3D'     # manga yellow; halftone panels, progress fill, accent tags, footer/shelf sections
  red: '#D64433'        # stop-red; logo tile, slashes, drop dates, alerts, accent borders
  # Text
  text-body: '#141414'  # default body copy on cream
  text-on-dark: '#F5EEDC'  # cream text on ink/red surfaces
  text-muted: 'rgba(245,238,220,0.6)'  # 60% cream for captions on dark
  text-accent: '#D64433'  # red eyebrow/metadata labels
  # Hairlines
  keyline: '#141414'    # 3px solid border fencing every block
  keyline-light: 'rgba(245,238,220,0.2)'  # 20% cream divider inside dark hero
  # Halftone dot inks
  dot-on-light: '#141414'  # dark dots over yellow/red/cream screens
  dot-on-dark: '#F5EEDC'   # cream dots over ink screens

Mangahaus

mangahaus-design · alpha

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

Overview

Mangahaus (in-product wordmark "PANEL/POP") is a weekly-seinen reading app drawn like a risograph manga print. The surface is warm newsprint cream #F5EEDC and everything is inked in near-black #141414. Two voltages do the shouting: manga yellow #F5CA3D and stop-red #D64433. The defining texture is the halftone — nearly every colored surface carries a CSS radial-gradient dot screen (.halftone-yellow, -red, -cream, -black) at 10–14px pitch, so the whole page reads as printed ink rather than flat fills. The structural grammar is brutalist comic-book: a 3px black keyline (.keyline) fences every block and a hard offset shadow (box-shadow:4px 4px 0 / 6px 6px 0 #141414) drops it onto the page — no blur, no softness. Type is loud: Archivo Black (falling back to Bungee) in tight negative-tracking caps for display, with -webkit-text-stroke outline treatments (.stroke-cream, .stroke-outline), and Special Elite typewriter mono for all the stamp metadata (chapter counts, week numbers, drop dates). Geometry is square throughout — the one rounded exception is the pill speech-bubble button (.speech-btn, border-radius:999px with a CSS tail). Japanese characters (漫, 読) are sprinkled as decorative kanji. The signature moves are theatrical: an infinite auto-scroll panel marquee in the dark hero, a bookshelf of hover-lifting vertical spines, genre tiles whose halftone screen wipes back on hover to reveal the cover, and perforated "ticket" cards (notched circles + dashed tear-line) for upcoming volume drops.

Colors

Surface. cream #F5EEDC is the page background and the fill of light cards, inputs, and most buttons. ink #141414 is the near-black used for the dark hero strip, the genres section, the new-volumes section, all keylines, and all offset shadows.

Brand / accent (two voltages). yellow #F5CA3D is manga yellow — it fills halftone panels, the progress-bar fill, accent tags, the kanji logo backing in the hero arrow, and the full Your-Shelf and footer sections. red #D64433 is stop-red — the rotated logo tile, the / and . punctuation accents in the wordmark, eyebrow labels, drop-date text, and alert badges.

Text. Body copy is text-body #141414 on cream surfaces; on ink/red surfaces it flips to text-on-dark #F5EEDC. Captions and secondary lines on dark use text-muted rgba(245,238,220,0.6) (60% cream). Eyebrow/metadata labels are text-accent #D64433.

Hairlines. The universal fence is the 3px keyline #141414. Inside the dark hero, dividers soften to keyline-light rgba(245,238,220,0.2).

Halftone inks. Dot screens use dot-on-light #141414 (dark dots over yellow/red/cream) and dot-on-dark #F5EEDC (cream dots over ink), drawn as radial-gradient(circle, <ink> 1–1.2px, transparent 1.5px) tiled at 10/12/14px.

Typography

Three Google-Fonts faces, all loaded from one @import. The display face is Archivo Black (single weight 400, intrinsically heavy) with Bungee as a themed fallback and letter-spacing:-0.02em; used for all headings and titles in uppercase. The body/UI face is Inter (400–800). The metadata "stamp" face is Special Elite, a distressed typewriter mono, used for eyebrows, chapter counts, week numbers, drop dates, and footer lines — usually small, uppercase, with wide tracking (tracking-[0.3em] / tracking-widest). Outline display treatments are achieved with -webkit-text-stroke (.stroke-cream = 3px ink stroke / cream fill; .stroke-outline = 2px ink stroke / transparent fill).

Token	Size	Weight	Line-height	Tracking	Usage
display-hero	60–72px (text-6xl/7xl)	400 (Archivo Black)	0.9	-0.02em	Hero / footer mega headings
display-section	48–60px (text-5xl/6xl)	400	tight	-0.02em	Section titles ("READING NOW.")
display-card	20–24px (text-xl/2xl)	400	none/tight	-0.02em	Card/series titles
body	14–16px (text-sm/base)	400–500	normal	—	Paragraphs, chapter subtitles
nav	14px (text-sm)	600	normal	wider, uppercase	Nav links
stamp	10–14px (text-[10px]/xs/sm)	400	normal	0.3em / widest, uppercase	Eyebrows, metadata, drop dates

Layout

Base unit 4px (Tailwind scale); common rhythm 4 / 6 / 8 / 10 / 14 / 16 in gap, px, and py. The page is a single full-bleed vertical stack of banded sections, each border-b-[3px] border-[#141414] and each centered on a max-w-[1400px] container with px-8. Sections alternate surface: cream nav → ink hero → cream "Reading Now" → ink "Genres" → yellow "Your Shelf" → ink "New Volumes" → yellow footer. Dominant primitives: a sticky cream header; a dark hero with an infinite marquee of 340×420px panel cards; 3-column card grids (md:grid-cols-2 xl:grid-cols-3); a 6-column × 2-row asymmetric genre bento (grid-cols-6 grid-rows-2 h-[640px] with col/row spans); and a horizontal bookshelf of variable-height vertical spines. Compositions lean on small rotations (rotate-[-4deg] … rotate-[2deg]) for a hand-pasted, off-register print feel. Whitespace is generous within bands (py-14/py-16) but content is densely fenced.

Elevation & Depth

Depth is entirely hard offset shadows + keylines — no blur anywhere. .offset-shadow = 4px 4px 0 0 #141414, .offset-shadow-lg = 6px 6px 0 0 #141414, and .offset-shadow-red = 4px 4px 0 0 #D64433. The .push:active state shrinks the offset to 2px 2px 0 and nudges the element translate(2px, 2px), simulating a pressed stamp. The shelf plank uses a downward 0 6px 0 #141414. The other "depth" device is the halftone dot screen itself, which gives flat fills a printed-ink density. Glass/blur/soft shadows are entirely absent.

Shapes

Square by default — radius 0 on cards, panels, inputs, tags, tickets, and spines. The single deliberate exception is the pill .speech-btn (border-radius:999px) which also grows a rotated square tail via ::after to read as a comic speech bubble; the tooltip bubble (.tt) is softly rounded (border-radius:18px) with the same tail. Ticket cards add semicircular notches (::before/::after, border-radius:50%) plus a dashed tear-line, and the logo dots/spine kanji stay square. The look is hard-edged comic panel with one friendly rounded voice for actions.

Components

• Speech-button (.speech-btn) — cream #F5EEDC fill, 3px ink border, border-radius:999px, padding:8px 18px, weight 800, 4px 4px 0 #141414 shadow, with a rotated ::after square as the bubble tail; combined with .push (press) and .wiggle (hover rotate). Labels: "READ NOW →", "PICK UP →", "+ ADD", "🔖 REMIND ME", "RYO · 7".
• Panel card (hero marquee) — 340×420px, colored fill (yellow/red/cream/ink), .keyline, .offset-shadow-lg, full-bleed halftone overlay, grayscale contrast-boosted cover image fenced by a 3px divider, a rotated stamp badge (NEW · VOL 12 / HOT · WK 43), and a footer block with display title + stamp meta + speech-button.
• Reading-now card — cream, .keyline, .offset-shadow, horizontal layout: 28×40 cover thumb (keyline) + content with red stamp eyebrow, display title, chapter subtitle, a progress bar and a PICK UP button; wrapped in a hover tooltip ("💭 Resume reading?").
• Progress bar (.progress-bar / .progress-fill) — 14px tall ink track, 2px border, yellow fill scaled via transform:scaleX(…), with a 45° diagonal hatch overlay (repeating-linear-gradient).
• Genre tile (.genre-card) — halftone-screened, keylined, offset-shadow tile in a bento grid; a .genre-wipe halftone layer slides in (translateX(-101% → 0), mix-blend-mode:multiply) on hover while the cover scales/rotates; titles in .stroke-cream outline display.
• Spine (.spine) — variable-height (268–333px) × narrow (36–56px) colored block, keylined, with vertical writing-mode title, V.## stamp, and 漫 kanji; hovers up translateY(-22px) rotate(-1deg) and reveals a .spine-tip peek card.
• Ticket card (.ticket) — cream, 3px border, semicircular side notches + dashed internal tear-line; cover panel on top, drop-date block ("FRI · OCT 24" in red stamp) + REMIND-ME button below.
• Search input — cream fill, .keyline, square (rounded-none), .offset-shadow, 🔍 prefix, placeholder "Search a series…".
• Stamp tag/badge — small Special Elite label on yellow/red/ink with keyline, slightly rotated (NEW, HOT, FINALE, EXCLUSIVE, SIMULCAST, VOL ##).

Motion

• Marquee (@keyframes marquee) — infinite translateX(0 → -50%) over 50s linear; duplicated card set for a seamless loop.
• Spine hover — transform .25s ease lift + rotate, with the peek tooltip fading/sliding in.
• Genre wipe — .genre-wipe slides over .55s cubic-bezier(.7,0,.2,1); cover image scales 1.06 + rotates -2deg over .5s ease.
• Wiggle (@keyframes wiggle) — .5s rotate shimmy -6/5/-3deg on hover.
• Push — :active press: shadow shrinks to 2px 2px 0 and element nudges translate(2px,2px).
• Tooltip (.tt) — scale .6 → 1 + fade over .2s ease on hover.

Iconography

No icon library — the system uses emoji as glyphs (🔍 search, 💭 thought, 🔖 bookmark) and decorative kanji (漫 "manga", 読 "read") set in the display face. Directional arrows are plain text characters (→, ←). Color follows the surrounding context (ink on light, cream on dark, red/yellow accents). Icons are incidental rather than a structured UI set.

Do's and Don'ts

• Do fence every block in a 3px #141414 keyline and drop it on a hard offset shadow — no blur.
• Do keep the halftone dot screen on colored surfaces; it is the texture that makes the print read.
• Do reserve the pill speech-button as the one rounded shape; everything else stays square.
• Do set headings in Archivo Black caps with tight tracking, and all metadata in Special Elite stamp.
• Do use small rotations and the two voltages (yellow/red) for emphasis.
• Don't introduce soft/blurred shadows, gradients-as-glow, or glassmorphism.
• Don't round card/panel/ticket corners or drop the keyline.
• Don't add a new accent color — the palette is cream, ink, yellow, red only.
• Don't mix in an outline icon set; keep the emoji/kanji/arrow vocabulary.

Known Gaps

• Type sizes are read from Tailwind utility classes (text-6xl ≈ 60px, text-7xl ≈ 72px, etc.); exact rendered px depend on Tailwind v4 defaults.
• text-muted is the literal rgba(245,238,220,0.x) opacities applied to cream; captured at the common 60% (/60) value, though /70 also appears.
• Halftone "colors" are CSS dot patterns, not solid tokens; documented by their ink + base-fill.
• Cover imagery is remote Unsplash/Pexels photos rendered grayscale + contrast-125 (and sometimes mix-blend-multiply/screen); not part of the token palette.