# Design Language for chika.trade ## Aesthetics and Tone chika.trade is **a sun-baked terracotta archive of underground exchange — a scholar's quiet meditation room dropped into the warm-magnetic ruin of a 1986 vaporwave shopping arcade in Tucson at 4:47 PM**. The domain reads three ways simultaneously: *chika* as the Japanese 地下 (underground, basement, the storeys beneath the visible city), *chika* as a personal name belonging to a thoughtful young archivist, and *trade* as the slow scholarly exchange of meaning between strata — what was buried, what was traded, what was inscribed on a clay shard before it was broken. The aesthetic resolves all three readings in one tone: a **sunlit subterranean reading room**, lit not by neon but by **a single low oblique sunbeam crossing a terracotta-tiled floor**, illuminating a slow drift of dust motes, a long table of broken pots and traded amphorae, and a single open codex pinned under a glass weight. The vaporwave inheritance is **stripped of its Miami-pink-and-cyan signal**. There is no chrome bust of Helios. There are no Roman columns rotating in a Bandcamp loop. What remains, deliberately, are vaporwave's **deeper structural gifts**: the warm low sun, the long horizontal void, the radiant lens-flare bloom across an empty pavement, the stillness of an empty mall after closing, the sense that you are alone in a beautiful and slightly faded space that someone has just left. Those structural gifts are crossed with the **Japanese 間 (ma) tradition of intentional negative space** — the page is mostly air, mostly terracotta wash, mostly silence, and the few inscriptions that occur are placed with the measured restraint of a scholar arranging clay tablets on velvet. The tone is **scholarly-intellectual** held at a contemplative half-whisper. No exclamations. No sales register. The voice is that of an underground librarian writing in pencil at the margin of a fired-clay catalogue: precise, footnoted, faintly melancholic, secretly devotional to its objects. Every word on the page should feel as if it had been **copied carefully by hand from a longer, lost manuscript** and placed in the negative space the way an archaeologist places a labelled potsherd on a museum tray: with white space around it, with reverence, and without the noise of marketing. The mood is **late-afternoon archive heat** — orange light slanting low, terracotta dust suspended in the beam, the small audible click of a single ceiling fan three rooms away, and the cool of fired clay against a forearm. There is a faint, persistent resonance of a vaporwave A-side slowed to half speed — but the music is in the next room, behind a closed door, and we do not hear it; we only feel the slowness it implies. ## Layout Motifs and Structure The structural commitment is **ma-negative-space** (only 5% in the registry — underused, actively claimed) executed as **a horizontal twelve-column terracotta plaza divided by a single low light-axis**. The page is *not* a vertical stack of sections. It is a **single very long horizontal reading-room floor**, scrolled vertically only because the screen forces it, with each "section" actually a **room** — a wide rectangular court of ma — that the reader walks through. - **The Plaza Grid.** The viewport is divided into twelve narrow columns of `1fr` each with a `4.7vw` gutter, and the *vast majority of cells are empty*. On a typical room, only **3 to 6 cells** carry any content at all. The remaining 90+% is intentional ma — a wash of terracotta paper-tone (#E8C9A8) with a single 1px hairline of #6B3A28 marking the **light-axis** at exactly 38.2% from the top of each room (the upper golden-section line, where the low sun would strike a far wall). - **The Light Axis.** Every room shares one continuous horizontal hairline at 38.2% top — a single unbroken pencil-stroke that crosses the entire scroll length of the document. Above this line lives **the inscription** (one short title, one small italic gloss). Below lives **the artefact** (one diagram, one fragment, one carefully-placed annotation). The axis is not decoration; it is the **horizon of the underground reading room**, and the entire layout grammar is "what is above the horizon and what is below it." - **The Seven Rooms.** The site is organised into seven rooms, each with its own architectural personality but all sharing the plaza grid and light-axis: 1. **Threshold (the entrance court)** — a near-empty ma, just the wordmark `chika.trade` set in `Cormorant Garamond` italic at 11vw, sitting in the lower-right quadrant of the screen, the rest of the room a single warm wash of #E8C9A8 with one **lens-flare bloom** rising from the lower-left margin. 2. **Catalogue (the long table)** — a horizontal scroll-snapped row of nine clay-tablet specimen cards, each card a 240×140 fired-terracotta tile holding one entry of the *underground trade ledger*. The reader scrolls down to enter, then scrolls horizontally to walk the table. 3. **Etymology (the codex room)** — three columns of negative space, with a single open-codex SVG pinned under a glass-weight motif at the centre, its right page blank, its left page carrying one paragraph of footnoted prose that auto-typesets character by character as the reader's gaze approaches (scroll-triggered, see Patterns). 4. **Stratigraphy (the cross-section)** — a vertical wall-section diagram in pure SVG, six terracotta strata stacked, each stratum carrying one annotation drawn out into the right margin by a single long hairline. 5. **Lexicon (the marginal glosses)** — a two-column ma layout in the *opposite* of magazine convention: the left 8 columns are entirely empty, the right 4 columns carry a vertical stream of marginalia, each gloss a 5–9-word fragment in italic Cormorant beside a small terracotta drop-cap. 6. **Correspondence (the letter under glass)** — a single 480×680 letter-card centered with `place-self: center`, wrapped in 60vh of ma above and below, carrying a single hand-set italic pseudo-letter in scholarly tone, one small wax-seal in deep burgundy at lower-right. 7. **Colophon (the closing inscription)** — the final room, a near-empty plaza with one sentence in 0.78rem mono pinned to the lower-right corner, naming the type, the colours, the seed, and the date — exactly the way a museum colophon credits the binder. - **No Hero. No Card-Grid. No Cards.** The page deliberately omits the corpus-saturated layout patterns — full-bleed (90%), centered (80%), card-grid (73%) — except in the catalogue room, where the card-grid is reframed as a **single horizontal row of clay tablets** rather than a 3×3 marketing wall. There is no CTA-pricing-stat-grid block anywhere on the page, in any room. - **The Sharp-Angle Cuts.** Every room corner is *not* rounded. The cells are cut at hard right angles, and where one stratum or annotation meets another the seam is a **15° wedge cut** (sharp-angles motif, 2% in the registry — underused). The Stratigraphy and Threshold rooms in particular are full of these sharp 15° wedges drawn in #6B3A28 hairline. ## Typography and Palette **Typefaces — Google Fonts only, all confirmed available:** - **`Cormorant Garamond`** (variable, weights 300–600, italic + roman) — the principal scholarly face, serving the **humanist** mandate (42% in the registry — common, but humanist-as-old-style-italic is rare, and Cormorant's swash italic in particular is uncommon in the corpus). Cormorant is the closest Google Fonts equivalent to the Garamond italics used by Aldine Press in the late-Renaissance Venetian editions of Cicero and Boethius — high contrast, narrow waists, long ascenders, calligraphic descenders, and an italic that *leans backward into the page* the way a scribe leans into the table. Used at: 11vw for the wordmark, 1.6rem italic for room titles, 1.0rem roman for body inscriptions, 0.92rem italic for marginal glosses. - **`Inter`** (variable, weights 400–600) — the **humanist** workhorse for any UI affordance: room labels, scroll-position pips, the small horizontal table of contents at the very top of the document, the colophon. Inter at 0.78rem with `font-feature-settings: "tnum", "ss01"` is used for everything that must be read quickly and dismissed. Inter is chosen over the corpus-saturated Space Grotesk and IBM Plex Mono because Inter is **silent**: it does not announce its own personality, it leaves the room to Cormorant, and it carries the scholarly-intellectual tone without ever raising its voice. - **`JetBrains Mono`** (single weight 400, italic + roman) — the colophon and the inscriptional *catalogue numbers*. Each clay tablet in the catalogue room carries a small JetBrains Mono catalogue number in the upper-left corner — `[CHIKA·TRADE / lot 0017 / stratum III]` — set at 0.72rem in #6B3A28. JetBrains is selected because its slight slab-leaning italic reads as **typewritten archive metadata** without the cyberpunk associations of IBM Plex Mono or the corporate-editorial feel of Roboto Mono. The three faces sit in a strict hierarchy: **Cormorant for the inscription, Inter for the apparatus, JetBrains Mono for the metadata**. There is no fourth face anywhere on the site. There is no display face. The wordmark itself uses Cormorant italic, refusing the "logo as separate face" convention. **Palette — terracotta-warm (4% in the registry — underused, fully claimed):** The palette is a single tonal family of **fired-clay warmth**, anchored by eight precisely-mixed terracotta values plus two cool counterpoints used sparingly as ink and glass. Every value references a real terracotta history — Roman Samian ware, Mexican saltillo, Korean onggi, Cretan pithoi. - `#E8C9A8` — **terracotta wash** — the primary page background; soft warm clay-cream, the colour of unfired Mediterranean clay before the kiln. Covers ~78% of the page. - `#D9A07A` — **fired body** — the principal terracotta solid, used for the clay-tablet cards in the catalogue room and the strata in the stratigraphy room. - `#B8704A` — **kiln-deepened** — the warmer mid-tone used for hover states on tablets and for the wedge-cuts. - `#8B4A2A` — **slip-glaze brown** — used for the sharp-angle hairlines and for inscriptional accents on tablets. - `#6B3A28` — **ink terracotta** — the principal text colour for body prose; never pure black, always the ink-like deep brown a scribe would mix from lampblack and red ochre. - `#3A2418` — **shade** — used only for the deepest shadow under the codex glass-weight and behind the wax-seal. - `#F4E2C8` — **paper-warmth** — the lightest terracotta tint, used for the open-codex page and the letter-card. - `#C77D5B` — **lens-flare warmth** — used as the saturated centre of every lens-flare bloom (see Imagery). Two cool counterpoints: - `#6E5E84` — **vaporwave dusk** — used at exactly four locations on the entire site: the lower-edge gradient of each lens-flare halo (where the warm bloom fades into a dusk-violet rim), the wax-seal accent stitch, and two small hyperlinks in the colophon. This is the single concession to the vaporwave inheritance, kept at less than 0.5% of the surface area. - `#1F2433` — **night-glass** — used only for the glass-weight pinning the open codex; a deep cool ink that reads as *the cool of polished glass against warm clay*. The palette is gradient-poor by design. There are exactly **three gradients** on the entire site, all of them lens-flare halos. No mesh-gradients. No multi-stop linears. No CSS conic-gradients. The corpus is 96% gradient-saturated; chika.trade is 0.3% gradient-saturated, and that 0.3% is the only place vaporwave colour speaks. ## Imagery and Motifs The visual world is built from four motif families, all hand-composed from SVG, CSS, and exactly one tiling background image. **Zero photography (98% in the registry — its exclusion is the largest single deviation).** Zero 3D. Zero stock illustration. Zero icons from icon-fonts. **1. Lens-Flare Halos (lens-flare imagery, 4% in the registry — underused, actively claimed).** Every room carries exactly one lens-flare bloom, but the flare is **not the cyberpunk neon-rainbow streak** of the corpus's prior lens-flare uses. It is the **warm low-sun lens-flare of an actual 35mm camera shot at 4:47 PM in late October through a Tucson window**: a single radial bloom at the room's lower-left margin, composed of three concentric soft circles in #C77D5B → #D9A07A → #E8C9A8 with a cool dusk-violet (#6E5E84) tracing the outermost rim only. The bloom is built in pure CSS with three nested `radial-gradient()` layers and one `mix-blend-mode: multiply` pass — no PNG, no SVG filter. Each bloom is 38vw across at the threshold, shrinking to 14vw in the colophon. The flare's centre tracks the cursor in the threshold room only, with a `prefers-reduced-motion` opt-out; in all other rooms the flare is fixed and silent. **2. Clay-Tablet Specimens (custom-illustration, 1% in the registry).** Nine specimens populate the catalogue. Each specimen is a 240×140 SVG of a **single fired-clay tablet** — irregular hand-drawn rectangle with one chipped corner, one diagonal hairline crack, and one inscription-line of pseudo-cuneiform ticks. The tablets are not realistic photo-renders; they are *plain hand-drawn line-and-fill illustrations* in the manner of a 1962 archaeological field-sketchbook. Each tablet's pseudo-cuneiform is deterministically generated from the catalogue index (so tablet 03 always carries the same ticks), which gives the catalogue the feel of a real corpus and not a placeholder grid. **3. Sharp-Angle Stratigraphy (sharp-angles motif, 2% in the registry — underused).** The stratigraphy room is a single 100vw × 80vh SVG cross-section drawn in pure hairlines: six horizontal strata, each separated from the next by a **15° angled wedge-cut** (the canonical archaeological section-drawing seam, indicating a fault or a deposit boundary). The wedge angles are sharp, never curved. The stratigraphy lines are #8B4A2A on #E8C9A8, hairline 1.4px. Each stratum carries a small Roman numeral at far-left and a single annotation line drawn out into the right margin in Cormorant italic. The whole drawing is one self-contained `` block, ~6kb gzipped. **4. The Codex and the Glass-Weight (book-scholarly motif, 3% in the registry).** The etymology room contains one composite SVG: an open codex with two facing pages (left page carries 11 lines of Cormorant prose, right page is blank), pinned at upper-right by a 70×100 rectangular glass-weight rendered in #1F2433 with a tiny `radial-gradient` highlight to indicate the curve of glass on warm clay. The codex's spine is a sharp-angled crease at 90°, *not* a soft binding-curve, reinforcing the sharp-angle motif. The glass-weight casts a single soft drop-shadow in #3A2418 at 6% opacity, the only drop-shadow on the entire site. **5. The Tiling Paper-Texture (paper-aged imagery, 0% in the registry — fully claimed underused territory).** One 480×480 tiling PNG (~14kb) gives the whole page a faint warm-paper grain, set as `background-blend-mode: multiply` over the #E8C9A8 wash. The texture is a hand-scanned Italian rough-press paper, scanned at 600dpi, desaturated to terracotta tones, and tiled. It is the *single raster asset* on the entire site. **Excluded categories (deliberate negative imagery):** no neon-glow, no glassmorphic-cards (68% in the registry — pointedly excluded), no gradient-mesh, no 3D-render, no isometric-icons, no bokeh-background. The lens-flares are the *only* glow on the site, and they read as warm sun, not as neon. ## Prompts for Implementation Build chika.trade as **one HTML document, one CSS file, one ES module, and exactly two asset files**: `paper.png` (480×480 tiling Italian rough-press scan, ~14kb) and `chika-favicon.svg` (a single hand-drawn terracotta tablet glyph). No framework. No bundler. No webfont self-host (use Google Fonts CDN — `Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@400;500;600&family=JetBrains+Mono:ital@0;1&display=swap`). No Lottie. No WebGL. No canvas. No video. The whole experience is **static SVG, three lens-flare radial-gradients, one tiling PNG, and one IntersectionObserver-driven scroll choreographer**. **Storytelling spine.** The page is *one slow descent into an underground archive at 4:47 PM*. The reader enters the threshold court, walks the long catalogue table, opens the codex, descends the stratigraphy, reads the marginal glosses, lifts the glass-weight off the letter, and signs the colophon. There is **no pricing block, no plan grid, no testimonial wall, no statistics dashboard, no signup form, no FAQ, no "trusted by" logo strip, no contact form, no CTA button anywhere**. The catalogue tablets are the *only* clickable affordance on the page, and clicking one expands its annotation in place — it does not navigate. **Scroll choreography (scroll-triggered, 16% in the registry — picked over parallax 94% / cursor-follow 73%).** The entire animation system is a single IntersectionObserver with `rootMargin: -38.2% 0px -38.2% 0px` — meaning a room is "active" only while its content sits in the central 23.6% band of the viewport (the *light-axis stripe*). When a room enters the band: - **Threshold** — the lens-flare bloom intensifies from 0.4 to 1.0 opacity over 1200ms cubic-bezier(0.22, 1, 0.36, 1), the wordmark's italic Cormorant fades up character-by-character at 80ms stagger. - **Catalogue** — the nine clay tablets slide horizontally into the row from the right at 140ms stagger, each on a sharp `cubic-bezier(0.85, 0, 0.15, 1)` curve. Tablets do *not* spring or bounce. They settle hard, like clay being placed on a stone bench. - **Etymology** — the 11 lines of Cormorant prose on the codex's left page typeset character-by-character at 12ms per glyph, *only once*, only when the codex enters the band the first time. - **Stratigraphy** — the six horizontal strata draw in left-to-right at 600ms each with 200ms overlap, using SVG `stroke-dasharray` reveal. The 15° wedge-cuts draw last, all at once, with a sharp 180ms reveal. - **Lexicon** — the marginal glosses fade up one by one at 240ms stagger, each gloss preceded by a small terracotta drop-cap that scales from 0.8 to 1.0. - **Correspondence** — the wax-seal scales from 0 to 1 with a single sharp tick-back at the end (no spring physics), the letter-text fades up as a whole. - **Colophon** — the colophon mono text type-writes in at 36ms per glyph, ending with a single hard period. **No spring physics. No magnetic cursor. No parallax. No tilt-3d. No cursor-follow except in Threshold.** The entire site uses sharp `cubic-bezier(0.85, 0, 0.15, 1)` and slow `cubic-bezier(0.22, 1, 0.36, 1)` — both *non-bouncy*. The mood is "clay placed deliberately on a stone bench," not "rubber ball dropped on a hardwood floor." **Reduced motion.** With `prefers-reduced-motion: reduce`, all character-by-character typesetting reduces to single-frame fade-up at 240ms; all horizontal slide-ins become opacity-only; the lens-flare cursor-tracking is disabled and the flare sits at fixed opacity 0.78. The scholarly tone of the page survives reduced motion almost intact, because almost every animation is slow and small to begin with. **Cursor.** A custom cursor is **not** used. The default OS cursor remains. This is a refusal of the corpus-saturated cursor-follow pattern (73% of sites), and it suits the scholarly tone — the reader's hand belongs to the reader, not to the page. **Sound.** No audio. The implied half-speed vaporwave A-side is a description of mood, not a feature. Do not add a play button. **Bias every implementation decision toward stillness, restraint, and the warmth of late afternoon.** Whenever a choice presents itself between *more motion / less motion*, choose less. Whenever a choice presents itself between *more colour / less colour*, choose less. Whenever a choice presents itself between *more text / less text*, choose less but better. The page is meant to be a **room you can sit in for ten minutes without getting tired**, not a marketing asset that resolves in seven seconds. ## Uniqueness Notes This design commits to the following differentiators, chosen explicitly to avoid duplicating other CMassC sites and to lean into the underused patterns surfaced by frequency analysis: 1. **Vaporwave stripped of its neon — kept only for its warm-low-sun structural inheritance.** Vaporwave sits at 11% in the aesthetic frequency, and in nearly every prior use it carries the Miami-pink-and-cyan signal: chrome busts, rotating columns, neon rainbow grids, palm trees, "AESTHETIC" wordmark. chika.trade refuses every one of those signals and keeps only what vaporwave actually *learned* from late-Polaroid photography — the long horizontal void, the radiant lens-flare, the empty-mall stillness. The result is a vaporwave site with **zero Miami palette, zero retro-grid, zero column statuary, and zero neon**, which makes its vaporwave inheritance load-bearing rather than decorative. 2. **ma-negative-space (5%) executed as a horizontal plaza with a single light-axis horizon.** The corpus's prior ma-negative-space sites typically use generous whitespace as a *vertical breathing room* between conventional sections. chika.trade does the opposite: it treats ma as a **horizontal plaza floor** and unifies the entire 7-room scroll under a single continuous 1px hairline at 38.2% top — the *light-axis* of an underground reading room at 4:47 PM. The horizon is a structural device, not a graphic flourish, and it is visible on every screen of the site at the same y-coordinate. 3. **terracotta-warm (4%) as a tonal monoculture with exactly two cool counterpoints used at <0.5% surface area.** The corpus's prior warm palettes lean either gradient-rich or duotone. chika.trade is gradient-poor (three gradients total, all lens-flares) and not duotone — it is a **tonal monoculture of eight terracotta values plus one dusk-violet vapor accent and one night-glass ink**. The vaporwave inheritance shows up only in the dusk-violet rim of the lens-flares, occupying less than half a percent of total surface area. 4. **lens-flare imagery (4%) reframed as a Tucson 4:47-PM camera bloom, not a JJ-Abrams cinematic streak.** The corpus's prior lens-flares are narrow horizontal cyan-and-white streaks crossing dark backgrounds. chika.trade's lens-flares are **broad warm radial blooms on warm-clay backgrounds**, composed in pure CSS with no sharp streak component, no horizontal axis, and no cool starburst. They read as *photographic memory of a real afternoon*, not as a sci-fi reference. 5. **sharp-angles motif (2%) used as the structural language of stratigraphy and codex spine, not as decorative chevrons.** The corpus's prior sharp-angle uses are typically decorative borders, chevrons, or zigzag dividers. chika.trade uses sharp angles **structurally** — as the 15° wedge-cuts of an archaeological section drawing, and as the 90° hard crease of a codex spine — so the angles do *narrative* work (they communicate stratification and bound pages) rather than ornamental work. 6. **scholarly-intellectual tone (4%) committed to as a complete voice, including a written Latin-form colophon.** The corpus's scholarly sites typically borrow the tone superficially (a serif here, a footnote there). chika.trade commits to it: every visible string of text is written in the voice of an underground archivist; the colophon at the foot of the page is a real **museum-style colophon** crediting the type, the colours, the seed, and the date in the manner of an Aldine Press edition — and that colophon is the only place the seed information appears. 7. **scroll-triggered (16%) chosen over the corpus-saturated parallax (94%), cursor-follow (73%), magnetic (62%), and spring (75%).** The site uses one IntersectionObserver and zero of the other four canonical animation patterns. The cursor follows the lens-flare in *one* room only (Threshold), and that single concession is the entire cursor-reactive surface area of the site. 8. **Zero photography (98% saturation in the corpus) — replaced by hand-drawn SVG specimens in a 1962 archaeological-field-sketchbook idiom.** The clay tablets, codex, glass-weight, and stratigraphy are all hand-drawn line-and-fill illustrations, not photo-realistic renders. This is the largest single deviation from the corpus. 9. **Exactly three Google Fonts, no display face, wordmark in italic body face.** The site refuses the "logo gets its own face" convention and sets the wordmark in Cormorant Garamond italic — the same face used for body inscriptions. There is no display family, no fourth face, no fifth weight. 10. **Frequency analysis cross-references — patterns avoided on purpose:** glassmorphism (68%), card-grid (73%), spring (75%), cursor-follow (73%), magnetic (62%), parallax (94%), photography (98%), gradient (96%), warm palette (95%), mono typography (95%), full-bleed (90%), centered (80%), pastoral-romantic tone (25%). Each of these saturated patterns is either fully absent or rephrased into something the corpus has not seen — terracotta-warm replaces warm-generic, scroll-triggered replaces parallax, a horizontal plaza replaces full-bleed verticality, and the Cormorant/Inter/JetBrains stack replaces the corpus-saturated mono-display pairing. **Documented chosen seed:** *aesthetic: vaporwave, layout: ma-negative-space, typography: humanist, palette: terracotta-warm, patterns: scroll-triggered, imagery: lens-flare, motifs: sharp-angles, tone: scholarly-intellectual.* Of the eight seed dimensions, six land in actively underused corpus territory (vaporwave 11%, ma-negative-space 5%, terracotta-warm 4%, lens-flare 4%, sharp-angles 2%, scholarly-intellectual 4%); only humanist (42%) and scroll-triggered (16%) are common, and both are taken in directions the corpus has not seen — humanist as Cormorant-italic-as-wordmark and scroll-triggered as the *only* animation system rather than as a parallax accompaniment.