# Design Language for archetype.moe
## Aesthetics and Tone
archetype.moe is a contradiction made visual — a site where the deliberate chaos of anti-design collides with the hushed opulence of a private botanical salon. Imagine a Meiji-era parlor where someone has torn the wallpaper into geometric shards and rearranged it as a bento tray, each cell holding a different species of cultivated disorder. The anti-design manifests not as aggressive punk destruction but as a refined refusal: intentional misalignment, clashing scale relationships, and visible structural seams that expose the skeleton of the page like pressed flowers revealing their veins.
The domain "moe" (萌え) — the Japanese aesthetic of affectionate fascination, of something budding and vulnerable — permeates everything. This is not ironic detachment. The anti-design choices are made with tenderness: a heading set 40px too large is endearing, not hostile. A border that stops 30px short of its container is a deliberate breath, not a mistake. The luxurious tone comes through in the materials — the texture of heavy linen paper, the grain of aged vellum, the weight of ink pooling in serif terminals — rather than through gold leaf and marble. This is luxury as craft, not commodity.
The overall mood is a late-night greenhouse library: warm artificial light filtered through botanical glass, the smell of old paper and living soil, the quiet hum of something growing. Every element feels both too refined to be accidental and too broken to be corporate.
## Layout Motifs and Structure
The layout follows a bento-box grid system — not the Silicon Valley interpretation of neat rounded rectangles, but the original Japanese craft: a wooden frame with compartments of deliberately varied proportions, each holding something precious and distinct. The grid is a CSS Grid with named template areas, using asymmetric column tracks (1fr 2.4fr 1fr 1.8fr) and row tracks that vary between 180px and 420px.
**Structure:**
- **Opening frame:** A full-viewport bento arrangement of 6 cells. The largest cell (spanning 2 columns and 2 rows) holds the site title in enormous Libre Baskerville set at 9vw, deliberately overflowing its container with overflow: hidden clipping the descenders. The remaining 5 cells each hold a single element: a noise-textured botanical illustration, a fragment of body text, a colored rectangle with no content, a tiny monogram, and a repeating floral SVG pattern. No cell has padding — content presses against the 3px solid borders of each compartment.
- **Mid-section bento trays:** As the user scrolls, new bento arrangements appear — each a distinct grid template. The second tray uses 3 columns of equal width but wildly different row heights (80px, 340px, 160px). The third tray is a single full-width cell containing only a sentence fragment in 14px type with 200px of whitespace above and below. The fourth returns to a dense 4x3 grid. This rhythm of density and emptiness is the narrative pulse.
- **Anti-design disruptions:** Within each bento tray, exactly one cell violates the grid. It might overlap its neighbor by 20px using a negative margin. It might have a background color that bleeds beyond its border via an absolutely positioned pseudo-element. It might contain text rotated 3 degrees. These disruptions are subtle and singular — one per tray, never more — maintaining the tension between order and refusal.
- **Terminal zone:** The final section abandons the grid entirely for a single centered column (max-width 520px) of body text — a quiet exhale after the structured complexity above. This column has generous 2.4em line-height and sits on a faintly noise-textured background, like a handwritten letter laid on linen.
No navigation bar exists. A small fixed-position element in the bottom-left corner shows the domain name "archetype.moe" in 11px Libre Baskerville italic, with opacity: 0.4, acting as a watermark rather than navigation.
## Typography and Palette
**Typography:**
- **Display / Headings:** "Libre Baskerville" (Google Fonts) — the refined transitional serif that gives the site its material weight. Used at dramatic scales: 9vw for the hero title, 3.2rem for section headings, 2rem for cell labels. Weight: 700 for the hero, 400 italic for mid-level headings. Letter-spacing: -0.02em at display sizes to tighten the dignified spacing. Line-height: 0.92 at hero scale (allowing ascenders and descenders to kiss adjacent lines), 1.15 at heading scale.
- **Body / Reading text:** "Libre Baskerville" 400 regular at 17px/2.0 for the terminal reading section. This unusually generous line-height creates the feeling of a book set with wide leading — each line isolated, precious, floating in space. For bento cell captions and annotations, 13px/1.6 italic.
- **Accent / System:** "DM Mono" (Google Fonts) — a clean monospace used sparingly for structural labels, cell numbers, and metadata. 11px/1.4, letter-spacing: 0.06em, text-transform: uppercase. This typeface appears in muted ocean-gray (#4a6670) as a counterpoint to the expressive serif — the scaffolding visible behind the ornament.
**Palette:**
The ocean-deep palette is not tropical blue but the color of water at 200 meters depth — ink-dark, green-tinged, pressurized.
- **Abyss:** #0b1e2d — the primary background, a blue-black with green undertones like deep ocean at night. Used for the body background and primary bento cell fills.
- **Bathyal:** #163040 — a slightly lifted navy-teal for secondary cells and hover states. The difference from Abyss is subtle — visible only when cells sit adjacent.
- **Pelagic:** #1f4a5a — a brighter teal-petrol for active borders, the one "loud" structural color. Used for the 3px cell borders and the anti-design disruption elements.
- **Photic:** #a8c5b8 — a pale sage-seafoam for body text. Not white — deliberately muted and green-shifted, like light filtering through deep water. Ensures readability against Abyss while maintaining the submerged atmosphere.
- **Bloom:** #d4a0a0 — a dusty rose, the color of dried pressed petals. Used for the floral-botanical motif fills, hover accents, and the single decorative SVG in each bento tray. This is the warmth that makes the cold ocean livable.
- **Vellum:** #e8ddd0 — an aged paper cream for the terminal reading section background and occasional contrast cells. Warm, textured, organic against the deep blues.
- **Coral Ink:** #c45c3e — a burnt terracotta-coral for emphasis text, the hero title, and link hover states. Rare and precious — appears at most 3 times on the entire page.
- **Spore:** #6b8f5e — a muted forest green for secondary botanical elements, small leaf SVG fills, and DM Mono metadata text as an alternative to the gray.
## Imagery and Motifs
**Noise Texture as Material:**
The defining visual material is CSS noise texture — not subtle grain overlay but visible, tactile static that gives every surface the feeling of handmade paper or woven linen. This is achieved via a base64-encoded SVG turbulence filter (feTurbulence baseFrequency="0.65" numOctaves="3") applied as a background-image to every bento cell. The noise opacity varies by cell: 0.04 for dark Abyss cells (barely there, a breath of texture), 0.12 for the Vellum terminal section (clearly papery and warm), 0.08 for Pelagic border-accent cells. No surface is perfectly flat or digitally smooth.
**Floral-Botanical SVG Motifs:**
Hand-drawn-style SVG botanical illustrations serve as the primary decorative elements. These are not photographic flowers but abstracted line drawings: a single peony rendered in 60 strokes of varying width (1px-3px), stems that curve with mathematical elegance, leaves reduced to their midrib and two contour lines. The style references Japanese botanical illustration (本草図) — scientific yet poetic, precise yet alive.
Three distinct botanical forms repeat throughout:
1. A large peony/chrysanthemum bloom — 280px diameter, used once in the hero bento tray. Stroked in Bloom (#d4a0a0) with no fill, on an Abyss background. The petals overlap in spiraling layers.
2. A trailing vine with small leaves — used as a horizontal divider between bento trays. The vine extends 60% of viewport width, drawn as a single SVG path with alternating leaf shapes every 40px. Stroked in Spore (#6b8f5e) at 1.5px.
3. A seed pod or unfurling fern frond — small (48px), repeated in corners of certain bento cells as a subtle stamp. Stroked in Photic (#a8c5b8) at 1px, nearly invisible until you look for it.
**Anti-Design Disruptions as Visual Motifs:**
The anti-design language manifests as deliberate "errors" that recur like a visual refrain:
- Borders that stop short: a 3px Pelagic border that runs along the bottom of a cell but ends 30px before the right edge, as if the pen ran out of ink.
- Overlapping text: in one bento cell per tray, a word from the heading is repeated in 200px DM Mono uppercase at opacity: 0.06 behind the primary content, a ghost echo.
- Misaligned cells: one cell per tray is shifted 8-12px from its grid position using transform: translate(), breaking the mathematical perfection of the bento grid just enough to feel handmade.
- A single horizontal rule — not an `` but a 1px line in Bloom (#d4a0a0) — that crosses the entire viewport width, ignoring all containers, appearing between the second and third bento trays. It is the one element that defies the compartmentalized structure entirely.
## Prompts for Implementation
**Full-Screen Narrative Experience:**
The site must be experienced as a vertical descent through increasingly intimate bento compartments. The hero bento tray occupies the full viewport (100vh, 100vw, no margins, no padding on the body). As the user scrolls, each subsequent bento tray fades in via a typewriter-effect entrance: cells appear one at a time, left-to-right then top-to-bottom, with a 120ms delay between each cell. The cell content (text, botanical SVG, color block) types or draws in after the cell border has fully appeared. This sequential revelation transforms the grid from a static layout into a temporal narrative — you watch the bento box being assembled.
**Typewriter-Effect as Primary Animation:**
All text on the site enters character-by-character using a typewriter effect. This is not the cliche blinking-cursor terminal typewriter but a refined version: each character fades in over 40ms with a slight upward translate (2px) and opacity transition from 0 to 1. The cursor is not a block or pipe but a thin 1px vertical line in Coral Ink (#c45c3e) that pulses with a 1.2s ease-in-out opacity animation. Body text in the terminal section types at 8ms per character (fast, like confident keystrokes). Headings type at 60ms per character (slow, deliberate, ceremonial). The typewriter triggers on scroll — each text block begins typing when it enters the viewport, using IntersectionObserver with threshold: 0.3.
**Botanical SVG Path Drawing:**
The three botanical SVG forms are drawn with CSS stroke-dasharray/stroke-dashoffset animations. The peony bloom draws its 60 strokes sequentially over 4 seconds (each stroke: 66ms duration, staggered start). The trailing vine draws left-to-right over 2 seconds. The seed pod draws in a single 0.5s spiral. These animations fire once on scroll entry and do not repeat — the flowers bloom once and stay.
**Noise Texture Implementation:**
Apply the noise texture as an inline SVG filter referenced via CSS url(). Create a single `