# Design Language for amamya.com ## Aesthetics and Tone amamya.com is a **neubrutalist isometric repair-shop arcade** — imagine if a 1970s Tokyo neighborhood electronics-and-toys shop had been redrawn entirely in pixel-precise axonometric projection, then printed in two-color risograph on butter-yellow newsprint, then stapled to a brick wall by someone who genuinely loved both Memphis-Group flyers and the wiring diagrams of vintage transistor radios. The site refuses screen-glass slickness. Every panel feels like cardstock — heavy, slightly off-square, sitting on the page with a 6-pixel hard offset shadow that never blurs. There is no glassmorphism, no gradient mesh, no gloss, no aurora. The chrome of contemporary SaaS has been chiseled off and what remains is **honest paper, honest ink, honest geometry**. The tone is **friendly without being cute, playful without being childish**. amamya is a craftsperson's shop that happens to live online — the kind of place where a hand-lettered sign reads "WE FIX THE STRANGE THINGS" and underneath, in smaller writing, "(also tea, on Saturdays)". The mascot — a roundish, vintage-isometric raindrop-shaped creature called *Amamya* (雨夜, "rain-night") — appears in the corners with stitched-button eyes and a tiny umbrella, never animated for more than a second, never cloying. Visitors should feel they have walked into a workshop where the proprietor knows their name, where the floorboards creak in friendly ways, and where the price-tags are written in pencil. The whole site should feel like **a paper diorama you can fold flat and put in a drawer**. The mood is the moment in a vintage NHK educational program where the narrator says, in a calm, friendly voice, "now, let's look inside" — and a wall of the cardboard house lifts away to reveal a meticulous cross-section diagram. amamya wants that exact warmth: instructional, generous, slightly nostalgic, never condescending. The visitor is treated as a clever apprentice, not a customer to be converted. Avoid energetic startup loudness, avoid corporate confidence, avoid the polished-pebble smoothness of modern fintech. Choose, instead, **the quiet authority of someone who has been hand-soldering circuit boards in the same back room for forty-three years**. ## Layout Motifs and Structure The page is constructed as **a sequence of diagonal bands sliced across the viewport at exactly 14 degrees**. This is critical — *not* a card-grid, *not* a centered single column, *not* full-bleed sections stacked rectangularly. Diagonal-sections sits at 3% in the frequency analysis, and amamya commits to it absolutely: the entire vertical scroll is divided by diagonal cut-lines that are physical, drawn, visible — heavy black 4-pixel lines slicing each band off from the next. Each band is a different solid background color from the palette. The diagonals do not merely decorate the section boundary; they *are* the section boundary. The text inside each band is rotated to sit perpendicular to the diagonal in some cases, and in other cases sits horizontally and is visually "tucked" into the diagonal triangle, as if the text were a Polaroid slid under the corner of a desk pad. Layered on top of this diagonal-banded scroll is an **isometric grid system** at the classical 30°/30°/120° projection. All decorative drawings, icons, panels, buttons, and mascot poses are constructed on this isometric grid — never in flat orthographic. The diagonal page-bands collide with the isometric drawings to produce a satisfying visual tension: the page-bands tilt one way (14°), the iso art tilts the other way (30°), and the orthogonal text sits between them as the stable, readable plane. This collision is the signature of the site. No competitor has it. **Magnetic spacing** — the planned-seed pattern, sitting at 41% globally but used here in an unusual way — governs how elements settle within each diagonal band. Buttons and link-tiles do not sit on a clean grid; instead, every interactive element has a small magnetic radius, so as the cursor approaches, the tile slides ~6–10 pixels toward it with a stiff spring (no overshoot, no float — clack-snap, like a cardboard tab clicking into a slot). The magnetism is *not* lyrical or floaty. It is mechanical: every snap is the same distance, the same duration (180ms), the same easing (a hard cubic-bezier 0.7, 0, 0.3, 1). This makes the page feel like **a physical pinball cabinet where the targets lean in** rather than the soft-cursor-followers common to design-trend sites. There is no sidebar, no hamburger, no sticky header. Navigation is six labeled dots arranged in an isometric hexagon at the top-right of the first band, each dot a small 32×32px isometric cube with a hand-drawn icon inscribed on its top face. Click a cube and the page **mechanically transports** — not smooth-scroll, but a clack-cut transition, three frames of black, then the destination band. (Like a slide-projector. The audible-feeling click matters even though there's no actual sound.) Specifically forbidden in this layout: hero sections with centered headlines, three-column feature grids, pricing tables, testimonial carousels, stat counters, CTA-stack-on-hero, "trusted by" logo bars. The site is anti-conversion-funnel by structural choice. ## Typography and Palette **Fonts (Google Fonts only, three-voice system):** - **Fraunces** — variable, axis settings SOFT 100, WONK 1, weights 400/700/900. This is the *display* voice for the section titles ("REPAIR WINDOW", "CURIOSITIES", "OPENING HOURS"). Fraunces with WONK enabled gives the playful-rounded character the seed asks for, while keeping a slab-serif spine that pairs with the brutalist border lines. Section titles are set at 96–144px, weight 900, with letter-spacing -0.04em, tracked tight enough to feel like metal type that has been hammered into a wood block. - **Recursive** — variable, mono axis MONO 1.0, casual axis CASL 1.0, weight 500. This is the *body* voice. Recursive's "casual" axis at 1.0 gives the rounded, friendly, slightly hand-finished terminals that the playful-rounded tone calls for, while keeping mono for technical alignment when the site shows part-numbers, repair-specs, or coordinate readouts on the isometric drawings. Body copy at 17/26, paragraphs no wider than 58 characters. Used also for the small annotations inside the isometric drawings (set at 11px, all caps, tracked +0.12em — the look of dymo-label tape on a vintage radio). - **Caprasimo** — display only, single weight 400. This is the *signage* voice — a chunky, friendly, slightly drunken display serif used exclusively for the hand-painted-sign elements: the front-door wordmark "*amamya*", the floor-numbering on the isometric building, and the tiny price-tags pinned to the cross-section drawings. Set at variable sizes from 24px (price tags) to 220px (the front-door wordmark). Always set in `#1A1410` ink color, never inverted. **Palette — true complementary, six pigments and one ink. Complementary palette sits at 3% in the frequency analysis, and amamya runs it cleanly:** - `#FFC93C` — *signal yellow*. The dominant background of the first and last diagonal bands. The color of butter-yellow risograph paper held to a 60-watt bulb. Used for ~35% of the page area. - `#3A6BFF` — *plotter blue*. The complementary partner to signal yellow, slightly desaturated. Used for the second and fifth diagonal bands. The exact color of an old Pentel ballpoint that has been refilled too many times. - `#FF5A36` — *kerosene orange*. Used as the secondary accent — the mascot's umbrella, the magnetic-snap highlight, and the underline that draws beneath every link on hover. Never used as a section background. - `#9BE3C8` — *minty paper*. Used for the third diagonal band only, as a relief color between the heavy yellow/blue. Also the tint of the isometric grid lines when seen against yellow. - `#FAF1DD` — *cream stock*. The "negative space" within each band, used inside drop-shadow boxes and inside the isometric drawings as the "interior" of rendered objects. Never the page background. - `#1A1410` — *bistre ink*. The single ink color. Every line, every border, every typographic character of body and signage. 4px hard borders, 6px hard offset shadows, never smaller, never softer. The palette rule: **two complementary anchors (yellow + blue), one orange accent, one mint relief, cream interiors, bistre ink**. No gradients anywhere on the site. No transparency. No shadows softer than `0px`. Every color is solid, every edge is hard. ## Imagery and Motifs **Primary imagery: hand-drafted isometric icons.** Isometric-icons sits at 5% in the imagery frequency analysis — and almost universally used for fintech-dashboard or SaaS-feature blocks. amamya reclaims isometric for **a vintage repair-shop's tool wall**. Every illustration on the site is drawn in 30°/30°/120° true-isometric projection, with 0.75–1.25mm uniform line weight in `#1A1410` ink, fills only in the four palette colors plus cream, and zero perspective foreshortening. Drawings are deliberately imperfect — wobble lines (max 1.5px deviation), small ink-blot dots at intersections (the "isometric corner-stitch" mark), occasional hairline cracks in solid fills as if printed by a tired risograph drum. **The recurring drawn objects, all isometric, all drawn in the same hand:** - A cross-section of a small two-story repair shop, viewed at the standard isometric angle, with the front wall removed so the visitor can see all six rooms. The shop sits in the second diagonal band and is the centerpiece of the home page. Each room contains a different vignette: a workbench with disassembled radio, a tea-station with a kettle steaming three tiny ink-curls, a rain-collection pipe descending into a glass jar, a ledger desk, a sleeping cat (named *Hibachi*, never explained), and a small shrine to no specific deity. - A **wall of tools** drawn in flat-isometric: thirty hand-tools arranged in a 6×5 isometric grid, each one slightly rotated from the others by ±2°, every tool labeled with a tiny dymo-tape annotation. This is the third-band "what we do" gallery — replacing the conventional services-list. - The **mascot Amamya** — round, raindrop-shaped, button-eyed, drawn in seventeen poses across the site. Always isometric, always with the same kerosene-orange umbrella. Amamya is never animated except for one specific case: at the end of a magnetic-snap interaction, Amamya — wherever it currently appears — blinks once. Just once. 60ms. Never more than once per ten seconds anywhere on the page. - A **tiny isometric storage shelf** in the page footer, drawn with eighteen labeled boxes — each box is a footer link (about, contact, log, archive, colophon, etc). Hovering a box makes it slide forward 8px on its isometric axis with the magnetic-snap easing. **Vintage motifs (tied directly to the seed):** The site is dotted with carefully-chosen vintage paraphernalia — a rotary phone in the ledger room, a cassette-tape catalog card, a postage stamp from a country that doesn't exist with the denomination "1¥80", a set of bus-ticket-style tear-perforations between sections. None of these are stock imagery. All are drawn in the same isometric ink line. The vintage motif sits at 23% globally, but here it is filtered specifically through **1970s Japanese neighborhood-shop ephemera**, not the more common American mid-century or European art-deco vintage flavors that dominate that 23%. **Decorative pattern fills:** Three repeating SVG patterns are defined and used sparingly (~12% of total page area): 1. *Crossed hatchwork* — 4mm spaced 60° lines, used inside drop-shadow boxes only. 2. *Iso-dot field* — a triangular dot grid (8mm pitch) used to mark "background" planes in the isometric drawings. 3. *Tear-perf* — 4mm circles cut from the page edge, used as the visual divider between the diagonal bands at the actual cut-line. ## Prompts for Implementation Build amamya.com as **a single static page, vertically scrolled through seven diagonal bands**. One HTML file. One CSS file. One small JS module (≤8KB minified, no framework, no bundler). The Google Fonts link and three SVG sprite files (mascot poses, isometric shop, tool wall) are the only external assets. The full page should fit under 110KB excluding fonts. No build step. No SPA. No analytics. No tracking. No service worker. **The seven diagonal bands, in scroll order, each cut by a 14° black slash 4px wide and a tear-perf decoration:** 1. *Band 1 — signal yellow.* The mascot's front yard. The wordmark "amamya" set in Caprasimo at 220px sits in the lower-left isometric ground plane. The six-cube hex-navigation sits top-right. A single sentence in Recursive at 28px reads "we fix the strange things." That's all. No CTA. No button. The visitor scrolls. 2. *Band 2 — plotter blue.* The isometric repair-shop cross-section, full width, all six rooms visible. Six magnetic-snap hotspots, one over each room. Hovering a room snaps that room forward 10px on the iso z-axis and reveals a tiny annotation in cream ink. The annotation is a haiku-length description, never more than 12 words. 3. *Band 3 — minty paper relief.* The isometric tool wall — 30 tools in a 6×5 iso grid. Each tool is a magnetic-snap target. Hovering swaps in a Recursive-mono dymo-label that names the tool and its purpose ("**OSCILLOSCOPE — FOR LISTENING TO ELECTRICITY**"). This band is the about/services page — but presented as a tool inventory. 4. *Band 4 — cream stock with bistre-ink hatchwork ground.* The "log" — a vertical timeline of dated entries, each a single hand-drawn isometric vignette plus a one-paragraph note in Recursive. The timeline reads bottom-to-top, oldest at the bottom, like geological strata. 5. *Band 5 — plotter blue (return).* The "curiosities" gallery — a 3×3 isometric grid of weird objects the shop has been asked to fix (a music box that plays only minor keys, a typewriter with no letter Q, a bicycle wheel that turns counterclockwise underwater, etc). Each tile is magnetic. Clicking does *nothing* — they are just shown, not sold. This is the anti-conversion section. 6. *Band 6 — signal yellow (return).* Opening hours, address (drawn as an isometric map fragment), contact methods (drawn as a labeled rotary-phone diagram). No form. No newsletter signup. Just the information, hand-drawn. 7. *Band 7 — bistre ink ground, cream type.* The colophon. Lists the fonts used, the palette hexes, the file size of the page, the date of last update, and a single line of Caprasimo at 24px: "drawn by hand. served as paper." Below it, the storage-shelf footer with 18 labeled isometric boxes. **Animation budget — extremely strict:** - Magnetic-snap on hover: 180ms cubic-bezier(0.7, 0, 0.3, 1). 6–10px translation. No scale change. No color change. - Mascot blink after snap: 60ms opacity 1 → 0 → 1 on the eye-paths only. - Hex-cube navigation transport: 3-frame black flash (40ms each) + scroll snap to band. - Diagonal-band reveal on scroll: each band's diagonal line *draws itself* from one edge to the other on first appearance, 320ms, linear easing, then stays. - Tool-wall dymo-label appears: 0ms — instant. No fade. No slide. Cardboard tab clicks into slot. - The mascot Amamya is otherwise static. No idle bobbing. No floating. No follow-cursor. The umbrella does not sway. **Total motion is intentionally low.** The site reads as a printed object that occasionally responds. Storytelling is delivered through the *spatial* journey across the diagonal bands and the inhabited isometric drawings, not through animation. Absolutely no parallax. Absolutely no scroll-jacked horizontal sections. Absolutely no full-screen video. **What to avoid (explicit):** centered hero with massive headline + CTA-pair, three-column feature grid, pricing block (the shop has no prices on the site — pricing is by ink-pencil estimate), customer-logo strip, testimonial carousel, "stat-grid" with counter-animations, modal newsletter popup, smooth-scroll page transitions, rounded-rectangle buttons with gradient fills, photographic hero imagery, Lottie animations, bokeh, lens flare, neon glow, glassmorphic cards. None of these may appear. The visual language is *paper, ink, isometric line*. ## Uniqueness Notes This design's differentiators, each a deliberate departure from the patterns documented in the frequency analysis: 1. **Diagonal-sections committed-to absolutely, not as accent.** Diagonal-sections sits at 3% in the layout frequency, and within those few sites the diagonals appear only as decorative dividers between otherwise-rectangular sections. amamya makes the 14° diagonal the *primary structural unit* of the entire scroll — every band, every cut-line, every section boundary is a diagonal. The page has no horizontal section edges anywhere. This is structurally rare. 2. **Neubrutalism without the trend cliches.** Brutalist sits at 3% in aesthetics; neubrutalism is even rarer. Most neubrutalist sites lean on hot-pink + chartreuse + heavy black borders + big sans-serif. amamya keeps the hard-border + offset-shadow + flat-color foundation but *swaps the palette to vintage Japanese-shop yellow/blue/orange complementary*, and *swaps the typography to a Fraunces-WONK + Recursive-CASL + Caprasimo trio* — none of the standard neubrutalist fonts (Space Grotesk, Inter, Archivo) appear. This is neubrutalism filtered through the seed's playful-rounded typography brief, which is itself an unusual combination. 3. **Isometric icons reclaimed from the SaaS-dashboard genre.** Isometric-icons sits at 5%, and almost every appearance is a fintech feature block or a developer-tool landing page. amamya uses isometric for *a hand-drawn cross-section of a fictional repair shop* — narrative isometric, not infographic isometric. The illustrations are the *content* of the site, not decoration around it. 4. **Magnetic interactions as mechanical, not lyrical.** Magnetic sits at 41% globally and the dominant flavor is soft, floaty, smooth-cursor-following. amamya's magnetism is *clack-snap mechanical* — short distance, hard easing, no overshoot, no continuous following. It feels like a pinball target, not a butterfly net. 5. **Anti-conversion structure.** The site has no CTA, no pricing, no signup form, no testimonials, no logo-bar, no stat-grid. The "curiosities" band explicitly shows things that are *not for sale*. This is a structural rejection of the conversion-funnel layout that dominates the modern web — and a direct expression of the friendly-craftsperson tone. 6. **Complementary palette held cleanly.** Complementary sits at 3% in palettes; most implementations drift into triadic or analogous over time, or dilute the complement with too many neutrals. amamya keeps the yellow/blue complement at 70% of total page area, with exactly one accent (orange), one relief (mint), one interior (cream), and one ink (bistre). No drift. No gradient. 7. **Vintage motif specifically as 1970s Japanese-shop ephemera.** Vintage sits at 23%, but the dominant flavors in that band are American mid-century, European art-deco, and Victorian. amamya occupies a niche corner of vintage that the other 23% does not — *Showa-era neighborhood-shop print culture* (rotary phones, dymo tape, two-color risograph, hand-stamped tickets, ledger pencils). 8. **Friendly tone without cuteness.** Friendly sits at 3% in tone, often slipping into either corporate-warm or whimsical-creative. amamya's friendliness is *the friendliness of an experienced craftsperson talking to an apprentice* — instructional, generous, calm, slightly nostalgic, never performative, never saccharine. The mascot blinks once; the umbrella does not sway. **Chosen seed (from assignment):** aesthetic: neubrutalism, layout: diagonal-sections, typography: playful-rounded, palette: complementary, patterns: magnetic, imagery: isometric-icons, motifs: vintage, tone: friendly. **Avoided patterns (per frequency analysis):** photography (96% — no raster photos used), full-bleed (85% — every section is diagonally cropped, never full-bleed rectangular), centered (78% — text is tucked into diagonal triangles, not centered), gradient (93% — zero gradients), warm (91% — the palette is complementary yellow/blue, not warm-monochrome), parallax (93% — no parallax of any kind), spring (63% — magnetism uses a hard cubic-bezier, not a spring curve), cursor-follow (58% — no cursor-following anything), mono-typography-everywhere (95% — mono is used only for technical annotations, not for body or display), hand-drawn-aesthetic (93% — drawings are hand-finished but the *aesthetic* is neubrutalist, not loose-hand-drawn).