# Design Language for prototype.rs
## Aesthetics and Tone
prototype.rs is a **Japanese aquarium at the bottom of a terminal** — imagine a Kyoto researcher's lab notebook where the margins are filled with hand-inked koi, but the notebook itself is rendered as a monospace text editor with a gradient sky bleeding through the window behind the screen. The aesthetic is *wabi-sabi meets systems programming*: quiet, deliberate, proud of its own incompleteness. Nothing shouts. Everything whispers in Rust.
The mood is the 45 minutes before a conference demo when the prototype almost works and the developer is still calm, still curious, still reaching. The fish drift through the layers. The code is real. The tone is a developer talking to a developer — not a pitch, not a tutorial, a conversation between two people who know the machine.
Visually, the site occupies the space between a Tokyo transit map and a Hiroshi Sugimoto photograph: gridded, still, luminous, and haunted by depth. The "depth" is literal — a layered-parallax z-axis where foreground type, midground gradient panels, and background fish illustrations sit on distinct planes that respond to cursor movement. The cursor follow effect is not a spotlight; it is a **thermal bloom** — a radial gradient shift that colors the nearest fish in warmer tones as the cursor approaches, like a hand held near cold glass in a dark aquarium.
Tone: **conversational-technical**. The copy uses the second person, runs short, and trusts the reader. No bullet lists in hero sections. Sentences breathe. Code blocks are not decorated — they are the decoration.
## Layout Motifs and Structure
The page is built on **three Z-planes** layered in CSS 3D transform space:
- **Z-Plane 0 (background, depth: -200px):** A field of SVG tropical fish and seaweed fronds. Fish swim in slow, parametric sine-wave paths — not looping, but drifting, slightly randomized. The background gradient runs vertical: deep indigo (#0d0f1a) at the top bleeding into a warm deep teal (#0d2926) at the bottom — the color of the ocean floor at dusk.
- **Z-Plane 1 (midground, depth: 0):** Frosted glass panels — `backdrop-filter: blur(8px)` over the fish layer — that hold the actual content. Panels are not full-width; they are **asymmetric columns** (60% width, right-justified on desktop, then full-width on mobile) positioned with negative space to let the fish show through. Panel edges are not rectangular: they use `clip-path` with a subtle diagonal cut on the top-right corner, referencing the origami fold that appears in Japanese design traditions.
- **Z-Plane 2 (foreground, depth: +80px):** Floating code excerpts and monospace annotations that drift slightly faster than the midground panels on scroll — a parallax coefficient of 1.3× vs 1.0× for panels. These foreground annotations are actual Rust snippet fragments from a hypothetical `prototype` crate: `impl Drop for Moment`, `let fish = Stream::new()`, `#[derive(Curious)]`.
Scroll behavior: on scroll, all three planes move at different rates (parallax). On cursor move, fish within 180px of the cursor receive the thermal bloom — a CSS variable-driven radial gradient that shifts their color temperature from cool (#4a90a4 outline) to warm (#c87941 outline), transitioning over 320ms. The bloom is subtle — 30% opacity max — so it feels like a physical phenomenon, not a UI affordance.
Grid: no explicit grid on mobile. On desktop: a 12-column CSS grid with columns 1–2 and 11–12 always empty (reserved for fish visibility). Content occupies columns 3–10 maximum, usually 4–9 (right-justified within that range).
## Typography and Palette
**Typography (Google Fonts only — tech-mono led):**
- **Primary display and body — `Space Mono`** (Google Fonts). All running text, headings, navigation, and code labels use Space Mono. This is a deliberate mono-everything choice: the site is a prototype, prototypes live in terminals, the font is the terminal. H1: 52px, weight 700, letter-spacing -0.02em, color #e8f4f0. Body: 15px, weight 400, letter-spacing 0.01em, line-height 1.75. Color #b8ccc8.
- **Accent label font — `Noto Serif JP`** (Google Fonts). Used exclusively for the domain mark "prototype.rs" rendered in kanji-weight strokes at the top of the page, and for section dividers formatted as haiku-length subheadlines. This is the single serif intrusion into a mono world — like the kanji on a circuit board. Set at 11px, weight 400, letter-spacing 0.08em, in a muted warm cream (#d4c9a8).
- **No third font.** Two is enough. The tension between the rigid mono grid and the open-stroke Japanese serif is the entire typographic statement.
**Palette (6 values, exact hex):**
| Role | Hex | Name |
|------|-----|------|
| Deep ocean background | `#0d0f1a` | Midnight ink |
| Ocean floor gradient terminus | `#0d2926` | Abyssal teal |
| Panel glass (bg) | `#132825` | Temple shadow |
| Primary text | `#e8f4f0` | Cold paper |
| Secondary text / annotation | `#b8ccc8` | Morning mist |
| Accent label / kanji | `#d4c9a8` | Aged cedar |
| Gradient highlight warm | `#c87941` | Koi flame |
| Gradient highlight cool | `#4a90a4` | Deep kelp |
**Gradient:** the background uses a CSS `radial-gradient` from the cursor position that blends between the two ocean tones — `#0d0f1a` and `#0d2926` — creating the sense that light is entering the water from above, tracked to the user's position. This is a passive, slow gradient (transition 1200ms ease) so it reads as ambience rather than interaction.
## Imagery and Motifs
**No photography. No raster imagery.** All visual content is SVG-native.
The site's only imagery is **tropical fish** — three species, each SVG-drawn:
1. **Moorish Idol** (tall, black-white-yellow striped, long dorsal fin): Used in the background Z-plane as the largest silhouette, 80–120px tall, drifting in slow arcs. The Moorish Idol represents completeness — its presence means something is finished.
2. **Surgeonfish** (Tang: oval body, vivid teal-blue, scalpel tail): Mid-size, 50–70px, appears near the midground panel edges. Represents the prototype in motion — working but not yet finished.
3. **Clownfish** (small, orange-white striped, compact oval): The smallest fish, 24–36px, appearing in clusters of 2–3 near the foreground code annotations. Represents curiosity — the constant companion in the work.
All fish SVGs are hand-drawn with a visible `stroke` (2px, #4a90a4 cool-mode, #c87941 warm-mode on cursor hover proximity). Fill is semi-transparent: `fill-opacity: 0.55`. The stroke renders the fish as outline creatures — ghostly, belonging to the water, not intruding on the text.
**Seaweed fronds:** 3–5 SVG polylines per viewport, positioned at the bottom Z-plane edges, swaying on a slow CSS keyframe animation (period: 8s, amplitude: 3deg rotate). These are not decorative — they are the grid anchors that prevent the fish from feeling unmoored.
**Origami fold motif:** Each frosted glass panel has a `clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%)` — a single diagonal corner cut that references the geometry of origami without illustration.
**No icons, no arrows, no chevrons.** Navigation is text-only. The only "interactive" affordance beyond hover states is a subtle `cursor: crosshair` override — placing the developer in the posture of measurement.
## Prompts for Implementation
Build prototype.rs as **a single scrolling document that is also an aquarium** — the narrative scrolls top to bottom, the fish swim independently of scroll, and the two coexist through layering.
**Implementation structure:**
```
.........
```
**Fish animation (JS):** Each fish gets a `{ x, y, dx, dy, species, phase }` state object. Each frame: `x += dx; y += sin(phase + t * 0.0008) * 0.4;` — the sine-wave drift. When a fish exits the viewport, it re-enters from the opposite side with a new y-position. Fish do not collide or flock — they drift independently like solitary creatures. Speed: `dx` = 0.15–0.35px/frame (very slow, calming).
**Thermal bloom (cursor follow):** On `mousemove`, compute distance from cursor to each fish center. Fish within 180px receive a CSS class `.warm` that transitions `stroke` from `#4a90a4` to `#c87941` over 320ms. The background radial gradient (`--cursor-x`, `--cursor-y` CSS variables) shifts the deep background light position. Update cursor CSS variables at 60fps via `requestAnimationFrame`, not directly on `mousemove` event (prevents jitter).
**Parallax layers:** Use `IntersectionObserver` + scroll listener to apply `translateZ` and slight `translateY` offsets per plane on scroll. Panel parallax coefficient: `scrollY * 0.08`. Foreground code annotations: `scrollY * 0.13`. Background fish: unaffected by scroll (they are `position: fixed`).
**Content narrative (3 panels):**
1. **Intro panel:** Domain mark `prototype.rs` in Noto Serif JP at the top. Below, a 3-line haiku formatted as the only heading. Then 2–3 sentences of body in Space Mono: what this is, who made it, why it exists. No bullet lists.
2. **Work panel:** 3–4 "projects" formatted as terminal output — a monospace table of `name / status / year`, where status is `wip | shipped | archived`. No cards, no thumbnails, no descriptions longer than one line per entry.
3. **Contact panel:** A single paragraph. One email address. The Rust snippet `fn main() { contact(); }` as a purely decorative code block below.
**Do NOT implement:** hero images, pricing sections, testimonial blocks, newsletter signups, social media icon rows, hamburger menus, sticky headers, loading spinners, scroll-snap forcing.
**DO implement:** the fish, the thermal bloom, the frosted glass panels with origami clip-path, the gradient background that follows the cursor, the Space Mono + Noto Serif JP type system, the three-plane depth stack, and the crosshair cursor.
## Uniqueness Notes
**Chosen seed (per assignment):** aesthetic: japanese-minimal, layout: layered-depth, typography: tech-mono, palette: gradient, patterns: cursor-follow, imagery: vector-art, motifs: tropical-fish, tone: conversational.
**Differentiators from the existing corpus:**
1. **Aquarium-as-canvas, not background decoration.** The tropical fish motif appears in 3% of the corpus, but always as static illustration or texture. prototype.rs makes the fish autonomous, physics-driven (sine-drift), and thermally responsive to cursor proximity — the aquarium *is* the page, not a skin on top of it.
2. **Three-plane CSS 3D layering with thermal bloom.** The layered-depth layout pattern has not been combined with cursor-follow thermal effects anywhere in the corpus. The bloom is not a spotlight or glow — it changes fish color temperature from cold to warm at close range, a first in the registry.
3. **Dual-font tension: Space Mono meets Noto Serif JP.** No other design in the registry pairs a monospace primary with a Japanese serif as accent. The typographic conflict between rigid fixed-width grid and flowing kanji stroke geometry is intentional and unrepeated.
4. **Origami clip-path geometry as structural motif.** The `polygon` clip-path on every panel references origami without illustrating it — a geometric constraint rather than a decoration. This is the first use of clip-path as architectural motif in the corpus.
5. **Avoided overused patterns:** full-bleed layout (85% corpus), circuit motifs (13% corpus), photography imagery (85% corpus), dark-neon palette schemes. prototype.rs uses none of these — it occupies the sparse ocean-floor territory that the corpus has not claimed.