# Design Language for hinagiku.stream ## Aesthetics and Tone hinagiku.stream is **Memphis-collective broadcast** -- a 24-hour streaming channel whose station identification was designed in Milan in 1984 and then encrusted with aurora glass. The mood is **authoritative**: this is the official channel; ignore the cartoonish shapes; the announcer is reading the news. Inspirations: Ettore Sottsass and the Memphis Group's Carlton bookcase, Nathalie du Pasquier textile patterns, late-90s MTV station IDs, the layered glass interfaces of Microsoft Aero (Longhorn-era), and the green-and-magenta aurora photography of Tromso winter skies. The Memphis aesthetic supplies asymmetric grids of squiggles, zig-zags, terrazzo dots, and saturated geometric flats; the aurora-gradient palette gives the whole thing a deep nighttime atmosphere; the glassmorphic-cards motif layers translucent broadcast panels over both. The tone is authoritative -- short, declarative, almost news-anchor cadence. "Now streaming. Channel 03. The orchid wakes." ## Layout Motifs and Structure A **hexagonal honeycomb** of glass broadcast tiles overlaid on a Memphis pattern background, fixed at full-bleed. The honeycomb is the channel guide; each hex is a stream. - **Channel header (100vh):** Massive wordmark "HINAGIKU.STREAM" in Bebas Bold at clamp(80px, 14vw, 240px), set across the top with a Memphis squiggle traveling under it. Aurora-gradient background slowly shifts hue from cobalt -> magenta -> teal -> chartreuse over 80s. - **Honeycomb of broadcast tiles (variable height):** A 6-column hexagonal grid of glassmorphic tiles, each containing one "stream" -- channel number, title in Bebas Bold, a 2-line synopsis, and a glass play indicator. Tiles parallax at different rates as the user scrolls (closer tiles 1.0x, mid-depth 0.85x, far tiles 0.7x), creating layered depth. - **Now-streaming overlay (sticky 88px bottom):** A horizontal glass strip pinned to the bottom of the viewport showing the currently focused stream, with a chunky equalizer-style animated bar. - **Schedule grid (90vh):** A horizontal-scrolling 24-hour schedule, each cell a small Memphis-patterned tile labeled with a stream and start time. - **Aurora archive (120vh):** A vertical column of past broadcasts, each rendered as a layered stack of three glass cards offset by 12px, suggesting depth recordings. - **Sign-off panel (60vh):** A single full-bleed scene -- a Memphis terrazzo field beneath an aurora gradient -- with the words "We return at dawn" in Bebas Bold. The honeycomb is fundamental: glass tiles tessellate, hexagons share edges, and the parallax breaks the rigid tiling into layered depth. ## Typography and Palette **Fonts (Google Fonts only):** - **Display:** "Bebas Neue" weight 400 at clamp(80px, 14vw, 240px). Bebas's narrow capitals read as broadcast authority -- newsroom, station ID, channel guide. - **Sub-display:** "Bebas Neue" at clamp(28px, 4vw, 52px). Used for channel titles inside hexagons. - **Body:** "Inter" weight 400 at 15px / 1.6. Bebas has no body weight; Inter is the supporting neutral. - **Numerals (channel numbers, times):** "Bebas Neue" at clamp(48px, 7vw, 96px), tabular feel. Channel numbers like "03" or "27" are display-sized inside hexagons. - **Accent / Memphis caption labels:** "Inter" weight 700 small caps at 11px tracking 14%. **Palette (aurora-gradient, layered):** - `#0a0c2a` -- midnight aurora base (primary background floor) - `#1c2870` -- cobalt depth (gradient stop) - `#7836b8` -- aurora violet (gradient stop, secondary) - `#d44a92` -- magenta corona (gradient stop, highlight) - `#3ec8b8` -- aurora teal (Memphis accent) - `#e8d04a` -- chartreuse pulse (Memphis accent #2) - `#f0e8e0` -- ivory broadcast (text on dark) The aurora gradient is the actual background, slowly cycling. The Memphis accents (teal, chartreuse, magenta corona) are punched into the design as flat saturated shapes -- a deliberate clash with the smooth aurora behind them. ## Imagery and Motifs - **Glassmorphic broadcast cards:** Every hex tile is `backdrop-filter: blur(18px) saturate(140%);` with a 1px white inner border at 22% opacity and a soft drop shadow. Inside, content sits with a thin gloss highlight along the top edge. - **Memphis pattern fills:** The background of every section contains a layer of Memphis motifs -- squiggles, terrazzo dots, zig-zags, triangle scatters -- in teal and chartreuse on the aurora gradient. Pattern density varies per section. - **Parallax depth layers:** Three depth layers -- foreground (1.0x), midground (0.85x), background (0.7x) -- each containing some hex tiles and Memphis ornaments. The user moves through a layered broadcast atmosphere. - **Layered shadow stacks:** Each broadcast tile carries 4 stacked shadows offset by 8px each, creating a visible "deck" of tiles below it. This is the layered-depth motif made literal. - **Equalizer bars / station idents:** Animated bar graphs (5 vertical bars cycling heights 8-32px over 700ms) sit in the now-streaming overlay, suggesting active audio. - **Memphis squiggles as section dividers:** Long hand-drawn squiggles in chartreuse cross the page between sections, parallax at 0.6x relative to the rest. ## Prompts for Implementation The site is a broadcast control room: layered glass, Memphis pattern walls, aurora skies behind the windows. Parallax is fundamental. - The aurora-gradient background animates via CSS `@property --aurora-shift` with linear infinite 80s rotation, applied to a fixed `background-image: conic-gradient(from var(--aurora-shift), #0a0c2a, #1c2870, #7836b8, #d44a92, #1c2870, #0a0c2a)` on ``. - Glassmorphic cards: `background: rgba(240, 232, 224, 0.06); backdrop-filter: blur(18px) saturate(140%); border: 1px solid rgba(240, 232, 224, 0.18);` with an inset top highlight `box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 24px 64px rgba(10, 12, 42, 0.4);`. - Parallax: each tile has a `data-depth` attribute (0.7 / 0.85 / 1.0). On scroll, rAF updates `transform: translate3d(0, calc(var(--scroll) * (1 - var(--depth))), 0)`. Foreground tiles move at scroll speed; background at 0.7x. - Memphis ornaments are inline SVGs with `position: fixed; z-index: 0;` and a `data-depth` lower than the tiles, so they parallax behind everything. - The equalizer is a CSS-only animation: 5 vertical `` bars each with `@keyframes eq` setting height between 8 and 32px at different delays (0ms, 140ms, 80ms, 200ms, 60ms) with 700ms cycle. - Mobile: parallax is disabled; tiles stack vertically; Memphis ornaments reduce in density by 60% to preserve performance. - AVOID CTAs, pricing tiers, subscription banners, signup modals. The "stream" metaphor is editorial, not commercial. There is no signup; there is only "the broadcast continues" microcopy at the bottom. - Authoritative voice: "Now streaming. Channel 03. The orchid wakes." "Coming up: channel 04. The bumblebee diaries." "We return at dawn." ## Uniqueness Notes **Differentiators from other designs:** 1. **Memphis + aurora-gradient pairing:** Memphis aesthetics are usually executed on flat saturated backgrounds. Layering Memphis pattern over a smooth aurora-gradient field creates a clash that no other site in the registry attempts. 2. **Hexagonal honeycomb as TV channel guide:** Hex tiles function as a literal broadcast schedule, with channel numbers, synopses, and parallax depth. The grid metaphor (channel guide) is communicated through pure layout. 3. **Bebas Neue at 240px paired with Memphis squiggles:** A typographic-broadcast-meets-toy-design pairing that delivers authority through type and play through ornament. 4. **Three explicit parallax depth layers:** Not just decorative -- the depth assignment is shown via tile sizing, shadow weight, and movement rate, making "layered depth" a structural rule rather than a stylistic flourish. 5. **Aurora-gradient as live conic background:** The page itself is the aurora; the gradient rotates 360deg over 80s. Most sites place gradients inside elements; here the gradient IS the page floor. **Chosen seed:** memphis hexagonal-honeycomb Bebas aurora-gradient parallax glassmorphic-cards layered-depth authoritative -- planned seed from assignment. **Frequency-aware choices:** `memphis` (1%), `aurora-gradient`, `glassmorphic-cards`, and `layered-depth` are all under 3%. Avoids overused `playful`, `corporate`, and `photography` patterns. Bebas Neue is common but rarely paired with Memphis ornaments and an aurora-gradient background.