# Design Language for mang.quest ## Aesthetics and Tone mang.quest is a **still watercolor of the mind's manga** — a zen reading room that exists between the page and the sky. The domain "mang" carries both the whisper of Korean 만 (ten thousand, an infinity) and the compressed root of manga (漫画, free-flowing pictures), so the site is conceived as an infinite scroll of consciousness rendered in flat, hand-washed color fields. The aesthetic is **flat-design elevated to ceremony**: no shadows, no gradients in the conventional sense, but instead broad aurora-washed planes of candy-bright pigment — rose quartz, lemon zest, cerulean wash, spearmint — laid as if painted with a wide flat brush onto rice paper. The mood is **zen-contemplative**: unhurried, spacious, deeply quiet, but luminous and alive. Every element floats on its plane like a brushstroke that dried mid-breath. There is no noise. There is no urgency. The site feels like the exact moment before turning a page — the pause that holds everything. The aurora-lights motif is not decorative fringe but structural atmosphere: slow horizontal bands of softly shifting color (think early-morning Arctic sky rendered without gradients — stepped, flat, distinctly banded) drift behind content as the visitor descends. These bands are drawn with hard color-stops and zero blur, keeping the flat-design integrity while still evoking slow celestial movement. The aurora banding is the page's breathing pattern. Content is spare and contemplative — no lists of features, no pricing, no stats. Sections are like rooms in a temple: one idea per room, held in stillness. ## Layout Motifs and Structure The structure is **parallax-sections** composed as a vertical sequence of full-viewport rooms, each a distinct aurora-flat plane. The parallax is layered but subdued: three depth layers move at ratios 1.0 / 0.65 / 0.35 — the aurora bands (background), the abstract-shape decorative layer (midground), and the typography/content (foreground). The effect is like turning pages in a slow, heavy book: each section slides into view with a sense of depth without any flashy cinematic tricks. **Composition rules:** - Each section is exactly `100svh`, no taller, no shorter — the viewport is the frame, always. - Content is placed on a **centered column**, max-width 640px on desktop, full-width with 24px horizontal padding on mobile. - The **left margin** (from 640px column to viewport edge) holds the aurora-band decoration layer. The **right margin** holds a vertical progress indicator — a single 1px column of the current section's accent color that extends from 5svh to 95svh like a bookmark thread. - Sections alternate between **centered-text** (title sections, pause moments) and **left-aligned reading** (body sections with wider column, 720px max). - No navigation bar. A single small wordmark `mang.quest` sits in the top-left at 12px, fixed, in #3A3048. A single `↓` glyph sits bottom-center, disappears after 10% scroll. **Section sequence (6 rooms):** 1. **Sky room** — aurora-band hero, wordmark large, single line of haiku-text, full candy-rose plane 2. **Drift room** — abstract shapes enter from left edge via scroll-triggered reveal, contemplative sentence 3. **Wash room** — wide flat band of aurora-mint, centered short poem-text 4. **Still room** — deepest candy color (violet-plum), abstract-shape cluster, main concept articulated 5. **Light room** — palest plane (almost-white lemon), typography alone, no shapes 6. **Ground room** — footer: aurora-stripe footer, wordmark, minimal link set ## Typography and Palette **Typography — serif-classic, Google Fonts only.** Three typefaces, each with a distinct ceremonial role: - **Display / Wordmark:** `Cormorant Garamond` (Google Fonts) — weight 300 for the wordmark `mang.quest`, weight 600 italic for large section titles. Set at clamp(3.2rem, 7vw, 6rem) for titles. Cormorant's extreme contrast between hairline serifs and thick stems reads like a brushstroke — it honors the manga-ink parallel without mimicry. - **Body / Reading:** `EB Garamond` (Google Fonts) — weight 400 for all body text, set at 18px / 1.9 line-height for maximum reading ease. Optical size at 14 for smaller labels. The spacing is generous: letter-spacing +0.01em, paragraph spacing 2em. Text is never set at full viewport width — always contained in the centered column. - **Accent / Labels:** `Noto Serif JP` (Google Fonts) — weight 300, used only for small-caps section labels (e.g., "間" / "MA" — Japanese for "negative space, pause"), the progress indicator number, and the footer link set. 11px, letter-spacing +0.12em, all uppercase where latin. **Palette — candy-bright stepped flat:** - `#F7C5D0` — Candy Rose (section 1 background, Sky room) - `#FFF0B3` — Lemon Zest (section 5 background, Light room) - `#B8EDD9` — Spearmint Wash (section 3 background, Wash room) - `#C3E4F5` — Cerulean Mist (aurora midground band, accent floats) - `#E8C3F7` — Wisteria Petal (section 6 footer background) - `#9B8EC4` — Deep Wisteria (section 4 background, Still room — deepest value) - `#F2F0EB` — Rice Paper (section 2 background, Drift room — near-white warm) - `#3A3048` — Ink Plum (all body text, wordmark, lines — replaces black entirely) - `#FFFFFF` — Pure White (text on deep-value sections, abstract shape outlines) Aurora band colors (used as flat horizontal stripes, no blur, no gradient): `#F7C5D0` → `#FFF0B3` → `#B8EDD9` → `#C3E4F5` → `#E8C3F7` — 5 stepped bands, each 20% of the aurora height, cycling slowly via CSS animation at 0.03s per step (imperceptibly slow, only noticeable over 2 minutes). ## Imagery and Motifs **Imagery is abstract-shapes exclusively.** No photography, no icons, no illustration figures. The visual language is a lexicon of flat geometric forms drawn at various scales: - **Primary shape:** the **arc-petal** — a thin flat arc (stroke 1.5px, no fill except when used as a large background element) drawn at scale from 12px to 300px. Multiple arc-petals cluster like falling petals or brushstroke fragments. - **Secondary shape:** the **vertical bar** — a rectangle, width 2px, height variable (40px to 180px), always in the current section's accent color. Used in groups of 3-7, spaced irregularly, to create rhythm without pattern. - **Tertiary shape:** the **circle-ring** — a perfect circle, outline only, diameter 80px to 400px, stroke 1px. Used sparingly (one per section maximum) as a framing device, placed slightly off-center or intersecting the section edge. - **Aurora-band shape:** flat horizontal colored strips, 100vw wide, height determined by proportion — the aurora is 35svh tall in the hero, 20svh tall in mid-sections. Bands are rendered as `div` elements with background color, never as canvas or image. **Motif system — aurora-lights:** The aurora banding is the site's living motif. The bands shift color slowly using CSS custom property animation (no JS required), cycling through the 5 candy-bright hues over a 7-minute period. The bands stack at the top of each section and descend behind the content layer. The abstract shapes drift upward against the parallax scroll, creating the impression of shapes surfacing through aurora light. **Decorative details:** - Each section label (e.g., "間" / "MA") is set in Noto Serif JP at 10px, positioned at the top-left of the reading column, 24px from the top of the content block. - The progress thread (right margin, 1px, current section color) extends smoothly as the user scrolls — updated via scroll event listener. - No hover effects on shapes. No cursor changes. No interactive elements except the progress thread and the single-link footer. ## Prompts for Implementation Build mang.quest as a **single HTML file with inline CSS and minimal JS**, structured as 6 full-viewport sections stacked vertically. The entire experience is a downward meditation: scroll slowly, arrive at each room, pause, continue. No navigation, no CTA, no feature list, no social proof. **Technical implementation guidance:** 1. **Aurora bands** — implement as stacked `
` elements with CSS `background-color` and `height: 20%` inside an `.aurora` container. Animate color shifts using `@keyframes` cycling `background-color` through the 5-color sequence over 420s (7 minutes). CSS only — no canvas, no JS for the aurora. 2. **Parallax layers** — use CSS `transform: translateY()` tied to scroll position via a small JS function (`window.addEventListener('scroll', ...)`). Three layers: `.aurora-bg` moves at `scrollY * 0.35`, `.shapes-mid` at `scrollY * 0.65`, `.content-fg` at `scrollY * 1.0`. Each section is `position: relative; overflow: hidden` so the parallax clips cleanly. 3. **Scroll-triggered reveals** — abstract shapes and body text in sections 2-6 start at `opacity: 0; transform: translateY(24px)` and transition to visible when the section enters the viewport (`IntersectionObserver` with threshold 0.25). Duration 0.8s, easing `cubic-bezier(0.25, 0.46, 0.45, 0.94)`. No JS animation libraries — pure IntersectionObserver + CSS transitions. 4. **Shapes** — draw arc-petals and circle-rings as inline SVG elements within each section. Vertical bars as `
` elements with fixed pixel dimensions. All shapes use `pointer-events: none` and `user-select: none`. 5. **Typography sizing** — use CSS `clamp()` for all heading sizes. Body text is clamped between 16px and 18px. The wordmark is set at a fixed 11px on all breakpoints (intimate, not dominant). 6. **Color application** — assign one background color per section using CSS custom properties (e.g., `--sky: #F7C5D0`). Text is always `#3A3048` on light backgrounds, `#FFFFFF` on the deep-wisteria Still room section. 7. **Section rhythm** — each section must feel complete at full viewport height. Do not let content overflow. If text is long, reduce font size or reduce copy. The frame is the rule. 8. **Aurora animation** — the `@keyframes aurora-cycle` cycles through 5 color stops at 0%, 25%, 50%, 75%, 100%. Each band in the aurora stack starts at a different `animation-delay` offset (0s, 84s, 168s, 252s, 336s) so the colors phase-shift relative to each other, creating the aurora's natural horizontal banding drift. 9. **Footer** — section 6 (Ground room) contains: wordmark `mang.quest` in Cormorant Garamond 300, 24px; a single line of text in EB Garamond; and three small text links (no underline, color `#3A3048`, hover: `text-decoration: underline`). Wisteria Petal background `#E8C3F7`. 10. **No JavaScript libraries** — vanilla JS only. The entire scroll-triggered behavior is `IntersectionObserver` + CSS transitions. Parallax is a single `scroll` event listener updating CSS custom properties. AVOID: hero CTA buttons, pricing tables, testimonial blocks, stat counters, sticky navigation bars, loading screens, modal dialogs, hover card effects, scroll-snap (let the user scroll freely), JavaScript animation frameworks. ## Uniqueness Notes 1. **Aurora as flat color bands, not gradient glow (registry first for this interpretation).** The frequency data shows `aurora-lights` at 3% and `aurora-gradient` at 3%. No prior design uses aurora as stepped flat color bars (zero-blur, hard-stop bands). mang.quest converts the aurora motif into a purely flat-design language — the aurora banding IS the flat design vocabulary, bridging both seed dimensions simultaneously. 2. **"Room" paradigm instead of "section" — zen spatial architecture.** `parallax-sections` appears at 10% in the registry, but no prior design frames each section as a self-contained contemplative room with a Japanese spatial-design concept (間, MA — negative space). The sections are not content containers; they are pauses in a meditation sequence. This is architecturally distinct from hero/feature/CTA patterns. 3. **Candy-bright palette in strict flat-design application, no drop shadows anywhere.** The candy palette exists in 6% of designs, but typically paired with playful or energetic aesthetics. mang.quest pairs candy-bright with zen-contemplative — a deliberate tension that produces unexpected calm. The pink, mint, and lemon hues read as sunrise light in a Kyoto garden, not as a bubble-gum interface. No shadow, no depth simulation, no gradients of any kind. 4. **Noto Serif JP as accent face, introducing Japanese character label system.** No other design in the registry uses Japanese characters as structural labels within a predominantly latin-text design. The 間/MA labels function as both typographic ornament and conceptual anchors, reinforcing the zen-contemplative tone with a minimal cross-cultural reference that is specific to the mang.quest domain concept (漫/mang). 5. **Seed:** `aesthetic: flat-design, layout: parallax-sections, typography: serif-classic, palette: candy-bright, patterns: scroll-triggered, imagery: abstract-shapes, motifs: aurora-lights, tone: zen-contemplative` 6. **Avoided patterns from frequency analysis:** `asymmetric` layout (41% — avoided entirely in favor of centered-column structure), `scroll-triggered` used distinctively as opacity+translate reveals (not card-flip or kinetic morphing), `parallax` implemented at restrained 0.35/0.65/1.0 ratios (not cinematic depth).