# Design Language for lrx.wiki

## Aesthetics and Tone

lrx.wiki occupies the visual territory of an abandoned freight yard at 2 AM, where someone with a projector and a can of Montana Gold has turned the concrete walls into a command center for something between street art and aerospace telemetry. The aesthetic is **graffiti meets mission control** -- the raw, territorial energy of wildstyle lettering colliding with the cold precision of heads-up display overlays. Every surface carries the tension between two impulses: the human need to mark territory with paint and the machine need to render information with clinical accuracy.

The tone is **authoritative** -- not in the polished corporate sense, but in the way a wall tag commands respect on its block. This is knowledge infrastructure presented with the confidence of someone who has earned the right to speak. There is no hedging, no softening, no "we think maybe." lrx.wiki states what it knows the way a throw-up on a highway overpass states who was there: unmistakably, permanently, without apology.

The mood draws from three specific visual worlds: (1) the control rooms of 1970s NASA missions, with their green-on-black CRT readouts and wall-to-wall analog gauges, (2) the graffiti productions of artists like DAIM and Saber, where three-dimensional letterforms twist through space with architectural precision, and (3) the targeting overlays and sensor readouts visible through fighter pilot HUD visors. The intersection of these three worlds produces a visual language that is simultaneously raw and calculated, street-level and orbital.

Color is applied like spray paint -- in deliberate bursts against a muted, weathered ground. The background surfaces feel like aged concrete or oxidized steel panels, while accent colors arrive with the sudden chemical intensity of aerosol pigment. Nothing glows softly here. Light either comes from a CRT phosphor or from the reflective sheen of fresh paint under sodium-vapor lamps.

## Layout Motifs and Structure

The layout follows a **bento-box** architecture -- a grid of discrete, self-contained information modules arranged in an asymmetric mosaic that recalls both the compartmentalized panels of a mission control dashboard and the rectangular sections of a graffiti mural where different artists have claimed adjacent territories on the same wall.

**Primary Grid System:**
The viewport is divided into a CSS Grid with a base of 12 columns and variable rows. Content modules snap to this grid but occupy deliberately irregular spans -- a hero module might claim 8 columns by 3 rows, while a data callout occupies 2 columns by 1 row, and a decorative graffiti element bleeds across 4 columns by 2 rows. The result is a dense, information-rich composition where the eye navigates between modules the way it navigates a wall of tags: scanning, locking on, reading, moving.

**Bento Module Types:**
1. **Command Modules** -- Large-format content panels (6-8 columns wide) that carry primary narrative text. These have a subtle 1px border in scanner-line green (#3BF78F) and a dark background that simulates a CRT screen. Text appears left-aligned with generous line-height, as if rendered on a terminal.
2. **Telemetry Tiles** -- Small, square or near-square modules (2-3 columns) that display single data points, status indicators, or decorative glyphs. These use the HUD overlay aesthetic: thin-stroke borders, corner brackets rendered with CSS pseudo-elements, and small-caps labels in a monospace typeface.
3. **Tag Zones** -- Irregularly shaped modules (achieved through CSS clip-path or negative margins) that contain decorative graffiti-style elements: oversized letterforms, abstract spray textures generated via CSS radial-gradient noise, or SVG wildstyle outlines. These break the rectilinear grid intentionally, the way a throw-up spills past the edge of its designated wall section.
4. **Readout Strips** -- Full-width, single-row modules that span all 12 columns at a height of ~60px. These function as informational dividers, displaying scrolling data tickers, coordinate readouts, or timestamp markers in monospace type, simulating the data bars at the bottom of a fighter HUD.

**Spatial Relationships:**
Modules are separated by 6px gutters that reveal the underlying "wall" texture (a muted concrete gray at #2A2A2F). This narrow gap creates a sense of density and claustrophobia appropriate to both graffiti walls (where every inch is contested) and control rooms (where every pixel of screen real estate carries mission-critical data). No module floats in whitespace. The composition is packed, deliberate, and territorial.

**Scroll Behavior:**
The page does not scroll in a conventional linear flow. Instead, the bento grid loads as a full-viewport composition, and scrolling reveals additional "floors" of the grid -- each floor a new arrangement of command modules, telemetry tiles, and tag zones. The transition between floors uses a vertical snap-scroll, giving each floor the feel of a distinct wall section or a new screen in the control room.

## Typography and Palette

**Typography:**

- **Display / Headlines:** "Space Grotesk" (Google Fonts) -- a grotesque-neo typeface with a technical, slightly squared character that bridges the gap between graffiti blockbuster lettering and aerospace instrument panels. Used at 3rem-5.5rem via `clamp(2.5rem, 5vw + 1rem, 5.5rem)` for primary headlines, always uppercase with `letter-spacing: 0.08em` and `font-weight: 700`. The squared terminals and geometric proportions of Space Grotesk give headlines the blocky authority of a stencil tag while maintaining the precision of flight instrument typography. Selective characters in headlines receive a CSS `text-shadow` in Scanner Green (#3BF78F) at `0 0 8px` to simulate CRT phosphor bleed.

- **Body / Reading Text:** "Work Sans" (Google Fonts) -- a grotesque-neo sans-serif at weight 400, sized at `clamp(0.95rem, 1vw + 0.5rem, 1.1rem)` with `line-height: 1.72`. Work Sans provides clean, unfussy readability that recedes behind the content, functioning like the neutral body text on an engineering specification sheet. Color: Concrete Dust (#C4BCB0) against dark backgrounds, or Oxidized Panel (#2A2A2F) against light surfaces. Paragraphs are set with `max-width: 62ch` to maintain comfortable reading measure.

- **Monospace / Data:** "JetBrains Mono" (Google Fonts) -- used exclusively in telemetry tiles, readout strips, and inline data references. Weight 400 at 0.8rem-0.9rem with `letter-spacing: 0.04em`. Color alternates between Scanner Green (#3BF78F) for active/live data and Faded Tag (#7A7068) for static/historical values. All monospace text receives a subtle `text-shadow: 0 0 3px currentColor` to reinforce the CRT glow effect.

- **Accent / Labels:** "Barlow Condensed" (Google Fonts) -- used for small-caps labels, navigation items, and module headers. Weight 600 at 0.7rem-0.85rem, always `text-transform: uppercase` with `letter-spacing: 0.14em`. This condensed grotesque provides maximum information density in tight spaces, mimicking the compressed labeling on aerospace instrument panels and the condensed letter styles found in graffiti crew names.

**Palette:**

The palette is **muted-vintage** -- desaturated, weathered tones that evoke aged concrete, oxidized metal, and sun-faded paint, punctuated by the chemical intensity of fresh aerosol pigment.

| Role | Name | Hex | Usage |
|------|------|-----|-------|
| Background Primary | Bunker Concrete | #1E1E22 | Main page background, command module interiors |
| Background Secondary | Oxidized Panel | #2A2A2F | Module gutters, secondary surfaces |
| Background Tertiary | Freight Wall | #383840 | Tag zone backgrounds, hover states |
| Text Primary | Concrete Dust | #C4BCB0 | Body text, descriptions |
| Text Secondary | Faded Tag | #7A7068 | Metadata, timestamps, secondary labels |
| Accent Primary | Scanner Green | #3BF78F | CRT glow effects, active data, primary highlights |
| Accent Secondary | Sodium Vapor | #E8A838 | Warning indicators, secondary highlights, hover accents |
| Accent Tertiary | Aerosol Violet | #9B6DFF | Decorative graffiti elements, tag zone overlays |
| Accent Quaternary | Rusted Signal | #C4553A | Error states, critical data, spray-drip decorations |
| Surface Wash | Primer Gray | #4A4A52 | Subtle borders, divider lines, inactive elements |

The vintage quality comes from the deliberate avoidance of pure blacks and pure whites. The darkest value (#1E1E22) carries a warm undertone; the lightest text (#C4BCB0) is a dusty, yellowed off-white. Nothing is crisp or digital-clean. Every color looks like it has been exposed to weather, exhaust, and time.

## Imagery and Motifs

**Generative Art as Environmental Texture:**
The primary imagery mode is **generative-art** -- algorithmic visual patterns that function not as illustrations but as environmental texture, like the accumulated layers of paint, stickers, and chemical staining on a well-used graffiti wall. Specific implementations:

1. **Noise-Field Backgrounds:** Each command module's background includes a subtle canvas-grain texture generated via an SVG `<feTurbulence>` filter (`baseFrequency="0.65" numOctaves="4" type="fractalNoise"`) overlaid at 4-6% opacity. This produces the visual grain of concrete or rusted metal, grounding every surface in physical materiality rather than digital flatness.

2. **Spray-Drift Particles:** On page load and during scroll transitions, a lightweight `<canvas>` element generates 40-80 small particles (2-5px radius) in Aerosol Violet (#9B6DFF) and Scanner Green (#3BF78F) that drift across the viewport with slight randomized velocity and fade over 3-4 seconds. These simulate the atomized overspray that hangs in the air when a graffiti artist works -- a subtle atmospheric effect that makes the page feel like an active workspace rather than a static document.

3. **Algorithmic Wildstyle Outlines:** SVG path generators create abstract letterform-like shapes -- not readable text, but the kind of interlocking, angular, flowing forms that characterize wildstyle graffiti. These are rendered as thin-stroke outlines (1-2px) in Faded Tag (#7A7068) at 15-20% opacity and placed as decorative backgrounds in tag zones. The shapes are generated with randomized Bezier curves constrained to a set of angular rules that mimic the geometric logic of graffiti style.

4. **HUD Reticle Overlays:** Telemetry tiles feature generative SVG overlays that simulate targeting reticles, scanning arcs, and coordinate crosshairs. These are drawn with thin strokes in Scanner Green (#3BF78F) and animated with slow rotation (`@keyframes spin { to { transform: rotate(360deg) } }` at 30-60 second periods) or pulsing opacity. The reticles are purely decorative but reinforce the sci-fi command center atmosphere.

5. **Data-Stream Ribbons:** Between bento grid floors, horizontal SVG ribbons display generative waveform patterns -- sine waves with randomized amplitude and frequency modulation -- that scroll horizontally at 20-40px/second. These evoke both the oscilloscope readouts of vintage electronics and the flowing, rhythmic quality of graffiti letterforms.

**Sci-Fi HUD Motifs:**
The HUD overlay system is the connective tissue between the graffiti aesthetic and the information architecture:

- **Corner Brackets:** Every bento module features L-shaped corner brackets (rendered as CSS `::before` and `::after` pseudo-elements) in Scanner Green (#3BF78F) at 1px stroke. These are the universal visual signifier of a HUD targeting element, and they frame each content module as a "target" or "point of interest" in a scanning field.
- **Scanning Lines:** Horizontal lines that sweep slowly downward through command modules (CSS `@keyframes` animating a 1px-tall gradient bar from top to bottom over 8-12 seconds, repeating). These simulate the refresh scan of a CRT monitor.
- **Coordinate Stamps:** Small text elements in JetBrains Mono that display pseudo-coordinates (e.g., "SEC.04 // 51.5074N 0.1278W" or "REF:LRX-0847 // ACTIVE") positioned in module corners. These are decorative, providing the atmosphere of a navigation or surveillance system.
- **Status Pips:** Small circular indicators (6px diameter) adjacent to module headers that pulse between Scanner Green (active) and Rusted Signal (#C4553A, alert) using a CSS animation. These simulate system status lights on a control panel.

## Prompts for Implementation

**Full-Screen Narrative Entry:**
The site opens to a full-viewport "boot sequence" -- a black screen (#1E1E22) that reveals content through a simulated system initialization. Over 2.5 seconds: (1) the SVG noise texture fades in at 6% opacity, establishing the concrete surface, (2) a single scanning line sweeps from top to bottom, (3) corner brackets animate inward from the viewport edges (each bracket starts 50px outside its final position and slides in with `cubic-bezier(0.34, 1.56, 0.64, 1)` -- a bounce-enter curve), (4) the domain name "lrx.wiki" appears in Space Grotesk at 5rem, character by character with 40ms stagger, each character accompanied by a brief Scanner Green glow that fades, (5) beneath the name, a readout strip materializes with a horizontal wipe, displaying a scrolling data ticker. The entire sequence tells the story of a system powering on, a wall being claimed.

**Bounce-Enter Animation System:**
All bento modules enter the viewport using a custom **bounce-enter** animation rather than conventional fade-in or slide-up. The bounce-enter curve (`cubic-bezier(0.34, 1.56, 0.64, 1)`) causes elements to overshoot their final position by ~15% and spring back, producing a physical, elastic quality that references the energetic snap of a spray can's action. Modules are stagger-delayed by 80ms each, creating a cascade effect where the bento grid assembles itself like tiles being slapped into place. The bounce is subtle (translateY starts at 30px, overshoots to -5px, settles at 0) but consistent across all module types.

**Scroll-Triggered Floor Transitions:**
Each "floor" of the bento grid occupies 100vh and snaps into view using CSS `scroll-snap-type: y mandatory`. As a new floor enters, its modules bounce-enter from their respective directions: command modules from the left, telemetry tiles from below, tag zones from random directions (adding visual disorder appropriate to graffiti). Readout strips wipe in horizontally. Between floors, a brief 200ms pause during which only the spray-drift particles and the SVG noise texture are visible creates a "loading" breath that reinforces the command center narrative.

**Interactive HUD Responses:**
On hover over any bento module, its corner brackets expand outward by 4px (transition: 0.3s ease-out), its scanning line accelerates (animation-duration decreases from 10s to 2s), and its status pip switches from slow pulse to rapid pulse. This simulates a HUD "lock-on" interaction -- the system recognizing that the user has targeted a specific module. On mouse exit, brackets contract and the scan returns to normal speed with an ease-in-out transition.

**Tag Zone Spray Effect:**
When a tag zone module enters the viewport, its generative wildstyle SVG outline draws itself using a CSS `stroke-dasharray` / `stroke-dashoffset` animation over 1.5 seconds, simulating the act of spray-painting the design in real time. The drawing animation is accompanied by a brief burst of spray-drift particles concentrated around the tag zone, creating the impression of overspray during application.

**Ambient Data Ticker:**
The readout strips contain horizontally scrolling text in JetBrains Mono that displays a continuous stream of pseudo-telemetry: timestamps, hex values, coordinate pairs, and status codes. This text scrolls at a constant 30px/second using CSS `@keyframes` translateX animation. The content is decorative but plausible, drawn from a predefined array of formatted data strings. The ticker never stops -- it is the ambient heartbeat of the interface.

**AVOID:** CTA-heavy layouts, pricing blocks, stat-grids presented as marketing metrics, generic hero-with-button patterns, testimonial carousels, feature comparison tables, newsletter signup overlays. The site must feel like infrastructure, not marketing. Every element serves either the narrative (graffiti artist claiming territory) or the system (HUD displaying telemetry). Nothing exists to convert a visitor.

## Uniqueness Notes

**Differentiators from other designs:**

1. **Graffiti + Aerospace Collision:** No other design in the portfolio fuses street art aesthetics with military/aerospace HUD interfaces. Graffiti appears at only 3% frequency and sci-fi-hud motifs at 1%. The combination of these two visual worlds -- the anarchic, territorial energy of graffiti and the rigid, systematic precision of a heads-up display -- creates a visual language that has no precedent in the collection. The two aesthetics share an unexpected common ground: both are about marking space, claiming territory, and asserting presence in a hostile environment.

2. **Muted-Vintage Palette at 0% Frequency:** The muted-vintage palette category has zero representation in existing designs. While 67% of designs use muted palettes broadly, the specific muted-vintage combination -- weathered, oxidized, desaturated tones punctuated by chemical-bright accents -- is entirely absent. The palette reads as physical rather than digital: concrete, rust, sodium light, aerosol pigment. This materiality distinguishes lrx.wiki from the clean digital color systems that dominate the portfolio.

3. **Bento-Box Layout at 2% Frequency:** The bento-box grid appears in only 2% of designs, making this layout architecture a strong differentiator. Unlike conventional card-grids (12%) or centered layouts (99%), the bento-box creates a dense, mosaic-like composition where modules of radically different sizes and purposes coexist in a tightly packed arrangement. The bento-box here is further differentiated by its "floor" system -- full-viewport snap-scroll sections that stack vertically.

4. **Generative Art as Environmental Texture (1% Frequency):** Generative-art imagery appears in only 1% of existing designs. Here, generative techniques serve not as hero visuals or decorative centerpieces but as ambient environmental texture -- noise fields, particle drift, algorithmic outlines -- that makes every surface feel physically present and atmospherically charged. The generative elements are invisible infrastructure, not showpieces.

5. **Bounce-Enter Animation as Primary Motion Language (3% Frequency):** While 97% of designs use scroll-triggered animations and 79% use parallax, bounce-enter at 3% is a rare choice for a primary animation system. The elastic overshoot quality of the bounce curve gives every element a physical weight and snap that contrasts with the gentle fades and smooth slides that dominate the portfolio.

**Documented Seed/Style:**
- aesthetic: graffiti
- layout: bento-box
- typography: grotesque-neo
- palette: muted-vintage
- patterns: bounce-enter
- imagery: generative-art
- motifs: sci-fi-hud
- tone: authoritative

**Avoided Overused Patterns:**
- playful aesthetic (95%) -- replaced with authoritative graffiti
- centered layout (99%) -- replaced with asymmetric bento-box
- mono typography dominance (99%) -- used only for data elements, not primary type
- warm palette (100%) -- replaced with muted-vintage cool-warm hybrid
- scroll-triggered as sole animation (97%) -- complemented with bounce-enter as primary
- minimal imagery (94%) -- replaced with generative-art environmental textures
- vintage motifs (81%) -- replaced with sci-fi-hud motifs
- friendly tone (98%) -- replaced with authoritative tone
<!-- DESIGN STAMP
  timestamp: 2026-03-10T15:26:01
  domain: lrx.wiki
  seed: unspecified
  aesthetic: lrx.wiki occupies the visual territory of an abandoned freight yard at 2 AM, whe...
  content_hash: ba187890f7ad
-->