# Design Language for amamya.xyz ## Aesthetics and Tone amamya.xyz is a **street-style zine pressed under cool concrete light, lit only by a single hand-held candle that someone forgot to blow out**. The mood is the back-page of a Tokyo skate-shop free-paper that got photocopied seven times and stapled inside a cool-grey design monthly — a magazine spread where xerox toner and candle-soot live on the same gutter. The site is whimsical-creative not in the sense of "cheerful UI", but in the sense of **a kid wandering an empty parking garage at 4 a.m. with a sparkler**: half-mischief, half-wonder, all rendered in the colour of damp pavement. The seven references the page is built from, named so the implementer cannot drift: 1. **Free-papers in plastic crates outside a Shibuya record shop, 2003.** Newsprint that got rained on, ink that ran into the gutter, sticker bombs over the masthead. 2. **A fanzine spread photocopied at 80% scale,** so every halftone became a smudge and every smudge became a deliberate texture. 3. **A single beeswax taper in a metal candle-holder on a concrete floor,** the only warm thing in a room of cool-grey wall-paint. 4. **The Helvetica-and-marker hand-lettering of skate-zines like *Slap* and *Anthem*** — official sans next to a Sharpie-on-grip-tape scrawl. 5. **A two-page editorial spread in *The Gentlewoman* or *Apartamento*** — wide gutter, one big quote, lots of breathing room, a folio number set tiny in a corner. 6. **Kids drawing on cracked sidewalks in chalk** — wobbly circles, crooked stars, the deliberate imperfection of a hand that does not care to be steady. 7. **The blue-grey hour right before dawn,** when a city is between night and morning and nothing has decided what colour it is yet. The tone is **whimsical-creative**: the site is allowed to be silly. A footnote can be a doodle. A heading can lean like a tipped soda can. A spread can be left half-empty on purpose because the spread next to it is overstuffed. Nothing here is selling anything; the site is the magazine, and the magazine is the joke, and the joke is told in a quiet voice in a cool-grey room with one candle on. amamya is the name of a girl who draws on her own sneakers in silver paint pen and writes tiny notes to herself on the inside of her wrist. The site reads like the inside of her wrist: cool, deliberate, slightly smudged, and lit just enough to see by. ## Layout Motifs and Structure The site is a **magazine-spread** — two facing pages at a time, never a single column, never an infinite scroll feed. magazine-spread sits at 5% in the corpus; this site implements it as **literal facing-page editorial layout** rather than as styling on top of vertical scroll. The user **flips spreads horizontally**, the way you flip a real zine on a low table. **The Spread Grid.** - The viewport is one **two-page spread** at all times: `width: 100vw; height: 100vh; display: grid; grid-template-columns: 1fr [gutter-start] clamp(48px, 6vw, 96px) [gutter-end] 1fr;`. The middle track is the gutter — the binding — and it is **not empty**: it carries the candle. - A vertical **candle column** runs in the gutter, full-height, 1px wide, rendered as a CSS `linear-gradient` from `#2A2D33` (cool-charcoal) at the bottom to `#FFE9C2` (candle-flame warm) at a wavering point near the top. Above the gradient sits an SVG flame — a single hand-drawn teardrop with `feTurbulence` flicker — that is the **only warm thing on the entire site**. Every other pixel is cool-grey. The candle is the visual anchor and the page-number indicator: it burns down 0.7% per spread you advance, and is fully consumed at the final spread. - The two facing pages are not symmetric. Each spread chooses one of seven **layout-archetypes from real editorial print**, named after their print-page-equivalents: 1. *Cover.* Left page: oversized one-word title in playful-rounded, bottom-left. Right page: a single doodle motif, dead-centre, surrounded by grey air. 2. *Quote spread.* Left page: a 9-word pulled quote at clamp(64px, 11vw, 200px), italicised, ranged left, with a hanging quote-glyph that bleeds into the gutter. Right page: a tiny attribution at the bottom-right, and three fingerprint smudges where the previous reader held the page. 3. *Photo essay.* Left page: a full-bleed abstract-shape composition in cool-grey duotone. Right page: caption in 12px mono, ragged-right, with a thin hand-drawn underline that wobbles. 4. *Free-paper sticker-bomb.* Left page: seven hand-cut sticker shapes scattered at random rotations, each carrying a fragment of text. Right page: a single rectangle of "blank advertising space" with a hand-written *"this could be your ad"* in marker. 5. *Centre-fold poster.* Both pages combine into one bleed image — an abstract-shape composition that crosses the gutter. The candle stays lit on top of the image, undimmed. 6. *Letter-from-the-editor.* Left page: a hand-written column in playful-rounded italic, ragged-right, ten short paragraphs. Right page: a single doodle of a candle, identical to the gutter-candle, holding a comma between its flames. 7. *Colophon.* The final spread. Left page: type-credits, paper-stock joke, run-number ("printed in an edition of 1, in a cool-grey room"). Right page: the candle has burned all the way to the brass holder, and the gutter-candle goes out with the user's last horizontal scroll. - **No vertical scroll inside any spread.** Vertical scroll is disabled (`overflow-y: hidden`) inside `.spread`. The user moves only sideways. This claim is explicit and the site refuses the dominant pattern (parallax at 93%) as a creative axis. - **The gutter-margin rule.** No primary content ever crosses the gutter except in the *Centre-fold poster* archetype. Captions and folios respect the gutter as a binding. The implementation enforces this with a CSS clip-path on each `
` that excludes the gutter track. - **Folio numbers, ranged outside.** Every spread carries two tiny folios — left page bottom-left, right page bottom-right — set in 9px mono, prefixed by a hand-drawn arrow, e.g. `← 02` and `03 →`. These folios do **not** auto-increment by code; they are written into the markup, the way a real magazine numbers its pages. - **The cover-corner sticker.** Every spread has one fixed-position element in the **top-left of the left page**: a small (48px × 48px) hand-cut sticker with a one-word phrase (`xoxo`, `wet`, `late`, `quiet`, `again`, `okay`). The sticker rotates 4° anticlockwise and overlays everything, the way a real sticker would. - **No header. No nav bar. No footer. No CTA. No pricing. No stat grid.** The spread itself is the navigation: you flip it, or you don't. ## Typography and Palette **Fonts (Google Fonts only, three voices in calibrated tension):** - **Primary display & body — *Fraunces* (Variable, opsz 144, SOFT 100, wght 300–900).** Despite the name "playful-rounded", the type strategy uses Fraunces' SOFT axis cranked to maximum to *make a serif behave rounded*: at SOFT 100, Fraunces' terminals swell into rounded blobs. Used for headings at clamp(56px, 9vw, 200px) and for body editorial at 18px / line-height 1.55. Italic mode is preferred for pulled quotes; SOFT axis is reduced to 30 for body so the type stays legible. - **Playful-rounded sans — *Quicksand* (Variable, wght 300–700).** True playful-rounded. Used for sticker-bomb captions, marker-style asides, and the "this could be your ad" rectangle. Set at 14px–22px with letter-spacing of 0.04em to mimic a felt-pen rhythm. Quicksand carries the *amamya* wordmark on the *Cover* spread at 240px, with the dot-of-the-i replaced by a tiny SVG candle-flame. - **Mono — *DM Mono* (wght 300, 400, 500).** Used for folios, captions, colophon credits, and any time the magazine wants to look like a typewriter laid a single line of confession across the gutter. 9px–13px only. Mono is allowed in italic. **Type-setting rules.** - Body copy is **ranged-left, ragged-right**, never justified. Hyphens disabled. - Pulled quotes carry a **hanging punctuation** — opening quote sits in the left margin, not in the column. - Drop-caps appear once per spread, exactly once, set in Fraunces SOFT 100, italic, at 4 lines deep, in `--ash`. - A **hand-drawn underline** appears under a single phrase per spread — implemented as SVG `` with a 1.2px stroke, `stroke-linecap: round`, and a `wobble` filter (`feTurbulence` baseFrequency 0.02, scale 2). **Palette — cool-grays, with one warm candle exception.** cool-grays sits at 3% in the corpus; this site claims it. | Role | Hex | Notes | |---|---|---| | **Concrete (page background)** | `#D7D9DB` | The colour of a Sunday-morning sidewalk after rain. The default page-fill. Not white. Never white. | | **Pavement** | `#B5B8BD` | Used for boxed-out areas, sticker backings, and the "blank advertising space". | | **Damp ink** | `#5A5F66` | Body copy. Just dark enough to read; just light enough to feel photocopied. | | **Charred** | `#2A2D33` | Display headings, the candle-base, the heaviest hairlines. | | **Pencil** | `#7C8089` | Captions, folios, the wobble-underline. | | **Ash** | `#9CA0A6` | Drop-caps, decorative shapes, secondary doodles. | | **Candle-flame** | `#FFE9C2` | The single warm tone. Used **only** for the gutter-candle gradient, the wordmark dot-i flame, and the bottom-right corner-glow on hover. Used nowhere else. | | **Wax-shadow** | `#E8DEC9` | A warm-leaning ash, used **only** beneath the candle-base (4px translucent halo) to suggest a wax-spill. Used nowhere else. | The discipline is total: the page is cool-grey on cool-grey on cool-grey, and the candle is the single point of warmth. The user notices the candle because nothing else competes with it. ## Imagery and Motifs **No photography. No 3D renders. No stock illustration.** Every visual is **abstract-shapes** drawn by hand and exported as SVG. abstract-shapes is rare in the corpus (the dominant imagery is photography at 96%); this site refuses photography entirely. **The Six Hand-Cut Shapes.** Every visual element on the site is composed from this fixed vocabulary, the way a zine-maker only owns six pairs of scissors. 1. **The wobble-circle.** An ellipse drawn freehand in SVG ``, never ``. Edges deliberately uneven. Sized 24px–360px. Used as: stickers, halos, doodles. 2. **The crooked star.** A five-point star where each point is rotated 3°–11° off-true. Hand-drawn stroke-only, no fill. Used as: emphasis marks, footnote dingbats. 3. **The torn rectangle.** A rectangle whose right edge is a hand-drawn tear (SVG `` with 11–17 micro-jags). Used as: sticker backings, photo-essay frames, "blank advertising space". 4. **The marker arrow.** A two-stroke arrow drawn as if with a wide felt-tip — the stroke fattens in the middle and tapers at both ends. Always points left or right (never up/down — the page only flips horizontally, and the arrows have to agree). Used as: folio prefixes, navigation hints. 5. **The candle.** A single SVG path: a tapered rectangle (the wax), a small ellipse (the rim of the holder), and a teardrop (the flame). The flame uses `feTurbulence` to flicker. Reused exactly across the site — the gutter-candle, the wordmark dot-i, the colophon centerpiece — because a real magazine reuses its motifs. 6. **The thumbprint.** A hand-drawn whorl, eight concentric not-quite-circles, suggesting a fingerprint smudged on a page. Appears one-to-three times per spread, in `--pencil`, at 6%–10% opacity. The thumbprint is the only motif that is allowed to overlap typography. **The candle-atmospheric motif.** candle-atmospheric is at 8% in the corpus; this site claims it as the load-bearing atmospheric element: - The gutter-candle burns down across the spread sequence — a literal progress indicator that doubles as decoration. - A faint **flicker** is broadcast site-wide as a 4–6 second CSS animation on `--candle-flame` (opacity 0.94 → 1.00 → 0.97 → 1.00). The whole page subtly breathes with it, because a single candle in a cool-grey room casts an unsteady light. - A **wax-drip** doodle appears on the *Letter-from-the-editor* spread, hanging from the gutter into the top of the page like a comma made of hot wax. - On the *Colophon*, the candle is **out**: the gradient is fully cool-grey, the flame SVG is replaced by a thin SVG smoke-curl, and the wax-shadow halo lingers for 800ms before fading. This is the site's only real ending. **Motif placement rules.** - Shapes are **never centred**. They sit at quarter-points, third-points, or bleed off-page. - Shapes are **never coloured warm** except the candle and its smoke. - Shapes **rotate** in odd-degree increments only — 3°, 7°, 11°, 17°, never round numbers — so nothing looks designed by software. - Shapes are **always strokes, never fills,** except for the torn-rectangle backings and the candle wax. ## Prompts for Implementation Build amamya.xyz as **a single-document, horizontally-scrolled, hand-flipped magazine of seven spreads**, lit by one persistent candle in the gutter. One HTML file, one CSS file, one ES module. Treat the page as a sixty-second walk through a cool-grey room with a zine in your hands and a candle on the floor. There is no homepage CTA, no pricing, no stat grid, no contact form, no testimonial, no email-signup, no nav bar. There is only the spread sequence. **Document structure.** - `
` is `display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-snap-stop: always; height: 100vh;`. - Each `
` is `flex: 0 0 100vw; height: 100vh; scroll-snap-align: start;` and contains exactly two `
` plus the gutter-candle. - Vertical scroll is disabled inside spreads (`overflow-y: hidden`). - The candle is rendered **once** in a fixed-position layer above the spreads (`position: fixed; top: 0; bottom: 0; left: 50vw; transform: translateX(-50%);`) and a JS observer adjusts its burn-percentage as the user advances. The candle outlives every spread. **Storytelling sequence — seven spreads, one candle, sixty seconds.** 1. **Spread 1 — *Cover*.** The user lands. A 240px playful-rounded *amamya* wordmark sits in the bottom-left of the left page, dot-of-the-i replaced by the SVG candle-flame. The right page is empty cool-grey except a single wobble-circle at three-quarters height. The gutter-candle is at 100%, freshly lit. A tiny mono caption bottom-right reads `vol. 01 — a quiet zine for cool-grey rooms`. 2. **Spread 2 — *Quote spread*.** The pulled quote reads, set in Fraunces italic SOFT 100, "*kept the candle burning past the part where it made any sense*." Three thumbprint smudges sit at the upper-right of the right page; the attribution is in 11px DM Mono in the bottom-right: `— marginalia, page 03`. 3. **Spread 3 — *Photo essay*.** The full-bleed left-page image is composed of seven torn-rectangles in `--pavement` and `--ash`, layered like wet posters on a wall. The right-page caption reads `the wall outside the post office, 06:14, april` in DM Mono, with one phrase (`outside the post office`) underlined by a wobble-SVG. 4. **Spread 4 — *Free-paper sticker-bomb*.** Seven sticker-shaped wobble-circles and torn-rectangles scatter the left page at rotations of 3°, 7°, 11°, -4°, -9°, 13°, -14°, each carrying a one-word fragment in Quicksand (`xoxo`, `late`, `wet`, `again`, `okay`, `quiet`, `?`). The right page is the *blank advertising space* — a torn-rectangle in `--pavement`, with a hand-marker note: *"this could be your ad. it isn't."*. 5. **Spread 5 — *Centre-fold poster*.** Both pages combine into a single bleed composition: a giant marker-arrow pointing left, drawn across both pages, broken by the gutter-candle. The arrow is the largest single element in the magazine. Below it, in 14px mono: `(turn back. the magazine is shorter than you wanted it to be.)`. The candle is at ~50% burn-down. 6. **Spread 6 — *Letter-from-the-editor*.** The left page is a hand-set column in Fraunces italic, ten short paragraphs that drift in length, ragged-right, drop-cap on paragraph one. The text is a small confession: amamya is the name on the inside of someone's wrist; the magazine is for them; you are reading their margin notes. The right page holds one motif: an SVG candle, identical to the gutter-candle, holding a comma between its flames. 7. **Spread 7 — *Colophon*.** The final spread. Left page: type credits in DM Mono 9px (`set in Fraunces, Quicksand, DM Mono / cool-grey room, single candle / printed in an edition of 1`). Right page: the candle is **out** — the SVG flame becomes a smoke-curl, the gutter-gradient flattens to all-cool-grey, the wax-shadow halo lingers, and a single mono line in the bottom-right reads `goodnight. — amamya`. After 800ms of stillness, the page **does not scroll back**; the user must close the tab. (The site offers no return-to-top affordance. This is intentional.) **Animation strategy — *spring* and *spring* alone.** `spring` is at 63% in the corpus, used overwhelmingly as a generic transition curve. This site uses spring-physics **literally and visibly** — every motion is a damped oscillation, never a linear ease. - **Spread-flip transitions.** When the user advances, the next spread's content arrives with a spring (mass 1, stiffness 120, damping 14) per element, staggered by 30ms across at most five elements per spread. Implemented with a tiny CSS-property-based spring or a 14-line vanilla-JS spring (no Motion-One, no Framer, no Gsap). Hand-rolled. - **Sticker rotations.** Stickers do not rotate on hover; they *wobble* once on enter, with a 240ms damped spring around their final rotation. After settling, they are still. - **Candle flicker.** Flame opacity oscillates with a CSS `@keyframes flicker` driven by a spring-derived curve (cubic-bezier values pulled from a real spring). 4.6s per cycle; never a clean sine wave. - **No hover-lift, no magnetic cursor, no parallax, no cursor-follow.** The site explicitly refuses the four most common patterns (parallax 93%, stagger 61% — used only for arrival, not for scroll, cursor-follow 58%, magnetic 41%) as a creative axis. **Storytelling discipline.** - Type the magazine the way a real zine-maker would type it — **occasional typos are allowed** but only in the hand-marker captions, never in display headings. ("this could be your ad. it isnt." with the apostrophe missing is acceptable. "amamyaa" is not.) - **One joke per spread, maximum.** The magazine is whimsical-creative, not whimsical-noisy. - **The candle is sacred.** It is the only consistent UI element across spreads. It must always be visible, always flickering, always burning down monotonically. It must never be reset by code unless the user reloads. - **Cool-grey is total.** No element except the candle and its halo may carry warm hue. Even the user's selection-highlight (`::selection`) is `--pencil` on `--pavement` — cool-grey on cool-grey, by design. **Performance and accessibility are out of scope per the instructions; visual aesthetics dominate every decision.** ## Uniqueness Notes This design departs from the corpus on at least seven measurable axes. Each is a deliberate refusal of an over-represented pattern or a deliberate claim of an under-represented one. 1. **True magazine-spread layout, gutter-bound, horizontal-only.** magazine-spread is at 5% of the corpus; horizontal-scroll is at 8%. Their combination, implemented as **literal facing-page editorial layout with a load-bearing gutter** rather than as visual styling on top of vertical scroll, is rare. This site refuses vertical scroll **inside** spreads on purpose, and refuses parallax (93% of corpus) entirely. 2. **Cool-grays as load-bearing palette.** cool-grays appears in only 3% of the corpus, dwarfed by gradient (93%) and warm (91%). This site uses cool-grays as the **entire** page colour and forbids all other hues, with the single exception of one warm candle-flame tone. The chromatic discipline is total. 3. **A literal candle in the gutter, burning down monotonically as the only progress indicator.** candle-atmospheric is at 8% in the corpus, and never (per the frequency analysis) used as both an atmospheric AND a navigation element. The gutter-candle is structurally load-bearing: it tells you where you are in the magazine, and it goes out at the colophon. 4. **Street-style as zine-photocopy, not as graffiti-spray.** street-style is at 3% of the corpus; the existing 3% leans toward graffiti and spray-paint vocabularies. amamya.xyz refuses spray-paint entirely and renders street-style as **the photocopy aesthetic of free-papers and skate-zines** — toner smudges, sticker-bombs, hand-marker captions, ranged-left ragged-right body. This is a chromatic and gestural recontextualization of street-style. 5. **abstract-shapes-only imagery, photography refused.** photography is at 96% of the corpus — effectively universal. This site uses zero photography. Every visual is hand-drawn SVG composed from a fixed vocabulary of six shapes (wobble-circle, crooked-star, torn-rectangle, marker-arrow, candle, thumbprint). The discipline is total. 6. **playful-rounded delivered through Fraunces SOFT axis, not through a rounded-sans like Quicksand alone.** playful-rounded is at 3% of the corpus and almost always implemented through one of the standard rounded-sans (Quicksand, Nunito, Comfortaa). amamya.xyz pairs Quicksand with **Fraunces SOFT 100** — a serif family with a soft optical axis — to deliver "playful-rounded" through serif terminals that swell into blobs. This is an unusual reading of the playful-rounded brief. 7. **Spring-physics used literally, not as a generic ease.** spring is at 63% of corpus, almost always as a transition keyword. amamya.xyz hand-rolls a 14-line vanilla-JS spring with named mass/stiffness/damping values, and every motion on the site is a visible damped oscillation. Cursor-follow (58%), magnetic (41%), parallax (93%), and stagger (61% — except for arrival staggers) are explicitly refused. **Two further differentiators.** 8. **An ending that refuses to loop.** The colophon spread does not link back to the cover, does not offer a "start again" button, and does not auto-scroll. The candle is out. The user closes the tab. Almost no site in the corpus refuses the return-to-top affordance. 9. **No nav, no header, no footer, no CTA, no pricing block, no stat grid, no testimonial, no email-signup.** The site is the magazine and the magazine is the joke. Most sites in the corpus carry at least three of these elements; this one carries none. **Chosen seed (from assignment):** *aesthetic: street-style, layout: magazine-spread, typography: playful-rounded, palette: cool-grays, patterns: spring, imagery: abstract-shapes, motifs: candle-atmospheric, tone: whimsical-creative.* **Avoided patterns (from frequency analysis):** hand-drawn aesthetic (93% — refused as primary aesthetic, though hand-drawn execution is used selectively for shape vocabulary), glassmorphism (65%), photography (96% — refused entirely), full-bleed layout (85% — used only on centre-fold), centered layout (78% — refused, asymmetric throughout), card-grid (60%), gradient palette (93% — refused except in candle), warm palette (91% — refused except in candle), parallax (93% — refused entirely), cursor-follow (58% — refused), magnetic (41% — refused), mono typography (95% — used only for folios/captions, not as primary), gradient-mesh imagery (13% — refused).