singular-particular-space/Videos/JL-design-reference/DESIGN.md

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.