JL Kruger
2f5c06fee8
Fonts (display/heading only — body untouched): - Cringe Pit: Bebas Neue → Protest Revolution - Renegade: Bebas Neue → Ribeye Marrow, Barlow Condensed → Faculty Glyphic (headings), Rambla (body) - Nomad Soul: Bebas Neue → Trade Winds, Rye → Babylonica - Hub: Bebas Neue → Workbench Lightbox fixes (3 collection pages): - window.onload → DOMContentLoaded (fires before iframes load, fixes slow mobile) - lightbox-content: max-height 90vh + overflow-y auto (fixes off-screen on small viewports) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
84 lines
5.7 KiB
Markdown
84 lines
5.7 KiB
Markdown
# 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. |