# Design Language for chika.monster ## Aesthetics and Tone chika.monster is **a private bathyal observation society's mission console, broadcast from a cast-concrete bunker pinned to a chalk-cliff coastline at the moment a great unknown thing rises from the abyssal plain into the photic zone for the first time in recorded oceanographic history**. The Japanese reading of *chika* (地下) — *underground, beneath* — collides with the English `.monster` TLD to produce a single, very specific scenography: a 1968-built poured-concrete observation chamber, half-buried in the cliffside above a deep-water trench, where a crew of independently wealthy oceanographers in chamois-leather captains' chairs are tracking, on a wall-sized HUD, the ascent of *something* (a 19-metre cetacean of unverified taxonomy, a bioluminescent siphonophore the length of a city block, a meteorite-strike anomaly, an entirely new monster) from -3,400 metres toward the surface. The site exists at the exact tonal collision the seed demands — **brutalist** muscle (raw board-formed concrete, exposed structural reinforcement, unornamented mass) wedded to **opulent-grand** patrician restraint (the cast-bronze fittings, the cognac in cut-crystal decanters, the bookplate of the *Société Bathyale Privée des Côtes Calcaires* embossed in deep umber on every interface element). It is **not** the agency-portfolio brutalism of black-on-yellow Helvetica with a neon stripe — that idiom is at 7% in the registry and almost always plays as ironic / anti-design. Here brutalism plays *straight*, as 1960s civic architecture sincerely meant: heavy, monumental, slow, expensive, expensive *because* heavy. The opulence is not gilt and marble (that lives in art-deco at 6%); it is the opulence of *expensive durability* — leather that has been re-oiled annually since 1971, brass that has tarnished into a deep verdigris-warm patina, board-form concrete whose timber-grain impressions are individually photographed and catalogued. The mood is **observational reverence** — the tone of a control room where the operators have voluntarily made themselves silent because the thing they are watching is older and stranger than the building they are in. There is no urgency. There is no hard-sell. There is no startup-energy. The only sound the page implies is the low 8Hz hum of the gimbal motors keeping the cliff-face hydrophone array on-target as the unknown ascends. **Tone vocabulary tag: opulent-grand (4% in registry — actively claimed)**. The opulence is *quiet money watching the deep*. ## Layout Motifs and Structure The structural commitment is **hud-overlay** — currently at **0% in the registry**, the most underused layout pattern in the entire vocabulary. Every other site in the corpus uses some variant of full-bleed (90%), centered (80%), card-grid (73%), or asymmetric (53%). chika.monster is built as a **single full-viewport mission console** in which the *content* is the substrate (a slowly-breathing concrete-and-water tableau) and the *interface* is a translucent hardware overlay floating above it. **The seven HUD frames.** The viewport is partitioned by a fixed-position SVG-defined gridwork of seven labelled rectangular frames, each occupying a precise edge-anchored region. Their exact placement (in viewport units) is part of the design and is not negotiable across breakpoints — the page rebuilds the same mission-console relationship at every size: - **TOP-LEFT (TL)** — `BEARING` frame, 22vw × 14vh, anchored 2vw / 2vh inset from the corner. Holds a slowly-rotating hand-drawn SVG compass with the cardinal letters in `Major Mono Display` and a single magenta deviation pip drifting at 0.04°/s. - **TOP-RIGHT (TR)** — `DEPTH` frame, 18vw × 14vh. A vertical strip-chart of depth-vs-time (millennium-scale on the y-axis, the last 90 days on the x-axis) showing the unknown's ascent as a single continuously-drawn `path-draw-svg` line. - **TOP-CENTER spanner (TS)** — `MANIFEST` strip, 100vw × 4vh, sitting flush at the very top edge above everything else. A single line of `IBM Plex Mono` ticker text — vessel name, expedition number, GPS coordinates to four decimals, UTC timestamp updating every 1.0s — rendered in the verdigris-brass colour against pure board-form concrete. - **BOTTOM-LEFT (BL)** — `LOG` frame, 32vw × 28vh. The narrative content lives here: a hand-typeset captain's log in `Cormorant Garamond Italic` (the *opulent* face) with hanging marginalia in `IBM Plex Mono` (the *brutalist* face). This is the *only* place on the page where running prose appears. - **BOTTOM-RIGHT (BR)** — `SPECIMEN` frame, 38vw × 36vh. The largest frame. Holds a hand-drawn SVG cross-section of the rising unknown, slowly redrawn (path-draw-svg, 26-second loop) as new sonar returns refine the silhouette. - **BOTTOM-CENTER (BC)** — `HYDROPHONE` frame, 24vw × 8vh, centered on the bottom edge with 4vh inset. A live-rendered SVG waveform of the deep-ocean ambient (driven by a 12-channel deterministic Perlin sum, *not* a microphone) breathing at 0.08Hz. - **CENTER-FRAME negative space (the substrate)** — the entire central 60vw × 50vh region is *deliberately empty of HUD*. This is where the ocean is. The substrate shows through. This is the most expensive real estate on the page and the seed's **opulent-grand** tone is enforced precisely by *refusing to monetise it*. No CTA button lives here. No pricing block. No stat-grid. No card. The center of the screen is a window onto the deep, not onto the funnel. **The substrate beneath the HUD.** Behind all seven frames runs a single continuous full-bleed background composition: an animated CSS-gradient + SVG-noise rendering of a *vertical water column* from -3,400m (page bottom) to surface (page top). The column is colour-graded continuously through the **coastal-blend** palette (currently **0% in the registry — actively claimed**), darkening with depth, with a single soft-edged radial bloom at the unknown's current depth slowly rising over the 90-second master loop. The substrate is *not* photography. It is hand-built CSS gradients + tiled SVG noise, in keeping with the seed's *brutalist* honesty about materials. **The frame chrome.** Every HUD frame is drawn as a precise 1.5px stroke in `--patina-brass` against a 12%-opacity `--bunker-fog` fill. The frame corners have small machined registration ticks (4px L-brackets) at the inside of every corner. Frame labels live in `IBM Plex Mono` 11px tracked +0.18em, in the upper-left of each frame, prefixed by a Unicode glyph (◐, ▤, ⌖, ◊, ❖, ◴, ▰) that is *not decorative* — it is the frame's call-sign in the radio log shown in the BL frame. **Scroll behaviour.** There is no scroll. The page is one viewport. Any additional content (about, contact, expedition history) lives in **micro-interactions** (5% in registry — actively claimed) inside the existing frames: hovering the BR specimen frame slowly cross-dissolves the cross-section to a different rising unknown over 4 seconds. Hovering the BL log frame causes the marginalia to swap to a different page from the captain's log book. Hovering the TR depth chart pulls back the time axis from 90 days to 90 years. There is no second screen. There is only the console, and the console reveals more of itself the longer you sit with it. ## Typography and Palette **Typefaces — Google Fonts only, all individually verified available.** The seed's `eclectic-hybrid` typography (5% in registry — actively claimed) is honoured by deliberately pairing four faces from four distinct historical and structural traditions, used in disciplined non-overlapping roles: - **`Major Mono Display`** (Google Fonts, single weight 400) — the **HUD frame chrome** face. Used at small sizes (10–14px) for frame labels (`BEARING`, `DEPTH`, `MANIFEST`, `LOG`, `SPECIMEN`, `HYDROPHONE`), all-caps, tracked +0.22em. Major Mono is a *capital-only* monospace with squared-off terminals and a slight machine-cut feel — it reads as labelled hardware, not as code. Roughly the texture of a milled aluminium nameplate riveted to the bunker wall. - **`IBM Plex Mono`** (weights 300, 400, 500) — the **instrument readout** face. Used for the manifest ticker, the marginalia in the captain's log, all numeric data (depths, bearings, timestamps, GPS coordinates), and the radio call-sign log. Plex Mono carries the brutalist seed honestly — it is genuinely a working monospace, not a decorative one. Numerals are tabular by default; columns of depth values align without manual letter-spacing tricks. - **`Cormorant Garamond`** (Italic 400, Italic 500) — the **opulent prose** face, exclusively in italic, exclusively in the BL log frame. Cormorant is a Garamond revival with extreme stress, hairline strokes, and a swan-necked italic *a* that reads as 17th-century intaglio. It is the single piece of typography on the page that is *not* hardware. It is the captain's handwriting transcribed by the typesetter aboard. The italic-only restriction enforces the journal voice and prevents Cormorant from drifting into wedding-invitation mode. - **`Bodoni Moda`** (weight 900, with optical-size 96 axis pinned) — the **monumental display** face, used exactly once on the page: in the lower-right corner of the SPECIMEN frame, set as a 64px slab number indicating the *day count* of the current expedition (e.g. `D ⋅ 0461`). Bodoni Moda at weight 900 / opsz 96 has the violent thick/thin contrast that historically signalled imperial confidence — it is the seed's `opulent-grand` tone made into a single typographic gesture. The four-face system is the *eclectic-hybrid* commitment: a capital-only milled-monospace label face, a working data monospace, an italic-only Garamond revival, and a single monumental Bodoni number. Nothing about that combination resolves to a genre — it is exactly the typography a real 1968 oceanographic society with a generous endowment and an in-house letterpress would have evolved. **Palette — `coastal-blend` (0% in registry — actively claimed).** The palette is built around a coastal vertical: chalk cliffs above, brass instruments at the rail, board-form concrete in the bunker, and the abyssal water column descending. All values are calibrated to read correctly *layered* under the HUD overlay, not as standalone swatches. - **`--chalk-cliff`**: `#E8E1D2` — the topmost band of the substrate, a warm pale limestone-cream with a subtle yellow undertone. Reads as morning fog over the cliff edge. - **`--bunker-concrete`**: `#7A7268` — board-formed concrete, warm-grey with a slight umber bias from the timber-grain stain. The dominant chrome colour for HUD frame fills (at 12% opacity it becomes the `--bunker-fog` mentioned above). - **`--patina-brass`**: `#8B7A4A` — verdigris-aged brass, the colour of an instrument fitting that has been at the cliff-edge since 1968. This is the HUD line-stroke colour and the manifest ticker colour. It is the closest the page comes to an accent colour. - **`--leather-cognac`**: `#5A3A28` — saddle-leather cognac, the colour of the captains' chairs and the bookplate embossing. Used for body-text dark in the captain's log frame, and for the leather-texture imagery layer. - **`--photic-blue`**: `#3A6878` — the colour of the surface-zone water in the substrate, a desaturated coastal teal with grey rather than green undertones. The upper third of the water column. - **`--dysphotic-blue`**: `#1E3548` — the middle-zone water, deeper, reading as steel-blue in shadow. - **`--abyssal-ink`**: `#0B1620` — the bottom of the water column, near-black with a residual blue cast. The *deepest* colour on the page, used at the very bottom of the substrate and in the SPECIMEN cross-section's negative space. - **`--bioluminescence`**: `#D8C4F0` — a cool pale-lilac, used *exclusively* for the single rising bloom in the substrate marking the unknown's current depth. It is the only colour on the page outside the brown/blue/concrete tonal family. It appears in roughly 0.4% of the visible pixel area at any given moment. The discipline of restricting it to that single radial bloom is the single largest source of the page's drama. The palette runs warm-cool diagonally — chalk and brass and leather (warm) above the rail, photic and dysphotic and abyssal (cool) below. The HUD overlay sits in the warm register; the substrate it floats above is in the cool. The eye reads this as: *we are in the warm bunker, looking out into the cold sea*. ## Imagery and Motifs The visual world is **zero photography** — a major deviation from the registry's 98% photography baseline, and a load-bearing one for the seed. All imagery is hand-built from three asset families: a tiling leather-texture PNG, a small library of hand-drawn SVG instrument and specimen drawings, and CSS-gradient + SVG-noise compositions. **No stock. No 3D. No photographic plates. No icon sets.** **1. Leather-texture imagery (3% in registry — actively claimed).** A single 800×800 seamless tiling PNG, `leather-cognac.png`, hand-prepared from a procedural chamois-grain noise → curl-distorted → re-noised → tinted to `--leather-cognac`. The texture appears in three places only: (a) the bookplate panel in the upper-left of the BL log frame, where it backs the embossed *Société Bathyale* monogram; (b) the chair-back panels visible in the substrate's lower-left corner, where two captain's-chair silhouettes lean against the bunker wall; (c) the binding strip at the inside-left edge of the BL log frame, simulating the edge of a leather journal cover meeting the page. The texture is *never* full-bleed and is *never* used as a generic background. Its scarcity is what makes it read as expensive. **2. Abstract-tech motif (2% in registry — actively claimed).** The HUD's instrument vocabulary is built as a small library of hand-drawn SVG parts, all in 1.5px `--patina-brass` strokes on transparent backgrounds: - The compass rose in the TL `BEARING` frame — 64-tick rose, hand-drawn, with a single magenta deviation pip and a slowly precessing inner ring. - The strip-chart axis system in the TR `DEPTH` frame — engraved tick marks, italic axis labels, a single continuously-drawn ascent path. - The waveform generator in the BC `HYDROPHONE` frame — a 240-sample SVG polyline driven by a deterministic 12-channel Perlin sum, breathing at 0.08Hz so the waveform never *exactly* repeats. - The cross-section apparatus in the BR `SPECIMEN` frame — six concentric depth-rings, four bearing-spokes, and a slowly-redrawing silhouette of the rising unknown. - A library of seven Unicode-glyph call-signs (◐ ▤ ⌖ ◊ ❖ ◴ ▰) used as frame identifiers. The abstract-tech vocabulary is deliberately *handmade* — every line is a hand-placed SVG path with hand-tuned `stroke-dasharray` values for the engraved-tick effect. Nothing comes from an icon library. The slight inconsistencies (the compass tick at 187° is 0.4px shorter than the one at 188°) are preserved as evidence of the hand. **3. The substrate composition.** A single full-viewport CSS-gradient stack with three SVG-noise overlays: - **Layer 1 (back):** vertical linear-gradient through `--chalk-cliff` → `--photic-blue` → `--dysphotic-blue` → `--abyssal-ink`, with the colour stops calibrated to put the photic-zone band at the page's vertical middle. - **Layer 2 (mid):** a tiled SVG-noise PNG at 0.04 opacity, providing the granular texture that prevents the gradient from reading as digital. The noise grain size is calibrated to the page's typographic baseline so it reads as *honest material*, not as photoshop filter. - **Layer 3 (front):** a single radial-gradient bloom in `--bioluminescence`, 240px in diameter, whose center y-position is animated over a 90-second loop from y=88vh (the unknown at -3,400m) up to y=42vh (the unknown at the photic boundary) and back. This is the only thing on the page that moves at the substrate level. **It is the single most important visual element on the entire site** — it is *the monster rising*. **4. The bookplate.** A single SVG illustration in the upper-left of the BL log frame: the *Société Bathyale Privée des Côtes Calcaires* monogram, hand-drawn as an interlocking SBPCC ligature inside a deco-octagon frame, embossed in `--leather-cognac` over the leather-texture panel with a 0.5px highlight on the upper-left edge of every stroke (CSS `filter: drop-shadow(0.5px 0.5px 0 #fff8) drop-shadow(-0.5px -0.5px 0 #0004)`) to read as physical embossing. This is the page's single decorative motif, and it appears at exactly 64×64px, never larger. ## Prompts for Implementation **Build chika.monster as one HTML document, one CSS file, one ES module, and three asset files: `leather-cognac.png` (800×800 tiling, ~24kb), `bookplate.svg` (the SBPCC monogram), and `noise.png` (256×256 tiling SVG-noise, ~12kb).** No framework. No bundler. No Lottie. No WebGL. No canvas. No video. No webfont self-host (use Google Fonts CDN). The entire experience is static SVG + CSS gradients + one `requestAnimationFrame`-driven master clock. **The master clock is the heart of the page.** A single `requestAnimationFrame` loop maintains a `t` value in seconds since page load and broadcasts five derived values to the DOM via CSS custom properties on `:root`: - `--t-manifest`: the UTC timestamp, updating every 1.0s in the TS manifest ticker. - `--t-bloom-y`: the unknown's current y-position in vh, ascending and descending on a 90-second sinusoidal loop. - `--t-compass`: the deviation-pip rotation in degrees, drifting at 0.04°/s. - `--t-waveform`: a phase value driving the BC hydrophone waveform's 12-channel Perlin sum. - `--t-specimen-redraw`: a 0–1 progress value driving the BR specimen cross-section's `stroke-dashoffset` redraw on a 26-second loop. All five values flow from the same clock so the page reads as a single coherent instrument, not as five independent animations. The clock runs at 60fps but the visible animations are deliberately slow — a viewer who sits with the page for ten seconds will see roughly one full waveform breath, half a specimen redraw, and the bloom rising about 11vh. **The pacing is the point.** This is not a 3-second hero animation; it is a 90-second tableau. **Storytelling commitment.** The page is a story, not a service. The narrative beats — *the unknown is at -3,400m, the unknown is at -2,100m, the unknown is at the photic boundary, the unknown is gone again, the unknown returns* — are encoded in the substrate bloom's vertical position over the 90-second loop. The captain's log entry in the BL frame is a single 180-word paragraph in `Cormorant Garamond Italic` describing one specific watch from the night of 14 March 1971, with hand-set marginalia in `IBM Plex Mono` annotating depths, bearings, and the chief observer's initials. The text is real, written, and placed — not lorem, not generated, not stub. **Micro-interactions (5% in registry — actively claimed).** Six exact behaviours, no more: 1. *Hovering BR specimen frame:* over 4.0s, cross-dissolves the cross-section silhouette to one of three alternate rising unknowns (cetacean / siphonophore / unidentified). Cycles on each subsequent hover. 2. *Hovering BL log frame:* the marginalia in `IBM Plex Mono` swap to a different watch's entry over 0.6s. Five watches total. 3. *Hovering TR depth chart:* pulls the x-axis back from 90 days to 90 years over 1.2s, revealing four prior surfacings of the unknown at 17-year intervals. 4. *Hovering TL bearing frame:* the deviation pip snaps to true bearing over 0.3s, then drifts back over 8s. 5. *Hovering BC hydrophone frame:* the waveform freezes; a single small `IBM Plex Mono` numeric readout fades up showing the dominant frequency in Hz to two decimals. 6. *Hovering the bookplate:* a 0.5px gold stroke fades up around the deco-octagon over 0.4s. The least functional and most opulent of the six. There is no other interactivity. **No nav menu.** No CTA. No form. No pricing. No stat grid. No card grid. No carousel. No modal. No cookie banner (handled at the HTTP level if needed). No footer link list. The page's commerce, if any exists, is implicit in the page's mere existence — the *Société Bathyale* does not sell things; it lets you watch. **AVOIDED patterns from the frequency analysis:** - No photography (98% — avoided). - No card-grid (73% — avoided, replaced by HUD-overlay). - No cursor-follow (73% — avoided; the cursor is just the cursor). - No magnetic effects (62% — avoided). - No gradient-as-decoration (96% — the gradient IS the substrate, it is not chrome). - No hand-drawn aesthetic (95% — avoided; this is brutalist precision). - No glassmorphism (68% — avoided; the HUD is not glass, it is engraved aluminium and brass). - No warm-only palette (95% — avoided; the page is deliberately warm-above-cool-below). ## Uniqueness Notes This design commits to the following differentiators, chosen explicitly to avoid duplicating other CMassC sites and to lean into the underused patterns surfaced by frequency analysis: 1. **HUD-overlay as primary structure (not as decoration).** Layout `hud-overlay` is at 0% in the registry — the most underused layout pattern in the entire vocabulary. Every other site uses some flavour of full-bleed/centered/card-grid/asymmetric. chika.monster is built so that the HUD is the *only* layout: seven labelled edge-anchored frames floating above a continuous substrate, with the central 60vw × 50vh deliberately reserved as substrate-only window. The page literally cannot be ported to a card-grid or a hero-dominant layout without ceasing to be itself. 2. **Coastal-blend palette (not warm-only, not gradient-as-decoration).** Palette `coastal-blend` is at 0% in the registry. The page runs warm-above-cool-below as a single vertical column from chalk cliff at the top to abyssal ink at the bottom, with the HUD chrome warm-toned (chalk/brass/leather) sitting against a cool-toned substrate (photic/dysphotic/abyssal blue). 95% of the registry is warm-only; 96% uses gradient as decorative accent. chika.monster's gradient is *the depicted reality*, not chrome. 3. **Brutalism played straight, not as anti-design.** Aesthetic `brutalist` is at 7% in the registry, almost always used as agency-portfolio brutalism (irony, neon-on-black, big-Helvetica-as-statement). chika.monster reads brutalism as 1968 civic architecture meant sincerely — heavy, monumental, expensive *because* heavy, the bunker as serious answer to the cliff. The design is brutalist *and* opulent at the same time, and the union is exact: opulent durability is the point. 4. **Eclectic-hybrid typography in disciplined non-overlapping roles.** Typography `eclectic-hybrid` is at 5% in the registry. chika.monster pairs four faces from four traditions (Major Mono Display capitals, IBM Plex Mono data, Cormorant Garamond italic prose, Bodoni Moda 900 monumental number) in roles that never overlap. The pairing is not eclectic-as-chaos; it is eclectic-as-instrumentation — every face is a different tool on the same workbench. 5. **Leather-texture imagery used sparingly.** Imagery `leather-texture` is at 3% in the registry. chika.monster restricts the leather PNG to three locations — bookplate backing, chair-back silhouettes, journal binding strip — and never uses it as full-bleed background. The scarcity is what makes it read as expensive saddle leather, not as a Photoshop pattern. 6. **Abstract-tech motif as hand-drawn SVG, not as 3D render.** Motif `abstract-tech` is at 2% in the registry. chika.monster's instrument vocabulary (compass rose, strip chart, waveform, cross-section, call-sign glyphs) is hand-drawn SVG with deliberately preserved hand-placement variance, never icon-set, never 3D-render, never AI-generated. The slight imperfections are the brutalist seed's commitment to material honesty applied to vector linework. 7. **Micro-interactions instead of scroll/nav/modal architecture.** Pattern `micro-interactions` is at 5% in the registry. chika.monster has no scroll, no menu, no modal, no carousel, no second screen — the *entire* expansion of content lives inside six exact hover behaviours on the existing seven frames. The design refuses the standard information-architecture grammar entirely. 8. **Opulent-grand tone without art-deco/luxury-gold tropes.** Tone `opulent-grand` is at 4% in the registry, almost always paired with art-deco aesthetics (gold leaf, marble, serif display, Versailles geometry). chika.monster expresses opulence through *patrician restraint* — verdigris brass, oiled saddle leather, board-form concrete that has cost more to build than any marble could — and through the most expensive design decision on the page: leaving the central 60vw × 50vh empty. 9. **The 90-second master loop as primary content.** The page's central narrative is not text and not a hero image — it is a single radial bloom in `--bioluminescence` rising and falling on a 90-second sinusoidal loop driven by a single `requestAnimationFrame` clock that also broadcasts to the manifest ticker, compass deviation, hydrophone waveform, and specimen redraw. The page is a slow tableau, not a fast funnel. A viewer who stays for ten seconds sees a tenth of the story; a viewer who stays for ninety seconds sees the unknown rise, surface, and submerge. 10. **Zero photography commitment.** 98% of the registry uses photography. chika.monster uses zero. Every image on the page is either hand-drawn SVG, CSS gradient, or one tiling leather-texture PNG. The commitment is load-bearing for the brutalist seed: a brutalist building is photographed, but it is not *made of* photographs. chika.monster is made of materials. **Chosen seed (from assignment):** *aesthetic: brutalist, layout: hud-overlay, typography: eclectic-hybrid, palette: coastal-blend, patterns: micro-interactions, imagery: leather-texture, motifs: abstract-tech, tone: opulent-grand.* Every seed token is honoured by exactly one load-bearing structural commitment in the design above; none of the eight is decorative.