# One-Shot Prompt

**Style**: swiss (International Typographic Style)
**Generated**: 2026-04-09

## Prompt

Generate a single-file digital magazine using HTML, CSS, and JS. The aesthetic must be "Swiss Design" (International Typographic Style), featuring asymmetrical grid layouts, sans-serif typography (Helvetica/Inter), stark black and white contrasts with exactly one bold accent color (like absolute red or striking ultramarine), and mathematical precision in spacing.

**Name**: Raster
**Tagline**: Information, designed.
**Issue**: Vol. IV, No. 2

The magazine must include:
1.  **Cover / Hero**: Large masthead ("RASTER"), volume/issue numbers, publication date, and a stark geometric CSS art composition representing a grid system. Cinematic sans-serif typography. Teasers for 3 articles.
2.  **Table of Contents**: Minimalist, numbered (01, 02, 03) navigation. Hovering over numbers should cause a sharp CSS transform (like a harsh scale or color inversion). Smooth scroll to articles.
3.  **Articles**:
    *   **Article 1 (The Grid as God)**: Full-width single column with massive margins, huge display drop cap, strict alignment. Discusses Josef Müller-Brockmann and the philosophy of the grid.
    *   **Article 2 (Akzidenz-Grotesk)**: Multi-column (CSS `column-count` set to 3) text layout with a large, spanning pullquote. Discusses the history of early sans-serifs.
    *   **Article 3 (Form Follows Function)**: 70/30 asymmetrical split layout (sidebar + main column) using CSS Grid. Includes a simulated CSS "photo essay" using abstract colored rectangles.
4.  **Visual Interlude**: A full-viewport typographic statement reading "OBJECTIVITY IS THE ILLUSION OF CLARITY" in massive tracking, breaking the viewport slightly.
5.  **Masthead & Colophon**: Fake ISSN, contributor bios, fake Swiss address, print run details.
6.  **Interactions & Details**: Intersection Observer to slide-in articles as they scroll into view. A stark, thin progress bar pinned to the top. Smooth scrolling. 
7.  **Typography**: Import Inter or use system sans-serifs (Helvetica Neue). Tight tracking on display type, generous leading on body text (1.6). Fully responsive.

Do not use external images. Use CSS gradients or SVG geometric shapes. Ensure it is fully contained in a single `index.html` file.

## Notes

- Uses CSS Grid and CSS Columns to demonstrate modern layout techniques mirroring classic print.
- IntersectionObserver for scroll animations.
- Minimalist palette: Black, White, and Red (#E3000F).
- Hosting: local or static provider.