# Design Language for thesecond.world

## Aesthetics and Tone
thesecond.world builds an isometric digital world -- a parallel universe rendered in clean, precise axonometric perspective where buildings, landscapes, and data structures exist as miniature 3D models. The visual identity draws from SimCity-style isometric city builders, the sepia warmth of vintage globes and atlases, data-visualization dashboards for world systems, and the layered depth of geological cross-section diagrams. The tone is scholarly-intellectual -- a serious, research-driven exploration of what "the second world" might look like, presented with academic rigor.

## Layout Motifs and Structure
**Immersive-scroll** experience where the page transforms as you scroll, creating a continuous journey through the isometric world.

**Primary structure:**
- **Opening viewport (100vh):** A sepia-nostalgic background (#e8dcc4) with an isometric world illustration (SVG, clean lines) building itself from the ground up. "THE SECOND WORLD" in condensed type overlays the scene.
- **Immersive scroll transformation:** As the user scrolls, the isometric world evolves: buildings grow, data layers appear, vegetation spreads. CSS transforms update with scroll position.
- **Pulse-attention data highlights:** Key data points pulse with a subtle attention animation (scale 1.0 to 1.05 and back, with glow) when entering view.
- **Layered-depth cross-sections:** Content reveals different "layers" of the world (geological, infrastructural, atmospheric) using z-index stacking.

## Typography and Palette
**Fonts:**
- **Headlines:** "Barlow Condensed" (Google Fonts) -- condensed industrial sans, weight 700, size: clamp(28px, 5vw, 56px). Uppercase.
- **Body:** "Merriweather" (Google Fonts) -- warm scholarly serif, weight 400, size: clamp(15px, 1.5vw, 18px), line-height: 1.8.
- **Data:** "Fira Code" (Google Fonts) -- monospace for world-building statistics and coordinates.

**Palette:**
- **Sepia Cream:** #e8dcc4 -- primary background
- **Atlas Brown:** #6a5040 -- primary text
- **Isometric Blue:** #4a7aa8 -- building/structure accent
- **Terrain Green:** #5a8a50 -- vegetation accent
- **Data Orange:** #d48040 -- data visualization accent
- **Parchment:** #f0e8d8 -- lighter surfaces
- **Deep Earth:** #3a2e20 -- shadows and depth

## Imagery and Motifs
- **Isometric SVG world illustrations:** Clean line-art buildings, trees, roads, and infrastructure drawn in 30/60-degree isometric perspective. 1.5px strokes, flat color fills.
- **Data-viz world statistics:** Small embedded data visualizations (bar charts, progress rings, sparklines) showing world-system metrics.
- **Pulse-attention animations:** `@keyframes pulse { 0%,100%{transform:scale(1);box-shadow:0 0 0 rgba(212,128,64,0)} 50%{transform:scale(1.05);box-shadow:0 0 12px rgba(212,128,64,0.3)} }` 1.5s, triggered once on scroll-enter.
- **Layered cross-section depth:** Stacked content layers representing geological/infrastructure/atmospheric strata of the isometric world.
- **Immersive scroll transforms:** CSS custom property `--scroll` updated via JS, controlling translateY, scale, and opacity of various world elements.

## Prompts for Implementation
Isometric world-building experience. Immersive scroll evolves the world as you explore. Data visualizations provide quantitative depth. Layered cross-sections reveal world structure. Sepia palette grounds futurism in warmth.

**Opening:** Sepia background, isometric ground plane draws, buildings construct themselves upward (SVG stroke + height animation), "THE SECOND WORLD" overlays.

AVOID: CTA-heavy layouts, pricing blocks, stat-grids. No flat 2D layout. No dark mode. No corporate blandness.

## Uniqueness Notes
1. **Isometric world that builds on scroll:** No other design creates a living isometric cityscape that constructs itself as the user scrolls.
2. **Sepia-nostalgic palette for world-building:** The warm vintage palette applied to futuristic city-building creates unique temporal fusion.
3. **Geological cross-section depth layers:** Revealing underground/infrastructure/atmospheric strata creates a unique educational depth metaphor.
4. **Embedded data-viz in isometric context:** Small charts and metrics embedded within the isometric world provide quantitative reality.

**Seed/style:** isometric aesthetic, immersive-scroll layout, condensed typography, sepia-nostalgic palette, pulse-attention patterns, data-viz imagery, layered-depth motifs, scholarly-intellectual tone
**Avoided overused patterns:** No centered+card-grid (96%/92%), no warm palette (87%), no mono typography (86%), no photography (78%), no mysterious-moody tone (67%)