# Design Language for chika.dev ## Aesthetics and Tone chika.dev is staged as **the operations console of an underground signal-mapping bureau** — a deep-blue subterranean control room where curving cave-galleries have been retrofitted with a single, persistent CRT terminal that reads out the geometry of what is below. The Japanese reading of *chika* (地下, "underground") is the literal organizing metaphor: every pixel sits **below the waterline of the surface web**, lit by the cold phosphor glow that survives there. The site is not the cave itself but the **terminal interface to the cave** — the one screen the surveyors keep on while they sleep, displaying tilt sensors, flowing currents, and the slow drift of stratigraphic layers half a kilometer below the user's chair. The tone is **authoritative without being corporate**. This is not a product page; it is a published operations dossier. The voice belongs to the *night-shift surveyor* — the one engineer left awake at 03:40 monitoring the readings, writing in declarative, terse sentences directly to the terminal. Lines do not hedge, do not soften. "Section 7B: lateral tilt 1.4°. Holding." There is no marketing copy, no testimonials, no team bios with smiling headshots. The page is a watch-log made permanent. What sets the mood apart from the standard "dark-mode terminal" trope is the **fluid, three-dimensional underground**. A conventional terminal aesthetic is austere, flat, scanline-monochrome — green-on-black, ASCII boxes, blinking cursors. chika.dev refuses two of those three: the screen is not flat, the type is not all monospace, and nothing scrolls in straight lines. The terminal here is **bent around the curving wall of a cave**, the readouts **tilt as the cave tilts**, and the type that *isn't* command-line is enormous, midnight-blue, and display-bold — the labels of the cave-system itself, painted directly on its rock wall in eight-meter letters that the terminal merely *describes*. The result is two simultaneous registers: a calm, mono command-line in the foreground, and a vast, slow, curved-letter cathedral of typography behind it, lit only enough to be read. Reference lineage that is **explicitly invoked**: Tarkovsky's *Stalker* (the Zone, the slow tilt of the rail-trolley), Soviet metro-station architectural drawings (curving tunnel cross-sections in midnight blue ink), the actual interior of the LIGO control room at Hanford (low light, big monitors, hand-drawn margin notes), and the typographic posters of Ralph Steiner where a single phrase fills the entire frame. **Explicitly refused**: the green-on-black "hacker terminal," the Matrix raining-glyphs cliché, neon-blue cyber-grid floors, sci-fi HUD targeting reticles, and the smug "developer brand" voice of marketing-page tech-tutorials. ## Layout Motifs and Structure The structural conceit is a **deep sidebar** — but the sidebar is not a menu. It is a **vertical sounding-rod** that runs the full height of the document, and the entire page is read against it. A reader who scrolls the page is, in the design's internal logic, **lowering a probe into the underground**. Depth, not progression, is the y-axis. **Master grid.** The viewport is divided into two columns. The left column is **`--sidebar-w: clamp(280px, 22vw, 380px)`** wide, runs full document height, and is **fixed in screen-space** for the whole scroll — only its *contents* parallax. The right column is the **main shaft** — `flex: 1` — and is where the long-form readout lives. There is no top-bar, no nav-bar, no footer-block in the conventional sense. Navigation is done entirely through the sidebar, which behaves as a depth-gauge. **The sidebar (depth-gauge column).** The sidebar is rendered as a **vertical CRT slab** with a 1px inset border of `#5b7fb5` (cooled phosphor edge). Its background is `#0b1530` with a subtle vertical scanline at 0.04 opacity. Inside it, top-to-bottom: - A six-character **system-handle** (`chika.dev`) set in display-bold at 28px, all lowercase, color `#e8eef9`. Letter-spacing -0.03em. This is the only place on the page where `chika.dev` is the dominant element rather than a margin-mark. - A live **depth read-out** below it: a numeric counter incrementing as the user scrolls, reading e.g. `−0214.6 m`. Format: `−` (hard minus, U+2212), four digits, decimal, one digit, space, `m`. Set in `JetBrains Mono` 13px, color `#7aa3e8`. The counter is bound to `scrollY` and updates every animation frame. - A vertical **spine of section markers** — thirteen of them — drawn as small horizontal phosphor-ticks running down the left inner edge of the sidebar, each with a section name (mono, 11px, color `#9bb8d8`) and a depth label. Active section is the one nearest the read-out; it pulses at 1.2s period. - At the **bottom** of the sidebar, a **mini cave-cross-section SVG** — about 200px tall — showing the full vertical column of the document as a curving, flowing gallery profile. A small bright dot marks the current scroll position. The cave-profile is hand-drawn (irregular Bezier), not procedural. The sidebar **never disappears**, on any viewport above 720px. Below 720px, it collapses to a **bottom-pinned strip** 56px tall, retaining the depth read-out and the cave-mini, dropping the section spine. **The main shaft (right column).** The shaft is **not a uniform column**. Each of the thirteen "depths" (sections) has a **lateral tilt** — the section's content block is rotated by a tilt angle on the X- or Y-axis, picked from a curated set: `{−1.4°, +0.8°, −2.1°, +1.7°, −0.4°, +2.6°, −1.9°, +0.3°, +1.1°, −2.8°, +0.7°, −1.6°, +2.2°}`. The tilts are **CSS `perspective: 1800px` + `transform: rotateY(...) rotateX(...)`**, applied at the section level. The result reads as if the cave-shaft is **not vertical** — it bends, slowly, as the reader descends. The tilts are *small enough to be ambiguous* (is the page crooked, or am I crooked?). This is the core experiential differentiator. Inside each tilted section, content is laid out on a soft **flowing-curve baseline grid**. Headings sit on a Bezier path generated per-section (pre-baked SVG paths, not procedural at runtime), and the body text — set in flat lines — sits *underneath* the curve, with the curve overdrawing the headings as if engraved on the cave wall *behind* the readout. Body lines are normal flat HTML; the curve is decorative typography on top. The eye reads: *first the curving label, then the flat terminal block beneath it.* **Vertical structure of the thirteen depths.** 1. `0000.0 m` — Surface plate (handle, manifest, one-line statement) 2. `0014.2 m` — *What chika.dev is* 3. `0036.7 m` — Operating principles (numbered, terse) 4. `0058.1 m` — *The instrument* (the terminal itself, described) 5. `0085.4 m` — Field readings: index of recent entries 6. `0114.9 m` — A long-form entry, full-width 7. `0146.0 m` — A second entry, half-width with mixed-media plate 8. `0181.3 m` — A third entry, transcript-style 9. `0214.6 m` — Cross-section diagram (full-bleed within the shaft) 10. `0249.8 m` — *Standing orders* (a manifesto-shaped list) 11. `0287.0 m` — Open questions 12. `0326.3 m` — Bibliography / linked surface-web sources 13. `0367.7 m` — Sign-off plate Each depth is separated by a **1px horizontal phosphor rule** stretching across the shaft, with a small `~~~` mono character cluster centered on it. ## Typography and Palette **Type stack — Google Fonts only, three families, strict assignment.** - **Big Shoulders Display** (variable, weight 100–900). The **display-bold** voice: cave-wall labels, the big curving section headings, the page title. Used in two ways: (a) as **massive curved labels** on Bezier paths behind each section, set at clamp(72px, 11vw, 200px), weight 800, letter-spacing -0.045em, color `#1f3866` with 0.65 alpha (cave-wall paint, slightly faded by lichen); (b) as **declarative section heads** in the main shaft, flat, 56px, weight 700, color `#e8eef9`, all lowercase, letter-spacing -0.03em. Big Shoulders is condensed-tall — its tall narrow forms read like the elongated lettering of metro-station signage seen at a tilt, which doubles the cave-shaft mood. - **Inter** (variable, weight 300–700, opsz 14–32). The **body voice** — the night-shift surveyor's writing. Set at 17px / 1.62 line-height, weight 400, color `#cbd6ee` for body, `#e8eef9` for emphasized lines. Inter is chosen specifically *against* the terminal-mono cliché: this design refuses to set its prose in a monospace face. Prose is humane; the terminal is the surrounding instrument, not the writing itself. - **JetBrains Mono** (variable, weight 400–700). The **instrument voice** — depth read-outs, tick labels, command-line transcript blocks, timestamps, the 13 section depth-labels. Set at 13–14px, color shifts between `#7aa3e8` (live read-out) and `#9bb8d8` (static label). All-numeric blocks use tabular figures. **Type rules.** - Body is **never uppercase**. Display headings are **never uppercase** either — they are emphatic-lowercase. Uppercase appears in exactly two places: the literal three-letter abbreviation `CRT` if it occurs in transcript text, and the unit `m` (which is lowercase by SI rule anyway, so effectively zero uppercase on the page). - Em dashes are real em dashes (U+2014), no spaces around them. - Minus signs in numeric depth read-outs are U+2212, not hyphens. - The cursor blink in transcript blocks is a `▌` (U+258C), 1.05s period, color `#7aa3e8`. **Palette — midnight-blue, with three carefully cooled accents.** | Role | Hex | Notes | |---|---|---| | Deep ground | `#06091a` | Page background. Almost black, but blue-shifted; on a wide-gamut display reads as ink. | | Ink-blue | `#0b1530` | Sidebar background, transcript block fills. | | Cave-wall | `#1f3866` | Display-bold cave labels (engraved-into-rock paint). | | Phosphor-mid | `#7aa3e8` | Live read-outs, cursor, active markers. | | Phosphor-cold | `#5b7fb5` | Static rules, inactive ticks, borders. | | Sediment-grey | `#9bb8d8` | Subdued mono labels. | | Surveyor-paper | `#cbd6ee` | Body text. | | High light | `#e8eef9` | Headings, emphasized lines. The brightest the page gets. | There is **no white** anywhere — `#ffffff` is forbidden. The brightest point on the page is `#e8eef9`, a slightly off-blue paper. There is also **no warm color** anywhere — no orange, no amber, no warm-beige. The palette is monochromatic-cool by design; warmth would break the underground premise. ## Imagery and Motifs **Mixed-media is the imagery rule.** Every illustrative plate on the page is a **collaged composite of three separable layers**, deliberately mismatched in medium so the seam shows: 1. A **photographic base** — a desaturated, cool-toned photograph (exterior cave, mineral surface, control-room console, sounding-rod). Rendered at 0.55 saturation, hue-shifted toward `#0b1530`, 0.85 brightness. Always taller than wide. 2. A **hand-drawn ink overlay** — irregular, slightly wobbly contour lines drawn over the photograph that *re-trace* its key features (a rock fissure, a control knob, the curve of a tunnel). Drawn in `#7aa3e8` at 1.5px stroke. The overlay is intentionally *imprecise* — the ink does not align perfectly with the photo, by 2–4px in places. This is the surveyor's hand, sketching over their own picture. 3. A **typeset margin note** — three to nine words in JetBrains Mono 12px, set in a small white-on-blue paper rectangle pinned to one corner with a hand-drawn pin (an SVG circle + line). The note describes a single observation: `tilt indicator, cracked` or `axis bearing 047°`. These three layers are visibly distinct media — photo + ink + typeset — and the design *celebrates* the mismatch. The page never tries to "harmonize" them into a single rendered illustration. The three layers are the imagery's grammar. There are exactly **four such mixed-media plates** on the entire page, each anchored to a depth section (4, 6, 7, 9). Each plate is no larger than 540px tall. **Decorative motifs — flowing-curves.** The non-photographic decoration on the page is **all curve**. There are no straight rules except the thirteen 1px phosphor section dividers and the sidebar inset border. Everywhere else, lines flow. Specifically: - **The cave-shaft profile** (sidebar mini, and again as a full-bleed 320px-tall SVG in section 9): an irregular hand-drawn vertical channel with side-galleries branching off, rendered in `#5b7fb5` 1.5px stroke on `#06091a`, with a soft `#7aa3e8` glow filter (stdDeviation 1.6). - **The display-headline curves**: the Bezier baselines that the Big Shoulders Display headings ride on. Each is a slow S-curve, never a circle, never a sine. Curvature reads as *geological* — the slow bend of a tunnel. - **Current-flow lines** in the surface plate (section 1): 24 thin curving lines flowing diagonally across the upper third of the page, drifting at 18s period via SVG `animate`. Reads as underground water-flow seen in cross-section. Each line is 0.5–1px, color cycles between `#5b7fb5` and `#7aa3e8` at low alpha. - **The cursor and section-marker glyphs**: small (8–14px) curving forms — a half-leaf, a comma, a ridged sine — never geometric primitives. Each marker for the thirteen sections is **a different curving glyph**, hand-drawn, indexed by section. **Refused decorative motifs:** circuit boards, grid-lines, sharp angles, geometric shapes (triangles/squares as decoration), particle effects, neon-glow beyond the cooled phosphor halo, marble texture, leather, gradient meshes, "tech HUD" reticles. The page has zero straight decorative geometry. ## Prompts for Implementation Build chika.dev as **one HTML file, one CSS file, one ES module, four PNG mixed-media plates, two SVG cave-profiles, thirteen SVG marker glyphs, and one Bezier-baseline path-set (SVG)**. No framework, no router, no SPA shell, no build step. No Lottie, no WebGL, no canvas, no GSAP. **Storytelling is the organizing principle.** The page is a *descent*. The visitor lands at depth 0, scrolls down through thirteen depths of an operations dossier, and arrives at the sign-off plate. There is no "hero," no "above-the-fold pitch," no CTA, no pricing block, no testimonial, no stat-counter, no "trusted-by" logo bar, no signup form, no team-grid. The shape of the page is a **single descent**, not a marketing funnel. Each depth section reads as a self-contained log entry that can be read in isolation, but rewards being read in order. **The tilt-3d pattern is the signature interaction.** It must read as *the cave is bending*, not as *the page is broken*. Implementation: - Each `.depth-section` element gets a CSS custom property `--tx` (tilt-X angle) and `--ty` (tilt-Y angle) from the curated 13-tilt set. Defaults `0`. - A wrapper container declares `perspective: 1800px; perspective-origin: 50% 50%;`. - `transform: rotateX(var(--tx)) rotateY(var(--ty));` is applied with `transform-style: preserve-3d`. - Tilts engage on scroll-into-view via `IntersectionObserver`; transition is a 1.4s ease (`cubic-bezier(.22, .61, .36, 1)`). Default state (out of view) is `0,0`. As a section enters viewport ≥ 30%, its tilt animates in. As it exits, it un-tilts. - Optional `prefers-reduced-motion`: skip the tilt entirely; sections are flat, but the cave-profile and depth-counter still animate. **Scroll-driven systems** beyond the tilt: - **Depth read-out**: a `requestAnimationFrame` loop reads `window.scrollY`, divides by total scroll-height, multiplies by `0367.7`, and writes the formatted string into the sidebar counter. Updates every frame. - **Section spine highlight**: the active section in the sidebar's vertical spine pulses (`@keyframes` cycling `#5b7fb5 → #7aa3e8 → #5b7fb5` at 1.2s). - **Cave-profile mini-map dot**: a small `` whose `cy` is bound to scroll progress, gliding down the SVG cave-profile. **Cursor behavior** (the one cursor-driven flourish): - A single phosphor-blue **caret-glow** (12px circle, blur 14px, `#7aa3e8` at 0.45 alpha) follows the mouse with a 110ms spring lag. This is the entire `cursor-follow` interaction. Magnetic, ripple, hover-lift, and similar over-used patterns are **refused**. The caret-glow is the page's only ambient cursor effect. - On `mousemove`, when the caret-glow is over a depth-section, that section's `--tx` and `--ty` shift by ±0.4° based on the mouse position relative to its center. This is a **subtle parallax-tilt enhancement** to the base tilt-3d, not a separate interaction. Off-section, the tilt stays at its scroll-set value. **Typography animation** (one effect, one place): - The page title in section 1 (`chika.dev — underground signal-mapping bureau`) animates its variable-font weight from 200 → 800 over the first 1800ms of page load on the `chika.dev` portion only, easing out. This is the only typographic kinetic moment. No typewriter effect, no letter-by-letter reveal, no morphing. **Transcript blocks.** Where the dossier text shifts into terminal-transcript voice, set the block in JetBrains Mono 13px / 1.7 line-height, color `#cbd6ee` on a `#0b1530` field, with a 16px left padding, a 1px left border in `#5b7fb5`, and a `▌` cursor at the end. No "type-on" animation. The block is static; the cursor blinks. Lines are prefixed with a small mono `>` glyph in `#7aa3e8`. **The four mixed-media plates.** Plate 1 (depth 4): the instrument — a desaturated photograph of a CRT terminal in a dim room, ink-overlay tracing the bezel and one knob, margin note `phosphor decay 11%`. Plate 2 (depth 6): a cave-passage interior, ink-overlay tracing the lower fissure, margin note `lateral seep, sect. 7B`. Plate 3 (depth 7): a sounding rod in cross-section, ink-overlay tracing the gauge, margin note `−214.6 m, holding`. Plate 4 (depth 9): a wide cave-cross-section drawing (more illustration than photo), ink-overlay annotating depths, margin note `survey 03:40 local`. Plates use `loading="lazy"` from depth 6 down. None autoplay; none are video. **Type-on-curve baselines.** For each of the thirteen depth-section curving display headings: pre-bake the Bezier path as an SVG ``, then place the heading text via `...` inside a positioned absolute SVG layer behind the section's main content. The text color is `#1f3866` (cave-wall paint), 0.65 alpha. The flat HTML heading sits *in front of* the curved one, in `#e8eef9`. The pair reads as *two registers of the same word*: painted on the wall, and reported in the log. **Refused, explicitly, in implementation:** - No CTA buttons of any kind. No "Get started." No "Sign up." No "Join the waitlist." No "Contact us" form. There is one plain mailto link in the sign-off plate, set in body-Inter, no decoration except an underline-on-hover that draws left-to-right at 280ms. - No pricing tiers, no stat-counters, no "1,000+ engineers trust us," no testimonial blocks, no logo wall. - No top navigation bar. The sidebar is the navigation. - No modal, no overlay, no popover, no toast. - No light mode. The site is permanently underground. ## Uniqueness Notes Six differentiators this design commits to. None should be duplicated by any other CMassC site. 1. **Terminal aesthetic, refused as monochrome flat.** Frequency analysis: terminal-aesthetic sits at ~28% (popular). The 1–2 dozen prior terminal designs in the registry render the trope as **green-on-black, mono-everywhere, ASCII-decoration, scanlines as the primary motif**. chika.dev refuses three pillars of the canon: it is **midnight-blue, not green**; its prose is set in **Inter, not mono** (mono is the *instrument's* voice, not the page's); and it uses **flowing-curves as decoration, not grid-lines or boxes**. The terminal is a *character* in this page, not the page's costume. This is the first registry entry where a terminal-aesthetic design's body type is humanist sans. 2. **Sidebar reframed as depth-gauge, not nav.** Sidebar at 27% is well-established, but the canonical sidebar is a *menu* (links, categories, section toggles). chika.dev's sidebar is a **vertical instrument** — a real-time depth readout, a pulsing section-spine, a hand-drawn cave-cross-section mini-map. The sidebar *measures* the page, it does not *index* it. The interactive object in the sidebar is the depth counter, not a list of links. 3. **Tilt-3d at section-grain, not card-grain.** Tilt-3d sits at 14%. The canonical use is **per-card tilt on hover** — a hover-lift cousin where individual feature-cards tilt under the cursor. chika.dev applies tilt-3d at **the section level**, **scroll-driven**, with **a curated, non-uniform tilt angle per section**, so the entire page reads as a *bending shaft*. The cursor adds a small ±0.4° parallax to the section's existing tilt; the cards themselves never tilt. This re-grades tilt-3d from a micro-interaction into a structural narrative gesture. 4. **Mixed-media as a three-layer grammar with visible seams.** Mixed-media imagery sits at ~4% (uncommon). Where it appears, it tends to mean *one composite illustration* with the layers harmonized. chika.dev's mixed-media is a **strict three-layer rule** — desaturated photograph + imprecise ink overlay + typeset margin note — where the layers are **deliberately misaligned by 2–4px** and rendered in **visibly different media**. The mismatch is the design intent: the page is a *surveyor's working notebook*, not a finished publication. 5. **Flowing-curves as the page's only decorative geometry.** Flowing-curves sits at ~5%. In prior designs it tends to share space with geometric decoration (grid-lines, sharp-angles, circuit-motifs). chika.dev makes flowing-curves the **sole** decorative geometry — every line on the page is either a 1px section-divider, a 1px sidebar-inset, or a curve. There are *zero* decorative rectangles, triangles, hexagons, or grids, and *zero* geometric particle systems. The two motifs allowed in the same frame as flowing-curves — typography and photographic plates — are explicitly *not* geometric. 6. **Display-bold as cave-wall paint, riding curving baselines.** Display-bold sits at 5%. The canonical use is *flat, large, headline-style*. chika.dev sets every primary section heading **twice** — once as a flat HTML heading in `#e8eef9`, once as the same word warped onto a curving SVG `textPath` in `#1f3866` *behind* it (cave-wall paint). The display-bold face (Big Shoulders Display, weight 800, condensed-tall) is chosen because its narrow forms survive the curve — round-shouldered display fonts would warp into illegibility. This is the first registry use of display-bold on curving SVG baselines as a primary heading treatment. **Avoided patterns from frequency analysis:** - **photography (98%)**: photographs only appear *inside* the four mixed-media plates, always desaturated and hue-shifted, never as a full-bleed hero or as a background. - **gradient palette (96%)**: zero gradients on the page. All color is flat. The "phosphor halo" effect is an SVG blur filter, not a gradient. - **warm palette (95%)**: zero warm colors. The page is strictly cool-blue. - **mono typography (95%)**: mono is restricted to the *instrument layer* (depth read-outs, ticks, transcript blocks). Body and headings are not mono. - **parallax (94%)**: refused as a vertical-velocity effect. The page's motion is tilt-driven and scroll-bound depth-readout, not classic parallax. - **full-bleed (90%)**: refused. The sidebar is permanent. No content is ever full-viewport-width. - **centered (80%)**: refused. The shaft is left-anchored against the sidebar; nothing centers. - **card-grid (73%)**: zero cards. The page has no grid. - **stagger (76%)**, **spring (75%)**, **cursor-follow as magnetic (62%)**: refused or radically narrowed. The cursor-follow is one phosphor caret-glow with a soft spring; no magnetic snap, no stagger reveals. - **hand-drawn aesthetic (95%)**: refused as primary aesthetic. Hand-drawn appears only as the ink-overlay layer of the mixed-media plates and the cave-profile SVGs — a *medium*, not a *style*. **Chosen seed:** aesthetic: terminal, layout: sidebar, typography: display-bold, palette: midnight-blue, patterns: tilt-3d, imagery: mixed-media, motifs: flowing-curves, tone: authoritative.