# Design Language for gabs.report ## Aesthetics and Tone gabs.report is a mission control dashboard that has been running since 1978 -- a retro-futuristic command center where amber-screened CRT monitors display value reports (gabs = price in Korean) in phosphorescent green type while operators in turtlenecks analyze data on reel-to-reel tape printouts. The retro-futuristic aesthetic imagines a future as envisioned from the late 1970s: analog instruments, warm wood-paneled surfaces, cathode ray glow, and the optimistic belief that enough data, presented clearly enough, could explain anything. The tone is professional -- the measured precision of a quarterly report delivered by an analyst who believes in the power of well-organized information. No hype, no personality, no emotional appeals. Just data, clearly presented, with the quiet confidence that the numbers speak for themselves. The tech-mono typography reinforces this: every character occupies the same width, every line aligns perfectly, every column of figures is ruler-straight. Visual inspiration: NASA Mission Control during the Apollo era; the opening credit sequences of 1970s conspiracy thrillers (All the President's Men, Three Days of the Condor); the amber-on-black terminals in WarGames; a Bloomberg Terminal reimagined by Dieter Rams. ## Layout Motifs and Structure The layout uses **immersive-scroll** -- a long, continuous vertical scroll with no section breaks, no pagination, no jump links. The content flows like a continuous printout from a teletype machine. The user scrolls through the report from beginning to end, each section bleeding into the next without visible boundaries. **Immersive-Scroll Architecture:** - Single column, max-width: 720px, centered - No section dividers -- sections are distinguished only by typographic hierarchy - Content density increases as the user scrolls deeper (wider paragraphs, more data) - Background: solid warm dark (#1a1510), no textures, no gradients -- the content IS the visual interest **Section Flow:** 1. **Header Block:** The report title "GABS.REPORT" in tech-mono at the top, left-aligned, with a datestamp below. A thin horizontal line (1px, #4a4030). No hero -- the report begins immediately. 2. **Executive Summary:** A single paragraph in mono type, summarizing the report's conclusions about value. Dense but clear. 3. **Data Sections:** Multiple sections of analysis, each beginning with a section number (01, 02, 03...) and a title, followed by body text and occasional wave-form SVG visualizations. 4. **Charts Area:** Three wave-form SVG illustrations representing value trends, rendered inline with the text flow. 5. **Appendix:** A footer-like section with reference data, methodology notes, and the domain name. ## Typography and Palette **Typography:** - **Display / Section Headers:** "IBM Plex Mono" (Google Fonts) -- IBM's monospace designed for terminal environments and technical documentation. Used at 2rem-3rem for section headers. Weight: 600. Letter-spacing: 0.05em. IBM Plex Mono at display sizes creates the mission-control aesthetic while maintaining the warm professionalism of IBM's design language. - **Body / Report Content:** "IBM Plex Mono" at 15px/1.7, weight 400 for body, 500 for emphasis. The monospace body text makes every paragraph look like terminal output, reinforcing the retro-futuristic immersion. The 1.7 line-height prevents the mono text from feeling cramped. - **Accent / Data Labels:** "IBM Plex Mono" at weight 300, 12px for labels, footnotes, and data annotations. All type is monospace -- there is no second font family. This typographic austerity is the point. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Console Dark | Warm near-black | #1a1510 | Page background, the CRT screen off-state | | Amber Primary | CRT amber | #e8a832 | Primary text, the dominant color of everything | | Amber Dim | Muted amber | #8a6820 | Secondary text, metadata, less important content | | Amber Glow | Bright amber | #ffcc44 | Emphasis, section numbers, hover highlights | | Phosphor Green | CRT green | #44cc44 | Used sparingly for data values and chart lines | | Warm Charcoal | Dark brown | #2a2218 | Subtle backgrounds for code/data blocks | | Rule Line | Mid amber-brown | #4a4030 | Horizontal rules, section dividers | The palette is warm -- specifically, the warmth of phosphor glow on a CRT monitor in a wood-paneled room. The amber tones dominate completely, with phosphor green appearing only for data values. This creates a monochromatic warmth that is simultaneously cozy and technical. ## Imagery and Motifs **Minimal Imagery (Content IS the Image):** The imagery directive is minimal -- and taken to its extreme. There are no illustrations, no photographs, no decorative elements. The only visual elements beyond text are: - Three SVG wave-form charts rendered inline with the report content - Thin horizontal rules separating major sections The minimalism is not a limitation but a statement: the report IS the visual experience. The monospace type, the amber-on-dark palette, and the precise formatting create sufficient visual interest without any imagery. **Wave-Form Motifs:** Three SVG wave-form visualizations appear in the Charts Area: - Each is a polyline SVG with 20-30 points, rendered as a stepped/angular line (not smooth curves) - Stroke: 1.5px in phosphor green (#44cc44) - Width: 100% of content column, height: 80px - Below each chart: a caption in amber dim explaining what the wave-form represents - The angular, stepped quality of the lines mimics the oscilloscope displays and strip-chart recorders of the 1970s **Fade-Reveal on Continuous Scroll:** Sections of the report fade in as they enter the viewport: - Each block begins at opacity: 0.3 (not fully invisible -- like text on a dim CRT) - On viewport entry, opacity transitions to 1.0 over 400ms with ease-out - There is no movement, no transform -- only the opacity change - This creates the effect of content "warming up" as the user scrolls, like a CRT monitor brightening ## Prompts for Implementation **Full-Screen Narrative Experience:** The immersive-scroll layout means the user reads the entire report in a single continuous flow. There is no navigation to distract from the content. The warm amber-on-dark palette reduces eye strain for long reading sessions. The monospace typography creates a hypnotic rhythm: every line is the same width, every character perfectly aligned. **CRT Text Effect:** All text has a subtle CRT glow: text-shadow: 0 0 4px rgba(232, 168, 50, 0.3). On the section numbers and amber-glow text, the glow intensifies: text-shadow: 0 0 8px rgba(255, 204, 68, 0.5). This creates the soft halation of phosphor displays without being distracting. **Wave-Form SVG Implementation:** Each chart is an SVG with a polyline element. Points are defined as space-separated x,y pairs creating a stepped line (angular peaks and valleys, not Bezier curves). The SVG has no axes, no labels -- just the raw line. Below: a text label. **Responsive Behavior:** On mobile (below 640px), the column goes full-width with 16px padding. Font size reduces to 14px for body. Wave-form SVGs scale proportionally. The CRT text glow effect remains. The amber-on-dark palette is unchanged. **AVOID:** CTA buttons, data dashboards with multiple widgets, real-time updating data, charts with axes and labels, corporate photography, gradient backgrounds, any color outside the amber/green phosphor range. ## Uniqueness Notes **Differentiators from other designs:** 1. **Retro-futuristic aesthetic (1% frequency):** This is one of the rarest aesthetics in the collection, specifically channeling late-1970s command-center futurism rather than generic "retro." 2. **Immersive-scroll layout (1% frequency):** The only design that uses a completely boundary-less continuous scroll, mimicking a teletype printout. No section dividers, no page breaks, just flowing content. 3. **Single monospace typeface throughout (tech-mono, 5% frequency):** The exclusive use of IBM Plex Mono for all text -- display, body, and accent -- creates a typographic austerity unique in the collection. 4. **CRT amber palette:** The specific amber-on-dark-brown palette with phosphor green data accents is unique -- it recreates the exact color experience of a 1970s computer terminal. 5. **Wave-form motifs as stepped angular lines:** The wave-forms motif (5% frequency) is rendered here with deliberate angularity (no smooth curves), mimicking the stepped output of vintage chart recorders. **Documented Seed/Style:** aesthetic: retro-futuristic, layout: immersive-scroll, typography: tech-mono, palette: warm, patterns: fade-reveal, imagery: minimal, motifs: wave-forms, tone: professional **Avoided Overused Patterns:** - corporate aesthetic (62%) -- retro-futuristic (1%) instead - asymmetric layout (94%) -- immersive-scroll (1%) instead - gradient palette (92%) -- warm solid amber instead - parallax patterns (98%) -- fade-reveal (3%) instead - humanist typography (31%) -- tech-mono (5%) instead - tech motifs (96%) -- wave-forms (5%) instead - friendly tone (64%) -- professional (3%) instead - photography imagery (57%) -- minimal instead