# Design Language for archetype.moe ## Aesthetics and Tone archetype.moe (萌え -- the Japanese subcultural aesthetic of endearing cuteness and passionate affection) is a shrine to character archetypes in anime, manga, and otaku culture. Think of the reverent minimalism of a Japanese tokonoma (display alcove) -- a single perfect object in a void of negative space -- but the objects on display are the eternal character archetypes: the tsundere, the genki girl, the cool bishounen. The visual language fuses Japanese minimal aesthetics with the opulent darkness of gold-leaf lacquerware (urushi): deep black surfaces, precise gold accents, and the occasional electric pop of an icon or glyph. Imagine a luxury edition artbook with pages of heavy black matte paper, gold foil-stamped characters, and small monochrome illustrations that pulse with quiet intensity. The tone is nostalgic-retro -- reverent toward the traditions and tropes that have defined decades of character design, presented with the care of a curator handling precious artifacts. ## Layout Motifs and Structure The layout employs a **hero-dominant** structure where each archetype gets its own full-viewport showcase -- a single-character stage where one archetype commands total visual attention before the user scrolls to the next. **Primary structure:** - **Opening viewport (100vh):** A deep black background (#0D0D0D) with the "archetype" wordmark in gold (#D4AF37) rendered in a monospace typeface at medium scale (clamp(36px, 5vw, 72px)), centered with extreme vertical padding. Below, ".moe" is rendered in a slightly different treatment -- same font but with a subtle underline-draw animation in gold that traces beneath the text on load. A single small geometric icon (a stylized 萌 character fragment) sits above the wordmark in gold outline, slowly rotating (60s per revolution). - **The Pantheon (archetype heroes):** Each archetype occupies a full 100vh section. The section background is near-black with a single accent color that identifies the archetype (e.g., tsundere = rose, genki = orange, kuudere = ice blue). Content is minimal: one large archetype name in gold display type (left-aligned, upper third), a 3-4 line description in body text (left-aligned, middle), and a geometric icon representing the archetype (right-aligned, using the accent color). Massive negative space surrounds everything. - **The Index (classification section):** A structured grid -- 4 columns on desktop, 2 on mobile -- displaying all archetypes as small cards with gold borders. Each card shows the archetype name in Japanese (top) and romanized (bottom) with a thin gold geometric motif unique to each. Cards have underline-draw hover effects. - **The Reading Room (editorial):** A single narrow column (max-width: 600px) on the left side of the viewport, with 60% of the screen as empty black space on the right. Long-form text about archetype theory and history, rendered in careful serif typography. Pull-quotes appear in gold monospace in the right void. - **The Seal (footer):** A centered gold circle (SVG, thin stroke) containing the "moe" text in vertical writing orientation (writing-mode: vertical-rl). Below the circle, a thin horizontal gold line extends to both edges of the viewport. ## Typography and Palette **Fonts:** - **Headlines/Display:** "IBM Plex Mono" (Google Fonts) -- a precise, structured monospace that when used at display scale with generous letter-spacing (0.1em) evokes the rigid beauty of Japanese typographic tradition. Weight 500 for main headings, 300 for secondary. Size: clamp(28px, 4.5vw, 72px). The monospace grid-alignment reinforces the archetype = template metaphor. - **Body text:** "Noto Serif JP" (Google Fonts) -- essential for Japanese character support and elegant bilingual typesetting. Weight 400, line-height: 2.0 (generous for readability in both scripts). Size: clamp(14px, 1.1vw, 17px). The serif strokes echo traditional Japanese calligraphy brush endings. - **Accent/Labels:** "Noto Sans JP" (Google Fonts) -- clean sans-serif Japanese support for labels, classifications, and metadata. Weight 500, size: 12px, letter-spacing: 0.08em. Used for archetype classification tags. **Palette:** - **Void Black:** #0D0D0D -- primary background, the tokonoma darkness - **Lacquer Black:** #1A1A1A -- card backgrounds, slightly raised surfaces - **Gold Leaf:** #D4AF37 -- primary accent, precious, authoritative - **Warm Gold:** #F0C040 -- secondary gold, brighter interactive states - **Ash Grey:** #666666 -- secondary text, subtle metadata - **Smoke:** #2A2A2A -- borders, subtle separators - **Parchment:** #F5F0E0 -- text color, warm white against black ## Imagery and Motifs **Core visual motifs:** - **Gold geometric icons:** Each archetype has a unique geometric symbol rendered in thin gold strokes (1.5px) -- abstract shapes that suggest the archetype's personality without literal illustration. The tsundere might be two overlapping triangles (conflict), the genki a radiating starburst (energy), the kuudere a single horizontal line (calm). These icons are 48-96px and animate with subtle rotation or scale pulse on scroll-entry. - **Underline-draw animation:** A signature interaction where gold lines draw themselves beneath text elements. Implemented with a pseudo-element (::after) that has a CSS width animation from 0% to 100% (or target width). Duration: 600ms, ease-in-out. Used on the hero ".moe" text, navigation hover states, and card hover states in The Index. - **Vertical writing accents:** Select decorative text elements use `writing-mode: vertical-rl` (traditional Japanese vertical text direction) -- the footer seal, some pull-quotes, and archetype names in the Pantheon section's background (very large, very low opacity, creating a watermark effect). - **Tokonoma framing:** Each Pantheon section uses a subtle recessed-panel effect -- a thin gold border (1px) inset from the viewport edges by 5vw/5vh, creating a frame-within-a-frame that references the tokonoma alcove. The border fades in on section entry. - **Minimal geometry backgrounds:** Instead of complex patterns, single geometric shapes (circles, triangles, rectangles) in the archetype's accent color at 3-5% opacity, positioned at large scale (40vw+) in the background of each Pantheon section. ## Prompts for Implementation **Full-screen narrative opening:** On load, the Void Black background is immediate. The small rotating geometric icon fades in first (opacity 0 to 1, 800ms). The "archetype" wordmark materializes with a gold underline-draw (the line draws left to right, 600ms, and the text fades in simultaneously). The ".moe" appears last with its own underline-draw animation (400ms delay after "archetype" completes). **Hero-dominant Pantheon:** Each section is `min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 5vw;`. The archetype name uses absolute positioning in the upper third. The geometric icon uses absolute positioning in the right half. Content text sits in a max-width: 480px container in the left half. Use CSS scroll-snap-type: y mandatory on the parent container so each archetype snaps to fill the viewport. **Gold underline-draw system:** Create a utility class `.gold-underline` that applies: `position: relative; &::after { content: ''; position: absolute; bottom: -4px; left: 0; height: 1.5px; width: 0; background: #D4AF37; transition: width 0.6s ease-in-out; }`. On hover or intersection-triggered class toggle: `&::after { width: 100%; }`. **The Index grid with gold borders:** CSS Grid with `grid-template-columns: repeat(4, 1fr); gap: 1px; background: #D4AF37;` on the container (the gap becomes the gold grid lines). Each cell has `background: #1A1A1A; padding: 32px 24px;`. On hover, cell background lightens to #2A2A2A with a 300ms transition. **Vertical writing footer seal:** The circle is an SVG with `` element (stroke: #D4AF37, stroke-width: 1, fill: none). Inside, a `` element with `writing-mode="tb"` (top-to-bottom) in IBM Plex Mono. The circle's stroke draws on scroll-entry (stroke-dashoffset animation, 800ms). The horizontal line below uses the same SVG, extending to full viewport width. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids. No bright backgrounds. No colorful palettes. No rounded, bubbly, or cute visual elements (despite the "moe" concept -- the presentation is reverent and minimal, not kawaii). ## Uniqueness Notes **Differentiators from other designs:** 1. **Gold-on-black luxury treatment of otaku content:** While "moe" culture is typically presented with bright, kawaii aesthetics, this design inverts expectations by treating character archetypes with the reverence of a luxury artbook. The gold-leaf-on-lacquer visual language applied to subcultural content is a unique conceptual contrast. 2. **Vertical writing mode as structural element:** The use of `writing-mode: vertical-rl` for the footer seal and decorative pull-quotes introduces a genuinely different text flow that references traditional Japanese typographic practice. No other design in the collection uses vertical text as a structural choice. 3. **Snap-scroll hero Pantheon:** The full-viewport archetype showcases with CSS scroll-snap create a slideshow-like experience where each character archetype commands total attention -- a digital equivalent of flipping pages in a luxury artbook. 4. **Geometric archetype icons as abstract identity system:** Each archetype's unique geometric symbol (abstract, non-illustrative) creates a visual vocabulary that users learn to associate with personality types -- a design-system-within-a-design that is unique to this site. **Planned seed:** japanese-minimal, hero-dominant, mono, gold-black-luxury, underline-draw, icon-heavy, geometric-shapes, nostalgic-retro **Avoided overused patterns:** centered as only layout, card-grid, parallax, cursor-follow, photography, gradient palette, mysterious-moody as unintentional default, elegant-serif as primary type