# Design Language for archetype.moe ## Aesthetics and Tone archetype.moe is a love letter to the visual grammar of Japanese moe subculture -- the specific intersection where character archetypes (tsundere, kuudere, yandere, genki, ojou-sama) become design languages unto themselves. The site does not depict characters; instead, it translates each archetype's emotional signature into pure visual form. A tsundere section snaps between harsh angular geometry and soft blushing gradients. A kuudere zone is glacial negative space with a single perfect element. A yandere panel starts sweet and curdles. The tone is nostalgic-retro meets whimsical-creative -- the feeling of flipping through a doujinshi at Comiket, of opening a gacha and seeing the SSR shimmer. It channels the specific visual language of early-2000s visual novel UI design: dialogue boxes with rounded corners, character name plates, choice menus that hover in translucent panels. But this is not a game -- it is a site that has internalized the grammar of games and anime so deeply that every scroll interaction feels like advancing a narrative route. The overall aesthetic is a fusion of fairycore softness and y2k-futurism chrome. Pastel sakura tones collide with iridescent holographic accents. Surfaces feel like they exist behind frosted acrylic panels. Every element has a slight float to it, as if suspended in the weightless space of an isekai loading screen. ## Layout Motifs and Structure The layout rejects the card-grid and centered conventions entirely. Instead, it employs a **visual-novel dialogue frame** structure where content is presented in asymmetric panels that echo the layout of an ADV-mode visual novel. **The Stage (Hero Viewport):** The opening screen presents a full-bleed soft gradient background (sakura-to-lavender) with the site title "archetype.moe" rendered in a custom-styled text treatment that mimics the logo cards of anime openings -- the text assembles letter by letter with a sparkle trail, then settles with a gentle bounce. Below it, a translucent dialogue box (15% opacity white, 20px border-radius, 1px solid rgba(255,255,255,0.3) border) contains the site's tagline, styled as visual novel dialogue with a blinking cursor. **Archetype Galleries:** Each archetype section uses a split-screen layout where: - The left 38.2% (golden ratio) contains a tall vertical panel with the archetype name, kanji, and descriptive prose styled as monologue text in a visual novel - The right 61.8% holds a staggered masonry of floating rectangular panels at slight rotations (transform: rotate between -2deg and 2deg), each containing a different expression of that archetype through color, shape, and motion **Route Select:** A horizontal-scroll section styled as a visual novel choice menu, where each option is a translucent panel that expands on hover with spring physics, revealing deeper content like a branching narrative path. **The Credits Scroll:** The footer is a vertical scroll of credits styled exactly like anime ending credits -- text scrolling upward against a background that shifts through the site's full color palette in slow cross-dissolve. Navigation is minimal -- a single hamburger icon styled as three horizontal lines that transform into a heart shape on open. The nav panel slides in from the right as a frosted-glass sidebar with route names listed in both English and Japanese. ## Typography and Palette **Typography:** - **Display / Title Treatment:** "Zen Maru Gothic" (Google Fonts) -- a rounded Japanese-friendly sans-serif with soft terminals that perfectly embody the moe aesthetic. Used for the site title and archetype names at display sizes (clamp(3rem, 8vw, 10rem)). Its rounded forms mirror the soft, approachable quality fundamental to moe character design. Letter-spacing: 0.15em for an airy, breathing quality. - **Narrative / Body Text:** "Shippori Mincho" (Google Fonts) -- an elegant Japanese mincho (serif) typeface with delicate hairline strokes and graceful curves. Used for all descriptive prose and narrative text, evoking the text boxes of literary visual novels. Line-height: 1.9 for generous vertical rhythm. Font-size: clamp(1rem, 1.2vw, 1.15rem). - **UI / System Text:** "M PLUS Rounded 1c" (Google Fonts) -- a geometric rounded sans with multiple weights, used for navigation labels, buttons, and metadata. Its rounded geometry echoes the bubbly interface elements of Japanese mobile games and social platforms. Weight 300 for labels, 500 for interactive elements. - **Accent / Kanji Display:** "Hina Mincho" (Google Fonts) -- a decorative mincho with exaggerated brush-like serifs, used sparingly for single kanji characters displayed as ornamental elements (the archetype kanji: 萌, 嬌, 冷, 病, 元). Displayed at extreme sizes (clamp(6rem, 15vw, 20rem)) with opacity 0.08 as background watermarks behind each archetype section. **Palette:** The palette is a triadic candy-bright system built around three anchor colors, with each archetype section introducing its own tinted variation: | Role | Color | Hex | Usage | |------|-------|-----|-------| | Sakura Base | Soft pink | #FFB7C5 | Primary background tint, dialogue box glow | | Lavender Dream | Periwinkle | #C3B1E1 | Secondary surfaces, hover states | | Mint Dew | Soft cyan | #A8E6CF | Tertiary accents, success states, links | | Deep Twilight | Dark violet | #1A0A2E | Primary text, deep backgrounds | | Starlight | Warm white | #FFF8F0 | Body text background, card surfaces | | Rose Gold Chrome | Metallic pink | #E8A0BF | Borders, decorative lines, shimmers | | Midnight Ink | Near-black blue | #0D0B1E | Footer, credits, darkest contrast | | Sakura Highlight | Hot pink | #FF69B4 | Interactive elements, active states | | Crystal | Pure white with blue shift | #F0F4FF | Frosted glass overlays | Each archetype section shifts the palette by rotating the hue: - Tsundere: Shifts toward warm red (#FF6B6B, #CC4455) - Kuudere: Shifts toward ice blue (#B4D7FF, #6BA3D6) - Yandere: Shifts toward deep fuchsia (#FF1493, #8B0045) - Genki: Shifts toward golden yellow (#FFD700, #FFA500) - Ojou-sama: Shifts toward royal purple (#9B59B6, #6C3483) ## Imagery and Motifs **Core Motif -- The Sparkle (Kirakira):** Star-shaped particles (four-pointed and six-pointed alternating) that drift across sections in response to cursor movement. These are not random -- they follow Bezier curves that trace the outlines of invisible archetype silhouettes. Rendered as tiny SVG elements with CSS animation (scale pulse between 0.5 and 1.5 over 2s ease-in-out, opacity oscillating between 0.3 and 1.0). Each archetype section has its own sparkle color matching its hue shift. **The Dialogue Frame:** A recurring decorative element -- a rounded rectangle with a small triangular notch at the bottom-left (the "speech tail"), used as a container for text blocks throughout the site. The frame has a 1px border in rose-gold-chrome (#E8A0BF), a subtle inner glow (box-shadow: inset 0 0 30px rgba(255,183,197,0.1)), and the background uses backdrop-filter: blur(12px) for a frosted-acrylic effect. **Floating Kanji Watermarks:** Each section has its defining kanji character rendered at enormous size (15-20vw) in the background with opacity 0.04-0.08, using Hina Mincho. These drift slowly (translateY oscillation of 20px over 8s) creating a sense of gentle floating, like paper lanterns in water. **Ribbon Borders:** Section dividers are not horizontal lines but decorative ribbon-like SVG paths that wave gently (a sine-curve path animated with SMIL or CSS). The ribbons use the rose-gold-chrome color with a subtle gradient from transparent at the edges to full opacity at center. **Chibi Geometric Avatars:** Abstract geometric representations of each archetype -- not character illustrations but geometric compositions that evoke each type. Tsundere: interlocking circles and sharp triangles. Kuudere: a single perfect hexagon with crystalline internal geometry. Yandere: a heart shape dissolving into scattered fragments. Genki: overlapping circles in a burst pattern. Ojou-sama: concentric ornate frames like a baroque mirror. **Background Textures:** A repeating subtle pattern of tiny dots at 3% opacity (the screen-tone aesthetic from manga), overlaid with a very faint diagonal line pattern at 1% opacity, creating the specific papery quality of printed doujinshi. ## Prompts for Implementation **Narrative Architecture:** The site unfolds as a visual novel route. The opening (The Stage) establishes the world. Each archetype section is a "chapter" that the user scrolls through, with transitions between chapters using a screen-wipe animation (a diagonal gradient mask that sweeps from bottom-left to top-right, briefly showing the new section's accent color as a full-screen flash before resolving into content). The experience should feel like reading a story, not browsing a website. **Animation Philosophy -- Spring Physics and Micro-Interactions:** All motion uses spring-based easing (CSS spring() when available, or custom cubic-bezier(0.175, 0.885, 0.32, 1.275) for overshoot). Nothing moves linearly. Elements should feel like they have weight but exist in reduced gravity -- they float, they bounce gently, they settle with a slight wobble. 1. **Title Assembly:** The site title letters arrive one at a time from random positions with staggered spring animations (50ms delay between letters), each trailing a sparkle particle. On completion, the full title pulses once with a scale(1.02) and a radial glow burst. 2. **Dialogue Box Typewriter:** Body text in dialogue frames types out character by character at 30ms intervals when scrolled into view, with a blinking cursor (border-right: 2px solid #FF69B4, animation: blink 1s step-end infinite). The typing sound is implied by the visual rhythm. 3. **Parallax Floating Elements:** Background kanji watermarks, sparkle particles, and decorative ribbons move at different scroll speeds (0.3x, 0.5x, 0.7x of scroll velocity), creating layered depth. But avoid the standard parallax look -- instead, elements float orthogonally to scroll direction (horizontal drift while scrolling vertically). 4. **Archetype Transition Wipes:** Between sections, implement screen-wipe transitions using CSS clip-path animations. Each archetype has its own wipe shape: Tsundere uses a jagged zigzag, Kuudere uses a clean horizontal blade, Yandere uses a heart-shaped iris, Genki uses a starburst, Ojou-sama uses a curtain pull. 5. **Route Select Hover:** Choice panels in the horizontal-scroll section respond to hover with: scale(1.05) with spring easing, background opacity increase from 0.15 to 0.35, a glowing border animation (the rose-gold border brightens and pulses), and the panel's archetype kanji fades in as a watermark. 6. **Cursor Trail:** The cursor leaves a trail of tiny sparkle particles that fade over 600ms. On the main stage section, the cursor also emits a soft radial glow (a 60px radial-gradient circle that follows the mouse via CSS custom properties updated by JS). **Technical Emphasis:** - Use CSS custom properties extensively for the per-section hue shifts: `--section-hue`, `--section-accent`, `--section-glow` set on each archetype section element - Implement the frosted-glass dialogue boxes with `backdrop-filter: blur(12px) saturate(150%)` and a semi-transparent background - The screen-tone texture should be a CSS background using `radial-gradient` repeating at 4px intervals rather than an image file - All sparkle animations should use CSS `@keyframes` with `will-change: transform, opacity` for GPU acceleration - The horizontal route-select scroll should use CSS `scroll-snap-type: x mandatory` with `scroll-snap-align: center` on each panel **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, corporate hero patterns, stock photography, testimonial carousels. This is not a product page. It is an immersive narrative space. ## Uniqueness Notes **Differentiators from other designs:** 1. **Visual Novel UI as Web Design Grammar:** No other design in the portfolio treats the visual novel dialogue frame, choice menu, and character nameplate as foundational web layout primitives. The dialogue box is not a decorative reference -- it IS the content container. The choice menu is not metaphorical -- it IS the navigation. This conflation of game UI and web UI creates a genuinely novel interaction paradigm. 2. **Per-Section Hue Rotation System:** While other designs maintain a consistent palette throughout, archetype.moe implements a systematic hue-rotation system where each archetype section transforms the entire palette. This is not merely different accent colors -- the background, text, borders, shadows, and particle effects all shift together through CSS custom property inheritance, creating five distinct visual worlds within one cohesive design language. 3. **Screen-Tone and Doujinshi Texture:** The manga-inspired screen-tone dot pattern as a background texture is entirely absent from other designs, which favor gradients, photography, or clean flat surfaces. This specific texture immediately signals a subcultural affiliation and provides a tactile, printed-media quality that is rare in web design. 4. **Cursor-Reactive Sparkle Particle System (Kirakira):** While other designs use cursor-follow effects, none implement a full particle system where sparkles trace invisible archetype silhouettes. The particles are not decorative noise -- they are narratively meaningful, revealing hidden shapes that connect to each section's thematic content. 5. **Anime Credits Scroll Footer:** Replacing the standard footer with a vertical-scroll credits sequence styled after anime ending credits is a specific subcultural reference that no other design employs. It transforms the most mundane part of a website into a moment of emotional closure, complete with palette cross-dissolve. **Chosen seed/style:** Subculture (萌え) -- drawing from the visual traditions of moe anime, visual novels, gacha game interfaces, and doujinshi print culture. This is not the generic "anime-inspired" aesthetic of neon and speed lines; it is the specific, soft, iridescent, emotionally saturated visual language of moe. **Avoided patterns from frequency analysis:** - Avoided corporate aesthetic (83% frequency) -- replaced with fairycore/y2k-futurism fusion - Avoided card-grid layout (90%) -- replaced with visual-novel dialogue frame structure and split-screen - Avoided centered layout (80%) -- used asymmetric golden-ratio splits - Avoided photography imagery (90%) and minimal imagery (70%) -- replaced with generative sparkle particles, geometric avatars, and screen-tone textures - Avoided gradient palette as primary (96%) -- used triadic candy-bright with per-section hue rotation - Avoided mono typography (83%) -- used rounded Japanese typefaces (playful-rounded) and mincho serifs - Avoided scroll-triggered as sole animation pattern (93%) -- layered with magnetic cursor-follow, spring micro-interactions, kinetic-animated typewriter effects, and fade-reveal transitions - Preferred underused patterns: playful-rounded typography (6%), floating-elements motif (3%), bubble-playful motif (3%), kinetic-animated type (10%), micro-interactions (13%), triadic palette (3%)