# Design Language for chika.racing ## Aesthetics and Tone chika.racing is **a Japanese rock-pool field-recording told as a generative art piece** — the precise moment, just after dawn at low tide along the Sanriku coast in late spring, when a single drop of clear seawater falls from a frond of dripping konbu kelp into the still surface of a tide pool, and the concentric rings race outward across a basin perfectly silvered with sky. The English word *racing* is read in its older, pre-motorsport sense — *the racing of light over water*, *the racing of a pulse*, *the racing of one ripple to meet the rim before its echo arrives*. There is no engine. There is no checkered flag. There is only the small, urgent kineticism of botanical life answering itself: a drip, a ring, a return, a stillness, then another drip from another frond. The site is **japanese-minimal** in its restraint and **energetic** in its living tempo — a paradox honored through the design rather than resolved by it. The mood is **shun no hayasa** (旬の速さ), the *speed of being in season*: a daisy opens at a measurable rate, kelp grows 30 cm a day, a hummingbird's heart beats at 1,260 bpm — speed is everywhere in nature, and almost none of it is loud. Visitors should feel that they have arrived at the edge of a tide pool, knelt down, and watched it for forty seconds, and that the page itself has knelt down with them. The tone leans toward **energetic** (16% in the registry — claimed and inverted: an energy of dawn, not of stadium), filtered through the unhurried ma (間) of Japanese minimalism. The aesthetic borrows nothing from racing-sport visual language: no checkered flags, no stopwatches, no asphalt, no carbon fiber, no number-decals. Even the word *racing* is rendered only in lowercase, in a slim humanist face, treated as a verb of botanical life. ## Layout Motifs and Structure The structural commitment is **organic-flow** (only 5% in the registry — actively claimed) executed as a **single continuous tide-pool basin** rather than as a stack of horizontal sections. The viewport is treated as a still water surface, and content emerges from concentric centers placed at golden-ratio coordinates across an extremely tall single column (no fold, no hero-and-then-grid, no card-grid — explicitly avoiding card-grid at 73%, full-bleed at 90%, and centered at 80% by composing instead around **off-center seed points** that breathe between rule-of-thirds anchors and the φ-grid). Each major content moment is the *origin of a ripple* — a single small element (a kanji, a botanical seed-form, a six-line haiku, a reading from a generative parameter) sits at one of seven seed-points scattered down the page, and the surrounding text and imagery arrange themselves in concentric reading-rings outward from that seed. Reading proceeds spirally rather than linearly: the eye lands on a seed, then drifts outward through the orbiting paragraphs, then snaps to the next seed below. **ma-negative-space** (5% in the registry) is used heavily but unconventionally — the negative space is not square margins, it is the *quiet annular bands* between concentric rings of text, calibrated so each band is exactly the visual weight of one fully-grown ring of ripple. Spacing follows the Japanese **ma** intervals 1–2–3–5–8–13–21 vw, never linear. The page is approximately 9× viewport-height, intentional; visitors who scroll quickly experience it as fast water, visitors who scroll slowly experience it as a single basin held in the palm. There is no navbar. There is no footer in the conventional sense — the basin simply darkens at the bottom into pre-dawn indigo and the last ripple does not return. The page's only navigational gesture is a small floating **botanical compass** in the upper-right (a stylized four-petal hinagiku motif rendered in 32×32 SVG) which on hover blooms outward into a four-petal index of the seven seed-points, each petal labeled with a single kanji. ## Typography and Palette **Typefaces — Google Fonts only, all confirmed available.** - **`Commissioner`** (variable axes: weight 100–900, FLAR 0–100, VOLM 0–100). The principal humanist face — claiming the **commissioner-versatile** seed (only 3% in the registry). Commissioner's variable axes are exploited heavily: headings use weight 280, FLAR 100, VOLM 65 — at this setting Commissioner has an almost ink-on-rice-paper softness, and the FLAR axis bends its terminals into faintly calligraphic curls reminiscent of brushed mincho strokes without ever becoming a serif. Body copy is Commissioner 17px, weight 380, FLAR 12, VOLM 18 — readable, mildly humanist, with just enough flare in the lowercase *a* and *e* to keep the page from feeling sterile. Numerals are Commissioner tabular figures, weight 320 (used only in the live generative-parameter readouts). - **`Shippori Mincho B1`** (weights 400, 500, 700) — used **only** for the seven kanji that anchor the seven seed-points (e.g. 露 *tsuyu*/dew, 渦 *uzu*/whirlpool, 縁 *fuchi*/rim, 跳 *hane*/leap, 響 *hibiki*/resonance, 凪 *nagi*/calm, 萌 *moe*/sprout). Set at 192–384px, weight 500. Shippori Mincho B1 is a contemporary Japanese serif by Fontworks, designed for variable-width modern composition — its hairlines are crisp where a brush face would be wet, and that sharpness is exactly the visual register of a single drop of water held suspended a millisecond before falling. - **`Shippori Antique B1`** (weight 400) — used for the haiku and seasonal field-note captions in Japanese. A slightly broader, gentler companion to the mincho. - **`JetBrains Mono`** (weight 300, 400) — used **only** for the live generative-parameter readouts (e.g. `tide.surface.tension = 0.0728 N/m`, `kelp.growth.rate = 0.347 mm/min`, `ripple.celerity = 0.412 m/s`). This is the only mono-monolike type on the site, and at 11px it is almost invisible — readable but not declarative. (Note: **mono** is at 95% in the registry; here it is deliberately demoted to a footnote register, claiming the seed without joining the chorus.) No display-bold face. No condensed face. No handwritten face. The entire vertical hierarchy is carried by Commissioner's variable axes alone, with mincho providing the seven kanji anchors. **Palette — `aurora-gradient` (only 2% in the registry, actively claimed), reinterpreted as a *northern Japanese coastal aurora* rather than the more common Iceland/Lapland palette.** - **`#0A1628`** (deep tide-pool indigo — the basin floor at pre-dawn; the page background near the bottom of the scroll) - **`#1B3A5F`** (Sanriku midnight-water blue — the principal background, sea-without-sky) - **`#3D7DB5`** (dawn-water blue — mid-page surface tone, ripple shadow) - **`#7CC4D8`** (kelp-frond aqua — the principal mid-tone for botanical motifs and ripple rings) - **`#B8E3D7`** (sea-foam mint — used only in ring crests, the highest visible point of each ripple) - **`#F4E9C8`** (rice-paper dawn — the lightest tint, used for body copy on dark backgrounds and for the upper rim of the page) - **`#E89D7C`** (dawn-coral peach — the single warm accent, used for the seven kanji anchors only) - **`#C7458A`** (aurora magenta — the rarest accent, used only in the cursor's reactive ripple core, never in static elements) The palette is a slow vertical gradient: at the top of the page it is dawn-coral and rice-paper; through the middle it is kelp-aqua and dawn-water; at the bottom it deepens into midnight-water and tide-pool indigo. The aurora-magenta appears only when the cursor moves, as the central spark of every ripple it triggers. All eight colors are tuned for warmth on cool — the cool greens and blues are the page's resting state, the two warm accents (coral and magenta) are the *living kinetic* counterpoint. ## Imagery and Motifs **Zero photography (98% in the registry — its exclusion is one of the site's largest single deviations).** Zero 3D render, zero stock, zero icon-set, zero illustration in the conventional sense. Every visual element on chika.racing is **generative-art** (only 6% in the registry — claimed) drawn at runtime in a single 1024×1024 `` and a single full-page SVG layer. The visual world is composed from four motif families: **1. Ripple System (pattern: ripple, only 12% in the registry — claimed).** The page's foundational visual is a continuous, lazily-running simulation of concentric water rings. Each scroll seed-point releases a ripple at the moment it enters the viewport (IntersectionObserver-driven), and additional ripples are released by pointer events. Ripples are drawn as 1px-stroke ellipses in `#7CC4D8` and `#B8E3D7`, with stroke opacity decaying from 0.8 to 0 over a 4-second life. Up to 18 ripples can coexist; older rings dim and slow. Crucially the rings are *not* perfect circles — they obey a small noise field that makes them slightly oblong in the direction of the page's aurora-gradient flow, so the basin reads as a real basin with real currents, not as a tutorial in HTML5 canvas. **2. Kelp Frond Sprites (motif: floral-botanical, only 1% in the registry — actively claimed).** Hand-drawn SVG silhouettes of seven Japanese kelp species — *konbu* (Saccharina japonica), *wakame* (Undaria pinnatifida), *hijiki* (Sargassum fusiforme), *arame* (Eisenia bicyclis), *tengusa* (Gelidium elegans), *mozuku* (Cladosiphon okamuranus), and *aonori* (Monostroma nitidum). Each frond is 200–400px tall, rendered in 1px stroke `#3D7DB5` with a subtle 4–8% fill of `#1B3A5F`, and gently sways with a CSS transform-origin at its holdfast (the basal anchor). Sway period is 7.3 seconds; sway amplitude is 1.4 degrees. Fronds anchor at the seven seed-points. (Note: **floral-botanical** at 1% is a deliberate claim of an underused motif; the *botanical* here is marine, not floral, which inverts the frequency-analysis category in spirit while honoring its letter.) **3. Hinagiku Compass.** A single small four-petal *hinagiku* (daisy) glyph rendered as 32×32 SVG, fixed at top-right, in `#E89D7C` on transparent. On hover it blooms outward into a four-petal index of the seven seed-points. It is the only navigational element on the page. **4. Aurora Gradient Wash (palette: aurora-gradient, claimed).** The full-page background is a single CSS `radial-gradient` and `linear-gradient` composite that runs from dawn-coral at the top through kelp-aqua at the middle to tide-pool indigo at the bottom, with three off-center radial pools of `#7CC4D8` at 33%, 58%, and 81% scroll-depth. The aurora is not animated — it is the page's stable, slow geology against which the ripple system and kelp fronds move. There are no stat-grids, no testimonial cards, no team avatars, no logo cloud, no pricing tiers, no CTAs above the fold, no card-stack hover effects, no "join our newsletter" banner. The page does not sell anything. It is content as basin. ## Prompts for Implementation Build chika.racing as **one HTML document, one CSS file, one ES module, and four asset files: `kelp-fronds.svg` (a single combined SVG sprite-sheet of all seven kelp species), `hinagiku.svg` (the compass glyph), `noise.png` (a 256×256 tiling Perlin-noise texture used to perturb the ripple ellipses), and a single `seeds.json` (the seven seed-point coordinates, kanji, and haiku). No framework. No bundler. No Lottie. No WebGL. No video. No webfont self-host (use Google Fonts CDN). **Bias every implementation decision toward storytelling, immersion, and slow generative kineticism rather than toward CTAs, conversion, dashboards, or feature-grids.** The page must feel like *a tide pool that has chosen to be a webpage*, not like a webpage that has chosen to depict a tide pool. **Composition.** The page is one long single-column flow approximately 9× viewport-height. Each of seven seed-points sits at a φ-grid intersection (e.g. `33vw, 11vh-of-section-1`, `61vw, 38vh-of-section-2`, etc.) — never at section centers, never edge-aligned. The seed kanji is the largest type element on the page; the surrounding paragraphs orbit it in concentric reading-rings whose radii follow the **ma** sequence 1–2–3–5–8–13–21 vw. Each paragraph is short — never more than 4 lines, and shorter paragraphs (1–2 lines) are preferred. The seven seeds in order are: **露** *tsuyu* (dew, the opening drop), **渦** *uzu* (whirlpool), **縁** *fuchi* (rim, the meeting of ripple and shore), **跳** *hane* (leap), **響** *hibiki* (resonance), **凪** *nagi* (calm), **萌** *moe* (sprout, the closing return). **Animation.** All motion is **ripple-based**. There are no parallax sections, no stagger-fade-ins, no spring entrances, no cursor-follow trails (all of which are at 73–94% in the registry — actively avoided). Instead: every animatable element on the page (a paragraph, a heading, a kelp frond, a kanji) is registered as a *ripple receiver*. When a ripple's expanding ring crosses an element's bounding box, that element receives a brief, soft response — a 220ms transform of `translateY(-3px)` and `letter-spacing(+0.02em)`, then a return — as if the water had passed under the element and lifted it momentarily. The aggregate effect is that scrolling, or moving the cursor, sends a wavefront across the basin, and the entire page breathes in waves rather than in scrolls. Cursor input creates a single ripple whose origin is the cursor and whose core color is `#C7458A` (the only place this color appears). **Typography choreography.** As ripples cross the seven kanji seed-points, the variable Commissioner axes of all paragraphs in that ring momentarily increase: FLAR `+8`, VOLM `+12`, weight `+30`. The text *blooms* as the ripple passes and returns to rest as the ripple fades. This is the page's only typographic flourish, and it must be subtle — visitors should not consciously notice the bloom, only feel that the text is alive. **Generative parameter readouts.** In the lower-right corner, a small JetBrains Mono 11px panel displays four live values from the ripple simulation: `tide.surface.tension`, `kelp.growth.rate`, `ripple.celerity`, `aurora.intensity`. These are not fake — they are functions of actual JavaScript state in the simulation, updated at 4Hz. The panel is visible but never demanding; it claims the **mono** typography seed in a footnote register rather than as the page's voice. **Initial load.** The page does not show a logo splash, a loading spinner, or a hero image. It begins with the aurora gradient already rendered, the seven kelp fronds already swaying, and a single ripple already mid-life — as if the visitor had simply arrived at the basin and the basin had been there all along. The first kanji **露** (dew) appears 1.2 seconds in, its FLAR axis sweeping from 0 to 100 over 800ms — the page's only un-prompted entrance animation. **Structural ban list.** No header. No global navigation. No newsletter modal. No cookie banner styled as a card. No featured-in logo strip. No "trusted by" section. No pricing. No testimonials. No team grid. No FAQ accordion. No contact form. No social-icons row. No "back to top" floater. The hinagiku compass is the only floating UI element on the page. **Bandwidth.** Total page weight under 240 kB (including all four asset files and Google Fonts CSS — fonts themselves are subset to the seven kanji and Latin basic). ## 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. **organic-flow as concentric basin, not as blob layout.** The **organic-flow** layout is at 5% in the registry, and in its prior uses it has typically meant *amorphous blobs* or *fluid section dividers*. chika.racing reinterprets it as **concentric reading-rings around seven seed-points** — the page is composed *radially* even though it scrolls *vertically*. This is a structural commitment no other site in the registry makes: every paragraph belongs to a ring, every ring belongs to a seed, and the visual hierarchy is angular and orbital rather than vertical-cascade. 2. **ripple as foundational simulation, not as button-click micro-interaction.** The **ripple** pattern is at 12% in the registry, and in its prior uses it has been a Material-Design-flavored hover affordance — a small ring on click. chika.racing turns ripple into the *governing simulation of the entire page*: every element is a ripple-receiver, every scroll seed launches a ripple, every cursor movement releases a ripple, and the page's aggregate kineticism is the sum of overlapping ripples decaying across an 18-ring buffer. This is ripple as physics engine, not ripple as button polish. 3. **aurora-gradient relocated from arctic-night to Sanriku-dawn.** The **aurora-gradient** palette is at 2% in the registry, and it has been previously read as the cold polar aurora (deep purple, electric green, Lapland sky). chika.racing relocates it to the warm-on-cool palette of a Japanese coastal dawn — dawn-coral and rice-paper at the top, kelp-aqua and tide-pool indigo at the bottom — which honors the gradient's structural identity while completely re-tuning its emotional register. 4. **commissioner-versatile via variable-axis bloom, not as a default sans.** The **commissioner-versatile** typography is at 3% in the registry, and where it has been used it has been static — chosen, set, and left at one weight. chika.racing exploits Commissioner's full FLAR/VOLM/weight axes as a *living typographic surface*, where ripples passing across paragraphs increase FLAR and VOLM in real time. The typeface is treated as a tunable instrument, not as a typeface choice. 5. **floral-botanical reinterpreted as marine-botanical.** The **floral-botanical** motif is at 1% — almost unused. chika.racing claims it via *seven Japanese kelp species* rather than terrestrial flowers, an ecologically rigorous reinterpretation of the motif into a coastal/aquatic register that no other site in the registry occupies. 6. **energetic tone expressed through stillness, not through spectacle.** The **energetic** tone is at 16% in the registry, and is usually paired with bright dopamine palettes, oversized display type, and stagger-cascade animations. chika.racing's energy is the *energy of dawn light hitting a tide pool*: real, measurable kineticism (kelp grows 30 cm/day, ripples travel at 0.4 m/s, surface tension drops a clean drop in 3 ms) rendered as soft, slow, almost-still motion. This is energy reframed as *biological tempo* rather than as visual loudness. 7. **generative-art as the entire imagery system, with photography excluded.** **Photography** is at 98% — chika.racing excludes it absolutely. **generative-art** is at 6% — chika.racing makes it the totality. The kelp fronds, the ripples, the aurora wash, and even the hinagiku compass are all generated at runtime from SVG, canvas, and CSS. Nothing on the page is a captured image; every pixel is computed. 8. **No CTA-heavy layouts, no pricing blocks, no stat-grids — explicitly avoided.** The page does not ask the visitor to do anything. It asks the visitor to kneel beside a basin for forty seconds. 9. **AVOIDED from frequency analysis:** photography (98%), gradient palettes used as hero-spectacle (96% — here used only as slow geology), parallax (94%), full-bleed (90%), centered (80%), stagger (76%), spring (75%), card-grid (73%), cursor-follow trails (73%), magnetic hover (62%), warm palette as default (95%), mono as primary (95%), hand-drawn aesthetic (95%), glassmorphism (68%). All actively avoided. **Documented chosen seed:** `aesthetic: japanese-minimal, layout: organic-flow, typography: commissioner-versatile, palette: aurora-gradient, patterns: ripple, imagery: generative-art, motifs: floral-botanical, tone: energetic` — every element of the seed is honored in the design, and the rare/underused entries (japanese-minimal at 0%, commissioner-versatile at 3%, aurora-gradient at 2%, ripple at 12%, generative-art at 6%, floral-botanical at 1%, organic-flow at 5%) are claimed not as decorative tags but as the structural and behavioral commitments above.