105 lines
6.3 KiB
Markdown
105 lines
6.3 KiB
Markdown
# 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. |