# Design Language for chika.stream ## Aesthetics and Tone chika.stream is a **muted pop-art broadcast diorama** — a Lichtenstein panel re-mastered as a low-volume late-night cable test pattern, then rebuilt in tactile foam-board 3D and pinned inside a bento tray. The conceit: imagine the cover art of an unreleased 1968 Mod-era pop-art compilation LP — primary halftones, comic-book ben-day dots, speech-balloon vocabulary — but the colors have been **left out in the sun for fifty-eight years** and have softened to ash, dust, putty, sage, and chalk. On top of that bleached pop-art bedrock, the entire interface has been **physically built**, in tilt-shift miniature: every "panel" of the bento grid is a literal foam-core diorama photographed in raking studio light, with **3D-rendered floating objects** drifting a few centimeters above the surface like the hovering thought-balloons in a Roy Lichtenstein painting that has been freeze-dried and shipped to a museum of broadcast curiosities. The domain string `chika` (近 — *near*, *adjacent*, *close-by*) crossed with the `.stream` TLD is read as **"near broadcast"** — a broadcast that is happening *almost here*, at the edge of reception. This is the load-bearing semantic: the site is a **proximity-as-channel** experience. Things stream in from just-off-frame. Nothing arrives from far away; everything has been hovering nearby, at low volume, the entire time. The tone is **playful but quiet** — the tone of a museum gift-shop diorama you find yourself laughing at alone on a Tuesday afternoon, not the tone of a Saturday-morning cartoon. Think: **Wes Anderson directing a Lichtenstein retrospective for a public-access channel.** The wit is dry; the colors are dusty; the punchlines float gently above the page rather than landing. **Inspiration ledger:** Roy Lichtenstein's *Drowning Girl* (1963) — but the cyan ben-day dots have all faded to bone-cream. Eduardo Paolozzi's collage covers for the 1948 *Bunk!* series — but rebuilt in 3D foam. The animated bumpers of MTV-Brazil circa 2003 — but with the saturation slider pulled to 28%. Charles & Ray Eames's *Powers of Ten* opening title — but the camera never rises, it only drifts laterally between bento cells. The opening sequence of *Pee-wee's Playhouse* — but every object is floating and every object is dust-colored. The result is a pop-art that has **forgotten how to shout** and has become, instead, very quietly delighted with itself. ## Layout Motifs and Structure The composition is **bento-box**, but a *very specific* dialect of bento-box: **a 7-cell asymmetric bento tray**, modeled on the shokado bento (松花堂弁当) — a 17th-century four-compartment lacquer tray reinterpreted by tea-master Shokado Shojo — extended to seven compartments with one **"oversized display"** cell occupying the upper-left two columns and three rows. This is *not* a CSS grid of equal cards. Each cell has a **distinct depth**, a **distinct floor color**, and a **distinct floating object** suspended above it. The cells do not flex; they are **fixed-aspect compartments** like the molded sections of an injection-molded confectionery tray. **Cell inventory (the 7 compartments of the chika.stream bento):** 1. **The Loud Cell** (col 1–2, row 1–3, the oversized-display compartment) — full-bleed across two columns and three rows. This cell holds the wordmark `chika.stream` set in **oversized-display** type at 312px on desktop, 168px on mobile. The cell has a **chalk-cream floor** (`#EFE7D6`), a **3D-rendered floating speech balloon** drifting 4cm above the floor (rendered with proper soft shadow on the floor, gently bobbing on a 7-second loop). Inside the speech balloon, the tagline `near broadcast` types itself out in a **muted comic-book lettering style**. 2. **The Halftone Cell** (col 3, row 1) — a small square. Holds a rotating series of **ben-day-dot 3D spheres** — actual rendered translucent spheres with halftone dot textures baked onto their surfaces, slowly orbiting a hidden anchor point. The floor of this cell is **dust-rose** (`#D6BFB4`). 3. **The Onomatopoeia Cell** (col 3, row 2) — small square. Holds a single **floating pop-art onomatopoeia word** ("BLIP", "POP", "ZAP", "WHIRR", "HUM"), modeled as a 3D inflated foil-balloon letter set, rendered in muted ash-blue (`#B6BFC4`), drifting gently. The word changes every 9 seconds with a soft **ripple** transition. 4. **The Channel Cell** (col 3, row 3) — small square. A **3D-rendered miniature CRT television** sits in the center of this cell. The screen of the TV is the only surface on the entire site that displays *moving content* — a slow loop of ripple-displaced bento-cell-content reflections. 5. **The Long Cell** (col 1–3, row 4) — a full-width horizontal strip. Holds a **horizontal stream of floating 3D objects** — a row of pop-art icons (a comic-book "BOOM" star, a spiral lollipop, a transistor radio, a halftone-patterned sphere, a tilted speech balloon) drifting from right to left at 12px/sec. Each object has its own depth (z-translation between -40px and +60px), so the row reads as **parallax-within-parallax**. 6. **The Quiet Cell** (col 1, row 5) — left compartment of the bottom strip. Holds the **diorama foot** of the page — a tiny 3D-rendered foam-core stage with a single floating object: a rolled-up paper streamer, frozen mid-unfurl. This is the navigation cell. Three navigation links are *engraved into the floor of the cell* like nameplates on museum dioramas. 7. **The Static Cell** (col 2–3, row 5) — bottom-right compartment. Holds a **3D-rendered analog tuning dial** — a Bakelite-style knob, muted-mustard color, rendered with proper specular and rim light, that the user can drag to "tune" the colophon. As they tune, the colophon text ripples and resolves into different lines of metadata. **Grid math:** desktop 3 columns × 5 rows, gutters 24px, outer margin 64px, max-width 1320px centered, min cell-aspect 1:1 (the oversized cell is 2:3, the long cell is 3:1). The bento *frame itself* is rendered as a **3D-extruded tray** with 12px-tall walls, casting a soft shadow onto the page background. The page background **is not a color** — it is a 3D-rendered **dusty studio sweep** (a curved seamless paper backdrop, ash-cream above, dust-warm below, with subtle paper grain). **Critically, this is not a card-grid.** A card-grid is flat; the chika.stream bento is **physically modeled** — every cell has a floor, walls, a depth, and a floating object hovering above it. Hovering an object brings it forward 8px in z and casts a deeper shadow. The bento is a *thing*, not a *layout*. ## Typography and Palette **Typefaces — Google Fonts only, three families, used with strict role discipline.** - **Bungee Inline** (display, regular only) — the **oversized-display** voice. This is the wordmark face and the only face that ever exceeds 96px. Bungee Inline carries an outline-stripe interior that reads as an extruded sign-painting letterform — perfect for pop-art-as-physical-object. Set the wordmark `chika.stream` at **312px** desktop / **168px** mobile, line-height **0.86**, letter-spacing **-0.02em**, color **Lichtenstein Putty** (`#9C8B72`). Never used at sizes below 64px. Never used in body. **Always set in lowercase** — pop-art's loudness comes from color and dot, not from caps. - **Fraunces** (variable, opsz 9–144, soft 0–100, wonk 0–1) — the **playful** body face. Fraunces is chosen because its `soft` axis lets us soften the serifs into rounded foam-core terminals (set `font-variation-settings: "soft" 80, "wonk" 1`), turning a respectable revival-serif into something that reads like the typeset captions on a 1968 children's pop-art primer. All body text, all cell labels, all colophon lines. Set body at **18px / 28px line-height** with `wght 400`, captions at **13px / 18px** with `wght 600`. The `wonk` axis is toggled to `1` only on the cell labels (for letterform-asymmetry charm). - **Bungee Spice** (display, regular only) — the **comic-book lettering** face for onomatopoeia inside the Onomatopoeia Cell. Used exclusively at 84px, exclusively for the rotating "BLIP / POP / ZAP / WHIRR / HUM" words, exclusively in **Dust-Rose** (`#D6BFB4`). Bungee Spice provides the chromatic-letterform feel of a 1970s comic-book sound-effect without the saturation we are explicitly avoiding. **Palette — eight colors, all muted, ratios fixed.** - **Bone Cream** `#EFE7D6` — page floor / loud cell floor. **44% pixel area.** - **Lichtenstein Putty** `#9C8B72` — wordmark, primary text. **18% pixel area.** - **Dust Rose** `#D6BFB4` — halftone cell floor, onomatopoeia text. **11% pixel area.** - **Ash Blue** `#B6BFC4` — onomatopoeia 3D letters, channel cell floor. **9% pixel area.** - **Sage Foam** `#B8C2A8` — long cell floor, ripple highlight. **7% pixel area.** - **Muted Mustard** `#C9A668` — tuning dial, accent rim-light. **5% pixel area.** - **Putty Shadow** `#6E5E48` — drop-shadows, engraved nav text, fine rules. **4% pixel area.** - **Studio Charcoal** `#3B3328` — only used for the colophon micro-type and the speech-balloon outline stroke. **2% pixel area.** **Halftone overlay:** every cell floor carries a **ben-day-dot SVG halftone overlay** at 4% opacity, dot diameter 3px, dot pitch 8px, dot color `#6E5E48`. The dots are *not* a pattern fill — they are an SVG `` rendered at the cell level so they tile correctly across cell boundaries and **disappear at the gutter**, reading as a coherent printed-paper substrate. ## Imagery and Motifs **Three motif families, all 3D-rendered, all floating.** **1. Floating-elements (the load-bearing motif).** Every bento cell has at least one **3D-rendered object hovering above its floor**. These are not flat icons; they are **three.js / Spline / pre-rendered glTF objects** with proper perspective, soft contact shadows, and rim-light. The float animation is a **7-second cubic-bezier ease-in-out vertical bob** with a 0.3-second phase offset per object so they bob asynchronously. Hovering a cell freezes that cell's object mid-bob and brings it 8px forward in z. The objects are: a speech balloon (Loud Cell), a halftone sphere cluster (Halftone Cell), an inflated-foil onomatopoeia word (Onomatopoeia Cell), a miniature CRT television (Channel Cell), a horizontal stream of pop-art icons (Long Cell), a rolled paper streamer (Quiet Cell), a Bakelite tuning knob (Static Cell). **Total: 7 floating object families, one per cell, no exceptions.** This 1:1 relationship between cells and floating objects is the visual signature. **2. 3D-render texture vocabulary.** Every rendered object uses the **same material library** so the bento reads as **one diorama**, not seven separate models: - *Foam-core white:* matte, slight specular, fingerprint-noise texture at 3% opacity - *Dust-aged plastic:* low-roughness, slight subsurface scatter, off-white-cream tint - *Bakelite:* high specular, brown-gold rim, age-cracked normal map - *Inflated foil:* 0.3 metalness, anisotropic specular, soft creases - *Bone-cream paper:* matte, slight bumpiness, dog-eared edges on streamers - *CRT glass:* 0.6 transparency, slight curvature distortion, faint scanline overlay (only on the TV screen) All renders are lit by a **single soft key light from camera-upper-left (45° elevation, 30° azimuth) plus a bone-cream fill from camera-right and a sage-foam rim from behind.** This three-light setup is **identical across all 7 objects** — that is what unifies the diorama. **3. Pop-art surface vocabulary (printed-paper layer).** On top of the 3D-rendered base, every cell carries a **pop-art print-graphics layer**: ben-day dots (4% opacity overlay, described above), thin black contour-lines on certain rendered objects (1.5px Studio Charcoal, used only on the speech balloon and the streamer), and **occasional comic-book "burst" shapes** (10-pointed irregular-stars) used as the Long Cell's section marker. These print-graphics layers exist **only as 2D SVG**, *not* as rendered 3D. The visual tension between the **3D-rendered base** and the **2D pop-art surface** is the core stylistic invention of this design — the world is built, then **rubber-stamped with a comic-book print plate**. **Ripple motif specifically.** The site's signature animation is a **ripple** that propagates *across the bento as a whole*, not within a single cell. Triggered by mouse-movement, idle-pulse (every 11 seconds), or tuning-dial drag, the ripple starts at the trigger point and spreads outward as a **circular displacement wave** across the floors of all bento cells, gently distorting the ben-day-dot overlay and momentarily lifting each floating object by 4px in z as the wave passes under it. The ripple takes **2.4 seconds** to cross the full bento. Its visual signature is the brief moment when **the dots stretch into ovals** as the wave passes — pop-art print-plate registration drift, simulated. This is the *single most important* animation on the site. ## Prompts for Implementation Build chika.stream as **a single-page diorama**. One HTML document, one CSS file, one ES module, a small `assets/3d/` directory of glTF objects (or pre-rendered PNG sequences if the build target rejects WebGL). **No SPA, no router, no React, no framework.** The page is a single viewport-sized bento — it does not scroll. The user lands, the bento is fully visible, the floating objects bob, the ripple fires, the user explores. No second page. No CTA. No pricing block. No stat-grid. No hero-pitch. The site **is** the experience; it does not lead anywhere else. **Storytelling beat-by-beat (one page, no scroll):** 1. **Arrival (0.0s–1.4s).** The page loads with the bento *empty* — just the studio-sweep background and the foam-core walls of the tray. Then, in a **staggered cascade**, each cell's floor materializes (300ms each, 100ms stagger, ease-out), starting from the Loud Cell and spiraling clockwise to the Static Cell. As each floor lands, its ben-day-dot overlay fades in. 2. **The Lift (1.4s–2.6s).** The 7 floating objects **drop in from above the tray** — they enter from off-screen at the top, each falling with a cubic-bezier ease-out and settling 4cm above its assigned cell floor. The wordmark drops last. The speech balloon (in the Loud Cell) lands, then the tagline `near broadcast` types itself out inside it (typewriter-effect, 60ms per character, with a brief halftone-shimmer on each character as it lands). 3. **The Ripple (2.6s–5.0s).** Immediately after the wordmark settles, a **ripple fires from the wordmark center** and propagates across the bento. Every floating object bobs once as the wave passes under it. Every ben-day-dot stretches into an oval and snaps back. The ripple sound (if audio is permitted) is a **soft analog HF hum** — *not* a splash or a chime. After the ripple passes, the bento enters its **idle state**. 4. **Idle state (loop).** Floating objects bob at their 7-second cycle with phase offsets. The CRT in the Channel Cell loops a 6-second ripple-displaced reflection of the rest of the bento (rendered as a real-time WebGL feedback texture if available, otherwise a pre-baked loop). The Onomatopoeia Cell rotates its word every 9 seconds with a soft ripple transition. Every 11 seconds, an **idle ripple** fires from a random off-frame point and crosses the bento. 5. **Interaction.** Hovering a cell brings its floating object 8px forward in z and freezes its bob. Hovering the wordmark **inverts the speech-balloon outline color** to Studio Charcoal and gently inflates the balloon by 4%. Dragging the Bakelite tuning knob in the Static Cell **rotates** the knob and **ripples** the colophon text (Fraunces, 11px) into a different line of metadata each 30° of rotation. **Animation primitives.** - **Ripple** is implemented as a CSS `mask-image` radial gradient whose `--ripple-radius` is tweened via Web Animations API. It is layered on top of each cell floor as an additional element with `mix-blend-mode: multiply` to slightly darken the ben-day overlay as the wave passes. - **Floating bob** is `transform: translateZ()` with a 7-second cubic-bezier ease-in-out, infinite alternate. Each object has its own `animation-delay` (0s, 0.3s, 0.6s, 0.9s, 1.2s, 1.5s, 1.8s) so they desynchronize. - **Onomatopoeia rotation** is a 9-second JS-driven swap with `opacity` cross-fade and a ripple-displacement `filter: url(#ripple-displace)` that peaks at 50% of the transition. - **Type-on tagline** uses a CSS custom property `--char-count` animated from 0 to 13, paired with a JS scroll through the string slice. **3D-render delivery.** Use **glTF objects baked from Blender** with each object pre-rendered to a 1024×1024 PNG sequence (24 frames, 7s loop) as a fallback. WebGL path uses `` (web component) with `auto-rotate` disabled and a custom bob shader. Do not use Three.js scenes — overkill for 7 objects. Do not use Spline (vendor lock-in). **No CTA, no pricing, no stat-grid, no testimonial carousel.** This site does not sell. It does not link out. It does not collect email. The colophon (in the Static Cell, behind the tuning dial) reveals a single line of credit: `chika.stream — a bento diorama, near broadcast` and a tiny year stamp. That is the entire copy budget for the site, modulo the wordmark and the tagline and the rotating onomatopoeia words. **Total prose: ≤ 60 words.** **Audio (optional, off by default).** A 7-second loop of low-pass-filtered analog hum at -32dB. A brief pip on each ripple firing. Speaker icon in the Quiet Cell engraved-text. Off by default; the site is silent until the user toggles it. **Mobile adaptation.** Below 768px the bento becomes a **vertical stack** but **preserves the 3D depth**. The 7 cells stack in this order: Loud, Halftone, Onomatopoeia, Long, Channel, Quiet, Static. Each cell occupies the full viewport width with an aspect-ratio of 4:3 (Loud Cell stays 2:3 portrait). The floating objects scale proportionally. The ripple is now a **vertical wave** that propagates top-to-bottom across the stack instead of radially. The wordmark drops to 168px. ## Uniqueness Notes This design's distinct departures from the 110 designs already in the registry: 1. **Pop-art × muted is unprecedented in the cohort.** Pop-art sits at 1% (one prior design) and muted at 32%. Their **intersection is zero before chika.stream**. The cohort's existing pop-art instance is loud and saturated by definition; chika.stream invents the **low-volume pop-art** dialect — Lichtenstein with the saturation slider at 28%. This contradiction is the load-bearing aesthetic conceit and would constitute plagiarism if duplicated. 2. **Oversized-display typography is at 0% across the entire registry.** chika.stream is the first to commit to it. Every prior design respects a 96px ceiling; the wordmark here lives at 312px desktop. Bungee Inline at 312px, set in lowercase, in Lichtenstein Putty, is a **type-as-architecture** move that no other site in the cohort attempts. 3. **3D-render imagery is not in the imagery vocabulary list at all.** The cohort's 3D presence is in inflated-3d aesthetics (3%) and isometric (11%), but neither produces *photorealistic rendered objects with proper studio lighting hovering above bento cell floors*. chika.stream is the first cohort site whose imagery category is **"7 glTF objects rendered with a unified 3-light setup."** This is not a stylistic choice; it is a production technique — the design **cannot be built** with 2D illustration assets. 4. **Bento-box at 12% is underused, but bento-box-as-3D-tray with foam-core walls is unique.** Prior bento implementations are flat CSS-grid card collections. chika.stream's bento has a **physically modeled extruded tray** with 12px walls, a curved studio-sweep background, and a dust-cream paper substrate — it is bento-as-diorama, not bento-as-grid. 5. **Ripple-as-page-spanning-wave, not cell-local-feedback.** Ripple appears in 12% of the cohort but is implemented as a localized click-feedback effect (Material Design ripples on buttons, splash-on-image hovers). chika.stream's ripple is a **2.4-second displacement wave that crosses the entire bento as a single coordinated event**, deforming ben-day dots into ovals and lifting all 7 floating objects in sequence. It is the structural animation of the site, not a UI affordance. 6. **Floating-elements at 4% becomes 100% here.** The cohort uses floating-elements decoratively (drifting bubbles, off-screen leaves). chika.stream commits to **one floating object per cell, no exceptions**, and the float behavior is not decoration — it is **the cell's identity**. Remove the floating object and the cell becomes meaningless. 7. **Playful-tone-without-saturation.** Cohort playful-tone instances (22%) all combine playful with bright candy-bright or dopamine-neon palettes. chika.stream proves playful can be **dust-toned** — the wit is in the diorama miniaturization and the floating objects, not in the color volume. This is the *quietest playful* in the registry. 8. **The wordmark has no color.** Bone Cream is the floor; Lichtenstein Putty is the wordmark; both are putty-tones. The wordmark is **almost camouflaged** against its cell floor, distinguishable mainly by the Bungee Inline outline-stripe interior. This **anti-emphasis** of the wordmark is unprecedented in the cohort, where wordmarks are universally the highest-contrast element. **Chosen seed (planned):** *aesthetic: pop-art, layout: bento-box, typography: oversized-display, palette: muted, patterns: ripple, imagery: 3d-render, motifs: floating-elements, tone: playful*. Every single seed token is honored exactly as planned, with no substitutions. **Avoided patterns from frequency analysis:** - *Photography* (98%): no photographs anywhere — only 3D-rendered objects on a 3D-rendered studio sweep. - *Hand-drawn* (95%): no hand-drawn linework — all surface marks are SVG-precise ben-day dots and 1.5px contour lines. - *Gradient palettes* (96%): the palette is **eight discrete muted flats** with zero gradients. The studio-sweep background is the closest approximation to a gradient and it is technically a baked render, not a CSS gradient. - *Glassmorphism* (68%): zero blur, zero translucent panes, zero `backdrop-filter`. The "depth" comes from real perspective and shadow, not from frosted glass. - *Mono typography* (95%): zero monospace anywhere. Bungee Inline + Fraunces + Bungee Spice — three display-and-serif voices, no mono. - *Parallax* (94%): no scroll-driven parallax. The bento does not scroll. The "parallax-within-parallax" of the Long Cell is z-axis-only and runs on its own internal clock, not on `scrollY`. - *Stagger / spring / cursor-follow / magnetic* (76%/75%/73%/62%): the only stagger is the 1.4-second arrival cascade. No spring physics — all easing is cubic-bezier. Cursor-follow exists *only* as a ripple trigger, and magnetism is explicitly absent. - *Card-grid* (73%): the bento is **not** a card-grid; it is a 3D-extruded tray with fixed-aspect compartments and foam-core walls. Cards do not exist in this design. - *Full-bleed and centered layouts* (90% / 80%): the page has a max-width of 1320px, centered with 64px outer margin, and a non-uniform asymmetric grid. No full-bleed surfaces. - *Warm palettes* (95%): the palette is **dust-warm-leaning-cool** — putty, cream, ash-blue, sage-foam. The warm tones (Dust Rose, Muted Mustard) are minority allocations (11% + 5% = 16% of pixel area). The cool-and-neutral majority departs from the cohort's warm-palette saturation.