# 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.