# Design Language for amamiya.xyz ## Aesthetics and Tone amamiya.xyz is a **mid-century rain pavilion typed onto onionskin paper at 3 a.m. in 1962** — imagine Saul Bass and Ikko Tanaka collaborating on a one-page broadside for a fictional Tokyo radio station that broadcasts only the sound of rain, and the broadside has spent six decades in a humid drawer collecting fine grain. The aesthetic sits squarely on **mid-century modernism** (8% in the corpus, deliberately underused — the cottagecore and dark-academia waves left this slot empty) and pairs it with **nostalgic-retro tone** (5%, also empty corner). The result is **clay-warm, paper-cool, and slightly out of focus**, like a memory of a brochure rather than the brochure itself. The mood is **the inside of a typewriter ribbon tin** — half-spent, faintly oily, with a residual smell of carbon black. There is no gloss, no glassmorphic blur, no neon, no magnetic cursor halo. There is only **paper**, **ink**, **rain**, and **the slow tick-tick-tick of letters appearing one at a time**. The site speaks at the cadence of a 1962 transistor radio announcer: unhurried, slightly formal, fond of em-dashes and three-second pauses. The Japanese name 雨宮 (amamiya — "rain shrine") is the spine of the entire concept. Every visual decision is filtered through the question: *would this object be at home on a desk where someone is listening to rain?* If the answer is no, it is removed. The site is therefore aggressively pruned: no testimonials, no logo cloud, no pricing tier, no CTA stacked on CTA. The rain dictates the silence. The tone refuses irony. It is **earnest, slightly melancholic, and unembarrassed by sentiment** — closer to the printed companion booklet of a Toru Takemitsu LP than to a tech landing page. Where contemporary sites optimize for dwell-time-via-novelty, amamiya.xyz optimizes for **dwell-time-via-quietude**: the visitor stays because the page stops asking for things. ## Layout Motifs and Structure The composition is a **single column, 38ch wide, centered, set on a 16-line typewriter grid** — every vertical interval is a multiple of the 24px line-height of the body monospace. Single-column sits at 6% in the frequency analysis; this site claims that empty room and refuses every multi-column temptation. There is **no card grid, no bento, no asymmetric break, no full-bleed hero**. The page is a **typed letter**, and a typed letter has one column. **The Six-Section Letter Structure (top to bottom, no horizontal escape):** 1. **The Letterhead.** A 240px-tall band of ivory paper with a single rule (1px, #4A3D2E) at the bottom, the wordmark "amamiya.xyz" in expressive-variable display type centered above it, and a date stamped in the top-right corner in faint #A89478 ink. No nav. No menu hamburger. No logo glyph. The letterhead is cold and clean and slightly off-square (rotated 0.4° counter-clockwise to suggest the page was placed on the desk hastily). 2. **The Salutation.** A single line — "Dear listener," — set 64px below the letterhead, left-aligned to the column's left edge (not centered, never centered for body content). The comma is hand-set with a slightly larger optical size, the way a real typewriter's punctuation always looked heavier than the letters around it. 3. **The Opening Stanza.** Three short paragraphs, each 2–4 lines long, set in monospace body type. The first letter of the first paragraph is a **drop-cap of one geometric primitive** — a circle, a square, or an equilateral triangle, filled in #B73A2F (the only saturated color on the page) and sized to span exactly two body lines. The drop-cap is the only ornament until section 4. 4. **The Geometric Interlude.** A 320px-tall full-column band containing **three mid-century geometric primitives** arranged on the column's center axis: a #B73A2F triangle (apex up), a #4A3D2E circle (outline only, 2px), and a #7DA88B square (rotated 12°), spaced exactly 88px apart. Below them, a typewriter-effect caption appears one character at a time on scroll-into-view: "*— a shape, a shape, a shape, and the rain.*" This is the only band in the page that is not pure prose. Geometric-shapes motif sits at 3% — almost unclaimed — and this section is the site's flag in that ground. 5. **The Body Letter.** Six to nine paragraphs of monospaced prose, each separated by exactly one blank line (24px). No subheadings, no bold runs, no inline links styled as buttons. Inline links are rendered in carbon-paper purple (#5E4B7A) with a 1px underline drawn underneath at typewriter-baseline depth. Footnotes (numbered, raised 0.3em) cluster at the bottom of the column rather than mid-line. 6. **The Sign-off.** "— Yours, in rain." set right-aligned to the column's right edge, followed by 240px of empty paper that fades into a **grain-overlay vignette** (radial, 0% center → 18% edge). Below the vignette, the column terminates in a single 12px-wide horizontal rule centered under the column. There is no footer. No "back to top." No social icons. The page ends. **The 16-Line Grid.** Every section's vertical position snaps to a multiple of 24px (one typewriter line). The user can almost feel the grid because the rhythm is metronomic — letter, line, letter, line — and breaks would be felt as missing keystrokes. **No Sticky Anything.** No sticky nav, no sticky CTA, no sticky cookie banner. The page scrolls as a roll of paper unspools: once a line is gone above, it is gone. **Off-Square Rotation.** The entire column is rotated 0.4° counter-clockwise. This is small enough to read as "the paper was placed slightly crooked," not as "this is a tilted layout." It is the difference between a hand-set page and a CSS one. ## Typography and Palette **Fonts (Google Fonts only — three voices, layered like ribbon-impressions):** - **Display & Wordmark — *Bricolage Grotesque* (Variable, wght 200–800, opsz 12–96, wdth 75–100).** Used for the "amamiya.xyz" wordmark and the four section sub-numerals. Bricolage Grotesque is chosen because it is one of the few free expressive-variable typefaces whose three axes (weight, optical size, width) interact like a mid-century sign-painter's hand: the heavier weights swell at small optical sizes, the lighter weights stretch at wide widths. The wordmark animates on first load: weight crawls 200 → 720 over 1.6 seconds while width contracts 100 → 86, so the type appears to **inhale**. Expressive-variable typography sits at 6% in the corpus — this is the rare vocabulary slot, and Bricolage Grotesque is the rare free font that fully exercises it. - **Body — *JetBrains Mono* (wght 400, ital 0/1).** Set at 16px / 24px line-height / 0ch letter-spacing. JetBrains Mono is chosen over the more common IBM Plex Mono because its lowercase 'a' has a single-storey form that reads as **typewriter-mechanical** rather than digital. The body is set in #2B2419 on #F4ECD8 — not pure black, never pure white — to mimic the gray ink of a worn ribbon striking ivory paper. Italic is reserved for the typewriter-effect captions and the sign-off. - **Drop-caps & Numerals — *Fraunces* (Variable, wght 900, opsz 144, SOFT 100).** Used only for the three-line drop-cap that opens the Opening Stanza, and for the date-stamp numeral in the letterhead corner. Fraunces at SOFT 100 has serifs that swell into rounded blobs — a perfect mid-century-poster echo when set in #B73A2F. **Palette — "Rain on Onionskin" gradient, six warm-paper stops + two interruptions:** The palette is **gradient** (the most-used token at 93%) but **gradient inverted into stillness**: instead of a saturated sunset gradient stretched across a hero, the gradient here is a **near-monochrome onionskin wash** that runs from cream to clay across an 88-degree linear sweep, applied only to the page background and the letterhead vignette. The eye reads it as "warm paper" — not as "gradient." This is the design's quiet rebellion against the corpus's gradient fatigue: take the most overused token and render it almost imperceptible. | Role | Hex | Description | |---|---|---| | Paper-base (gradient stop 1) | `#F4ECD8` | Onionskin ivory, the page's bottom | | Paper-mid (gradient stop 2) | `#EFE2C7` | Ribbon-tin cream | | Paper-warm (gradient stop 3) | `#E9D6B0` | Faded mustard, the page's top | | Ink-body | `#2B2419` | Carbon-ribbon brown-black, never pure black | | Rule-line | `#4A3D2E` | Roasted-coffee, used for the 1px letterhead rule and the column terminus | | Date-stamp ink | `#A89478` | Faint dust-color, used only for the letterhead date numeral | | Accent-vermilion | `#B73A2F` | The single saturated color: drop-cap, triangle primitive, hover state | | Accent-sage | `#7DA88B` | Mid-century olive-sage, used only for the rotated square primitive | | Carbon-purple | `#5E4B7A` | Inline-link color, the carbon-paper purple of a duplicate copy | The palette holds **eight ground tones plus one vermilion strike**. The vermilion appears exactly three times on the page — in the drop-cap, the triangle primitive, and the link-hover underline thickening — and never in a button, never in a CTA. It is used the way Saul Bass used the red dot on the Anatomy of a Murder poster: as the only hot color in a sea of warm neutrals. ## Imagery and Motifs **No photography. No 3D renders. No stock illustration. No emoji. No icons.** Every visual on the page is either (a) typeset, (b) an SVG geometric primitive, or (c) procedural grain. **The Three Primitives (mid-century geometric, repeated as ritual):** The page contains exactly **three primitive shapes**, each appearing exactly **three times**, for a total of nine shape-instances. The repetition is intentional — mid-century broadsides used a small primitive vocabulary deployed at three sizes (poster, header, ornament). Geometric-shapes is at 3% in the motifs frequency analysis; this design **builds the entire visual system on it**. - **Equilateral Triangle (apex up).** Filled #B73A2F, no stroke. Sizes: 12px (drop-cap echo), 64px (interlude band), 144px (sign-off mark). Always apex-up — never inverted, never rotated. It is the rain pictograph: a single drop frozen mid-fall. - **Circle (outline only).** Stroke 2px in #4A3D2E, no fill. Sizes: 12px, 64px, 144px. Always perfectly round — never an ellipse. It is the radio dial, the puddle, the moon over the rain shrine. - **Square (rotated 12°).** Filled #7DA88B, no stroke. Sizes: 12px, 64px, 144px. Always rotated exactly 12° clockwise — the only object on the page that is not aligned to the typewriter grid, the visual stutter that signals "this is not just paper." It is the tatami corner, the lacquered tray, the wet flagstone. **The Grain Overlay.** A procedural 1024×1024 SVG noise texture, opacity 0.06, blend-mode multiply, fixed-attached so it does not scroll with the page. The grain is **not a decorative texture** — it is the substrate. It is what makes the gradient palette read as "paper" rather than as "CSS background." It also rules out clean glass-style aesthetics: nothing on this page can be perfectly smooth because the grain forbids it. Grain-overlay sits at 8% in the imagery frequency analysis; this design pushes it past mere accent into structural role. **The Typewriter-Effect Cadence.** Three text moments on the page reveal one character at a time, at a fixed cadence of **38 characters per second** (the rate of a Smith-Corona Skywriter at confident-typist speed, audibly clattery but not frantic): 1. The wordmark on first paint. 2. The interlude caption ("— a shape, a shape, a shape, and the rain.") on scroll-into-view. 3. The sign-off ("— Yours, in rain.") on scroll-into-view of the bottom 200px. Each character lands with a faint **ribbon-strike micro-animation**: 80ms ink-bloom from #4A3D2E to #2B2419, no sound. The cursor is a 2px-wide vertical block that blinks at 1.6Hz and disappears once the line completes. Typewriter-effect is at 5% — claimed sparingly here. **No Other Imagery.** No hero photo, no illustration, no abstract gradient mesh, no 3D blob. The only **picture** on the entire page is the page itself. ## Prompts for Implementation Build amamiya.xyz as **a single-route, single-column, vertically-scrolled typewriter-letter** — one HTML file, one CSS file, one JS module. Treat the page as a 90-second slow read of a 1962 broadside, not a tech landing page. There is no CTA, no pricing block, no stat grid, no testimonial row, no contact form, no signup, no nav menu. There is only **the letter**. **Storytelling structure (six sections, vertical scroll, no horizontal escape):** 1. **First Paint — The Letterhead.** Page loads on `#F4ECD8` paper-base. Wordmark "amamiya.xyz" (Bricolage Grotesque, weight 200, width 100, 64px) appears at the column-center after a 240ms delay. The wordmark then animates **weight 200 → 720 and width 100 → 86 over 1.6s** with `cubic-bezier(0.2, 0.8, 0.2, 1.0)`, so the letters appear to inhale and thicken into the page. The 1px rule below the wordmark draws left-to-right over 800ms, then stops with a faint ink-bleed at the right end. The date stamp ("2026 . 5 . 9", Fraunces 12px, #A89478) fades in last. Total letterhead choreography: 2.6 seconds. The user does not interact during this; the page is establishing its register. 2. **Scroll Begins — The Salutation.** "Dear listener," appears in JetBrains Mono 16px, **left-aligned to the column** (not centered). It is **not typewriter-animated** — it simply is. This is intentional: the typewriter effect must be reserved for moments that matter. The salutation matters as architecture, not as event. 3. **The Opening Stanza.** Three paragraphs of body monospace. The first paragraph opens with a **Fraunces drop-cap** (weight 900, opsz 144, SOFT 100, fill #B73A2F) sized to two body lines. The drop-cap fades in 200ms after the salutation lands. Body paragraphs have no animation — they are just there, the way text on paper is just there. 4. **The Geometric Interlude — Three Shapes, Three Beats.** As the user scrolls into the interlude band (intersection-observer, threshold 0.4), the three primitives stagger-fade-in with a 240ms delay between each: triangle → circle → square. Each fade is 600ms, opacity 0 → 1, no movement. After the third primitive lands, the typewriter-effect caption begins underneath: "— a shape, a shape, a shape, and the rain." at **38 chars/sec**. Each character emits an 80ms ink-bloom (color animates `#4A3D2E → #2B2419`). A 2px cursor block blinks at the line-end, disappearing 800ms after the caption completes. **Do not play any audio.** 5. **The Body Letter — No Animation, Pure Reading.** Six to nine body paragraphs. The user reads. Inline links use the carbon-purple `#5E4B7A` with a 1px underline at typewriter-baseline depth (typeset using `text-underline-offset: 0.32em`). On hover, the underline thickens to 2px and the color saturates to `#B73A2F` over 180ms — the only place vermilion enters the body. There are no scroll-triggered reveals here. The corpus's parallax-93% and stagger-61% are deliberately absent; this design refuses to perform. 6. **The Sign-off — Last Typewriter Beat.** "— Yours, in rain." appears right-aligned in italic JetBrains Mono, typewriter-effect at 38 chars/sec when scrolled into view. After the line completes, the 144px equilateral triangle (vermilion, apex up) fades in 60px below the sign-off, centered to the column. The grain-overlay vignette deepens to 18% opacity at the page bottom. The 12px terminus rule appears under the vignette. Page ends. No "back to top" arrow. No newsletter prompt. No "what's next?" section. **Animation Constraints (strict):** - **No parallax.** Parallax is at 93% in the corpus. This site does not parallax. Layers move together or not at all. - **No magnetic cursor.** Cursor-follow is at 58%. The cursor is a cursor; it does not summon halos. - **No card-flip, no tilt-3d, no morph.** This page is paper. Paper does not flip, tilt, or morph. - **Typewriter-effect is the ONLY scroll-triggered text animation.** Used three times, total. Never decoratively. - **All easing is `cubic-bezier(0.2, 0.8, 0.2, 1.0)`** — a soft, paper-friendly curve. No bounces, no elastics, no springs. - **Respect `prefers-reduced-motion: reduce`** by removing all typewriter cadence and showing text fully on intersection. The grain and the rotation persist; they are not motion. **HTML/CSS/JS Notes:** - One `
` element, six `
`s, no `