# Design Language for glolos.com

## Aesthetics and Tone
A world-map interface where global services adapt to local contexts -- glolos.com (Global + Local) renders as a cartographic dashboard where a stylized world map is the primary navigation element, and content shifts to reflect local adaptations as the user explores different regions. The cartographic aesthetic uses map projections, latitude/longitude grids, and location markers to visualize the global-to-local translation process.

The tone is navigator-adaptive: the voice of a global service that knows every local market. "Same mission, different methods. See how it works where you are."

## Layout Motifs and Structure
**Map System:** A central world map (SVG simplified outlines) dominates the viewport with content panels appearing on region interaction.

**Section Flow:**
1. **The Globe:** Hero with stylized SVG world map and the domain name overlaid.
2. **The Regions:** Map regions highlighted in different colors, with detail panels appearing on hover/click.
3. **The Adaptation:** Side-by-side comparison panels showing how the service adapts (global vs. local).
4. **The Network:** Closing visualization of connection lines between global nodes.

## Typography and Palette
- **Headlines:** "Space Grotesk" at 2rem-3.5rem, weight 700.
- **Body:** "Inter" at 0.95rem, weight 400, line-height 1.7.
- **Map Labels:** "Inter" at 0.7rem, weight 500, all-caps.

**Palette:** Ocean Dark (#0a1830), Land (#1a3050), Region 1 (#3080c0), Region 2 (#c04080), Region 3 (#40c080), Region 4 (#c0a030), Coastline (#305070), Text (#d0e0f0), Grid (#1a2a4020).

## Imagery and Motifs
**SVG World Map:** Simplified continent outlines with stroke-only rendering (no fill), creating a wireframe cartographic look.

**Latitude/Longitude Grid:** Faint curved grid lines across the map area creating a cartographic coordinate system.

**Region Highlights:** Map regions gain fill color on hover, transitioning from outline-only to filled.

**Connection Lines:** Curved SVG paths connecting region nodes, animated with stroke-dashoffset to suggest data flow.

## Prompts for Implementation
Build as a cartographic exploration tool. The map loads with continent outlines drawing themselves (SVG stroke animation, 3s). Grid lines appear behind the map at low opacity. Hovering regions fills them with their designated color and triggers a detail panel appearance. Connection lines between regions animate to show the global network. The adaptation comparison section uses side-by-side panels. Everything centers on the map as the primary interactive element.

## Uniqueness Notes
1. **World map as primary navigation:** Using cartographic interaction as the main content navigation is unique in the collection.
2. **SVG continent stroke animation:** Self-drawing map outlines create a distinctive loading experience.
3. **Region-fill hover interaction:** The transition from wireframe to colored fill on interaction creates a satisfying exploration mechanic.
4. **Global-local adaptation comparison:** Side-by-side panels showing the same service adapted to different contexts is functionally distinctive.

Document chosen seed/style: aesthetic: cartographic, layout: map-centered, typography: geo-sans, palette: ocean-regions, patterns: svg-map, imagery: grid-lines, motifs: connection-lines, tone: navigator-adaptive
<!-- DESIGN STAMP
  timestamp: 2026-03-18T22:30:04
  seed: aesthetic: cartographic, layout: map-centered, typography: geo-sans, palette: ocean-regions
  aesthetic: A world-map interface where global services adapt to local contexts -- glolos.com ren...
  content_hash: c5d6e7f8a9b0
-->