# Design Language for manga.day ## Aesthetics and Tone manga.day is a daily celebration of manga (漫画) culture -- the art, the craft, the storytelling, the industry. The site presents itself as a living manga page that the visitor reads by scrolling horizontally, right-to-left, in the traditional Japanese reading direction. The aesthetic channels the stark, high-contrast visual language of manga itself: bold black ink lines, screentone patterns, dynamic panel compositions, and the kinetic energy of speed lines. The tone is energetic and bold-confident -- the voice of a passionate manga editor who lives and breathes sequential art. Content is presented not as articles but as "chapters," each with its own panel layout and dramatic pacing. The experience should feel like reading a manga about manga. ## Layout Motifs and Structure **Primary layout: horizontal-scroll** with **broken-grid** panel compositions mimicking manga page layouts. The entire site scrolls horizontally from right to left (direction: rtl on the scroll container, or JS-driven horizontal scroll mapped to vertical wheel input). The viewport width represents one "page" and the site is 8-10 pages wide. Each page uses a unique panel layout -- some pages are a single dramatic full-bleed splash panel, others are divided into 3-6 irregular panels of varying sizes using CSS Grid with explicit row/column spans. **Spatial relationships**: Panel borders are thick (3-4px) solid black lines with occasional panel-breaking elements where a character illustration or effect bursts outside its panel boundary (achieved with negative margins and z-index layering). Gutters between panels are 6-8px of pure white, referencing physical manga printing. **Navigation**: A horizontal page indicator at the bottom -- small rectangles representing each page, with the current page highlighted in black fill while others are outlined. Navigation arrows (styled as thick manga-style speed lines) appear at the left and right viewport edges. Page numbers appear in the top-right corner of each page in a small black circle (maru-number style), reading right-to-left. ## Typography and Palette **Typography** - **Display / Chapter Titles:** "Black Ops One" (Google Fonts) -- a heavy, militaristic display font with sharp angles that channels the impact of manga title cards and sound effects. Used at 4rem-8rem, weight 400. Uppercase. Its blocky authority suits dramatic chapter announcements. - **Body / Content Text:** "Zen Kaku Gothic New" (Google Fonts) -- a clean Japanese Gothic typeface with excellent readability for both Japanese and English text. Weight 400 for body, 700 for emphasis. Line-height 1.6. 15px-16px size. - **Sound Effects / Onomatopoeia:** "Permanent Marker" (Google Fonts) -- a hand-drawn marker font used for decorative manga-style sound effect text scattered across panels. Weight 400. Rotated at various angles and scaled dramatically (2rem-10rem). **Color Palette** | Role | Color | Hex | |------|-------|-----| | Ink Black | Pure manga ink | #0a0a0a | | Paper White | Clean manga paper | #f5f5f0 | | Screentone Gray | Halftone dot pattern gray | #b0b0b0 | | Bleed Red | Dramatic accent red | #cc0000 | | Speed Blue | Motion line blue | #1a5ab8 | | Flash Yellow | Impact emphasis | #ffd900 | | Panel Shadow | Depth shadow | #333333 | The palette is intentionally restricted to near-monochrome (black, white, gray) with rare color accents for dramatic moments -- exactly as manga uses spot color for emphasis in otherwise black-and-white pages. ## Imagery and Motifs **Core Visual Motifs** 1. **Screentone Patterns**: CSS-generated halftone dot patterns (radial-gradient with tiny circles repeated) used as panel backgrounds at varying densities. Light screentone (small dots, wide spacing) for daytime scenes; dense screentone (larger dots, tight spacing) for dramatic or nighttime panels. Dot size ranges from 2px to 5px with spacing from 8px to 15px. 2. **Speed Lines**: CSS-generated radial lines emanating from focal points in panels. Created using conic-gradient with alternating transparent and black thin slices, positioned to converge on the panel's subject. These activate on scroll-triggered entry, drawing inward from the edges over 0.5s. 3. **Panel-Breaking Elements**: Select decorative elements (large onomatopoeia text, dramatic border effects) intentionally overflow their panel containers, overlapping into adjacent panels. This classic manga technique creates visual excitement and breaks the grid's rigidity. 4. **Focus Blur**: When a panel enters the viewport center, surrounding panels receive a subtle blur (filter: blur(1px)) and desaturation, mimicking the reader's focal attention on the current panel. This effect transitions smoothly (0.3s) as the horizontal scroll position changes. 5. **Onomatopoeia Scatter**: Large hand-drawn-style text (Permanent Marker font) is scattered across panels at dramatic angles -- "DON!" (ドン), "BAKI" (バキ), "ZAWA" (ざわ). These appear with a bounce-enter animation (scale from 2.0 to 1.0 with overshoot via cubic-bezier) when their panel enters the viewport. ## Prompts for Implementation **Storytelling and Narrative Arc** The site reads as a manga in itself. Page 1 (rightmost, the "cover") features a dramatic full-bleed splash with the title "MANGA DAY" rendered as a manga title logo -- thick outlined letters with speed lines radiating outward. A subtitle in Japanese (漫画の日) appears below. Pages 2-3 introduce the history of manga through sequential panels arranged in classic four-panel (yonkoma) and multi-panel layouts. Content flows right-to-left, top-to-bottom within each page. Pages 4-6 explore genres (shonen, shojo, seinen, josei) with each genre getting a unique panel treatment: shonen pages use aggressive diagonal panels and intense speed lines; shojo pages use softer rounded panels with flower screentone; seinen pages use stark, sparse layouts with heavy shadows. Pages 7-8 showcase the craft -- panel composition theory, how screentones work, the inking process. These pages use a meta technique: panels that explain manga techniques while simultaneously demonstrating them. The final page (leftmost) is a single panel containing only the Japanese character "完" (kan, "the end") in the center, styled as a traditional manga chapter ending. **Animation Priorities** - Horizontal scroll engine (JS mapping vertical wheel deltaY to horizontal scrollLeft, with smooth momentum and snap-to-page behavior) - Speed line convergence animation (CSS keyframes on conic-gradient position, 0.5s on viewport entry) - Onomatopoeia bounce-enter (CSS keyframes: scale(2) to scale(0.9) to scale(1), cubic-bezier overshoot, triggered by IntersectionObserver) - Panel focus blur (JS scroll listener calculating distance of each panel from viewport center, applying filter: blur proportionally) - Screentone density transition (CSS transition on background-size of radial-gradient patterns) **Full-screen Narrative Experience**: The entire site is one continuous horizontal scroll with page-width snap points (scroll-snap-type: x mandatory). Each page fills exactly 100vw x 100vh. **AVOID**: CTA-heavy layouts, pricing blocks, stat-grids, vertical card grids, standard navigation bars, footer sections, newsletter signups. ## Uniqueness Notes **Differentiators:** 1. **Right-to-left horizontal reading direction**: The site scrolls in the authentic Japanese manga reading direction (right to left), a unique navigational choice that directly embodies its subject matter. 2. **Manga panel layouts as web layout system**: Using irregular CSS Grid panels with gutter-as-panel-border and panel-breaking overflow elements creates a genuine manga page feel unlike any conventional web layout. 3. **CSS-generated screentone and speed lines**: Replicating core manga visual techniques (halftone screentone patterns, convergent speed lines) entirely in CSS without image assets is technically distinctive. 4. **Genre-specific visual treatment**: Different content sections receive dramatically different panel compositions and visual treatments based on their manga genre (shonen vs. shojo vs. seinen), creating variety within a unified framework. **Chosen seed/style:** horizontal scroll gallery **Avoided overused patterns:** corporate aesthetic (89%), centered layout (87%), minimal imagery (84%), counter-animate (90%), mysterious-moody tone (96%), mono typography (92%). Instead used horizontal-scroll with broken-grid layout, bold-confident + energetic tone, display-bold typography, and high-contrast monochrome palette.