# Design System Strategy: The Sentient Map

## 1. Overview & Creative North Star
**The Creative North Star: "The Precision Sentinel"**

For a GeoSpatial Early Warning System (GEWS), the design must transcend standard "dashboard" aesthetics. We are building a high-stakes, enterprise-grade environment where clarity is a form of safety. This design system rejects the "boxed-in" feel of traditional GIS software in favor of **The Precision Sentinel**—a visual language defined by expansive breathing room, editorial-grade typography, and tonal depth.

Instead of a rigid grid of outlines, we utilize **Asymmetric Information Density**. Critical geospatial alerts are given massive "stage presence" through high-contrast layering, while secondary telemetry data is tucked into elegant, semi-transparent overlays. We break the "template" look by treating the UI as a living lens over the map, using varying levels of translucency and "glass-on-glass" stacking to represent different data altitudes.

---

## 2. Colors & Surface Philosophy
The palette is rooted in a command-and-control "Deep Navy" foundation, punctuated by vibrant, meaningful status tones.

### Surface Hierarchy & Nesting (The "No-Line" Rule)
In this system, **visible borders are a failure of hierarchy.** Explicitly prohibit 1px solid borders for sectioning. Boundaries must be defined solely through background color shifts or tonal transitions.
- **Base Layer:** `surface` (#f7f9fb) – The global background.
- **Sectioning:** `surface_container_low` (#f2f4f6) – Used for large sidebar or footer areas.
- **Content Blocks:** `surface_container_lowest` (#ffffff) – Used for primary data cards to create a "lifted" feel.
- **Nesting:** To separate a group within a card, use `surface_container` (#eceef0) rather than a line.

### The Glass & Gradient Rule
To move beyond "out-of-the-box" UI, floating map controls and tooltips must use **Glassmorphism**:
- **Background:** `surface_container_lowest` at 80% opacity.
- **Backdrop Blur:** 12px to 20px.
- **Effect:** This allows the map's geospatial textures to bleed through, ensuring the UI feels integrated into the environment, not "pasted" on top.

### Signature Textures
Main Action CTAs should not be flat. Use a subtle **Linear Gradient (135°)** from `primary` (#000000) to `primary_container` (#131b2e). This provides a "machine-polished" depth that signifies high-grade enterprise hardware.

---

## 3. Typography
We use a dual-font strategy to balance "Human Authority" with "Machine Precision."

- **The Display Scale (Manrope):** Chosen for its geometric, modern structure. Used for `display-lg` through `headline-sm`. This font conveys the brand's "Editorial" authority.
- **The Data Scale (Inter):** Chosen for its exceptional legibility in dense environments. Used for all `title`, `body`, and `label` tokens.

**The Hierarchy Goal:**
- Use `display-md` (Manrope) for critical alert counts (e.g., "12 Active Threats").
- Use `label-sm` (Inter) in All Caps with 0.05em letter spacing for metadata and map coordinates to give it a "technical instrument" feel.

---

## 4. Elevation & Depth
Depth in this system is an indicator of urgency.

### Tonal Layering
Do not use shadows for static layout elements. Achieve separation by stacking:
*Place a `surface_container_lowest` card on a `surface_container_low` background.*

### Ambient Shadows
For "active" floating elements (e.g., an expanded alert window), use **Ambient Shadows**:
- **Blur:** 32px – 48px.
- **Opacity:** 6% of `on_surface`.
- **Color:** Tint the shadow with a hint of `primary` to make it feel like it’s reacting to the deep navy UI environment.

### The "Ghost Border" Fallback
If a border is required for accessibility in complex map overlays, use a **Ghost Border**:
- **Token:** `outline_variant` (#c6c6cd) at **15% opacity**.
- **Rule:** Never use 100% opaque borders.

---

## 5. Components

### Buttons: The Command Set
- **Primary:** Gradient from `primary` to `primary_container`. White text. Border radius: `md` (0.375rem).
- **Secondary:** Surface-tinted. No border. Use `surface_container_high` as the background with `on_surface` text.
- **Tertiary/Ghost:** No background. `primary` text. Transitions to `surface_container_low` on hover.

### Cards & Lists (No-Divider Policy)
**Strict Rule:** Forbid the use of horizontal divider lines.
- **Lists:** Separate items using 8px of vertical white space or a subtle background shift on hover (`surface_container_highest`).
- **Cards:** Use `xl` (0.75rem) corner radius for high-level dashboard containers and `md` (0.375rem) for nested child elements.

### Geospatial Chips
- **Safety (Green):** Background `secondary_container`, Text `on_secondary_container`.
- **Alert (Red):** Background `tertiary_container`, Text `on_tertiary_container`.
- **Review (Yellow):** Background #F59E0B (15% opacity), Text #F59E0B.
- *Styling:* `full` roundedness (capsule) to contrast against the architectural squareness of the dashboard.

### Data Inputs
- **Style:** Understated. Use `surface_container_highest` for the input track. No bottom border.
- **Focus State:** 2px "Ghost Border" of `primary` at 40% opacity.

---

## 6. Do’s and Don’ts

### Do:
- **Do** use whitespace as a functional tool. If two data points feel cluttered, increase padding rather than adding a line.
- **Do** use `on_surface_variant` for secondary labels to create a natural visual "recession."
- **Do** use `headline-lg` for single-word statuses to give the interface an editorial, high-end magazine feel.

### Don’t:
- **Don’t** use pure black (#000000) for text. Use `on_surface` (#191c1e) to maintain a premium, slightly softer contrast.
- **Don’t** use standard "Drop Shadows." If it doesn't look like ambient light, it's too heavy.
- **Don’t** use high-saturation backgrounds. All color should come from data-points (Alerts/Maps) or the Primary Action buttons; the shell should remain a sophisticated "Grey/Navy" stage.

---

## 7. Signature GEWS Components
- **The Telemetry Strip:** A 48px tall `surface_container_lowest` bar with a 10% `outline_variant` Ghost Border, pinned to the bottom of the map, using `label-sm` for live-streaming coordinates.
- **The Alert Overlay:** A `surface_container_lowest` container with 80% opacity and 20px backdrop blur. It should slide in from the right, using an asymmetric `xl` radius on the left side only, making it feel like it’s "growing" out of the map edge.