# Design Language for tanso.wiki

## Aesthetics and Tone
tanso.wiki (炭素 = Carbon, wiki) wraps carbon knowledge in an ethereal, dreamlike atmosphere -- a wiki that feels like consulting an ancient library floating in clouds, where hand-drawn illustrations of carbon allotropes mingle with unexpected tropical-fish motifs (carbon in oceanic ecosystems). The visual identity draws from antique botanical/zoological illustration plates, earth-toned natural history museum displays, classical typography of encyclopedia pages, and the soft-focus, misty atmosphere of traditional Chinese landscape paintings. The tone is authoritative -- a definitive reference source, but one presented with gentleness and beauty.

## Layout Motifs and Structure
**Split-screen** layout with a fixed reference panel on one side and scrolling wiki content on the other.

**Primary structure:**
- **Opening viewport (100vh):** A warm earth-toned background (#e8dcc8 to #d4c8b4) with "TANSO WIKI" in elegant Garamond. A hand-drawn carbon atom illustration (SVG) floats at center.
- **Split reference + content:** Left panel (40%) provides table of contents and quick reference data (fixed/sticky). Right panel (60%) scrolls through wiki articles. On mobile, panels stack.
- **Fade-reveal article sections:** Content fades in as scrolled into view, creating a gentle, meditative reading pace.
- **Tropical-fish decorative illustrations:** Hand-drawn SVG fish and marine life appear as decorative elements in margins, connecting carbon to ocean ecosystems.

## Typography and Palette
**Fonts:**
- **Headlines:** "Cormorant Garamond" (Google Fonts) -- elegant classical serif, weight 600, size: clamp(24px, 4vw, 44px).
- **Body:** "Lora" (Google Fonts) -- warm readable serif, weight 400, size: clamp(15px, 1.5vw, 18px), line-height: 1.85.
- **Data/Formulas:** "Fira Mono" (Google Fonts) -- monospace for chemical formulas and technical data.

**Palette:**
- **Parchment Warm:** #e8dcc8 -- primary background
- **Earth Umber:** #5a4030 -- primary text
- **Ocean Teal:** #3a7a8a -- primary accent (ocean/carbon connection)
- **Sand Light:** #f0e8d8 -- reference panel background
- **Coral Soft:** #c4887a -- secondary accent
- **Moss Green:** #5a7a4a -- tertiary accent, nature connection
- **Deep Earth:** #3a2e20 -- darkest text, emphasis

## Imagery and Motifs
- **Hand-drawn carbon illustrations:** Sketch-style SVG drawings of diamond crystals, graphite layers, fullerenes, with feTurbulence for organic wobble.
- **Tropical-fish margin decorations:** Small hand-drawn fish illustrations in ocean teal, appearing in margins and whitespace, connecting carbon to marine ecosystems.
- **Fade-reveal on scroll:** `opacity: 0` to `1` over 600ms on Intersection Observer trigger.
- **Earth-toned atmospheric backgrounds:** Warm, muted gradients evoking museum display environments.

## Prompts for Implementation
Ethereal carbon encyclopedia. Split-screen enables reference + reading simultaneously. Hand-drawn illustrations add charm. Tropical-fish motifs create unexpected carbon-ocean connections. Fade-reveals pace reading.

**Opening:** Earth-toned background, carbon atom illustration draws itself, "TANSO WIKI" fades in Garamond, split panels appear.

AVOID: CTA-heavy layouts, pricing blocks, stat-grids. No dark mode. No tech aesthetic. No heavy animation.

## Uniqueness Notes
1. **Ethereal wiki with hand-drawn scientific illustrations:** No other wiki design uses sketch-style scientific drawings with an atmospheric, dreamlike quality.
2. **Tropical-fish as carbon-ecosystem visual connectors:** Fish illustrations in a carbon wiki create unexpected ecological connections.
3. **Split-screen reference+content wiki:** The fixed reference panel alongside scrolling content creates a unique two-pane knowledge system.
4. **Garamond + earth tones for chemistry wiki:** Classical typography on warm earth backgrounds creates encyclopedia gravitas.

**Seed/style:** ethereal aesthetic, split-screen layout, garamond-classic typography, earth-tones palette, fade-reveal patterns, hand-drawn imagery, tropical-fish motifs, authoritative tone
**Avoided overused patterns:** No centered+card-grid (96%/92%), no parallax (98%), no mono typography (86%), no photography (78%), no mysterious-moody tone (67%)