# Design Language for xanadu.wiki
## Aesthetics and Tone
Xanadu.wiki draws from the tradition of 18th-century botanical field plates -- the meticulous watercolor-and-ink illustrations found in volumes by Pierre-Joseph Redoute and Ernst Haeckel -- reinterpreted through the lens of a curated Japanese bento display. Every element occupies a deliberate compartment, every specimen is isolated and revered. The tone is that of a scholarly herbarium crossed with a collector's cabinet: quiet authority, reverent stillness, and the gentle satisfaction of taxonomy. There is no rush here. The site breathes like a conservatory greenhouse in late afternoon -- warm diffused light filtering through frosted glass panes, dust motes suspended in amber air. The mood is contemplative and unhurried, scholarly without being stuffy, elegant without being precious. Think: the field journal of a 19th-century naturalist who has impeccable taste in grid systems and knows CSS. The overall feeling should evoke the moment you open a rare botanical folio and the pages release the ghost-scent of pressed flowers and old linen paper.
## Layout Motifs and Structure
The page is organized as a **bento-box grid** -- a series of precisely proportioned rectangular compartments with generous 16px gutters and 12px rounded corners on each cell. The grid uses CSS Grid with `grid-template-columns: repeat(12, 1fr)` at desktop, collapsing to a 4-column system on tablet and single-column on mobile.
**The Specimen Grid:** The primary content area is a 3x3 bento arrangement where cells vary in size: one large 2x2 "hero specimen" cell anchors the top-left, surrounded by smaller 1x1 and 1x2 cells that contain individual botanical elements, text passages, or decorative geometric frames. Each cell has a cream-toned background (#F5F0E8) with a subtle 1px border in #D4C9B5, creating the impression of labeled compartments in a naturalist's specimen drawer.
**The Vitrine Header:** The top section is a narrow horizontal band (80px height) containing the site title centered with flanking geometric ornaments (thin-line hexagons and circles in #8B7D6B). Navigation is absent in the traditional sense -- instead, small botanical-glyph icons (leaf, seed, root, bloom) serve as section markers positioned at the four corners of the viewport, fading in on scroll.
**The Folio Sections:** Below the bento grid, the page unfolds as a vertical sequence of "folio pages" -- full-width sections separated by thin horizontal rules adorned with centered geometric rosettes (SVG). Each folio section uses a two-column split: 60% text, 40% botanical illustration, alternating sides. The columns are inset 8% from viewport edges, creating a reading area that feels like a book's text block.
**The Index Footer:** A bottom section styled as a botanical index card -- a single bento cell spanning the full width, divided into four equal columns listing specimen names, classification terms, and SVG leaf silhouettes as bullet markers.
## Typography and Palette
**Display Headings:** "Josefin Sans" (Google Fonts) -- a geometric sans-serif with elegant, rounded terminals that echo the soft curves of botanical forms. Used at weight 300 (Light) for large display text and weight 600 (SemiBold) for section titles. Letter-spacing: 0.08em. All headings uppercase. Size: clamp(1.6rem, 4vw, 3.8rem). The rounded terminals of Josefin Sans create a visual kinship with the organic curves in the botanical illustrations without resorting to a decorative or handwritten face.
**Body Text:** "Lora" (Google Fonts) -- a well-balanced contemporary serif with roots in calligraphy, providing warmth and readability for longer passages. Weight 400 (Regular) for body, 700 (Bold) for emphasis. Line-height: 1.72. Size: clamp(0.95rem, 1.2vw, 1.1rem). The slight brushed quality of Lora's letterforms harmonizes with the hand-illustrated botanical motifs.
**Captions and Labels:** "Nunito Sans" (Google Fonts) -- a rounded sans-serif at weight 300 (Light), size 0.75rem, letter-spacing 0.12em, uppercase. Used for specimen labels, metadata, and navigational glyphs. The rounded quality reinforces the seed's rounded-sans directive while differentiating from the display face.
**Color Palette (Muted Vintage):**
- `#F5F0E8` -- Aged Linen: primary background, the warm off-white of old herbarium paper
- `#EDE6D8` -- Pressed Petal: secondary background for alternating bento cells
- `#8B7D6B` -- Dried Sage: primary text color, muted warm gray-brown
- `#5C6B52` -- Fern Shadow: accent green, the desaturated olive of pressed fern fronds
- `#A67C5B` -- Autumn Bark: warm accent for highlights, links, and active states
- `#C4A882` -- Wheat Hull: tertiary accent for borders, dividers, and subtle decorative elements
- `#3D3429` -- Dark Loam: used sparingly for high-emphasis text (headings over light backgrounds)
- `#D4C9B5` -- Parchment Edge: border color for bento cells and rule lines
- `#7A8E6E` -- Lichen Green: secondary green for botanical SVG fills and hover states
- `#E8D5BC` -- Chamois: background tint for the vitrine header band
## Imagery and Motifs
**No photographs.** All visual elements are CSS-generated, SVG, or inline vector illustrations in the style of hand-drawn botanical plates.
**Botanical Line Illustrations:** The signature visual element is a set of SVG botanical specimens -- detailed line drawings of individual plant forms (a single monstera leaf with visible venation, a cross-section of a seed pod, a stem with unfurling fiddlehead, a root system diagram, a pressed flower silhouette). These are rendered as single-color SVG paths in #5C6B52 on the cream background, with occasional second-color fills in #7A8E6E at 30% opacity for depth. The illustration style references copperplate engravings: fine parallel hatching lines for shadow, stippled dots for texture, clean contour lines at 1.5px stroke width.
**Geometric Frames:** Each bento cell is optionally adorned with thin geometric border ornaments -- small circles at corners (4px radius, 1px stroke in #C4A882), short perpendicular tick marks at the midpoint of each cell edge, or a delicate hexagonal rosette centered above a text block. These geometric shapes are rendered as inline SVGs and provide the "specimen label" quality of a museum display case.
**Pressed-Flower Textures:** Subtle background textures within certain bento cells are created using CSS `radial-gradient` patterns -- tiny clustered dots in #D4C9B5 at 5% opacity, arranged in organic scatter patterns, suggesting the faint impression of a dried flower pressed into the page.
**Section Dividers:** Horizontal rules between folio sections are not plain `
` elements but SVG compositions: a thin line (#D4C9B5) with a centered decorative element -- alternating between a small geometric circle-within-hexagon, a simplified leaf silhouette, and a seed-pod cross-section. Each divider is unique.
**Leaf Cursor Trail:** On desktop, a subtle CSS-generated element follows the cursor at a distance -- a tiny (8px) leaf silhouette in #7A8E6E at 40% opacity that gently rotates as it trails, fading out after 600ms. This is the only "playful" interactive element, kept restrained.
## Prompts for Implementation
Build xanadu.wiki as a single-page vertical experience structured as a naturalist's specimen folio. The page opens with the vitrine header and bento specimen grid, then unfolds into alternating folio sections, and concludes with the index footer. The entire experience should feel like leafing through a rare botanical volume -- quiet, deliberate, and visually nourishing.
**Bento Grid Construction:**
- Use CSS Grid with named grid areas for the 3x3 specimen layout
- Each bento cell should have `border-radius: 12px`, `background: #F5F0E8` or `#EDE6D8` (alternating), `border: 1px solid #D4C9B5`
- The hero cell (2x2) contains the largest botanical SVG illustration with a brief introductory text passage
- Smaller cells contain: individual botanical SVG specimens, short text excerpts styled as specimen labels, or purely decorative geometric compositions
- Cells should have `padding: clamp(1rem, 2vw, 2rem)` for breathing room
- On hover, cells receive a subtle `box-shadow: 0 2px 12px rgba(61, 52, 41, 0.08)` transition over 400ms
**Fade-Reveal Animation System:**
- All content enters the viewport via fade-reveal: elements begin at `opacity: 0; transform: translateY(16px)` and transition to `opacity: 1; transform: translateY(0)` over 700ms with `ease-out` timing
- Use Intersection Observer to trigger reveals when elements cross 15% viewport threshold
- Bento cells stagger their reveal: each cell delays by 80ms multiplied by its grid position index (top-left = 0, moving left-to-right, top-to-bottom), creating a gentle cascade effect
- Botanical SVG illustrations within cells fade-reveal independently after their parent cell, with an additional 200ms delay and a slight `scale(0.97)` to `scale(1)` transition
- Section divider SVGs draw on using `stroke-dasharray` / `stroke-dashoffset` animation triggered on scroll, completing over 1200ms
- The leaf cursor trail uses CSS `transition` on a pseudo-element repositioned via a lightweight JS mousemove listener (throttled to 60fps via `requestAnimationFrame`)
**SVG Botanical Specimens:**
- Create 5-6 distinct botanical SVG illustrations inline in the HTML
- Each illustration should be 200-400px in its largest dimension
- Use `stroke: #5C6B52`, `stroke-width: 1.5`, `fill: none` for primary line work
- Add selective `fill: #7A8E6E` at `opacity: 0.3` for leaf surfaces and petal interiors
- Include fine hatching detail using closely spaced parallel `` elements for shadow areas
- Each specimen should have a small label beneath it in Nunito Sans: a faux-Latin classification name and a brief descriptor
**Storytelling Flow:**
- The page narrative moves from "arrival" (header, first impression) through "discovery" (bento grid specimens) to "study" (folio sections with longer text and illustration pairs) to "cataloging" (index footer)
- Text content should read as naturalist's observations -- poetic, precise, and attentive to detail
- Each folio section introduces a different "specimen" or concept, building a sense of a curated collection
**Technical Constraints:**
- Single HTML file with embedded CSS and JS (no external dependencies except Google Fonts)
- All SVGs inline for animation control
- CSS custom properties for the entire color palette, defined on `:root`
- Smooth scroll behavior: `scroll-behavior: smooth` on `html`
- Responsive breakpoints: 768px (tablet), 480px (mobile)
- AVOID: parallax scrolling, pricing blocks, CTA buttons, stat counters, testimonial carousels, hero video backgrounds, particle.js libraries, neon glows, gradient meshes
## Uniqueness Notes
1. **Bento-box as specimen drawer:** While bento-box layouts appear in only 4% of designs in this collection, none use the metaphor of a naturalist's specimen compartment. The grid cells are not generic content containers but individually framed display cases, each with its own geometric ornament treatment and botanical inhabitant. This transforms a layout pattern into a conceptual conceit.
2. **Muted-vintage palette without nostalgia kitsch:** The color system avoids the sepia-and-brown cliches of "vintage" web design. Instead, the palette is built from actual pigments found in historical botanical plates -- sage greens, bark browns, linen whites -- creating authenticity rather than pastiche. The muted-vintage palette category appears in only 1% of designs, making this one of the rarest palette choices in the collection.
3. **Botanical SVG as primary content, not decoration:** Other designs in this collection that reference botanical themes (12% frequency) typically use botanical elements as background decoration or accent motifs. Here, the hand-drawn botanical SVG illustrations are the content itself -- the specimens that the page's entire architecture (bento grid, folio sections, index footer) is built to display and honor.
4. **Geometric-botanical fusion:** The combination of precise geometric frames (hexagons, circles, tick marks) with organic botanical line illustrations creates a visual tension between taxonomy and nature, order and growth. The geometric-shapes motif (3% frequency) and botanical-illustration imagery (2% frequency) have never been combined in this collection.
5. **Silence as design element:** The design deliberately avoids animation spectacle. The fade-reveal system is the only animation pattern, applied uniformly and gently. There are no parallax effects (avoided despite 98% frequency), no morphing transitions, no spring physics. This restraint is itself a differentiator -- the page's stillness and quietude are designed to feel like a physical book, not a digital performance.
**Seed/Style:** botanical, bento-box, rounded-sans, muted-vintage, fade-reveal, botanical-illustration, geometric-shapes, minimal
**Avoided overused patterns:** parallax (98%), corporate aesthetic (97%), photography imagery (99%), full-bleed layout (97%), warm-only palette (98%), mono typography (76%), friendly tone (45%)
**Preferred underused patterns:** bento-box layout (4%), rounded-sans typography (3%), muted-vintage palette (1%), botanical-illustration imagery (2%), geometric-shapes motifs (3%), fade-reveal animation (9%)