# Design Language for chikayami.com

## Aesthetics and Tone

chikayami.com is a **maximalist nocturnal observatory of the under-forest** — a private 18th-century botanical encyclopedia, kept by a melancholy lepidopterist in a moss-floored library at the bottom of a Yakushima cedar grove, that has been silently digitized into a living dashboard. The domain reads in Japanese as *chika-yami* (近闇, "the near dark" / "shallow underworld") — the threshold layer of the forest where canopy light dies into rootspace, where bioluminescent fungi, slow particles of pollen, and drifting motes of midnight humus form a quiet, pressurized economy of glow.

The aesthetic is **maximalist** (a deliberate 6% choice in a corpus dominated 95% by hand-drawn looks): every panel is over-furnished, every margin is hand-illuminated, every gauge is etched as if it were a copperplate engraving — and yet the *tone is minimal*. There is no shouting, no marketing, no neon. The maximalism is the maximalism of a wunderkammer or of a Bach fugue: many voices, tightly disciplined, all whispering. Density without volume.

The mood is **contemplative nocturnal scholarship**. Imagine the dashboard of a pre-industrial astronomer who tracks fireflies instead of comets — except the astronomer has died and the instruments still take readings, and the readings are beautiful, and the readings are forever. The user is invited not to *act* but to *attend*. To witness motes settle. To watch a forest's slow ledger update itself once every dawn.

There is an undertone of **hauntological tenderness** — the feeling that this dashboard was kept by someone who loved the dark and is no longer here, and the panels are still warm. Nothing is broken; everything is patient. The visitor is the inheritor of a long, slow vigil.

## Layout Motifs and Structure

The structural commitment is **dashboard** — but reinterpreted as an **18th-century cabinet of curiosities turned into a sensor wall**. The dashboard pattern is at 25% in the corpus, almost always rendered as a SaaS analytics surface (cool grays, KPI tiles, line charts, sidebars). chikayami.com inverts this entire register: same modular grid logic, but rebuilt in **vellum, brass, lichen, and lampblack ink**.

**Macro composition:**

The page is one full-bleed dark canvas — `#0B1410` deep forest pitch — that fills the viewport and never scrolls into a "next page." Instead, the canvas is a **fixed cabinet wall of 18 panels** arranged in a deliberately irregular 5×4 modular grid (some panels span 2×1, one spans 2×2, one is a slim 1×3 vertical column, one is a single 1×1 brass keyhole). The grid is asymmetric in the manner of a 1740 Wunderkammer plate: dense, balanced, never repetitive, never quite aligned to a clean column.

**Panel anatomy** (each panel obeys the same five-zone constitution, like cells in a botanical taxonomy):

1. **Cartouche** (top, ~16% of panel height): an etched plate ribbon containing the panel name set in small caps Baskerville italic, plus a Roman numeral.
2. **Glass** (the main reading surface, ~68%): a softly translucent vellum field where the panel's content lives — a slow line graph of "particles per cubic meter," a list of moth species observed last night, a long footnote on the etymology of a Yakushima moss, a live-counting tally of dewpoints.
3. **Apparatus** (left or right margin, ~10%): a hand-drawn brass instrument — a barometer needle, a sextant arc, a tuning fork, a candle wick — that *measures* the data in the glass. The needle moves on scroll-triggered arrival.
4. **Marginalia** (bottom strip, ~4%): a single line of marginal annotation, set tiny, in italic, often in Latin or Japanese romaji — *e.g. "noctes serenae"*, *"yami no fukasa: san"*.
5. **Particle layer** (across the panel, behind the glass): drifting abstract-shape motes — the dashboard's signature texture (see Imagery).

**Grid layout (desktop, 1440px reference):**

```
┌──────────────┬──────────┬──────────────────────┐
│  I  Atlas    │ II  Hour │  III  Bestiary       │
│  (2×1)       │ (1×1)    │  (2×1)               │
├──────────────┼──────────┼──────┬───────────────┤
│  IV  Index   │ V  Pith  │ VI   │  VII  Specie  │
│  (1×2 tall)  │ (2×2)    │ Key  │  (1×1)        │
│              │ HERO     │(1×1) ├───────────────┤
│              │          │      │  VIII  Pollen │
│              │          │      │  (1×1)        │
├──────────────┼──────────┴──────┼───────────────┤
│  IX  Moss    │  X  Lunation    │  XI  Dewpoint │
│  (2×1)       │  (2×1)          │  (1×1)        │
├───┬──────────┼─────────────────┼───────────────┤
│XII│ XIII     │  XIV  Footnotes │  XV   Dawn    │
│Wax│ Coda     │  (2×1)          │  XVI  Vigil   │
│1×3│ (1×1)    │                 │  XVII Margin  │
│v  ├──────────┼─────────────────┤  XVIII Errata │
│   │ stacked smalls below       │  (4 stacked)  │
└───┴──────────┴─────────────────┴───────────────┘
```

The hero panel **V — Pith** (the 2×2 center-left) holds the day's primary observation: a single illuminated initial letter four columns tall, set in Baskerville, with a marginal gloss running down its right edge in a column 14ch wide.

**Mobile collapse:** the cabinet does not stack vertically into a generic single column. Instead, each panel becomes a *card in a horizontal carousel of cabinet drawers*, swipeable left-to-right, with the brass apparatus rendered above and the marginalia below. The user pulls drawers open, like consulting a herbarium.

**Negative space rule:** between panels, a 1px hairline of `#3A4A3A` dim verdigris with a 0.5px lampblack inner shadow — the panel "frames" — and outside that, a 12–16px gutter of pure canvas where particles drift uninterrupted across the full grid. The particle layer is *continuous across all panels*: motes do not respect frames. This is the critical maximalist gesture — every panel is bordered, but every particle is free.

## Typography and Palette

**Typefaces (Google Fonts only, all verified available):**

- **`Libre Baskerville`** (regular 400, italic 400, bold 700) — the principal voice. Libre Baskerville is the closest Google Fonts route to the *baskerville-refined* register: high stroke contrast, gentle bracketed serifs, generous x-height, eyes that are steady and a little melancholy. Used for ALL display headings, all body prose, all marginalia. This is a single-family typographic regime — the "refinement" of baskerville-refined is achieved through *weight, italic, scale, and tracking*, not through type-mixing. (At 4% in the corpus, baskerville-refined is genuinely underused; this design treats it not as accent but as constitution.)
- **`IM Fell DW Pica`** (regular, italic) — used **only** for the Roman numerals in cartouches and the small Latin marginalia. IM Fell brings 17th-century printing-press grit — slightly inked-in counters, irregular baselines — that anchors the page in *print history* without overwhelming Baskerville's calm.
- **`Cormorant Infant`** (italic 300) — used **only** for the single illuminated initial in panel V (the "Pith"). Set at 220px, in `#A8C8A8`, with a hand-drawn vine-and-moth filigree wrapping its left stroke.

**Type scale (modular, ratio 1.333 perfect fourth):**
- Body: 17px / 1.65 line-height / `#D8DCC8`
- Marginalia: 12px italic / 1.45 / `#7A8A7A`
- Panel cartouche: 14px small-caps tracked +0.18em / `#B0A878`
- Section headings (within glass): 22px / 1.25 / `#E0DCBE`
- Pith initial: 220px Cormorant Infant italic / `#A8C8A8` with `#3D5A3D` outer glow
- Roman numerals: 18px IM Fell / `#8A7B58`

**Palette — forest-green (3% in corpus, deeply underused):**

Eight-color palette, layered in tonal pairs:

- `#0B1410` — **Pitch Cedar** — the deep canvas, the void between the cedar trunks at 3 a.m.
- `#163022` — **Moss Floor** — the panel ground, the loam beneath the leaf litter
- `#2A4A38` — **Verdigris Ledger** — the panel framing line, oxidized brass on hardwood
- `#3D5A3D` — **Fern Mid** — the secondary line and gauge color
- `#A8C8A8` — **Phosphor Lichen** — the bioluminescent accent, used for the Pith initial and live-data needles
- `#D8DCC8` — **Vellum Body** — the warm parchment-grey of all body prose
- `#B0A878` — **Brass Cartouche** — the etched plate gold, used in cartouches and apparatus
- `#7A0F1A` — **Deep Madder** — the sole warm accent, used *exclusively* for one marker per visit: a single drop of dye on a single dewpoint reading, marking "today"

The palette is **deliberately avoidant of pure black, pure white, and any cool grey**. Every "neutral" is biased green or warm; the page should feel as if it were lit by a single oil-lamp three feet behind the user's left shoulder.

**Hierarchy of glow:** only `#A8C8A8` Phosphor Lichen and `#7A0F1A` Deep Madder are permitted to emit (use `text-shadow`, soft `filter: drop-shadow`); everything else is matte vellum or matte ink. This is critical — maximalism risks visual cacophony, and the rule "only two colors glow" enforces orchestration.

## Imagery and Motifs

The visual world is composed entirely of **abstract-shapes** (literally 0% in the corpus prior to this design — a genuinely new imagery primary) and **particle-effects** (also 0% as a motif primary). This is an unusual double-zero: chikayami.com is the first design in the corpus to make abstract shapes and particle effects its constitutional imagery.

**Zero photography** (98% of the corpus uses photography — its exclusion is the largest single deviation). Zero 3D renders. Zero stock. Zero icons from icon libraries. Every visual element is hand-composed SVG, CSS gradient, or canvas-rendered particle.

**1. Particle layer (the cabinet's drifting medium).**
A `<canvas>` the size of the viewport, fixed-position, z-index 1, behind every panel's glass. On it, **between 240 and 320 individual motes** drift in continuous slow Brownian motion — never more than 0.15px per frame translation. Motes are of seven shape archetypes:

- **Spore** — soft 4px radial gradient blob, `#A8C8A8` 30% opacity core fading to transparent
- **Pollen** — 2px crisp circle, `#B0A878` 60% opacity
- **Husk** — irregular 6px asymmetric quadrilateral (each rendered with a unique seed), `#3D5A3D` 40%
- **Fleck** — 1px dot, `#D8DCC8` 80%, the brightest motes
- **Sigil** — a tiny rotating SVG glyph (a stylized cedar leaf, a moth wing edge, a fern frond curl, a moss tuft), 8–10px, `#7A8A7A` 50%, rotating at 0.04°/frame
- **Pith** — 12px soft-edged irregular blob, `#163022` 60%, the rare "shadow motes" that drift behind the lighter ones
- **Ember** — 1.5px `#7A0F1A` 90%, only **three** of these in the entire viewport, drifting almost invisibly — the cabinet's living heartbeats

Motes obey **gentle gravity wells** at the four corners of the hero panel V, and a **scroll-triggered re-attractor** at the panel currently in view. As the visitor scrolls or hovers a panel, motes within ~200px of that panel's center accelerate toward it for ~1.4s then resume Brownian drift. This is the design's signature interaction.

**2. Abstract-shape compositions (the panel glass content).**
The data inside each panel is rendered not as conventional charts but as **abstract-shape compositions** — geometric figures that *behave* as data visualization but read as botanical-illuminated diagrams:

- **Atlas (panel I)** — a slow rotating clockwise spiral of 12 nested polygons, each polygon's vertices set by the day's atmospheric pressure readings. The spiral inhales on scroll-arrival.
- **Bestiary (panel III)** — 24 hand-drawn moth-wing silhouettes (each a unique closed SVG path I-XXIV) arranged in a Voronoi tessellation, each cell's color hue keyed to the moth's nocturnal abundance.
- **Index (IV)** — a fern-frond-shaped tree-of-contents, where each frond pinna is a clickable link. The frond itself is a single SVG path with a `path-draw-svg` animation revealing 1 pinna per 320ms on arrival.
- **Lunation (X)** — eight overlapping irregular moon-disc abstractions, each a layered radial gradient with a slight offset, drifting at 0.5°/sec, representing the lunar cycle as an abstract geometric chord.
- **Dewpoint (XI)** — a vertical column of 32 small irregular convex blobs (drops), each blob's vertical position set by the hour's humidity. The single madder-red ember-drop marks "now."
- **Wax (XII, the slim 1×3 vertical)** — a single column of stacked candle-wax pools, each pool an asymmetric blob, gradient from `#B0A878` rim to `#163022` core. Wax pools accumulate over the visit — every 20 seconds spent on the page, a new wax pool forms at the bottom and the column slowly rises.

**3. Brass apparatus illustrations.**
Each panel's margin holds one `apparatus.svg` — a hand-drawn (at 240×80, simplified) instrument:
- Barometer (I), Hourglass (II), Calipers (III), Quill (IV), Astrolabe (V), Sextant (VI), Tuning fork (VII), Pollen spoon (VIII), Bellows (IX), Compass rose (X), Pipette (XI), Wick-trimmer (XII), Plumb-line (XIII), Inkwell (XIV), Candle stub (XV), Vigil-lamp (XVI), Marginalia pen (XVII), Errata seal (XVIII).
Each is monochrome `#B0A878` linework, 1.2px stroke, with a single `#A8C8A8` micro-detail (a glint, a spark, a drop) that *animates on scroll-trigger*: the barometer needle rises, the hourglass sand falls, the candle flame flickers, the pendulum swings.

**4. Vellum surface texture.**
Each panel's glass uses a CSS multi-layer background:
- Base: `#163022`
- Layer 1: a fixed 1024×1024 SVG `<filter>` `feTurbulence` baseFrequency=0.9, numOctaves=2, opacity 0.04 — vellum tooth
- Layer 2: a radial gradient from upper-left, `#1F3A28` 0% to transparent 60%, simulating oil-lamp fall
- Layer 3: an inner 1px `#2A4A38` ridge, an outer 0.5px `#0B1410` shadow — the cabinet seam

**5. Marginalia rules.**
Every panel has *one and only one* line of italic marginalia. Sources:
- Latin (`noctes serenae`, `sub umbra`, `lente lucet`, `silentium custos`, `vide infra`)
- Japanese romaji (`yami no soko`, `kage no koe`, `kasuka na hikari`, `chika ni nemuru`)
- English fragments (`as the cedars exhale`, `kept in trust`, `slow and certain`, `the third firefly returned`)
The marginalia rotates **once per dawn** — the page reads its own clock and on each calendar day refreshes its 18 marginal lines from a 540-line corpus stored in `/marginalia.json`.

## Prompts for Implementation

Build chikayami.com as **a single self-contained HTML document, one stylesheet, one ES module, one canvas particle engine, and an asset triad: one SVG sprite-sheet `apparatus.svg` (all 18 instruments), one SVG sprite-sheet `motes.svg` (all 7 mote archetypes), and one JSON corpus `marginalia.json`.** No framework. No bundler. No third-party analytics. No tracker. No cookie banner — there is no cookie. No CTA. No pricing block. No stat-grid in the SaaS sense. No newsletter form. The page does not *sell* anything; it is a vigil that someone left running.

Bias every implementation decision toward **storytelling-first, narrative-immersive, full-screen, scroll-triggered revelation**. The visitor opens the cabinet; the cabinet attends to itself; nothing demands a click.

**Document structure:**
- One semantic `<main>` of `role="document"`, containing `<article>` per panel, semantic `<figure>`/`<figcaption>` for each apparatus, `<aside>` for marginalia.
- Headings: a single `<h1>` (visually hidden, "chikayami — a near-dark cabinet"), `<h2>` per panel cartouche.
- The canvas is `<canvas id="motes">` at the top of `<body>`, fixed, `z-index: 1`, `pointer-events: none`.
- All panels live in a CSS Grid container at `z-index: 2`; the apparatus animations are inline SVGs at panel z-index 3.

**CSS Grid (desktop):**
```css
.cabinet {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  grid-template-rows: repeat(16, 1fr);
  gap: 14px;
  padding: 16px;
  min-height: 100vh;
}
/* Panels then assigned via grid-area to enforce the asymmetric 18-panel plan */
```

**Animation language — scroll-triggered reigns supreme** (16% in corpus, deliberately underweighted globally; here it is constitutional):

- **Per-panel arrival.** Each panel is observed by an `IntersectionObserver` with `threshold: 0.35`. On crossing, three things happen, staggered:
  1. **t=0ms**: cartouche cross-fades in, Roman numeral path-draws (450ms cubic-bezier(0.22, 0.7, 0.35, 1))
  2. **t=240ms**: glass content reveals — for charts/spirals, an inner `clip-path: inset(100% 0 0 0)` opens to `inset(0 0 0 0)` over 720ms; for prose, a soft 600ms fade with 14px upward translate
  3. **t=520ms**: apparatus animates — the barometer needle sweeps, the hourglass empties, the candle ignites, etc., each 800ms with a domain-specific easing
- **Particle re-attractor on scroll.** As panels enter view, motes within their ~200px radius receive a gentle attraction impulse for 1.4s.
- **Pith initial filigree.** The hero panel's giant initial has a vine-and-moth SVG filigree drawn in 1.8s using `pathLength` + `stroke-dashoffset` choreography on first arrival.
- **Wax accumulation.** The Wax panel adds a new wax pool every 20s of cumulative page-visible time. Pools never disappear — even on revisit (persisted in `localStorage` keyed by ISO date).
- **Lunation drift.** The eight moon discs rotate continuously at 0.5°/sec; this is the only animation that *never stops*. Everything else is scroll-summoned and at rest.
- **Dawn rotation.** At local 05:30, all 18 marginalia lines refresh. If the visitor is on the page across the rotation, marginalia cross-fades line-by-line over 18 seconds (one per second), staggered diagonally across the cabinet.

**Cursor.** No cursor-follow. No magnetic buttons. No tilt-3d. The cursor is the cursor. The maximalism is in the *content*; the interaction is *minimal*. (This is the resolution of the seed's two extremes: maximalist aesthetic + minimal tone = dense visuals, restrained interaction.)

**Type rendering.**
- All Baskerville body uses `text-rendering: optimizeLegibility`, `font-feature-settings: "kern" 1, "liga" 1, "onum" 1, "dlig" 1`. Old-style figures everywhere — the dashboard counts in 1234567890 with descending 4 and 7. This single feature does enormous typographic work for the period feel.
- The Pith initial uses `font-feature-settings: "swsh" 1, "calt" 1` for the swash forms.
- Italic marginalia uses tracking +0.04em.

**Performance discipline.** 
- The canvas redraws at 30fps target (32–40ms frame budget), uses `requestAnimationFrame`, and respects `prefers-reduced-motion: reduce` by halving particle count and disabling Brownian drift (motes simply *exist*, statically placed).
- Particle positions are seeded by `crypto.getRandomValues` once on load — no Math.random — so the same visitor sees stable composition during a session.
- Apparatus SVGs are inline (no fetch); marginalia.json is fetched once.

**Avoid absolutely:**
- CTA-heavy layouts. There is no "Get Started." There is no button at all on first viewport.
- Pricing blocks. There is nothing for sale.
- Stat-grids in the marketing sense. The "stats" exist but are abstract-shape diagrams, not "12,000+ users" cards.
- Hero video. Hero photo. Hero gradient swoosh. The hero is the Pith panel, an illuminated letter on vellum.
- Newsletter form. Modal. Cookie consent. Chat bubble. Social proof carousel.
- Light mode. The site does not have a light theme. The dark *is* the design.

**The single CTA, if it must exist:** a single line of marginalia in panel XVIII reading *"if you wish to keep vigil with us — leave a candle"* which, on click, opens a `mailto:` to `vigil@chikayami.com`. That is the entirety of the conversion funnel. It is a vigil, not a SaaS.

## Uniqueness Notes

This design commits to the following differentiators, chosen explicitly to avoid duplicating the 120 prior CMassC sites and to lean hard into the underused dimensions surfaced by the frequency analysis:

1. **Triple-zero claim on imagery + motifs.** Both *abstract-shapes* (0% in 120 prior designs as imagery primary) and *particle-effects* (0% as motif primary) are constitutional, not accent. Photography is excluded entirely (against a 98% corpus default — the largest single deviation). This is the first chikayami-cabinet imagery vocabulary in the registry.

2. **Maximalism with minimal tone — a deliberate contradiction.** Maximalist aesthetic is at 6% in the corpus, almost always paired with energetic/playful/bold-confident tones. chikayami.com pairs maximalism with the *minimal* tone — which exists nowhere else in the corpus as a paired axis. The result is **whisper-density**: panels are richly furnished, but the room is silent. No prior design holds this contradiction.

3. **Forest-green palette discipline (3% corpus).** Forest-green is genuinely rare; the few prior uses lean cottagecore-bright or jewel-deep. chikayami.com claims the *near-dark* end of forest-green — pitch cedar `#0B1410` and moss floor `#163022` as the operating registers, with phosphor-lichen `#A8C8A8` as the only emissive green. No prior design uses this specific tonal gradient.

4. **Baskerville-refined as constitutional, not accent.** At 4% corpus, baskerville-refined is normally a hero-headline accent. Here it is the *only* serif voice, carrying body, marginalia, hero, and cartouche through weight + italic + scale alone. A single-family typographic regime is itself rare in the corpus.

5. **Dashboard as wunderkammer, not as SaaS.** The dashboard layout (25% corpus) is universally rendered in the corpus as analytics-board territory: cool greys, KPI tiles, line graphs, sidebars. chikayami.com retargets the dashboard as an 18th-century cabinet of curiosities — same modular logic, opposite material register. The 18 named panels (Atlas, Hour, Bestiary, Index, Pith, …) are taxonomic, not metric.

6. **Scroll-triggered reigns; no cursor-follow.** While the corpus leans heavily on cursor-follow (75%) and magnetic (65%) interactions, chikayami.com refuses both — the cursor is left alone. All motion is *scroll-triggered* (16% corpus), making this design's interaction surface dramatically restrained relative to the median. This is the maximalism-meets-minimalism resolution at the interaction layer.

7. **The wax panel persists across visits.** A single panel (XII Wax) accumulates over time and is persisted in `localStorage`. This is the only "user state" in the design — and it is not engagement metrics; it is *time spent in vigil*. No prior design treats persistence this way.

8. **Single madder-red ember as the only warm accent.** In a palette of eight, *exactly one* color (`#7A0F1A` Deep Madder) glows warm, used on *exactly one* dot per visit (the "now" marker on the Dewpoint panel). The discipline of "one warm point in the entire dark-green forest" is unique in the corpus.

**Chosen seed (from assignment):** aesthetic: maximalist · layout: dashboard · typography: baskerville-refined · palette: forest-green · patterns: scroll-triggered · imagery: abstract-shapes · motifs: particle-effects · tone: minimal.

**Avoided patterns (from frequency analysis):** hand-drawn aesthetic (95%, oversaturated), photography imagery (98%, oversaturated), warm/gradient palette (95%/96%, oversaturated), mono typography (95%, oversaturated), parallax (94%, oversaturated), stagger / spring / cursor-follow (75%+, oversaturated), full-bleed (90%, oversaturated), centered (82%, oversaturated), card-grid (75%, oversaturated). chikayami.com touches none of these as primaries — by deliberate construction.
<!-- DESIGN STAMP
  timestamp: 2026-05-09T12:12:10
  domain: chikayami.com
  seed: explicitly to avoid duplicating the 120 prior cmassc sites and to lean hard into the underused dimensions surfaced by the frequency analysis:
  aesthetic: chikayami.com is a **maximalist nocturnal observatory of the under-forest** — a ...
  content_hash: 167974a269c6
-->