# Design System Strategy: Neon-Solar Synthesis

## 1. Overview & Creative North Star: "Electric Eden"
This design system rejects the clinical, rounded aesthetic of modern "friendly" tech. Our Creative North Star is **Electric Eden**: a high-fidelity collision between the decaying neon of a cyberpunk metropolis and the vibrant, untamed vitality of a solar-powered jungle. 

We break the "template" look through **aggressive geometry** and **chromatic saturation**. By pairing razor-sharp 0px corners with lush, organic imagery and digital glitch textures, we create a UI that feels both hyper-synthetic and intensely alive. Layouts should favor intentional asymmetry—heavy typographic blocks balanced by expansive negative space—to evoke a high-end editorial feel rather than a standard dashboard.

---

## 2. Colors & Surface Logic
The palette is a high-contrast battle between deep shadows and radioactive highlights.

### The "No-Line" Rule
**Prohibit 1px solid borders for sectioning.** Structure must be defined through background shifts or light-emitting gradients. Use `surface_container_low` against `surface` to define regions. If a boundary feels "lost," do not reach for a stroke; reach for a tonal shift.

### Surface Hierarchy & Nesting
Treat the UI as a series of monolithic slabs. 
- **Base Layer:** `surface` (#130827) provides the "midnight" foundation.
- **Primary Content Blocks:** Use `surface_container` (#1f1238) for main modules.
- **Interactive Insets:** Use `surface_container_high` (#261740) for nested elements like input fields or secondary cards.
- **Deep Insets:** Use `surface_container_lowest` (#000000) for "black hole" code blocks or media galleries to create a sense of infinite depth.

### The "Glass & Gradient" Rule
To bridge the gap between "Digital Glitch" and "Solarpunk," utilize semi-transparent layers.
- **Solar Flares:** Apply a linear gradient from `primary` (#ff7cf5) to `secondary` (#00f1fd) at 15% opacity over `surface` to create "light leak" effects.
- **Cyber-Glass:** Use `surface_variant` (#2d1d49) at 92% opacity for floating navigation or overlays. Depth is achieved through tonal contrast, not blur — a slightly lighter background against the void reads as "lifted" without any filter.

---

## 3. Typography: Retro-Future Editorial
Our type system juxtaposes the mechanical with the classical, creating an "archaeology of the future."

*   **The Powerhouse (Display & Headlines):** `Space Grotesk` weight 600. Use 3.5rem for hero statements to command the grid.
*   **The Human Element (Labels):** `Space Grotesk` weight 300 + letter-spacing 0.12em. Light weight with open tracking reads as the serif "breath" this role needs — editorial without a second typeface.
*   **The Utility (Body & Title):** `Space Grotesk` weight 400. Clean and high-legibility. Noto Emoji for any iconographic characters inline.
*   **One font, three weights.** The mechanical contrast comes from scale and tracking, not typeface switching.

---

## 4. Elevation & Depth: Tonal Layering
Traditional shadows are too "soft" for this aesthetic. We use light and tone to simulate height.

*   **The Layering Principle:** Avoid elevation 1–5. Instead, use the **Stacking Rule**: 
    - `surface_container_low` = Ground.
    - `surface_container` = Raised Platform.
    - `surface_container_highest` = Topmost focus.
*   **Ambient Shadows:** If a floating element requires a shadow, it must be tinted. Use `surface_tint` (#ff7cf5) at 10% opacity with a blur of 8px and 0px spread. This creates a tight glow rather than a shadow, making the element look like it’s emitting light. Keep blur at or below 8px — the sharpness is the point.
*   **The "Ghost Border" Fallback:** If accessibility requires a container boundary, use `outline_variant` (#4e4264) at **15% opacity**. Never use a 100% opaque border.

---

## 5. Components

### Buttons
- **Primary:** Background `primary` (#ff7cf5), Text `on_primary` (#580058). Shape: Strict 0px corners. Hover state: Shift background to `primary_fixed_dim` (#ff1cfe) with a subtle `secondary` (#00f1fd) outer glow.
- **Secondary:** Background `transparent`, Border `outline` (#7d6f94) at 40%, Text `primary`.
- **Tertiary:** Text `tertiary` (#e9ffba), no background. Use for low-priority actions.

### Input Fields
- **Container:** `surface_container_high` (#261740).
- **Bottom Indicator:** Instead of a full border, use a 2px bottom-only stroke in `secondary` (#00f1fd) that expands on focus.
- **Error State:** Use `error` (#ff6e84) for text and a "digital glitch" animation (slight X-axis jitter) on the label.

### Cards & Lists
- **The Divider Ban:** Never use horizontal rules. Use `spacing.6` (2rem) of vertical whitespace to separate list items.
- **Selection:** Use a background of `surface_bright` (#342353) to indicate active states.

### Chips
- **Aesthetic:** `surface_container_highest` background with `on_surface_variant` text. Sharp edges are non-negotiable.

---

## 6. Do’s and Don'ts

### Do:
*   **Embrace Asymmetry:** Offset your headline from your body text using the `spacing.10` or `spacing.12` tokens.
*   **Mix Textures:** Place a high-resolution photo of lush ferns behind a UI panel with a "scanline" or "noise" overlay.
*   **Use Harsh Cuts:** Use `0px` for all containers, buttons, and selection states.

### Don't:
*   **Never use Rounded Corners:** Even a 2px radius destroys the "Blade Runner" precision.
*   **Avoid Muted Tones:** If the screen looks "dusty," you aren't using enough `secondary` (#00f1fd) or `tertiary` (#e9ffba) highlights.
*   **No Standard Drop Shadows:** Do not use black or grey shadows. Only use tinted glows or tonal shifts.
*   **Don't Over-Animate:** Use "instant" or "glitch" transitions (0.1s duration). Avoid "bouncy" or "organic" easing; the motion should feel like a high-speed data transfer.