diff --git a/Videos/JL-design-reference/DESIGN.md b/Videos/JL-design-reference/DESIGN.md new file mode 100644 index 0000000..8782791 --- /dev/null +++ b/Videos/JL-design-reference/DESIGN.md @@ -0,0 +1,84 @@ +# 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. \ No newline at end of file diff --git a/Videos/JL-design-reference/code.html b/Videos/JL-design-reference/code.html new file mode 100644 index 0000000..e691870 --- /dev/null +++ b/Videos/JL-design-reference/code.html @@ -0,0 +1,236 @@ + + + + + + + + + + + + + + +
+
+ +

NEON SOLAR

+
+ +
+ +
+ +
+
+ +
+
+

LIVE_NOW

+Solar Cycle 042 +
+
+Cyberpunk sunset +
+
+ + +
+
+

SOLAR_PUNK_INITIATIVE: VOL 01

+

24,892 VIEWERS TUNED IN

+
+
+
+
+ +
+
+
+

ARCHIVE_DEEP_DIVE

+
+
+
+ +
+
+Digital flora +
+ +
+ 04:20 +
+
+
+

GLITCH_JUNGLE_WALKTHROUGH

+

Data Segment: #00FF1D

+
+
+ +
+
+Neon rave +
+ +
+ 12:55 +
+
+
+

NEON_BEACH_MEMORIES

+

Data Segment: #FF00F5

+
+
+ +
+
+Crystal flora +
+ +
+ 08:12 +
+
+
+

BOTANICAL_UPGRADE_V3

+

Data Segment: #E9FFBA

+
+
+ +
+
+Digital sky + +
+ 01:30 +
+
+
+

ATMOSPHERIC_DATA_STREAM

+

Data Segment: #AABBCC

+
+
+
+
+ +
+Palm leaf +
+
+ + + \ No newline at end of file diff --git a/Videos/cringe-pit.html b/Videos/cringe-pit.html index 2e6c5d0..ab1ce06 100644 --- a/Videos/cringe-pit.html +++ b/Videos/cringe-pit.html @@ -4,7 +4,7 @@ THE CRINGE PIT // Singular Particular - +