# Design Language for chika.quest ## Aesthetics and Tone chika.quest is staged as **the long, sodium-quiet corridor of an underground gem-cabinet — a Wunderkammer reimagined as a Hammershoi-grey museum hallway, one storey beneath street level, where each lit vitrine contains a single hand-cut pixel-mosaic of a precious stone, captioned in cold-pressed letterpress serif by a curator who is no longer in the building**. The Japanese word *chika* (地下) means "underground / subterranean / beneath the surface," and the *quest* is the visitor's slow lateral walk past the cabinets. Two registers are deliberately fused that almost never meet on the web: **the sub-pixel grain of 8-bit/16-bit pixel-art (4% in the registry — actively claimed)** and **the high-contrast, hairline-serifed dignity of an early-twentieth-century museum monograph (elegant-serif, 4% in the registry — also actively claimed)**. Pixel-art is dethroned from its usual register — it is *not* nostalgic Nintendo cuteness, *not* arcade neon, *not* indie-game cheek. Each pixel cluster on this page is **a gem-cut mosaic at 8px/cell on a 24-cell square**, hand-placed, reading at the same compositional weight as a Vermeer letter held to a north window. The light is curatorial, not playful. The voice is **professional (4% in the registry — claimed)**: footnoted, restrained, art-historical, written in the flat declarative tense of a vitrine card. The mood is *silent vault* — the building is closed, the docent has gone home, only the case-lights and the faint hum of HVAC remain. Where most pixel-art sites shout, chika.quest **whispers in mineral**: emerald, garnet, sapphire, citrine, amethyst, each rendered as a 24×24 chunk of saturated jewel-tones (3% in the registry — claimed) glowing inside a pencil-grey marble corridor. The tone never breaks into whimsy and never collapses into sterile minimalism; the entire site is the slow heartbeat of a curator pausing at a vitrine, reading the card, walking on. Nothing flashes. Everything reveals slowly, by lateral glide. The pleasure on offer is not entertainment but **connoisseurship** — the visitor is treated as a peer, given full latitude to read, re-read, and walk back. ## Layout Motifs and Structure The page is **a single horizontal-scroll museum corridor (8% in the registry — claimed) ≈ 960vw wide**, advancing left to right across **twelve registration-pinned vitrine bays**. Vertical scrolling is locked at the document level (`html, body { overflow-y: hidden; height: 100vh; }`) and the page progresses horizontally by mouse wheel, two-finger trackpad gesture, arrow keys, page-up/page-down, and a custom edge-drag affordance. Each vitrine bay is **80vw wide × 100vh tall**, separated by a **flat 20vw wall-pier of unbroken Hammershoi grey** so the eye gets a true rest between exhibits — this is the single most aggressive deviation from the dominant CMassC pattern of full-bleed packed canvases. The corridor's structural backbone is **layered-depth (10% in the registry — claimed)** rendered as **five parallax layers** sliding past each other at deliberately different rates: Layer-1 the polished marble floor (slowest, 0.15× translation); Layer-2 the Hammershoi-grey wainscot (0.35×); Layer-3 the bronze-rail picture-rail running the full 960vw at fixed dado height (0.55×); Layer-4 the vitrines themselves (1.00×, the visitor's ground truth); Layer-5 the pixel-art gem inside each vitrine (1.20×, hovering very slightly forward of glass). The Layer-3 picture-rail is the spine of the entire site — a single continuous bronze line at 36% of viewport-height with hand-engraved gallery numerals (I, II, III … XII) marking each bay; the rail does not move with the parallax stack — it floats at exactly 0.55× so the cadence of numerals reveals slightly faster than the floor and slightly slower than the vitrines, giving the corridor its slow museum gait. **Within each vitrine bay** the composition is asymmetric editorial: the pixel-art gem occupies a 384×384 px square set 12% in from the bay's left edge and centered vertically; the curatorial card occupies a 28-em column set against the bay's right pier, top-aligned at 22% from the top, body text justified, hanging quotes, true small-caps section heads. **Bay-01 (Foyer)** carries the masthead — a 192px-tall pixel rendering of the kanji 地下 ("chika"), each glyph composed of 8px square cells at 24×24, surrounded by a hairline serif rendering of the word *quest* in 96px Cormorant Garamond italic, set baseline-aligned with the pixel kanji; this single pairing is the design's thesis statement. **Bay-12 (Cartouche)** is a closing colophon, again pixel-mosaic + serif, listing the twelve mineralogical specimens in the order encountered. **Bays 02–11 each present one gem** — Emerald, Garnet, Sapphire, Citrine, Amethyst, Tourmaline, Topaz, Aquamarine, Spinel, Peridot, Tanzanite, Onyx — with a single curatorial paragraph (60–90 words), provenance line, hardness scale, refractive index, and a pixel-mosaic crystallographic diagram. Negative space is generous, almost severe: no card, no CTA, no pricing, no stat-grid, no testimonial block. The visitor is trusted to read. ## Typography and Palette **Typefaces — Google Fonts only, three families, used with curatorial restraint.** - **`Cormorant Garamond`** (display + masthead + curatorial section heads). Cormorant is the most refined Garamond on Google Fonts — high-contrast, narrow apertures, hairline thins, italics that bow like calligraphy. Used at: 96px / 1.0 line-height for the *quest* italic in bay-01, set in italic 500; 64px / 1.05 line-height for each gem name in bays 02–11, set in roman 500 small-caps; 28px / 1.15 line-height for the colophon list in bay-12; 14px / 1.3 line-height for hanging marginalia in italic 400. Always optical-justified, never centered except inside the bay-01 pairing. - **`EB Garamond`** (curatorial body — the vitrine-card prose). EB Garamond is sturdier than Cormorant, designed for body weights, and reads beautifully at 16–18px on a museum-grey background. Used at 17px / 1.55 line-height for all curatorial paragraphs, justified with hyphenation, true italics for foreign mineralogical terms (*beryl*, *corundum*, *cyclosilicate*), true small-caps for provenance ("BAHIA, BRAZIL"), 11px / 1.2 for footnotes in the bottom-right of each card. - **`VT323`** (the pixel-art counter-voice). VT323 is a single-weight bitmap font on Google Fonts that maps cleanly to the 8px cell grid; used **only** for the on-vitrine specimen tag — the three-line rectangular label that sits below each pixel-mosaic gem ("CAT. III · EMERALD · COL., MUZO"). At 11px (no anti-aliasing — `image-rendering: pixelated` and `font-smoothing: none`) this is the only typeface that touches the pixel art directly; everything else maintains a hairline serif distance from the pixels. The contrast — VT323 at 11px against EB Garamond at 17px — is the typographic *jewel-and-cabinet* relationship the entire page is about. No third sans, no condensed display, no script. The serif/pixel duet is the whole vocabulary. **Palette — jewel-tones (3% in the registry) lit against a curated Hammershoi-grey corridor.** Corridor / cabinet shell (≈ 88% of total ink): - `#D8D6D1` — *museum plaster* (the wall behind every vitrine; warm-cool grey, 4% blue cast) - `#BFBCB5` — *Hammershoi grey* (the wainscot dado, the floor in shadow) - `#3E3A35` — *graphite* (all serif body text — never pure black; near-black with a paper-warm cast) - `#7C6F5A` — *aged bronze* (the picture-rail, the bay numerals, the keyline borders around each vitrine) - `#F5F2EC` — *cabinet-paper* (the curatorial card stock; warm cream, the only surface for body text) Twelve specimen accents — one jewel per bay, each used **only** in its own bay (the discipline that makes the corridor feel composed rather than chaotic): - `#0F6B4A` — Emerald (bay 02) - `#7A1432` — Garnet (bay 03) - `#103D7A` — Sapphire (bay 04) - `#C9A227` — Citrine (bay 05) - `#5B2A82` — Amethyst (bay 06) - `#B43A6E` — Tourmaline / rubellite (bay 07) - `#D4801C` — Topaz / imperial (bay 08) - `#3A8AA8` — Aquamarine (bay 09) - `#9C2E3D` — Spinel (bay 10) - `#7AAA34` — Peridot (bay 11) - `#3D2C8C` — Tanzanite (bay 12 colophon ink-cap) - `#1A1815` — Onyx (the dimming light at the end of the corridor) Ratios per bay are strict: 88% corridor neutrals, 6% specimen jewel, 4% bronze keyline, 2% paper-cream text reserve. The single specimen jewel **only** appears inside that bay's vitrine and on that bay's small-caps gem-name; the next bay returns to neutrals before introducing its own jewel. The corridor never displays two jewels at once. ## Imagery and Motifs The visual world is built from four motif families, **all hand-composed from CSS, SVG, and a single 16-color indexed-PNG sprite sheet**. Zero photography (98% in the registry — its exclusion is, by far, the largest single deviation). Zero 3D. Zero stock. Zero icon-sets. Zero Lottie. Zero video. **1. Pixel-mosaic gemstones (the imagery thesis: pixel-art + mixed-media, 4% each in the registry).** Twelve hand-placed 24×24-cell pixel illustrations of cut and uncut mineral specimens, rendered at exactly 8px per cell (so the rendered square is 192×192 native, displayed at 384×384 with `image-rendering: pixelated` for a crisp 2× upscale). Each gem uses a strict 16-color indexed palette derived from its own jewel hue plus eleven graduated shades, three highlights, one shadow-edge, and one cool-back rim — never more than 16 colors per gem, no anti-aliasing, no dithering except a single canonical 50% checker for transitional faces. The cut diagrams reference real lapidary terminology — table, crown, girdle, pavilion, culet — and each gem is rendered in its historical "type cut": the emerald in step-cut, the garnet in rose-cut, the sapphire in cushion, the citrine in radiant, the amethyst in trillion, the tourmaline in baguette, the topaz in oval-brilliant, the aquamarine in emerald-cut (a pleasing mineralogical pun), the spinel in old-mine cushion, the peridot in pear, the tanzanite in trilliant, the onyx as rough cabochon. **The mixed-media stamp** is a hairline-engraved bronze cartouche (SVG) framing each pixel mosaic — a 1.5px stroke of `#7C6F5A` traced along the vitrine's interior edge, acanthus terminals at each corner, register marks `+` at midpoints. The bronze SVG is vector-crisp and the gem inside is intentionally pixelated; the contrast is the entire image. **2. Layered-depth corridor (motif: layered-depth, 10% in the registry — claimed).** The five parallax layers (floor, wainscot, picture-rail, vitrines, gems) are constructed entirely in CSS — no images for the architecture. Layer-1 (floor) is a 12% / 88% horizontal gradient of `#BFBCB5` to `#D8D6D1` with a subtle `linear-gradient` perpendicular suggesting parquet seams every 96px. Layer-2 (wainscot) is a flat fill of `#D8D6D1` with a 1px hairline `#7C6F5A` chair-rail at 64% viewport-height. Layer-3 (picture-rail) is the bronze line at 36% viewport-height, 2px tall, with engraved Roman numerals every 80vw set in Cormorant Garamond small-caps in `#7C6F5A`. Layer-4 (vitrines) is a 60vh-tall recessed plinth-and-glass element per bay, drawn entirely in CSS using `box-shadow` insets to suggest interior depth and a 6px `#7C6F5A` keyline frame; the glass face is a 0.04-opacity white overlay with a single hairline highlight from upper-left to mid-right. Layer-5 (gem) is the pixel-mosaic image, floated 0.20× faster than the vitrine to give it the slight forward presence of a freestanding specimen on a velvet block. **3. Slide-reveal letterpress cards (patterns: slide-reveal, 3% in the registry — claimed).** The curatorial card in each bay is hidden until the bay reaches the visitor's central viewport position, then the card slides up from below the picture-rail by 24px with a 600ms cubic-bezier `(0.16, 0.84, 0.32, 1)`, while the gem performs a complementary slide: it descends 12px from above and settles at its plinth position. The two motions arrive at the same registration mark, like two halves of a binding closing. There is no fade-in; the letterpress card *appears* with a subtle 1.5px shadow-stamp suggesting it has just been set down on the corridor's bronze-rail. **No other reveal patterns are used on the entire site** — no parallax-based fade, no scroll-trigger blur, no typewriter effect, no underline-draw. The slide-reveal is the only animation grammar, repeated identically twelve times. This is the discipline that makes the underused pattern feel like the *design's signature*, not a sprinkle. **4. Cartouche marginalia (motif: marble-classical & vintage, mixed against pixel-art).** Each curatorial card carries a single hand-engraved bronze cartouche in its top-right corner — a 32×48px SVG of a stylized acanthus or palmette holding the bay's Roman numeral. These are vector-crisp and intentionally art-historical, the *exact opposite* of the pixel mosaic; the page's compositional rhyme is **bronze-engraved cartouche above pixel-mosaic gem**, the formal old-world frame holding the sub-pixel modern jewel. Corner cartouches: I = palmette, II = laurel, III = oak, IV = acanthus, V = ivy, VI = pomegranate, VII = lotus, VIII = lily-of-the-valley, IX = thistle, X = bay-leaf, XI = grape-vine, XII = closed laurel wreath (the colophon). ## Prompts for Implementation Build chika.quest as **one HTML document, one CSS file, one small ES module, and two asset files: `gems.png` (a 16-color indexed sprite-sheet of all twelve pixel-mosaic gems on a 96×288 native grid, ~14kb) and `cartouches.svg` (a single combined SVG of the twelve corner cartouches as `` elements, ~9kb)**. No framework. No build step beyond a single esbuild pass. No bundler beyond that. No React. No SPA. No router. No Lottie. No WebGL. No ``. No video. No webfont self-host (use the Google Fonts CDN). The entire experience is static SVG + CSS gradients + IntersectionObserver + a single horizontal-scroll handler. Bias every implementation decision toward **stillness, weight, and the lateral glide of a museum walk**. **Storytelling frame.** Treat the page as **one continuous twelve-act curatorial sentence**, lateral, hushed. Bay-01 is the foyer ("you have descended"); bays 02–11 are the twelve mineral exhibits in mineralogically-canonical hardness order (peridot, emerald, tourmaline, topaz, citrine, amethyst, aquamarine, spinel, garnet, tanzanite, sapphire, onyx); bay-12 is the cartouche-colophon ("you have ascended; thank you for the visit"). **There is no second page. There is no link out except a single hairline serif credit-line at the bottom-right of bay-12 to the curator's name.** No second view. No accordion. No modal. No tooltip. The horizontal corridor *is* the entire site. **Horizontal-scroll mechanics.** Implement with `transform: translateX(...)` on a single `
` element of width `960vw`, animated by a single requestAnimationFrame loop whose delta is the wheel-event-Y or arrow-key-step. Lock vertical scroll. Wheel-Y = lateral, with a 1.4× multiplier and an easing tail of 220ms after release. Trackpad two-finger horizontal swipes pass through directly. Arrow-keys advance one bay (80vw) with a single 700ms cubic-bezier `(0.4, 0.0, 0.2, 1)` — the "next vitrine" gesture. Page-up/page-down advance four bays. Home/End jump to bay-01 / bay-12. Provide a thin 2px bronze progress-rail at the bottom of the viewport showing position-along-corridor; on the rail, twelve hairline tick-marks at the bay positions, each labeled with its Roman numeral in 9px Cormorant small-caps `#7C6F5A`. **Slide-reveal scheduler.** A single IntersectionObserver watches each bay; when a bay's center crosses the viewport's 50% line, both the gem (top→down 12px) and the card (bottom→up 24px) slide into place over 600ms with the museum-cadence cubic-bezier `(0.16, 0.84, 0.32, 1)`. No reveal triggers more than once per page-load; on horizontal back-scroll, the reveal stays settled (this is a *museum*, not a magic trick). Disable the reveal on `prefers-reduced-motion: reduce` — all bays render in their final settled position. **Pixel-mosaic rendering.** All pixel-art images use `image-rendering: pixelated` and `image-rendering: crisp-edges` (with `image-rendering: -moz-crisp-edges` fallback). The sprite-sheet is loaded once and each gem is shown via `background-image: url(gems.png); background-position: -px -px;` on a fixed-size container. Never re-color the sprite at runtime. Never animate the sprite. The gem stands still inside the vitrine. **Mood and silence.** The page makes no sound. The page never autoplays. The page never modal-popups. The page never asks for an email, a follow, a share, a like, a download. The visitor is a peer of the curator: literate, patient, lateral. **The page rewards reading, not skimming.** The curatorial cards are written in sentences a museum-monograph reader would expect — historical provenance, mineralogical detail, one quoted line from a 19th-century lapidary text per gem. The voice is professional, never breathless. The entire site can be experienced in seven minutes by a fast reader and twenty by a slow one; both are correct. **AVOID, with prejudice:** CTA buttons, pricing tiers, stat-grids, testimonial cards, newsletter modals, social-share rows, cookie banners visible in the design, animated gradient backgrounds, hand-drawn illustration, glassmorphism, photography of any kind, gradient meshes, 3D renders, watercolor, neon, dopamine palettes, cyberpunk visual energy, glitch effects (this is a *quiet* corridor, not a malfunctioning one), bento-box card grids, masonry layouts, dashboards, hero-dominant slabs, parallax-based fade-reveals, typewriter intros, magnetic buttons, cursor-follow particles. Most of these are top-quartile in the registry — their absence is the design. ## Uniqueness Notes This design commits to the following differentiators, chosen explicitly to avoid duplicating any other CMassC site and to lean hard into the underused patterns surfaced by frequency analysis: 1. **Pixel-art reframed as connoisseurship, not nostalgia.** Pixel-art sits at 4% in the registry, and where it appears it almost always plays in its expected register — playful, retro-arcade, indie-game cheek, 8-bit irony. chika.quest *inverts the entire affective frame*: the pixel mosaic is treated as the page's most precious image, lit like a Vermeer in a vitrine, captioned in art-historical Garamond, surrounded by hand-engraved bronze cartouches. The pixel is not a wink; it is the jewel. No other CMassC site uses pixel-art this way — pixels as connoisseur-grade still-life rather than retro decoration. 2. **Elegant-serif and pixel-art as a sustained typographic duet, not a costume.** Both elegant-serif (4%) and pixel-art (4%) are rare independently; their *combination* is, to my reading of the registry, unique. The duet is enforced at every level: Cormorant Garamond italic *quest* baseline-aligned with a pixel-mosaic 地下 in bay-01; EB Garamond justified body-text adjacent to a pixel crystallographic diagram in every middle bay; VT323 11px specimen tag inside the vitrine touching the pixel art directly while the surrounding card uses true Garamond small-caps. This is the only typographic conversation the page has, and it conducts itself with curatorial restraint. 3. **Twelve-jewel discipline against a 96% Hammershoi-grey corridor.** The jewel-tones palette (3% in the registry) is *not* deployed as a vibrating maximalist field; it is rationed at 6% per bay against an 88% corridor-neutral hold, with *one and only one* specimen jewel visible at any moment. The corridor never permits two jewels to compete. This converts jewel-tones from a "vibe" into a *sequencing protocol* — twelve sequential color-events, each with its own bay, each followed by a return to grey. No other CMassC site treats palette as exhibition cadence. 4. **Slide-reveal as the only animation, repeated identically twelve times.** Slide-reveal sits at 3% in the registry, and where it appears it is usually one of several patterns (parallax, magnetic, cursor-follow, etc.). chika.quest uses it *exclusively*: every reveal on the page is the same paired slide (gem from above, card from below, meeting at the picture-rail). Twelve identical performances — the discipline elevates an underused pattern into the design's signature gesture rather than a sprinkle. The 96% of CMassC sites that use parallax/stagger/spring/cursor-follow are deliberately not joined. 5. **Horizontal-scroll as museum corridor, not as gallery showcase.** Horizontal-scroll (8% in the registry) is most often used as a portfolio reel or product showcase. chika.quest re-frames the horizontal axis as **subterranean museum corridor with full 20vw wall-piers between bays** — true negative-space rest periods that no other horizontal-scroll site in the cohort affords. The visitor walks; they do not browse. 6. **Layered-depth as five parallax planes calibrated to a museum gait.** Layered-depth (10% in the registry) is usually rendered as 2–3 z-layered card stacks. Here it is **five distinct parallax rates** modeling the optical experience of walking past a corridor of vitrines: floor 0.15×, wainscot 0.35×, picture-rail 0.55×, vitrine 1.00×, gem 1.20×. The ratios are tuned to the slow, even cadence of a museum visitor — no layer is fast enough to feel like a video game, no layer is so slow it feels static. 7. **Professional tone (4% in the registry) sustained without a single CTA, pricing block, stat-grid, or testimonial card.** The "professional" tone in most of the cohort comes paired with conversion-focused conventions (CTA-heavy heroes, feature-grid trios, social proof bars). chika.quest demonstrates that *professional* can mean *museum-monograph professional* — restrained, footnoted, reading-as-pleasure — and can hold an entire site without a single conversion artifact. The page sells nothing. It exhibits. **Chosen seed (per assignment):** aesthetic: **pixel-art**, layout: **horizontal-scroll**, typography: **elegant-serif**, palette: **jewel-tones**, patterns: **slide-reveal**, imagery: **mixed-media**, motifs: **layered-depth**, tone: **professional**. All eight tokens are in the lower-quartile of the frequency analysis (each ≤ 10%, most ≤ 4%); their *combination* is the design's wager that under-rotated tokens, used with curatorial discipline, can produce a site that feels neither nostalgic nor minimalist nor maximalist nor any of the dominant CMassC registers — but instead occupies its own quiet sub-genre: **the underground gem-cabinet quest**. **Avoided patterns (from frequency analysis):** photography (98%), gradient palette (96%), warm palette (95%), mono typography (95%), hand-drawn aesthetic (95%), parallax-as-fade (94%), full-bleed layout (90%), centered layout (80%), stagger/spring/cursor-follow (76%/75%/73%), card-grid (73%), glassmorphism (68%), magnetic (62%), asymmetric-broken (53%), humanist sans body type (42%). None of these is permitted to dominate the page; several are excluded outright (photography, gradient, glassmorphism, hand-drawn, magnetic, cursor-follow, typewriter). The design is constructed largely *out of what the cohort has not yet tried*.