# Design Language for daitoua.quest ## Aesthetics and Tone daitoua.quest is **a hand-stitched, half-burnt research dossier reopened on a long pine table at dusk** — the kind of folder a graduate student inherits from a deceased uncle who once worked at a regional history institute, then keeps for thirty years before finally daring to read it. The domain (大東亞 — *Daitōa*, "Greater East Asia") carries an unstable, freighted weight: a 20th-century Pan-Asian term entangled with empire, propaganda, postwar shame, and unfinished arguments about what regional belonging *should* have meant. The .quest TLD demotes the noun from manifesto to **open question**. The site does not celebrate the term and does not denounce it; it interrogates it, walking around the word the way an editorial designer walks around a found object — measuring, sketching, annotating in the margins. The aesthetic is **hand-drawn discipline applied to historiographic doubt**. Every line on the page looks pencilled-in or inked by hand: column rules wobble by 0.4–0.9px, headline crossbars are slightly off-axis, underlines wave like a ruler held by a tired wrist. Yet the *layout* is editorial-flow rigorous — long-form magazine columns, drop caps, marginalia, indented pull-quotes, footnoted endnotes. The hand-drawn-ness is the *texture*; the editorial-flow is the *armature*. The texture says "a person made this, in pencil, after midnight." The armature says "a person who has thought about this for a very long time and refuses to let the thinking go casual." The palette is **muted-vintage** (1% of the 140-design corpus — the rarest palette band): ageing-newsprint cream, oxidised iron-gall ink, foxed-paper ochre, faded military-map sage, the soft brick-red of a censor's stamp gone pale. No pure black, no pure white, no saturated anything. Colours behave like they have been left under a window for forty years. The tone is **raw-authentic** (3% — third-rarest tone band). The site does not perform comfort, does not offer easy reassurance, does not flatter the reader. It says: *the term is here. The history is here. The question is open. Sit with it.* No CTAs. No subscribe. No pricing. No testimonials. No stat-grids. No certainty. ## Layout Motifs and Structure The site is **one long editorial-flow broadside** — a single vertical reading surface roughly 11 viewport heights long, structured as **a vintage academic quarterly's lead essay** with a one-up cover, a five-spread feature, and a four-page apparatus (notes, sources, errata, a colophon). There are seven *spreads*, not seven *sections* — the metaphor is paper, not screen. **Cover spread (≈110vh).** The masthead `DAITOUA` is set in extreme condensed type at clamp(7rem, 18vw, 16rem), letter-spacing -0.04em, baseline torn at the bottom by a rough SVG mask (a low-frequency noise stroke, hand-drawn-feel) so the type bleeds into a 1px hand-inked horizon rule that wavers across the page. Below the masthead, in a much smaller condensed body face, runs the issue line: `VOL. ⅠⅠ — A QUESTION, NOT A SLOGAN — RE-OPENED 1939 / 1945 / 2026`. The cover has no image; the typography *is* the image. **Feature spread 01 — *The Word in the Mouth* (≈140vh).** Two columns of 36-character measure (editorial-flow signature width), justified, with a 16-line drop cap of a hand-drawn 大 character occupying the upper left. Marginalia float in the outer 18vw gutter as 9pt condensed annotations dated by month-year. A single SVG **flowing-curves motif** — a slow, hand-traced calligraphic stroke that takes 14 seconds to draw on entry via path-draw-svg — connects the drop cap diagonally to a pull-quote three column-rows down. **Feature spread 02 — *Maps That Lied* (≈160vh).** A 1940 propaganda map of "co-prosperity" reduced to its **geometric-abstract** skeleton: only the hand-drawn polygon outlines remain, no fills, no labels. Each polygon's perimeter draws itself in via path-draw-svg as the user scrolls past, accompanied in the margin by the actual treaty/ communiqué that produced that border, set in 8.5pt condensed mono, dated, sourced. The user can hover a polygon and see its name fade in *handwritten* (tilted 0.8°) — the cartographic lie made visible by the slowness of its drawing. **Feature spread 03 — *Thirteen Witnesses* (≈170vh).** A single column, 52-character measure, holding thirteen short testimony fragments (each 60–110 words) collected from public-domain memoirs, postwar trials, oral-history archives. Each fragment is set in vintage-newsprint typography with a hand-drawn brace `{` to its left, drawn in via path-draw-svg as the fragment enters viewport. The braces vary — no two are identical — because they are all hand-traced. **Feature spread 04 — *Counter-Memory* (≈140vh).** A two-column layout where the left column reads forward (in cream-on-ink) and the right column reads in mirror-typography flipped horizontally (in ink-on-cream), and the two columns argue with each other across the gutter. The argument concerns whether the term *daitoua* can be reclaimed, redeemed, neutralised, or only quarantined. The site offers no verdict. **Feature spread 05 — *Diagram of Doubt* (≈130vh).** A single page-sized hand-drawn diagram: nine geometric-abstract shapes (rough triangles, near-circles, lozenges with wobble) connected by curved arrows that all trail off into ellipsis. The diagram is built entirely from inline SVG with hand-traced bezier control points; its arrows path-draw-svg in sequence over 22 seconds, and the user can pause/replay the drawing. **Apparatus spreads (≈220vh total).** Endnotes (54 of them, condensed 8.5pt, hanging indent), Sources (33 archival citations with hand-stamped catalog-card corners), Errata (a small set of corrections from earlier "imagined editions" of this dossier — half-fictional, half-real), and a Colophon (typeset/handlettered, single column). There is **no top navigation, no sticky header, no menu**. There is only a slim 24px-wide left margin holding seven small hand-drawn page-flag icons (one per spread); clicking one scrolls smoothly to that spread. The flags are SVG paths, each different, each drawn-in on first viewport entry. ## Typography and Palette **Type system (Google Fonts only — verified):** - **Masthead and display — condensed primary face:** `Oswald` (variable, weights 200–700). A condensed sans with sharp uprights and tall x-height; used at masthead size (16rem max), section openers (clamp(3.2rem, 7vw, 6rem)), and pull-quotes. Letter-spacing -0.04em at display, +0.06em uppercase at micro-labels. Oswald carries a vintage broadsheet ancestry without leaning newspaper-cliché. - **Condensed serif counterpoint:** `Yeseva One` is *not* used — too decorative; instead, **`Cormorant Garamond` SemiBold Italic** for pull-quotes only, set with optical sizing implied by weight contrast. Cormorant's drawn-with-a-quill feel marries the hand-drawn aesthetic without crossing into pastiche. - **Body face — humanist serif with editorial bones:** `EB Garamond` (variable). Set at 18px / 30px line-height for long reading, optical-size feature engaged, true small caps for footnote markers. EB Garamond is hand-revived from 16th-century Garamond punches — itself an act of historical re-reading, which suits the site's premise. - **Marginalia, captions, mono accent:** `JetBrains Mono` weight 300, 9pt and 8.5pt only. Used for dates, citation tails, archival catalog numbers, and the right-margin annotations. Letter-spacing +0.02em. JetBrains Mono's slight humanist warmth keeps the apparatus from reading as cold tech-mono. - **Hand-drawn UI accents:** `Caveat` (variable) is reserved exclusively for *handwritten overlays* — the polygon-name reveals on the propaganda map, errata corrections written over typeset text, the colophon signature. Never used for body or headings; only as ink over print. **Palette (muted-vintage, 8 colours):** - `#EFE6D2` — *Aged Newsprint Cream* (background, primary) - `#1F1A14` — *Oxidised Iron-Gall Ink* (text primary; never #000) - `#9B7B4A` — *Foxed-Paper Ochre* (secondary text, marginalia, drop caps) - `#7E8970` — *Faded Military-Map Sage* (geometric-abstract diagram strokes, polygon outlines) - `#A4533F` — *Censor's Stamp, Faded* (path-draw-svg flowing-curves accent, errata marks) - `#C9B591` — *Ribbon Tea Stain* (hover/active wash on flags and polygon hovers) - `#D8CDB5` — *Inner-Page Cream* (secondary panels, pull-quote backgrounds) - `#3A3528` — *Smoke-Damaged Edge* (1px hand-traced rules, page-flag fills) No gradient mesh, no glassmorphism, no neon. Where "shadow" is needed, it is a hand-drawn cross-hatch SVG, never a CSS box-shadow blur. Where "highlight" is needed, it is a wobbly underline-draw stroke, never a background-color band. ## Imagery and Motifs **Imagery is geometric-abstract (3% of corpus) by way of hand-tracing.** No photographs. No stock illustration. No 3D. No gradient mesh. No neon glow. Only hand-traced SVG paths in sage and ochre over cream. **Five recurring motifs, each hand-drawn, each implemented as inline SVG:** 1. **Flowing-curves stroke (5%).** A single calligraphic line that traces across spreads — sometimes connecting a drop cap to a pull-quote, sometimes winding down a margin like a river on a map. Always drawn-in via path-draw-svg with `pathLength` attribute and stroke-dasharray animation, never instant. Stroke width 1.2px, sage `#7E8970`, line-cap round, line-join round, with a deliberate 0.6px wobble built into the bezier control points (no path is ever pixel-straight). 2. **Geometric-abstract polygons.** Rough triangles, lozenges, near-circles — all hand-traced (5–11 control points each, never auto-generated). Used in the Maps That Lied spread and the Diagram of Doubt. Stroke only, no fill (or fill at 6% opacity sage when "claimed" by hover). 3. **Hand-drawn page-flag icons (seven, one per spread).** Each is a small 18×24px SVG of a folded paper flag, each different — the cover flag is a half-furled square; the apparatus flag is a thin pennon; each in between is its own shape. They live in the left rail and double as nav. 4. **Stamp marginalia.** Small SVG "stamps" — a circular censor's mark gone pale, a rectangular `RECEIVED` panel with the date, a triangular `RESTRICTED` rotated 7° — placed at the corners of citation cards. Never crisp; always 0.5px stroke offset and 4% rotation jitter. 5. **Brace and bracket characters as drawn glyphs.** The 13 testimony braces in *Thirteen Witnesses* are not typographic `{` characters but actual hand-traced SVG paths, one per witness, no two identical. **No iconography from icon libraries.** No Feather, no Heroicons, no Phosphor. If a symbol is needed it is drawn for this site only. ## Prompts for Implementation **This site is a long-form, full-screen narrative reading experience. Build it accordingly. Do not insert CTA blocks, pricing, testimonials, stat counters, contact forms, FAQ accordions, newsletter signups, social proof rails, or feature grids. None of these belong in a hand-stitched dossier.** **File structure (no framework, no build step):** - `index.html` — single document with seven `
` elements, each holding its own SVG inline (do not link to external SVG files; the path data is part of the document). - `style.css` — a single CSS file. Use CSS custom properties for the eight palette colours. Use `@layer reset, base, type, layout, motion, accent` for cascade discipline. - `paper.js` — a small ES module (≤300 lines) holding an `IntersectionObserver` that triggers path-draw-svg animations on each spread as it enters viewport, plus a tiny prefers-reduced-motion gate that *completes* the drawn paths instantly rather than animating them. **Storytelling and motion guidance:** - **Path-draw-svg is the dominant pattern.** Every SVG line on this site enters by drawing itself. Implement using `stroke-dasharray: var(--len); stroke-dashoffset: var(--len);` and a CSS transition or WAAPI animation triggered by IntersectionObserver. The *speed* of drawing varies by importance: the masthead horizon draws in 1.4s; a marginal stamp in 0.6s; the flowing-curves spine of a spread in 6–14s; the Diagram of Doubt's nine arrows in a 22-second sequence with cascading 200ms delays. - **Easing must feel like a hand, not a spring.** Use `cubic-bezier(0.34, 0.04, 0.21, 1.0)` for path draws — it accelerates, hesitates near the end, and finishes. No bounce. No overshoot. The hand stops; it does not snap. - **Type animation is restrained.** The masthead does *not* explode in. The drop caps do *not* spin. The body text simply *is*. The animation budget belongs to the SVG ink, not to the lead. - **Editorial-flow rules to honour.** Justify body text (`text-align: justify; hyphens: auto; hyphenate-limit-chars: 6 3 3;`). Use `text-wrap: pretty;` for headings. Use `:initial-letter` for true drop caps where supported, with a 16-line fallback. Marginalia uses CSS subgrid in the outer column so notes align to the body lines they reference. - **Do not autoplay any sound.** If audio is added at all, it is a single optional 30-second ambient bed (typewriter + distant cicadas) gated behind an unobtrusive corner toggle styled as a hand-drawn gramophone glyph. - **Reduce motion respectfully.** If `prefers-reduced-motion: reduce`, all paths render in their final state on load and IntersectionObserver does not animate; the site remains entirely readable as a static dossier. - **Cursor.** No custom cursor. The hand-drawn feel is in the page, not the pointer. Resist the magnetic/cursor-follow pattern (78% of corpus uses it; we do not). - **Scroll.** Native scroll only. No scrolljacking, no horizontal scroll, no parallax beyond the fixed cover horizon line. - **Responsive behaviour.** On viewports below 720px, the editorial-flow becomes single-column at 32-character measure; marginalia inline as `