# Design Language for amamya.dev
## Aesthetics and Tone
amamya.dev is **frutiger-aero, but submerged** — the canonical 2004–2013 Microsoft / Sony / DoCoMo glossy-bubble aesthetic relocated from a sun-bright corporate boardroom into a **rain-soaked Tokyo developer's home server cabinet at 3am, lit by aquarium light**. The conceit is precise: the *amamya* root reads simultaneously as 雨夜 (*ame-no-yoru*, "night of rain") and as a near-homophone of *amayadori* (雨宿り, "sheltering from rain under an eave"). The site is the eave. The visitor takes shelter inside it for the duration of a scroll, and the shelter is a luminous glass cabinet humming with line-drawn diagrams of small honest tools — a localhost dashboard, a static-site generator, a packet inspector, a digital garden, a cron daemon — each rendered as if seen through the convex bottom of a koi pond.
The tone is **friendly without being commercial** — the warmth of a dev who has been running their personal infrastructure for fifteen years and finally decided to put a humanly-readable index page in front of it. There are no testimonials, no logos-of-companies-I've-worked-with strip, no pricing tiers, no newsletter capture, no `Get Started `. There is a long, gentle scroll that introduces seven projects, shows what each one does with a hand-drawn line illustration, and hands the visitor a quiet `git clone` URL at the end. The mood is **post-rain optimism** — frutiger-aero's signature *we have just emerged from a long Y2K storm and the sun is glistening on the water beads on the bus shelter* — but rendered for someone who never actually wanted the corporate version of that future, only the small shareware-and-Winamp version.
Frequency analysis governed the aesthetic choice. Frutiger-aero appears in roughly 5% of registered designs (underused), pastel palettes in roughly 16% (uncommon for the category), futura-geometric in roughly 3% (rare), blur-focus in roughly 10% (uncommon), line-illustration in zero registered designs (entirely new — line-illustration is a vocabulary entry that has never been used before), single-column in roughly 6% (rare), and the friendly tone tag in roughly 3% (rare). The intersection of all seven is **zero**. amamya.dev is the registry's first design where frutiger-aero is rendered with **no photography** (the entire imagery layer is hand-traced single-weight line illustration), no warm/orange palette (the whole site is pastel rain-blue plus cream plus mint), and no card-grid (it is one long single column from start to finish). The result is **line-art frutiger-aero** — a phrase that does not exist in the design canon yet, because frutiger-aero's defining trait was always glossy 3D photography. We strip the photography and keep the *light*.
## Layout Motifs and Structure
The structural commitment is **single-column** — the rarest layout in the registry at ~6% — held with absolute discipline from `` to ``. **There is no second column. Ever.** No sidebar, no aside, no two-up project grid, no even-three-cards-on-desktop. The page is **one column, 640px wide on desktop, centered in 100vw**, with the entire remaining viewport given over to atmospheric blur-focus weather (described below). This commitment is non-negotiable; it is the first differentiator and a direct response to the fact that 60% of registered designs use card-grid and 25% use sidebar. Single-column forces the eye to *read*, in sequence, like a long letter.
The 640px column is divided into **eleven scroll-stations**, each occupying between 80vh and 140vh:
1. **The Eave** (header + name) — 100vh, the wordmark *amamya.dev* descends one character at a time from the top edge with a 90ms stagger and a 1.4× elastic overshoot, each glyph trailing a 24px-radius pastel-blue blur-focus halo for 600ms before sharpening. Below the wordmark, a single line: *"a place to shelter from rain"*. Below that, a hand-drawn line illustration of a corrugated-tin eave with three water droplets falling.
2. **A short letter** — 80vh, three short paragraphs of body text (~80 words total) introducing the maintainer in conversational first-person. No avatar photo. A small 48×48px line-illustration portrait instead — three strokes, eyebrow / glasses / lopsided smile.
3. **The cabinet index** — 120vh, a vertical line-drawn diagram of a glass cabinet with seven labelled shelves, each shelf marked with a project codename (*hisashi*, *amayadori*, *kasa*, *tsuyu*, *ame-niji*, *shizuku*, *kawaki*). The diagram is drawn in 1.5px stroke, no fill, slate-blue on cream. Hovering each shelf brings it into sharp blur-focus while the other six soften by 6px gaussian.
4. **hisashi** (project 1, the localhost dashboard) — 110vh.
5. **amayadori** (project 2, the static-site generator that built this very page) — 110vh.
6. **kasa** (project 3, a tiny umbrella-shaped CLI for shelling out to other CLIs) — 110vh.
7. **tsuyu** (project 4, a packet inspector named after the rainy season) — 110vh.
8. **ame-niji** (project 5, a colour-calibration tool named "rain rainbow") — 110vh.
9. **shizuku** (project 6, a single-file logger) — 110vh.
10. **kawaki** (project 7, a dehydration / cache-cleaning utility) — 110vh.
11. **The eave again** (footer, contact, git clone URL) — 80vh, mirroring station 1 with the eave illustration inverted to face upward, droplets rising back toward the cloud — a *good night, rain has stopped* moment.
Each project station follows a strict internal structure, repeated seven times: **(a) project name in 96px Futura PT Bold**, **(b) a single hand-drawn line illustration centred at 480×320px**, **(c) one paragraph (~60 words) describing what the project does in honest plain English**, **(d) a five-line ASCII-style invocation example** (the only monospaced text on the entire site), **(e) a single inline `git clone` URL with no button**. No "Learn More" link. No "View on GitHub" badge. No star-count.
The atmospheric layer **outside** the 640px column is where the structural drama lives. The 100vw – 640px = 480px of empty canvas on each side of the column at 1600px viewport (240px per side) is **not empty** — it is a *weather field*. Three pastel cloud-blobs drift slowly across it (40s linear, opacity 0.55, 240px gaussian blur), and **forty-eight tiny line-drawn raindrops** fall vertically through it on independent loops (each drop is a 4px × 12px SVG path drawn in 1px stroke; speed varies between 6s and 14s for parallax depth). When a project's hand-drawn illustration enters the viewport, the rain in that vertical band briefly **slows to half-speed** and shifts 8px laterally toward the column — the weather is *paying attention* to what the reader is reading. This is blur-focus deployed atmospherically, not on text.
There are **zero cards, zero grids, zero CTAs, zero pricing blocks, zero stat-counters, zero testimonials, zero logo-strips**. The closest thing to a "button" anywhere on the page is a single underlined `git clone` string at the very end, and even it is set in body type, not a button shape.
## Typography and Palette
**Type stack — Google Fonts only, three families, strict assignment.**
- **Jost** (variable, weight 100–900, italic available) — the **futura-geometric** voice. Jost is the closest open-licensed analogue to Paul Renner's 1927 Futura, with the same near-perfect circle on `o`, the same single-storey `a`, and the geometric `M` that splays from a single apex point. We use Jost for the wordmark, every project codename heading, every section heading, every numeral, and every navigation glyph. Sizes:
- Wordmark *amamya.dev*: clamp(72px, 12vw, 168px), weight axis 380, letter-spacing -0.04em, the `.dev` set 0.18 alpha lighter than the *amamya* portion as a visual-weight decoupling.
- Project codenames (hisashi, amayadori, …): 96px on desktop, 64px on mobile, weight 700, letter-spacing -0.02em, set in *Lowlight Mint* on *Pearl Cream*.
- Section sub-heads: 32px, weight 500, letter-spacing 0.02em.
- Numerals (project numbering 01–07): 144px, weight 200, sat in the right margin of the column at 32px offset, in *Bus-Shelter Blue* with 0.42 alpha.
- **Sometype Mono** (single weight 400, italic) — the **single concession to mono**, used **exclusively** for the five-line invocation example beneath each project illustration. Mono appears in 95% of registered designs, so we deliberately confine it to <2% of total page glyph count to differentiate. Sometype Mono has a pleasingly soft, almost humanist mono-spacing that pairs with Jost without the harshness of JetBrains Mono or IBM Plex Mono.
- **Caveat** (weight 400, italic) — the **handwritten signature voice**, used on exactly *three* surfaces total across the entire page: (a) the maintainer's signature at the end of station 2's letter, (b) tiny annotation labels (≤6 words each) on each of the seven hand-drawn project illustrations, (c) the "good night" sign-off in the footer. Handwritten typefaces appear in 30% of registered designs but are rarely *rationed* — almost every design that uses them sprinkles them everywhere. We use Caveat **only for things a human hand would actually write**: a signature, a margin annotation, a closing.
Inter, Space Grotesk, JetBrains Mono, IBM Plex, and Geist are all **explicitly excluded**. Frequency analysis shows mono at 95% and humanist at 36% of registered designs; the easy choice would be Inter + JetBrains Mono. We avoid both.
**Palette — pastel, rain-glass, eight colours.**
- `#E8EEF2` — *Pearl Cream*, the dominant background, occupies roughly 64% of pixel area. The exact tone of a rain-fogged window viewed from inside.
- `#BFD4E5` — *Bus-Shelter Blue*, the primary accent, the colour of frutiger-aero's signature water-bead-on-glass. Used for the atmospheric clouds, the marginal numerals, and the line-illustration ink in 52% of cases.
- `#A8D5C2` — *Lowlight Mint*, secondary accent, the colour of an aquarium running on emergency power at 3am. Used for project codenames, the eave illustrations, and the column rules.
- `#5C7A93` — *Slate Twilight*, the body-text colour. Never pure black — the page must read like a drawing in pencil on cool wet paper, never like a press release.
- `#F4D9C8` — *Apricot Awning*, a single warm pastel, used **once per project station** (the small annotation tag on each project illustration), for visual rhythm only.
- `#FBF7F0` — *Untouched Vellum*, the inside of the project illustration cards (the only flat-fill panels on the entire page).
- `#2B3D4F` — *Eaves Ink*, used only for the 1.5px line-illustration stroke when an illustration is actively focused (otherwise the line is *Bus-Shelter Blue*).
- `#FFFFFFCC` — *Glass Layer*, the 80% white scrim used in the blur-focus halo behind the wordmark and behind any hovered illustration.
The palette is deliberately **gradient-light** — registered designs use gradient palettes 93% of the time. amamya.dev uses **flat pastel fills** with the gradient effect deferred entirely to the atmospheric blur-focus layer (the cloud blobs *are* the gradient). The column itself is pure flat colour. This is a second deliberate departure from frutiger-aero's canon, which is gradient-saturated.
## Imagery and Motifs
**Imagery is exactly one thing: hand-traced single-weight line illustration.** No photography. No 3D render. No glassmorphic UI cards. No icon set. No abstract-shape decoration. No gradient-mesh. Frequency analysis: photography appears in 96% of registered designs and line-illustration appears in 0%. amamya.dev commits hard to the unused vocabulary entry — it is the only imagery vocabulary that is currently at zero, and the entire site is built on it.
There are **eight illustrations on the page, drawn in three styles**:
**1. The seven project illustrations** (one per project station), each rendered at 480×320px, 1.5px constant stroke weight, *Bus-Shelter Blue* ink on *Untouched Vellum* paper. Each illustration follows a strict visual contract: the subject is **drawn in continuous-line** (the artist's pen never lifts), and the line **terminates in a small water-droplet bead** at one of the four corners of the frame. The droplet is 6px in diameter, filled in *Lowlight Mint*, and is the *only* filled shape in the illustration. Subjects:
- **hisashi**: a small server tower under a cartoon eave, three blinking-LED dots at the front face.
- **amayadori**: a paper umbrella (傘) with markdown carets `<` and `>` for ribs.
- **kasa**: an umbrella in cross-section showing seven pipe-symbols `|` running down its handle.
- **tsuyu**: a koi swimming through a translucent pipe, its scales drawn as tiny `0` and `1` glyphs.
- **ame-niji**: a rain-rainbow whose seven bands are labelled with hex codes in tiny *Caveat*.
- **shizuku**: a single droplet falling, a thin `tail -f` text-ribbon trailing it.
- **kawaki**: a cracked dry leaf, with `rm -rf ~/.cache` written in *Caveat* in the largest crack.
Each illustration animates on first-enter via **path-draw-svg** — the SVG paths draw themselves stroke-by-stroke over 1800ms with a slight ease-out, the droplet bead appearing last with a 200ms elastic scale-in. path-draw-svg appears in 20% of registered designs but is almost always used on logos or headlines; using it as the *primary* imagery delivery system across an entire scroll is uncommon.
**2. The cabinet index illustration** (station 3), 540×720px, the only illustration on the page that breaks the 480×320 frame. A vertical glass cabinet with seven shelves, drawn in two-point perspective with a vanishing point 12vh below the bottom of the column. Each shelf has a small line-drawn artefact (server, umbrella, pipe-cross-section, koi, rainbow, droplet, leaf — miniatures of the seven project illustrations). The cabinet's glass is implied by *seven horizontal reflection-line strokes* across each shelf at 30% opacity. Hovering a shelf triggers blur-focus: the shelf the cursor is over snaps to 0px blur, the other six gaussian-blur to 6px over 280ms, and the shelf's miniature subtly scales 1.04×.
**3. The eave illustrations** (header and footer), 320×120px each, a low-poly-line drawing of a corrugated-tin eave. Three water droplets fall from it in the header version; in the footer version the eave is mirrored vertically and the droplets *rise* back toward a small cloud — a quiet visual rhyme that closes the document.
**Motifs** beyond the illustrations:
- **tech motif** (frequency 13%, uncommon enough to use deliberately) — expressed *only* through the project subjects (servers, packets, caches), never through the page chrome. There are no circuit-board lines, no "data flowing" backgrounds, no terminal cursors blinking in the ambient. The site looks technical only when a reader is actively looking at one of the seven illustrations.
- **leaf-organic / nature** as a counter-motif — the *kawaki* leaf, the *koi* in *tsuyu*, the rain throughout. Frequency: nature appears in 20% of designs but is almost never paired with tech in the same site; the pairing in amamya.dev reads as *infrastructure-as-garden*.
- **floating-elements** (the rain layer) — used at the atmospheric scale only. The rain is real (forty-eight independent dropping SVG paths), not faked with a CSS `background-image`.
## Prompts for Implementation
Build amamya.dev as **one HTML document, one CSS file, one ES module, eight inlined SVG illustrations**. No framework. No router. No SPA. No bundler beyond minification. The entire page must work with JavaScript disabled (degraded: rain layer becomes static, path-draw-svg illustrations appear pre-drawn, blur-focus on the cabinet shelves becomes a static :hover with no transition — but everything is readable). No "above-the-fold" pricing, no CTA grid, no newsletter capture, no testimonial carousel, no logo strip, no stat-counter, no comparison table.
**Storytelling is the spine, not navigation.** The visitor lands on *the eave*, reads a short letter, opens the cabinet, looks at seven small honest tools one at a time, and leaves with a `git clone` URL. There is no menu. There is no "skip to projects". The reader scrolls, in order, like reading a letter. **Anchor links exist only as `` markers for permalinking from elsewhere — there is no in-page TOC.**
**Animation is the medium**, not decoration:
- **path-draw-svg** is the primary load-in: each project illustration draws itself stroke-by-stroke when its station enters the viewport. Use the standard `stroke-dasharray` / `stroke-dashoffset` technique with `IntersectionObserver` (rootMargin: -20% on Y). Total draw time per illustration: 1800ms ease-out cubic. The terminating droplet bead uses an elastic spring (overshoot 1.2, settle 1.0) at 200ms. Stagger between strokes within an illustration: 90ms.
- **stagger** (frequency 61%, common — use sparingly) used only on the wordmark glyph entrance and on the cabinet shelves' first reveal. 90ms between glyphs / shelves.
- **spring / elastic** (63% / 16% — use minimally) used only on three surfaces: the wordmark glyph overshoot, the droplet bead settle, and the project codename underline-draw on hover.
- **blur-focus** is the *signature interaction* (frequency 10%, deliberately under-used). Three deployments: (a) wordmark halo on load, (b) cabinet shelf focus on hover, (c) atmospheric — when a project illustration enters the viewport its frame snaps to 0px blur while the surrounding 100vh of body type softens to 1.5px gaussian for 800ms, refocusing as the reader scrolls past.
- **parallax** (frequency 93% — overused everywhere) is **not** used in the canonical sense. The rain layer has multi-speed depth, but the column itself does not parallax. The reader scrolls at 1:1.
- **cursor-follow** (58% — overused) is **not used**. The cursor is a normal cursor. The interaction model is *scroll, stop, look, scroll*. No cursor magic.
- **typewriter-effect, glitch, card-flip, ripple, tilt-3d, magnetic** — **not used**. They would break the rain.
**Atmospheric weather layer** (this is the single largest implementation surface):
- A `` at 100vw × 100vh, `position: fixed`, `z-index: -1`, redrawn at 30fps (not 60 — frutiger-aero's reference media at 30fps reads as nostalgic, 60fps reads as modern).
- Three drifting pastel cloud-blobs: each is a radial gradient (Bus-Shelter Blue → transparent over 280px), drifting at independent vectors (4–11s wrap-around, slight vertical bob via sin-wave at 0.08 Hz). Opacity 0.55. Composite-mode `multiply` against Pearl Cream.
- Forty-eight raindrops: each is a 4px × 12px line drawn in *Bus-Shelter Blue* at 0.40 alpha, falling vertically. Y-velocity 60–140px/s (random per drop, fixed at instantiation). When a drop reaches y=100vh+12px, it respawns at y=−12px with a fresh random x ∈ [0, viewport-width-minus-column-bounds]. **Drops do not enter the 640px column** — the column is a respected zone, the rain falls only in the side margins. This is the visual metaphor: *the column is the eave, the column is dry*.
- When a project station enters the viewport, the raindrops in that station's vertical band slow to 50% velocity and shift 8px toward the column for 1200ms, then resume. Implemented by tagging each raindrop with its current x-band and modulating velocity and lateral-drift via the active-station IntersectionObserver.
**Data flow:**
- Eight inlined SVGs (header eave, cabinet, seven project illustrations + footer eave variant). All paths use `vector-effect: non-scaling-stroke`.
- One `IntersectionObserver` watching all eleven scroll-stations.
- One `requestAnimationFrame` loop driving the canvas weather (paused when document is `visibilitychange:hidden`).
- One `pointermove` listener on the cabinet illustration only — nowhere else.
**Mobile (< 720px)**: column is 100vw with 24px gutter. Weather layer reduces raindrop count to 16 and cloud count to 2 to preserve battery. Project illustrations scale to fit 100vw – 48px. Single-column commitment is preserved (it was already a single column on desktop, so mobile is structurally identical — this is one of the wins of the layout choice).
**Performance is not the brief** — but the page should still feel weightless because *frutiger-aero promises lightness* even when no one is grading it. Aim for first paint under 1200ms on a cold cache. Inline all eight SVGs. Inline critical CSS. Defer the weather canvas until after first paint.
**Voice in copy**: friendly, second-person familiar (English; the Japanese roots of project names appear only in italic gloss). Examples:
- *"hisashi watches your localhost from a small eave so it doesn't get rained on."*
- *"amayadori built this page. it builds yours too, if you'd like."*
- *"shizuku writes one log line at a time, and forgets nothing."*
No marketing imperatives. No "Get started in 60 seconds." No "Trusted by." No "Built with love." The closing line of the page is, in *Caveat* italic: *"good night. mind the puddles."*
## Uniqueness Notes
Seven differentiators this design commits to. None should be duplicated by any other CMassC site.
1. **Line-art frutiger-aero** — frequency analysis shows frutiger-aero at ~5% (uncommon) and line-illustration at **0%** (entirely unused vocabulary entry). The intersection has never existed because frutiger-aero is canonically defined by glossy 3D photography. amamya.dev redefines the aesthetic by stripping the photography and keeping only the *light* — pastel halations, blur-focus halos, water-bead optics — rendered in 1.5px continuous-line drawing. The result is a frutiger-aero that reads as *frutiger-aero in pencil on rainy paper*, which is a phrase that does not exist in the canon yet.
2. **Single-column commitment, eleven stations deep** — registered designs use single-column at ~6%. Most "single-column" designs cheat: a sidebar appears on desktop, or a two-up grid forms inside the column. amamya.dev holds the column to 640px from header to footer with no exceptions, including the cabinet-index station which uses *vertical* perspective rather than horizontal layout to avoid breaking the rule. This makes the page read like a long letter, not a portfolio.
3. **Pastel rain-blue + mint + cream palette, no gradients in the column** — pastel appears in 16% of registered designs, gradient palettes in 93%. amamya.dev keeps the column flat-pastel and confines all gradient feeling to the atmospheric weather canvas behind/around the column. This is structurally the inverse of every gradient-pastel site in the registry.
4. **Eight hand-drawn line illustrations as the entire imagery layer** — line-illustration is at 0% in the registry (vocabulary entry never used). Photography is at 96%. amamya.dev uses zero photographs, zero 3D renders, zero stock illustration, zero icon library. Every visual asset is a continuous-line single-weight drawing terminating in a water-droplet bead. This is the registry's first design built entirely on hand-drawn line work.
5. **Atmospheric blur-focus, not text blur-focus** — blur-focus appears in 10% of designs and is almost always used to soften background layers behind text. amamya.dev moves blur-focus to the *canvas weather layer* so that the rain attenuates as a function of which project the reader is currently reading. The weather *responds* to attention. This is a behavioural use of blur-focus, not a stylistic one.
6. **Futura-geometric (Jost) + Sometype Mono + Caveat** — futura-geometric appears in 3% of designs (rare), Sometype Mono in 0% of designs (the registry overwhelmingly uses JetBrains Mono / IBM Plex Mono / Space Mono — Sometype Mono's softer humanist mono-spacing has not been used yet), and Caveat is rationed to exactly three uses across the page (signature, illustration annotation, sign-off). The combination Jost + Sometype Mono + Caveat is unique to this site.
7. **Friendly tone with zero CTAs** — friendly tone tag appears in 3% of registered designs. amamya.dev couples it with a complete absence of conversion surfaces — no buttons, no signup, no "Get Started", no pricing, no testimonial, no logo strip, no stat-counter. The closing line is *"good night. mind the puddles."* This is a friendly site that asks for nothing back, which is rare in any design corpus, not just this registry.
**Avoided patterns from frequency analysis** (deliberately *not* used despite their popularity):
- card-grid (60%) — replaced by single-column
- photography (96%) — replaced by line-illustration
- gradient palettes (93%) — replaced by flat pastel + atmospheric gradient confined to canvas
- mono typography as primary (95%) — Jost is primary, Sometype Mono is rationed to <2% of glyphs
- cursor-follow (58%) — not used
- parallax on the body column (93%) — only the weather parallaxes
- full-bleed (85%) — the column is held at 640px, full-bleed never engaged
- centered (78%) — the column is centered horizontally but content within it is left-aligned, not centered
**Documented chosen seed**: *frutiger-aero glossy tech* (from `seeds.json` line 26), realised with overrides — `aesthetic: frutiger-aero`, `layout: single-column`, `typography: futura-geometric`, `palette: pastel`, `patterns: blur-focus`, `imagery: line-illustration`, `motifs: tech`, `tone: friendly`. The seed's default would have produced glossy 3D photography in gradient sky-blues with a card-grid showcase; this design overrides every default toward the rarer vocabulary entries to produce a frutiger-aero that *no other site in the registry could be confused with*.