# Design Language for chikayami.net ## Aesthetics and Tone chikayami.net is staged as **the public broadcast feed of an underground crystal-lattice cultivation lab — a clandestine biome two hundred metres below a forgotten subway terminus, where someone is growing a self-organising fiber-optic reef in the dark and the network it sings into is named on the surface as `chikayami.net`**. The domain is read as Japanese *chikayami* (地下闇 — *chika* "underground" + *yami* "dark, shadow, the unilluminated"), and the `.net` TLD is taken at literal face value: this is a **net**, a lattice, a mesh. Not a corporate "network." A *reef*. A growing thing strung through pitch-black caverns, threaded with phosphor-bright filaments that pulse on their own clocks. The site is the cultivation-room's public window — a glassed-in observation gallery whose panes look down into the dark, where slabs of grown crystal float in flowing organic strata and emit neon in the colours the lab has selected for this season's bloom. The **tonal pivot** of this design — and the load-bearing surprise — is that the cultivation lab is **optimistic, even cheerful, about its own strangeness**. The seed pairs `dark-neon` (a 2% palette, deeply rare) with `optimistic-bright` (a 3% tone, equally rare); the registry overwhelmingly prefers `mysterious-moody` or `futuristic-cutting-edge` for any dark-neon page. This site refuses moody. The lab's voice — recovered from a continuous low-volume audio caption track — is **delighted**, like a marine biologist who has just realised the reef they thought was static is mid-conversation. Captions include phrases such as *"the lattice rebloomed at 03:14, on its own initiative — no one is more pleased than we are"*, *"sample 17B is humming a fourth above sample 17A and we have no idea why and it is wonderful"*, *"do not touch the glass, it is happy"*. The aesthetic claims the underground without claiming menace. The crystal reef is **friendly**, **busy**, **prolific**, and the dark around it is not threatening but generous: dark is what gives the neon something to be against. The **visual canon** holds three forces in productive tension. **Neubrutalism** (2% in registry) provides the chassis: thick uncompromising borders (3–6px solid `#0E0A1F`), hard rectangular shadow offsets, refusal of rounded corners on structural frames, raw labels written in retro-display typography that look hammered onto the glass with a rivet-press. **Glassmorphic cards** (6% in registry) provide the contents of those frames: each brutalist crate contains a pane of frosted, light-bleeding glass through which a crystalline specimen is partly visible, partly diffused. **Organic-flow** layout (5% in registry) governs how the crates are arranged on the page: not a grid, not a column — a *current*, a slow downward flow of crates as if they are drifting on a thermal in the cavern's still air, occasionally clustering into reefs and occasionally thinning into strands. The result is a page that feels *industrial in skeleton, biological in motion, alive in its glass*. ## Layout Motifs and Structure The page is a **vertical scroll of approximately 14 viewport-heights**, organised as a single descending **organic-flow current** of brutalist crates. There is no hero. There is no grid. There is no fold. The visitor lands at depth-marker `0m` (cavern ceiling) and scrolls downward through the lab's vertical extent, arriving at depth-marker `212m` at the cavern floor where the largest, oldest crystal slab sits in dim phosphor sleep. **Structural rule of the flow.** The page has no fixed columns. Crates (the brutalist glass-fronted card units) appear at irregular horizontal positions along a sinuous *flow-spine* — a hand-authored Bezier path that meanders down the page, defined as an SVG path `M 50% 0 C 35% 12vh, 70% 22vh, 50% 35vh S 25% 60vh, 60% 75vh S 80% 95vh, 50% 100vh ...`. Crates anchor at points along this spine via offset; their `--anchor-t` is a 0–1 parameter along the path, and CSS `transform: translate(...)` places each crate at the path's evaluated `(x, y)` plus a deterministic horizontal jitter (`--jitter: calc(var(--seed) * 24px - 12px)`). The *spine itself is not visible*; what the reader sees is the *consequence* of the spine — crates that drift left, then right, then left, like flotsam caught in a slow vertical current. Scroll velocity does not affect the spine; the spine is the page's own anatomy. **Crate dimensions and rhythm.** There are exactly **23 crates** down the flow. They fall into three structural classes: - **`crate--specimen`** (12 crates): a brutalist frame, ~`min(420px, 78vw)` wide × ~`560px` tall, containing a glassmorphic pane (the "specimen window") that takes the upper 70% and a brutalist label-strip across the bottom 30%. Specimen windows show one crystalline form (an SVG construction — see Imagery). - **`crate--log`** (7 crates): half-width (~`min(320px, 60vw)`), short (~`280px`), text-only — the lab's voice. No glass, just a brutalist frame around a block of retro-display caption type and a single mono timestamp. - **`crate--span`** (4 crates): full-bleed bar crates that interrupt the flow — `100vw` wide × `~140px` tall, containing a long horizontal *strata band* (a slowly-shifting horizontal gradient of the dark-neon palette) and a single oversized retro-display word. These are the "stratum markers" — `STRATUM I — VITREOUS`, `STRATUM II — CHROMATIC`, `STRATUM III — RESONANT`, `STRATUM IV — DORMANT`. Crate ordering is **deliberate, not random**. The flow opens with two `crate--log` (the lab's greeting), then `crate--span STRATUM I`, then four `crate--specimen` arranged in a leftward-rightward-leftward-rightward S-curve along the spine, then a `crate--log`, and so on. The reader experiences the document as **sediment** — layered, time-deposited, with louder strata-marker bars punctuating the descent. **Brutalist framing rules.** Every crate has: - A **`6px solid #0E0A1F`** outer border. No exceptions. - A **hard offset shadow** of `12px 12px 0 #FF2BD6` (the dark-neon magenta accent). The shadow is a *displaced solid colour block*, not a soft shadow — neubrutalism canon, executed with the dark-neon palette swap. - A **brutalist tab** (a small inset rectangle of solid `#0E0A1F` containing white retro-display lettering of the crate's index — `01`, `02`, …, `23`) protruding 14px above the top-left corner. - **No border-radius** on the frame. (The glass *inside* the frame may use rounded corners; the frame may not.) **Glass-pane rules (the seed's `glassmorphic-cards`).** Each `crate--specimen`'s upper window is a glass pane: - Background: `linear-gradient(140deg, rgba(255,255,255,0.06) 0%, rgba(118,255,213,0.04) 50%, rgba(255,43,214,0.05) 100%)`. - `backdrop-filter: blur(18px) saturate(1.3)`. - A `2px solid rgba(255,255,255,0.18)` inner stroke. - A subtle inner *radial light bleed* `radial-gradient(circle at 30% 25%, rgba(118,255,213,0.22), transparent 55%)` to suggest a cold interior light source illuminating the specimen from upper-left. - Inside the glass, the specimen sits at ~80% scale, leaving a dark vignette of cavern-air around it. **The vertical depth-rail.** A **left-edge fixed rail** (40px wide, `position: fixed`, full viewport height) carries the descending depth markers. As the reader scrolls, the rail's tick passes through depth values `0m, 12m, 28m, 44m, …, 212m`, corresponding to crate positions. The rail is brutalist: a `2px solid #0E0A1F` rule, white tick-marks every 4m, retro-display numerals every 12m, and a single small phosphor-cyan dot indicating the reader's current depth. This is the only persistent UI on the page. **Negative-space rule.** Between strata-marker bars, generous vertical air (~`12vh`) is allowed to elapse before the next crate. The page is *not* densely packed. The dark spaces between crates are part of the design: they are the **cavern itself**, and they let the dark-neon palette do its work — neon only reads as neon when it is *surrounded by black*. ## Typography and Palette **Type stack — Google Fonts only, three families, strict role assignment.** - **Major Mono Display** (Google Fonts, weight 400). The **retro-display lead voice**. This is a quintessential 1970s-display monospace with chunky uppercase glyphs and a near-`OCR-A` flavour, and it carries every label, headline, and stratum word on the page. Uses: stratum-bar oversized words (`STRATUM I — VITREOUS`) at `clamp(56px, 9vw, 140px)`, weight 400, letter-spacing `0.04em`, color `#F2F0FF` with a `2px 2px 0 #FF2BD6` neubrutalist text-shadow; crate index tabs (`01`, `02`, …) at 22px, color `#F2F0FF` on `#0E0A1F`; specimen labels (`SPECIMEN 17B — HUMMING-FOURTH`) at 14px uppercase, color `#0E0A1F`, on the brutalist label-strip below each glass pane; depth-rail numerals (`12m`, `28m`, …) at 11px, color `#7AF2D9`. Major Mono Display is the seed's `retro-display` typography (5% in registry — actively claimed) executed with maximal commitment: **the page's voice is monospaced retro-display, end of discussion**. - **Inter** (Google Fonts, weights 400 / 500). The **prose body** — used only inside `crate--log` for the lab's narration, set at 15px / 1.55 line-height, color `#D8D4EC`, max ~32em wide. Inter is chosen explicitly for its calm legibility against the dark-neon backdrop; the contrast between Inter (engineered, neutral) and Major Mono Display (loud, retro) is intentional and central. Body prose is **always sentence-case, always lowercase except sentence-initial and proper nouns** — a small tonal cue toward the cheerful informality of the lab's voice. - **Big Shoulders Inline Display** (Google Fonts, weight 700–900). The **outline display accent**, used sparingly — only for the four stratum-word inline-strokes layered behind the Major Mono Display strata-bar words, providing a chromatic-aberration backdrop (see Imagery). Big Shoulders Inline gives a doubled-outline neon-tube quality at very large sizes that no other Google face can replicate at the cost. No fourth face. No web-icon font. Symbols are SVG. **Palette — `dark-neon` (2% in registry — actively claimed).** The palette is six values plus two utilities. Every pixel resolves to one of these eight; there is no "near-black" or "near-white" — the discipline is total. - **`#0E0A1F`** — *cavern ink*. The page background. A near-black with a faint plum cast that prevents OLED-grey flatness. All brutalist borders, all label-strip backgrounds, all crate-tab backgrounds. - **`#1A1330`** — *deep stratum*. Used for crate-internal label-strip backgrounds where contrast against `#0E0A1F` is needed (a quieter, less aggressive black-violet); also the strata-bar gradient's left endpoint. - **`#7AF2D9`** — *phosphor cyan*. The primary neon. Used for the depth-rail current-position dot, for crate-internal accent rules, for the inner light-bleed in glassmorphic panes, and for the leftmost stratum word `STRATUM I — VITREOUS`. This cyan is the page's *living* colour: every pulsing element pulses *toward* this hue. - **`#FF2BD6`** — *reef magenta*. The secondary neon, the brutalist shadow colour. This is the seed's optimistic edge — magenta over cyan is the unmistakable signature of *bright dark-neon*, the cheerful flavour of the palette. Used for every brutalist crate shadow, for stratum word `STRATUM II — CHROMATIC`, and for the chromatic-aberration outline behind every major Major Mono Display headline. - **`#FFEC3D`** — *citron flare*. The tertiary neon, used at <2% of pixel coverage — only for stratum word `STRATUM III — RESONANT`, for emergency-attention mark-strips on three specific log crates, and for the single small CTA-style brutalist label in the page footer (`READING ROOM →`). Citron is the page's *exclamation*; it appears rarely and loudly. - **`#A78BFA`** — *bloom violet*. The fourth neon, used only for stratum word `STRATUM IV — DORMANT` and for low-amplitude glow auras around dormant specimens in the bottom third of the page. Violet reads as "the colour of crystals at rest" — quieter than the other neons, more contemplative. - **`#F2F0FF`** — *ice white*. All Major Mono Display body text on dark backgrounds. Slightly cool-tinted to read as "phosphor white," not paper white. - **`#D8D4EC`** — *log lavender*. Inter prose body colour inside log crates. A muted lavender-grey that sits comfortably against `#0E0A1F` without competing with the four neons. **Palette discipline.** The five neons (`#7AF2D9`, `#FF2BD6`, `#FFEC3D`, `#A78BFA`) are **never used together in adjacent pixels**. Each stratum belongs to exactly one neon. This rule is what keeps a four-hue dark-neon palette from becoming a clown-suit; it gives the page an acoustic structure where each stratum **rings in one frequency** and the strata together form a chord. ## Imagery and Motifs **Photography is forbidden.** This design ships at **0% photography** in a registry where photography is at 98% — a deliberate, load-bearing absence. Crystal specimens are not real crystals photographed; they are **constructed entirely from layered SVG geometry**. This rule is non-negotiable: it is what makes the crystalline motif (`crystalline` at 7% in registry — actively claimed) feel *grown*, not *captured*. **Specimen construction (the page's primary imagery).** Each of the 12 `crate--specimen` glass panes contains one **crystalline specimen** — a hand-authored SVG composed as follows: 1. A **base lattice** — a low-poly SVG `` mesh of 9–17 facets, vertices placed by hand at irregular but plausible angles (no procedural generation). The polygon's `fill` is a `linearGradient` of two values from the dark-neon palette — typically `#1A1330` to one of the four neons at low opacity (e.g. `#7AF2D9` at 0.45) — and its `stroke` is a `1.5px` stroke of the same neon at full opacity. Faceting is the dominant visual quality: each specimen looks like a **cut gem**, not a smooth blob. 2. A **chromatic-aberration ghost layer** — the same polygon duplicated, offset by `(2px, -1px)` and re-coloured in a *different* neon at 0.35 opacity (e.g. magenta on a cyan crystal). This produces the unmistakable dark-neon doubled-edge glow. 3. A **filament thread** — a hand-drawn SVG `` of 4–8 short luminous "veins" running through the lattice, stroked at `0.8px` in `#FFEC3D` (citron) at 0.7 opacity. Filaments are the page's *living* tell: they are what the lab is broadcasting — the actual signal substrate. 4. A **dust mote layer** — 6–14 small SVG `` elements at 0.5–1.5px radius, scattered around the specimen at low opacity (0.1–0.3) in `#F2F0FF`. Suggests cavern-air fines drifting in the cold light of the glass pane. Each specimen is uniquely shaped (no template re-use). Twelve specimens, twelve geometries. They progress down the page from **bright/active** (top, in the VITREOUS and CHROMATIC strata) to **dim/dormant** (bottom, in the DORMANT stratum), with filament density and stroke opacity decreasing as depth increases. **Strata-bar imagery.** Each of the four `crate--span` strata bars contains: - A horizontal **gradient band** spanning the full width: `linear-gradient(90deg, #1A1330 0%, [stratum-neon] 28%, [stratum-neon] 72%, #1A1330 100%)` where `[stratum-neon]` is cyan / magenta / citron / violet for I / II / III / IV respectively. The gradient is at 0.55 opacity, sitting over the cavern-ink background. - The stratum word in Major Mono Display, centred, with a Big Shoulders Inline Display ghost at +6px offset and 0.25 opacity in a *complementary* neon, producing an outline-doubling that reads as both "neon tube" and "chromatic aberration." - A **single subtle SVG glitch slice** — the stratum word's central horizontal third appears horizontally displaced by 4px every ~7 seconds, returning over 200ms. This is the seed's `glitch` patterns commitment (14% in registry — claimed but underused-relative-to-the-other-active-patterns), executed as a controlled *signal fault*, not as an aesthetic flourish. The lab's broadcast is occasionally noisy. The reader gets a glimpse of the wire underneath. **Iconography.** The page uses exactly **seven small SVG glyphs**, each 16×16px, drawn in a single consistent line-weight (`1.2px`), in `#F2F0FF`: - `glyph-depth` (a downward chevron with a tick) — used in the depth-rail header. - `glyph-spectrum` (three nested arcs) — used on stratum I label. - `glyph-prism` (a faceted diamond) — stratum II. - `glyph-resonance` (concentric circles with a single tangent) — stratum III. - `glyph-dormant` (a half-closed eye / crescent) — stratum IV. - `glyph-broadcast` (a spiral with three radials) — used on the page footer brutalist tab. - `glyph-thread` (a single curled filament) — used inline in log crates as a paragraph-break ornament. These seven glyphs are the *only* vector ornaments on the page. There is no icon-set, no Lucide / Feather import, no decorative emoji. **Background of the page itself.** Pure `#0E0A1F` cavern-ink, **except** for an extremely subtle SVG-noise overlay (256×256 tiling, ~10kb) at 0.04 opacity, applied as `mix-blend-mode: overlay`. The noise is barely perceptible but kills OLED banding and gives the dark a grain-of-stone quality. No gradient backgrounds. No animated particles. **Nothing else on the page background**: the dark must be allowed to be dark, otherwise the neon stops working. **Cursor motif.** The cursor (where pointer support exists) is a custom 24×24 SVG: a small **phosphor crosshair** in `#7AF2D9` with a 2px outer halo of `#7AF2D9` at 0.3 opacity. Hovering a crate produces no cursor change other than a 1.4× scale of the halo. This is the only cursor customization. ## Prompts for Implementation Build chikayami.net as **one HTML file, one CSS file, one ES module, three SVG asset files (the depth-rail, the noise tile, the cursor), and zero photography**. No framework, no router, no SPA, no build step. No Lottie, no WebGL, no canvas, no GSAP, no Three.js. The entire experience is hand-authored SVG specimens + CSS variables + a single `requestAnimationFrame`-driven master clock + IntersectionObserver for crate reveals. **Storytelling is the organizing principle.** The page is a *descent into a cultivation reef*. The visitor lands at depth `0m`, scrolls down through 23 crates and 4 strata, and arrives at depth `212m` where the dormant slab sleeps. Every crate is a *moment in the descent*: a specimen seen through a glass pane, a log entry from the lab's voice, a stratum bar that announces a change in the cave's chemistry. There is **no marketing copy, no pricing, no testimonials, no team grid, no CTA-heavy footer, no stat-grid, no feature tiles, no comparison table**. The only call-to-action is a single small `READING ROOM →` brutalist tab in the footer in citron (`#FFEC3D`) — a quiet invitation to a longform sister page that does not need to exist for the design to be complete. **Prefer narrative over ornament.** The lab's *voice* is the most important non-visual element on the page. Log crates carry 80–140 words of cheerful, specific, technical-but-warm prose written in lowercase Inter. Sample log content (this is the *exact* register required): > sample 17B has been humming a perfect fourth above sample 17A for six days now. nobody knows why. we have run the spectrum analyser in three configurations. we have asked. the lattice does not appear to be aware that we are listening, but we like to think it would not mind if it did. we are documenting the harmony. in the meantime: the cavern is forty-one degrees, the air is still, and citron stratum III is the brightest it has been all month. it is a good wednesday for the reef. Eight log crates, each in this register. The voice is **the optimistic-bright tone made literal** — never grim, never grandiose, always specific. **Animation rules — strict and few.** - **Master clock** at 60fps via a single `requestAnimationFrame` loop that updates **only one CSS variable**: `--lab-t` (a 0.0–60.0 second cycle). Every animated property reads from this variable. There is no per-element timer, no setTimeout, no setInterval, no nested rAF. - **Specimen pulse.** Each specimen's filament thread modulates its `stroke-opacity` between 0.45 and 0.85 on a 12-second sine cycle, phase-offset per specimen by `crate-index * 0.7s`. This is the only continuous animation on specimens. No rotation. No translation. - **Strata-bar glitch.** Every ~7 seconds (driven by `--lab-t`), one strata bar's central word horizontally translates by 4px and clips to a 33%-height horizontal band, returning over 200ms in a single ease-out. Glitches are *staggered across the four bars* so the page never has two glitches simultaneously. The page should feel mostly stable, occasionally interrupted. - **Depth-rail tick.** As the reader scrolls, the current-depth dot interpolates smoothly along the rail. This is the only scroll-bound animation on the page. No parallax. No scroll-jacking. Native scroll only. - **Crate reveal.** Each crate fades in (opacity 0 → 1) and translates up by 12px when it crosses the IntersectionObserver threshold. Once revealed, never re-animated. - **No magnetic cursor, no cursor-follow on crates, no tilt-3D, no spring-elastic-bounce on entry, no card-flip, no morph, no typewriter, no marquee.** The page is *still*, broken only by the four pulse-glitch-tick-reveal motions above. This restraint is what lets the dark-neon palette feel *deliberate* rather than gaudy. Frequency analysis shows cursor-follow at 75%, magnetic at 65%, spring at 75%, parallax at 94% — chikayami.net **refuses all four**, and that refusal is part of the design. **Reduced motion.** `@media (prefers-reduced-motion: reduce)`: pulse and glitch are disabled (set `--lab-t` to a fixed value, freeze filament opacity at 0.7, freeze strata-words to their resting frame). Crate reveal is replaced by an instant `opacity: 1`. The depth-rail still tracks scroll because it is the only persistent navigation cue. The page remains fully legible and structurally identical. **Responsive behaviour.** At viewports `<720px`, the organic-flow spine collapses to a vertical centre-line, but crates retain their irregular horizontal jitter (`±6px` instead of `±60px`) — the page does not become a single column; it becomes a *thinner current*. The depth-rail moves from a 40px left-edge fixed rail to a 28px left-edge rail. Strata-bar oversized words shrink via `clamp()` to a still-loud `clamp(40px, 12vw, 80px)`. All other rules are identical. **Accessibility, semantics, and structure.** Use semantic HTML: `
` containing `
` and `