# Design Language for iisugi.com ## Aesthetics and Tone iisugi.com is a **noir pop-art surveillance archive** — a single-page experience that takes the visual language of Andy Warhol's silkscreen repetition and drains it of color, leaving only the cold mechanical residue of a forensic monitor at 03:47 a.m. The aesthetic is **pop-art** (the Warhol grid, the Lichtenstein halftone, the Rauschenberg silkscreen-stack) crossed with **mysterious-moody** noir surveillance: every panel feels like a frame from a desaturated comic-book interrogation, every dot in the halftone field could be a pixel on a monitor, a rivet in a circuit board, or an eye looking back. The mood is **cool, watchful, forensic, and quietly theatrical** — as if a 1960s pop artist had been hired to design the user interface for a surveillance station and given only graphite, cold steel, fluorescent ash, and a single permitted bruise of cobalt to work with. The name "iisugi" (potentially read as 杉 — "cedar" — but here recast as a cipher, a callsign, a serial designation stamped on a black-anodized panel) becomes the central glyph: rendered as a typewriter slug, scanned, reprinted as halftone, zoomed past the point of legibility, then reconstituted in lens-flared bloom. The visitor is positioned as someone leaning in too close to a CRT, watching frames that watch back. Inspirations: Warhol's "Death and Disaster" series (silkscreen repetition stripped of saturation), Chris Marker's *La Jetée* (still-frame surveillance narrative), the title sequences of *The Conversation* (1974) and *Blow-Up* (1966), Saul Bass's monochrome graphic vocabulary, and the aesthetic of physical contact sheets where a single zoomed-in negative reveals what the wide shot concealed. ## Layout Motifs and Structure **Primary layout: centered** — but executed as a single tight 580px column suspended in a vast cool-gray field, the way a single evidence card sits centered on a metal examiner's table under a fluorescent ring light. The centered axis is non-negotiable, but the field around it is alive: it scrolls slower than the column (parallax circuit traces), it bears witness marks (corner crop registration), and it occasionally fills with halftone bleed. **Composition system — the Contact Sheet:** The page is structured as eight vertically stacked **frames**, each a 4:3 ratio panel referencing a 35mm contact-sheet cell. Each frame is enclosed by thin 1px hairlines with corner-only registration brackets (`└ ┘ ┌ ┐` style L-shapes 12px long, drawn in #C2C7CE). Each frame has a serial number in the top-left (`FRAME 03 / 08 — 01:24:17`) and a single-line caption in the bottom-right, both in tech-mono at 10px. **Zoom-focus mechanic:** Each frame begins as a wide-shot (the centered 580px column shows the frame at 100% scale), but as the user scrolls to bring that frame into the viewport center, the frame's interior content **scales up to 240%** while the outer crop window stays fixed — a magnification effect, as if the user is leaning forward into the contact sheet. A small `+ZOOM 2.4×` indicator appears in the top-right corner of the active frame, animating its number in tech-mono with a counter-animate roll. **The Halftone Margin:** Outside the central column, the left and right margins are filled with a slow-drifting field of halftone dots (#9CA3AE on #1A1D24). The dot grid is 16px × 16px with each dot's diameter modulated by a Perlin noise function, creating a slow rolling cloud of density. Where circuit traces enter the page, the halftone dots align into Manhattan-routed lines, briefly forming **dot-traces** that pulse once and dissolve back into the noise field. **The Lens-Flare Slot:** Exactly once per session, anchored to the third frame, a single horizontal lens-flare (a 6-point anamorphic streak) sweeps left-to-right across the centered column over 2.8 seconds, leaving a brief residual bloom at its terminus. This is the page's only saturated event — the flare is rendered in the single permitted accent color (#3D5AFE Cobalt Bruise) at 35% opacity over a CSS `mix-blend-mode: screen`. After it fires, it never re-fires; the bloom site retains a faint ghost halo as evidence the flare occurred. **No traditional navigation.** A column of eight tiny circular registration marks runs down the far-left margin, one per frame, each labeled `01` through `08` in tech-mono 9px. The currently-viewed frame's mark fills with cobalt; the others remain hollow #6B7280 rings. Click jumps to that frame with a soft scroll. The footer is not a footer: it is **FRAME 08 / 08 — END OF ROLL**, terminated by a horizontal black band 24px tall stamped with `EXP. ☐ ☐ — ☐ ☐ — ☐ ☐` (an exposure date stamp left blank), as on the trailing edge of physical film. ## Typography and Palette **Typography (Google Fonts only):** - **Display Glyph & Section Headers:** **"Bungee"** (700 weight) — a muscular pop-art display typeface with the squared, signage-derived character of vintage signpainting. Used for the iisugi.com primary glyph at 18vw (rendered once, in the first frame, as the silkscreen subject) and for frame titles at 32px. Letter-spacing: -0.01em. Always uppercase. Bungee's slab-block geometry references both Lichtenstein's flat comic typography and the chunky monitor labels of vintage surveillance equipment. - **Body & Captions:** **"JetBrains Mono"** (400, 500 weight) — a tech-mono with technical clarity and an almost forensic neutrality. Used for all body copy at 14px / 1.7 line-height, and for all serial numbers, timestamps, frame markers at 10–11px. The strict monospace grid reinforces the contact-sheet metaphor; every character occupies its allocated cell like a frame in a strip. - **Pop-Art Pull-Quote:** **"Anton"** (400 weight) — a high-impact condensed sans inspired by classic poster typography. Used sparingly for one or two oversized pull-quote phrases per page (e.g., `WHO IS WATCHING / THE WATCHERS?`), rendered at 96px in #E5E7EB on a halftone-textured background, with a hard 3px offset in #6B7280 simulating mis-registered four-color printing. - **Halftone Caption:** **"Special Elite"** (400 weight) — a typewriter face used only for the bottom-right frame captions, simulating the typed caption strips on archival photographs. 10px, slightly unevenly spaced. **Palette — Cool Grays + One Bruise:** - `#0E1116` — **Tar** (deepest near-black, used for void backgrounds and registration marks) - `#1A1D24` — **Carbon** (primary background field surrounding the centered column) - `#2C313B` — **Graphite** (secondary surface — the centered column's background, frame interiors) - `#4A5260` — **Lead** (mid-tone — circuit-trace base color, halftone shadow dots) - `#6B7280` — **Ash** (cool gray — body text de-emphasis, hairline borders, hollow registration rings) - `#9CA3AE` — **Fog** (cool gray — halftone field dot color, secondary captions) - `#C2C7CE` — **Bone** (light cool gray — hairline brackets, frame numbers) - `#E5E7EB` — **Phosphor** (near-white, slightly cool — primary body text, headlines) - `#3D5AFE` — **Cobalt Bruise** (the single permitted accent — used ONLY for: the lens-flare event, the active frame's registration mark, and one-pixel-wide circuit-trace pulse highlights. Never used for text. Never used for backgrounds. It is a wound, not a color.) The palette is **deliberately almost-monochrome**. The cool-gray cast (every gray has a slight blue undertone — #1A1D24 vs neutral #1A1A1A) is essential and intentional — it gives the page the psychological temperature of a fluorescent-lit basement archive, the morgue-blue of a CRT screen, the chill of unheated steel filing cabinets. Cobalt Bruise functions as the single drop of color in a noir frame: a bruise, a wound, the only thing that bleeds in this archive. ## Imagery and Motifs **1. Halftone Silkscreen Stack — the iisugi Glyph.** The opening frame contains the word "iisugi" rendered four times, vertically stacked, in the Warhol silkscreen tradition. Each iteration is rendered with a different halftone dot density (8%, 24%, 56%, 92%) in increasingly cool grays. The stack is mis-registered by 3px horizontally between layers — a deliberate printing error that makes the word feel mechanically reproduced, never quite identical to itself. The fourth iteration is partially overprinted with a circuit-trace pattern, as if the silkscreen mesh had captured the wiring of the press itself. **2. Circuit-Trace Architecture — the Subway Map.** Underlying the entire page is a visible **circuit map** rendered as Manhattan-routed traces (only 90° and 45° angles, no curves) in #4A5260 at 1px width, with #6B7280 vias (small 4px diamonds) at junction points. The traces enter from the left margin, cross the centered column at horizontal **bus lines** behind specific frames, then exit to the right. They function as the page's nervous system — each frame's content is "fed" by a pulsable trace. When a frame becomes active, a **trace pulse** travels along its bus line: a 24px-long Cobalt Bruise gradient slides along the trace at 800px/sec, lighting up the vias as it passes. The pulse arrives at the frame's interior, momentarily energizing the frame's registration brackets, and then continues offscreen. This makes the page feel like a powered-on circuit board responding to the user's attention. **3. Lens-Flare as Single Theatrical Event.** The horizontal anamorphic lens-flare is the page's central dramatic motif and occurs exactly **once** during a session, anchored to the third frame's emergence into view. It is rendered as: (a) a 6-point starburst in #E5E7EB at the flare-source point, (b) a horizontal lens-streak in #3D5AFE at 35% opacity with `mix-blend-mode: screen`, (c) a faint vertical ghost-aperture blur, and (d) two small chromatic-aberration ghosts (one cyan-shifted, one rose-shifted, each at 20% opacity, scaled to 8% size). The flare sweeps across in 2.8 seconds, then a ghost-bloom remains at its terminus for the rest of the session — evidence the flare occurred. It never repeats. This single event is what makes the page mysterious-moody: the user is left wondering whether someone was photographed, or whether the user was the one being photographed. **4. Pop-Art Halftone Field.** The margins outside the central column are filled with a halftone-dot pattern at 16px grid spacing, with each dot's diameter driven by a slow Perlin noise function (animation period: 18 seconds). The density rolls slowly across the field like fog, creating a sense that the page's "background" is a living, breathing photographic emulsion. Where circuit traces pass through, the dots align into linear formations. **5. Registration Brackets and Crop Marks.** Every frame is bracketed by L-shaped corner registration marks (12px legs, 1px stroke, #C2C7CE). These are **never closed rectangles** — only the four corners are drawn, leaving the sides open. This treatment references printer's crop marks and military document framing, reinforcing the surveillance-archive aesthetic. On hover (or scroll-active), the active frame's brackets pulse in Cobalt Bruise. **6. The Witness Mark — Tiny Square.** A single 4×4 pixel filled square, in Cobalt Bruise, is positioned in the exact geometric center of the page (50vw, 50vh) and **never moves**, regardless of scroll. It sits behind all content as a fixed witness — a confirmation that the centered axis is observed. Most users will never notice it; those who do will find it appearing in the negative space between two frames as the scroll passes through it. **7. Pop-Art Speech Balloon — Inverted.** Frame six contains a single Lichtenstein-style speech balloon, but inverted: instead of a comic burst with bright text, it is a hollow outline (#6B7280) on the carbon background, containing a single Anton-set phrase in #E5E7EB. The speech-balloon tail points to no character — it is a balloon with no speaker, a quotation with no source. ## Prompts for Implementation **Narrative arc — eight frames as a contact sheet of a watching:** The page is a single vertical contact sheet. The user scrolls down it, frame by frame, and each frame zoom-focuses as it enters the viewport. The eight frames tell a fragmentary noir-pop-art story: - **Frame 01 / 00:00:00 — THE GLYPH.** The "iisugi" silkscreen stack appears here, with the four halftone iterations stacked. Beneath, in JetBrains Mono: `FILE OPEN — REC. 01 / 08`. As the user scrolls in, the stack's mis-registration animates by 1–2 additional pixels, as if the printing press had jolted. - **Frame 02 / 00:14:08 — THE FIELD.** A wide halftone field, mostly empty, with a single Manhattan-routed circuit trace crossing diagonally. The caption: `signal entering frame from the upper-left quadrant`. As the frame becomes active, a Cobalt pulse travels the trace. - **Frame 03 / 00:24:17 — THE LENS.** This is where the lens-flare event fires. The frame is otherwise blank cool-gray, with only a tiny 4px aperture-shape in its center. When the flare sweeps, the aperture emits the starburst, the streak crosses the column, and a residual bloom is left at the right edge. Caption: `aperture engaged — frame exposed`. After this moment, a faint ghost remains for the rest of the session. - **Frame 04 / 00:38:52 — THE STACK.** A vertical stack of four desaturated, halftoned still images (rendered as CSS-only halftone via SVG `feTurbulence` + `feComposite` filters on solid-colored divs — no photography). Each image suggests a window, a corridor, a doorway, a stairwell. Captions in Special Elite below: `window 4-A`, `corridor 7`, `door, locked`, `stairs descending`. - **Frame 05 / 00:51:04 — THE QUOTE.** A single Anton-set pull-quote: `WHO IS WATCHING / THE WATCHERS?` rendered at 96px in Phosphor with a 3px Lead-colored offset (mis-registered four-color print effect). Background: dense halftone field. - **Frame 06 / 01:09:33 — THE BALLOON.** The inverted Lichtenstein speech balloon, hollow, with the phrase: `THIS FRAME / WAS NOT / DEVELOPED.` The tail points off-frame to the lower-left, into circuit-trace territory. - **Frame 07 / 01:24:51 — THE BOARD.** A schematic-style circuit-board rendering fills the frame: an isometric-trending grid of traces, vias, and three labeled chip-rectangles marked `OBS-1`, `REC-2`, `???`. The third chip's label flickers between `???` and `YOU`. Caption: `processing unit — 3 modules detected`. - **Frame 08 / 01:37:09 — END OF ROLL.** The frame is mostly blank Carbon, with only `EXP. ☐ ☐ — ☐ ☐ — ☐ ☐` stamped at the bottom and a final caption: `roll terminated. negative retained.` Below, a 24px black trailing band closes the contact sheet. **Animation principles:** - **Counter-animate** every visible serial number, timestamp, and frame index. When a frame enters the viewport, its `FRAME 03 / 08` label runs the digits up from 00 to 03 with JetBrains Mono characters cycling like an odometer. Use `requestAnimationFrame` with a 600ms duration and easeOutQuart. - **Zoom-focus** is the page's primary interaction. Implement via CSS `transform: scale()` on each frame's interior `
`. Bind scale to the frame's distance-from-viewport-center: at center, scale 2.4; at edge, scale 1.0. Use `transform-origin: center center` and a linear interpolation. The outer frame crop (the 580px-wide window) stays fixed — only the interior scales, so the user sees a crop of a larger image as it expands past the crop window. - **Lens-flare** is a one-shot CSS animation triggered by `IntersectionObserver` when frame 03 first hits 60% in-view. Use a keyframe animation that translates a multi-layered SVG flare across the column over 2.8 seconds, with `animation-fill-mode: forwards` so the residual bloom persists. Once fired, store a flag in `sessionStorage` so a refresh will not re-trigger within the same browsing session. - **Circuit pulse** uses CSS gradient-position animation along an SVG path. Each circuit trace is an SVG `` with `stroke-dasharray` and `stroke-dashoffset` driving a small Cobalt Bruise gradient segment along its length. Trigger on frame-active. - **Halftone field** is rendered as a single `` element behind the centered column, painting a 16×16-spaced grid of dots whose radii are sampled from a Perlin noise function (use a small JS Perlin implementation or `@noise2d`). The canvas redraws at 24fps with an offset that drifts at 2 pixels/second, creating slow density-fog motion. - **Mis-registration** on the silkscreen glyph is achieved by rendering "iisugi" four times in stacked `` elements with slightly offset `transform: translate(Xpx, Ypx)` values, each layer with a different `filter: contrast()` and an SVG halftone filter applied. On scroll-into-view, the offsets animate by ±2px to simulate press jolt. **AVOID rigorously:** - No CTA buttons, no "Get Started", no email capture forms, no pricing tiers, no stat-grids, no testimonial cards, no FAQ accordion, no team-member portraits, no logo cloud. - No saturated colors anywhere except the single Cobalt Bruise. No greens, no warm grays, no off-whites with yellow cast. The page must feel mechanically cooled. - No rounded corners on frames or registration marks (radius: 0 throughout). The contact-sheet aesthetic demands hard corners. - No drop shadows. The page is a flat printed surface; shadow would betray the contact-sheet illusion. (Inset shadows on the frame interiors are permitted, simulating the slight darkening at the edge of a photographic print.) - No hero video, no autoplay anything except the halftone field's slow drift and the one-time lens-flare. **Tone-keeping prompts for the implementer:** The page must feel like a recovered surveillance contact sheet that someone smuggled out of an archive. The user is leaning over it with a magnifier (the zoom-focus mechanic literalizes this). Pop-art repetition gives it a weird theatricality — this is not earnest forensic data, it is forensic data restaged as a Warhol print. The cool-gray cast keeps the mood mysterious-moody and prevents the pop-art aesthetic from tipping into cheerful. The single Cobalt Bruise is the one thing that breaks the chill — it is the bruise on an otherwise silvered eye. ## Uniqueness Notes **Differentiators from other designs in the portfolio:** 1. **Cool-grays palette (0% frequency in portfolio).** No other site in the 221-design corpus uses cool-grays as its declared palette. The deliberate cool-blue cast on every gray (vs. neutral grays) is a unique tonal signature that no other site shares. Combined with the single Cobalt Bruise accent, it creates a visual register — frigid, watchful, archival — that is exclusive to iisugi.com. 2. **Pop-art aesthetic (2% frequency) drained of color.** Pop-art is itself rare in the portfolio, but every other pop-art-adjacent site uses bright candy or dopamine palettes — Warhol's *colored* silkscreens. iisugi.com uses pop-art's structural vocabulary (silkscreen repetition, halftone dots, Lichtenstein balloons, mis-registration) but inverts the expected coloration into noir cool-gray. This pop-art-noir hybrid is a unique register. 3. **Tech-mono typography (4% frequency) as forensic instrumentation.** Most tech-mono sites use it for code-display or terminal aesthetics. Here, JetBrains Mono is used for *evidentiary* purposes — serial numbers, timestamps, frame indices, exposure stamps — repositioning the monospace grid as the language of an archive rather than a console. 4. **Zoom-focus mechanic as scroll-driven magnification.** Rather than parallax or fade-reveal (which dominate the portfolio at 68% and 14% respectively), iisugi.com binds scroll-position to a `scale()` transform on frame interiors, making each frame literally enlarge under the user's gaze as it centers in the viewport. The "contact sheet" metaphor is mechanically enacted by the scroll itself, not merely visually suggested. 5. **One-shot lens-flare event.** The portfolio is full of looping ambient animations (halftone fog drifts, circuit pulses cycle). The lens-flare on frame 03 fires *exactly once per session* and never repeats. This single non-loopable event creates a sense of irreversibility and singular witnessing that no other site in the portfolio attempts — it makes the user wonder whether they triggered it, whether anyone else saw it, whether it was meant for them. 6. **The contact-sheet structure with serial-numbered frames.** No other site organizes content as eight numbered 4:3 frames bracketed by hairline corner registration marks with timestamps and exposure stamps. The structural metaphor — surveillance contact sheet — is unique and consistent across every layout decision. 7. **The fixed witness mark.** A 4px Cobalt Bruise square at the geometric center of the page that never moves regardless of scroll. It is almost-invisible furniture that rewards attentive users with the realization that the centered axis itself is being observed. No other site in the portfolio embeds a fixed witness pixel. **Chosen seed (from assignment):** aesthetic: pop-art, layout: centered, typography: tech-mono, palette: cool-grays, patterns: zoom-focus, imagery: lens-flare, motifs: circuit, tone: mysterious-moody. **Avoided patterns from frequency analysis:** - Did not use **gradient palette** (95% — overused). The page uses flat fields and halftone-stippled tonal gradation only. - Did not use **counter-animate** as the primary pattern despite its 90% saturation; it is used only on serial numbers and frame indices, not on the page's headline numerics. - Did not use **parallax** (68% — overused) as a primary structure; the layout is centered-fixed, not parallax-layered. - Did not use **stagger** (56%) for content reveals; frames zoom-focus as a unit, not in element-by-element cascade. - Did not use **photography** (61%) as imagery; all visual content is generated via CSS halftone, SVG circuit traces, and CSS-rendered registration marks. No bitmap photographs anywhere. - Did not use **warm palette** (90%) or **gradient** — the page is deliberately cool-gray flat-field. - Did not use **mono** typography in its dominant terminal-aesthetic register (93% — overused); JetBrains Mono here serves an archival/forensic function, paired with Bungee (pop-art display) and Anton (poster condensed), giving the typography a hybrid voice that no other mono-dominant site shares.