# Design Language for gabs.report ## Aesthetics and Tone gabs.report inhabits the visual world of a **live intelligence operations center** -- a sealed room deep inside a signals analysis facility where analysts sit before curved walls of monitors, watching real-time data feeds cascade across dark screens. The aesthetic is explicitly **data-driven**: every visual element exists to convey information, status, or activity. There is no decoration for decoration's sake. Every glow, every line, every animation represents a data event, a threshold crossed, a pattern detected. The domain name "gabs.report" implies structured reporting on communications -- intercepted signals, conversation analytics, pattern recognition across vast datasets. The visual identity channels this through the lens of military-grade SIGINT dashboards crossed with the understated precision of Bloomberg Terminal design. The mood is tense, observational, always-on. Think of the aesthetic of a submarine's sonar room: dark ambient lighting, phosphor-green traces on round screens, the quiet hum of machinery processing information faster than human cognition. The tone is **professional** in the truest sense -- not corporate-professional with handshakes and smiles, but operations-professional where precision saves lives and ambiguity is the enemy. Every typographic choice, every color value, every spacing decision communicates competence, clarity, and controlled intensity. There is no warmth here, only the cold confidence of verified data. The atmosphere draws from three specific reference points: (1) the CRT phosphor glow of 1980s NORAD command screens, (2) the dense information architecture of modern quantitative trading terminals, and (3) the austere minimalism of classified document formatting -- monospaced type, header classifications, sequential numbering, redaction bars. The result is a site that feels like accessing a restricted-clearance briefing platform. ## Layout Motifs and Structure The layout is a **dashboard** architecture -- but not the silicon-valley SaaS dashboard with cheerful cards and rounded corners. This is a dense, information-saturated control panel where every pixel earns its place. The screen is divided into functional zones, each with a specific informational role, and the user's eye moves between them like an analyst scanning multiple feeds. **The Dashboard Grid:** The primary structure uses a CSS Grid with named areas on a 12-column base. The grid is asymmetric and weighted toward the left side where the primary data feed lives: - **Left Panel (columns 1-7):** The main content zone -- a tall, scrollable feed area that displays the primary report content. This panel is framed by a 1px border in `#2A3A4A` (muted steel blue) with a subtle inner glow of `#0A1628` to create depth. - **Right Panel (columns 8-12):** A fixed sidebar containing metadata readouts, status indicators, activity timelines, and secondary metrics. This panel has a slightly different background tone (`#0C1219` vs the main `#0A0F16`) to create visual separation without harsh borders. - **Top Bar (full width, 48px height):** A persistent header strip containing the domain identifier, a simulated clock/timestamp readout (CSS-animated), and navigation indicators styled as terminal tabs. - **Bottom Status Strip (full width, 32px height):** A thin footer bar displaying simulated system status -- connection indicators, data throughput counters, and classification markers. Always visible. Styled like a terminal status line. **Grid Gutters and Spacing:** Gutters are narrow -- `8px` -- because dashboard interfaces compress information. Internal padding within panels is `16px` on desktop, `12px` on tablet. The overall effect is dense but not claustrophobic, achieved through consistent vertical rhythm at `24px` increments and clear hierarchical separation via background tones rather than whitespace. **Panel Sub-Grid:** Within the right sidebar, content is organized into "readout modules" -- small rectangular blocks stacked vertically with `4px` gaps between them. Each module has a label header (uppercase, `10px`, `#5A7A8A` color) and a content area. These modules can contain: numerical readouts with unit labels, mini sparkline charts (SVG), status dot indicators, or scrolling text feeds. **Responsive Behavior:** At viewport widths below `1024px`, the layout collapses to a single-column feed with the sidebar modules reorganized into a horizontal scrolling strip beneath the top bar. At mobile widths below `640px`, the dashboard metaphor simplifies to a stacked card layout, but retains the dark backgrounds, monospaced type, and border treatments to preserve the operational aesthetic. ## Typography and Palette **Typography:** - **Primary / Data / Headlines:** "Share Tech Mono" (Google Fonts) -- a monospaced typeface designed specifically for technical interfaces. Its characters are optimized for screen legibility at small sizes, with uniform width that creates the dense, grid-aligned look of terminal output. Used for all headlines (`1.5rem-3rem`), data readouts, status labels, and navigation. Weight 400. Letter-spacing: `0.04em`. Line-height: `1.3`. Color: `#C8D6E5` (pale steel). All headlines are uppercase with tracking increased to `0.08em` at display sizes. - **Secondary / Body Text:** "Inter" (Google Fonts) -- a sans-serif typeface with exceptional legibility at small sizes, designed with features for computer screens. Weight 400 for body, 600 for emphasis. Used at `0.875rem-1rem` for paragraph text, descriptions, and extended reading. Line-height: `1.65`. Color: `#8A9BB0` (muted blue-gray). The contrast between Share Tech Mono headlines and Inter body creates a hierarchy that mirrors the distinction between data labels and human-readable prose in intelligence reports. - **Tertiary / Micro Labels:** "JetBrains Mono" (Google Fonts) -- used exclusively for micro-labels, timestamps, classification markers, numerical readouts, and code-like content. Weight 400 at `0.625rem-0.75rem`. Letter-spacing: `0.12em`. Color: `#4A6A7A` (deep teal-gray). Uppercase only. This font appears in the status strips, metadata panels, and inline data annotations. **Palette:** The palette is a **cool-grays** system -- five neutral tones ranging from near-black to pale steel, punctuated by exactly two functional accent colors that carry specific semantic meaning. | Role | Hex | Name | Usage | |------|-----|------|-------| | Deep Background | `#070B10` | Void Black | Page background, deepest layer | | Panel Background | `#0C1219` | Midnight Steel | Sidebar panels, secondary zones | | Surface | `#131C27` | Dark Slate | Cards, readout modules, content blocks | | Border / Divider | `#2A3A4A` | Steel Edge | All borders, separators, grid lines | | Muted Text | `#4A6A7A` | Fog Teal | Labels, timestamps, tertiary information | | Secondary Text | `#8A9BB0` | Slate Blue | Body text, descriptions | | Primary Text | `#C8D6E5` | Ice Steel | Headlines, primary content, active elements | | Accent: Alert | `#00E5A0` | Signal Green | Active indicators, live data, confirmation states | | Accent: Warning | `#FF4C4C` | Alert Red | Warning states, critical thresholds, redaction marks | The palette deliberately avoids warm tones entirely. There is no orange, no yellow, no brown. The world of gabs.report exists in perpetual blue-shifted twilight -- the color temperature of fluorescent-lit server rooms and the blue glow of active monitors in dark spaces. The two accent colors (`#00E5A0` Signal Green and `#FF4C4C` Alert Red) function as pure signal -- they only appear to communicate status, never for decoration. ## Imagery and Motifs **Data-Viz as Primary Imagery:** All visual content on gabs.report is constructed from **data visualization elements** -- there are no photographs, no illustrations, no icons in the traditional sense. Every visual element is a chart, a graph, a diagram, or a data-derived pattern. The imagery vocabulary consists of: 1. **Sparkline Traces:** Thin SVG polylines (`stroke-width: 1.5px`, color: `#00E5A0` at 60% opacity) that trace activity patterns. These appear in sidebar readout modules, beneath headlines as decorative underlines, and as background textures. Each sparkline is generated from a pseudo-random seed but follows realistic signal patterns -- Gaussian noise modulated by slow sine waves to simulate real telemetry data. 2. **Grid Overlays:** Faint `#2A3A4A` grid patterns drawn with CSS linear-gradient creating a graph-paper effect across panel backgrounds. The grid uses `48px` squares with `1px` lines at 15% opacity, creating the impression that every surface is a potential data canvas. At certain viewport zones, the grid shifts to polar coordinates (concentric circles with radial lines) to evoke radar/sonar imagery. 3. **Pulse Rings:** Concentric circle animations centered on status indicators. When a data point is "active," a ring of `#00E5A0` at 20% opacity expands outward from the indicator dot and fades over 2 seconds. This **pulse-attention** pattern is the primary animation motif -- it draws the eye without demanding it, exactly like a radar sweep highlighting a contact. 4. **Connection Lines:** Thin SVG lines (`stroke: #2A3A4A`, `stroke-dasharray: 4 4`) connecting related data points across different parts of the dashboard. These lines suggest the analytical connections between data elements -- the inference layer that turns raw data into intelligence. 5. **Redaction Bars:** Rectangular blocks of `#131C27` with a `1px` border of `#2A3A4A` placed over "classified" content areas. These are purely decorative -- they suggest that certain information has been withheld, adding to the intelligence-briefing aesthetic. The redaction bars have a subtle CSS animation where they occasionally flicker with a horizontal scanline effect. **Circuit Motifs:** The **circuit** motif appears as a decorative layer underlying the dashboard panels. Thin right-angle paths (`stroke: #1A2A3A`, `stroke-width: 0.5px`) trace circuit-board-like routes between panel elements, terminating in small circles (`r="2"`) at connection points. These circuits are purely ornamental but reinforce the idea that the interface is a physical piece of hardware -- a purpose-built instrument rather than a generic website. The circuit paths are drawn using SVG `` elements with `stroke-dasharray` animations that create a slow "data flowing through wires" effect, with segments lighting up in `#00E5A0` at 30% opacity as they activate. **Scanline Effect:** A full-viewport CSS pseudo-element applies a subtle CRT scanline overlay -- repeating horizontal lines of `rgba(0,0,0,0.04)` at `2px` intervals. This effect is barely perceptible at normal viewing distances but adds an analog texture to the digital dashboard, evoking the phosphor screens of legacy command centers. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens with a **boot sequence** -- a full-viewport dark screen (`#070B10`) where content materializes as if the system is powering on. The sequence unfolds as follows: 1. **Frame 0-500ms:** Black screen. A single blinking cursor (`|`) appears at top-left in JetBrains Mono, `0.75rem`, `#4A6A7A`. 2. **Frame 500-1500ms:** Text begins typing out in JetBrains Mono at 40 characters per second: `INITIALIZING GABS.REPORT SECURE INTERFACE...` followed by simulated system messages (`[OK] DATA FEED CONNECTED`, `[OK] ENCRYPTION VERIFIED`, `[OK] ANALYSIS ENGINE ONLINE`). Each line appears with a `typewriter-effect` and each `[OK]` tag pulses green (`#00E5A0`) briefly. 3. **Frame 1500-2000ms:** The typed text fades to 30% opacity. The grid overlay fades in across the entire viewport. Circuit paths begin their dash-animation. 4. **Frame 2000-2500ms:** The dashboard panels slide into position from their edges -- left panel from left, right panel from right, top bar from top -- using `transform: translateX()` with an easing of `cubic-bezier(0.16, 1, 0.3, 1)` for a smooth, mechanical feel. 5. **Frame 2500-3500ms:** Content within panels fades in with a staggered delay (`50ms` per element), starting from the top bar and cascading downward. Data readouts in the sidebar animate their numbers counting up from zero to their final values using the `counter-animate` pattern. 6. **Frame 3500ms+:** The dashboard is fully operational. Sparkline traces begin their continuous gentle animation. Pulse rings begin their rhythmic expansion on status indicators. The scanline overlay activates. **Interaction Patterns:** - **Hover on readout modules:** The module border transitions from `#2A3A4A` to `#00E5A0` over `200ms`. The module's sparkline brightens to full opacity. A tooltip appears in JetBrains Mono showing expanded data. - **Scroll in main panel:** Content scrolls with a slight `#00E5A0` accent line that tracks the scroll position in the right sidebar, functioning as a scroll-position indicator styled like a progress bar on a data feed. - **Pulse-attention on new content:** When new content sections enter the viewport, their border briefly pulses with the `#00E5A0` ring animation -- a single expand-and-fade pulse that draws the analyst's eye to fresh intelligence. **Storytelling Approach:** The site tells its story through the metaphor of a live intelligence feed. Rather than traditional web sections (hero, features, testimonials), content is organized as: - **BRIEFING HEADER** -- the top bar with classification markers and timestamps - **PRIMARY FEED** -- the main scrollable content area, styled as a continuous intelligence report with section numbers, timestamps, and priority markers - **SIGNALS PANEL** -- the right sidebar with live-updating readouts and activity graphs - **STATUS LINE** -- the bottom bar confirming system operational status All section headers use the format `[SECTION 001] // TITLE` in Share Tech Mono, uppercase, with the section number in `#4A6A7A` and the title in `#C8D6E5`. This numbering system replaces traditional headings and reinforces the report/briefing metaphor. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids. Also avoid: rounded corners on any element (use sharp `border-radius: 0` everywhere), gradient backgrounds (use flat solid colors only), decorative illustrations, stock photography, warm color accents, playful animations, bouncing or elastic easing curves. **Technical Notes:** - All animations use `prefers-reduced-motion` media query to disable for accessibility - The boot sequence can be skipped with any click/tap, immediately resolving to the final dashboard state - Circuit SVG paths are generated inline and kept lightweight (< 5KB total) - Sparkline data is hardcoded as small arrays in a `