39686-vm/horizon_geo_intelligence/DESIGN.md

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.