# Design Language for SocialDebug.Org ## Aesthetics and Tone SocialDebug.Org treats society as a complex program riddled with bugs: broken institutions, systemic inequality, failing infrastructure, policy deadlocks. The visual language is a hybrid of **terminal debugger interfaces** and **sociological data cartography**. Imagine an IDE where the codebase is civilization itself -- stack traces point to historical injustices, breakpoints mark policy failures, and the console output streams with civic data from broken systems trying to recover. The tone is **authoritative** with an undercurrent of **edgy-rebellious** urgency. This is not a passive dashboard -- it is an active debugging session. The user is the debugger, stepping through a codebase of social dysfunction. There is tension in the interface: error states glow hot, resolved issues cool to ambient greens, and the overall posture is one of serious, focused intervention. Think of a war room crossed with a university research terminal -- the gravity of institutional failure presented through the clarity of a well-organized debug console. Visual inspiration: 1970s mainframe operator consoles with their amber phosphor glow, overlaid with the structured hierarchy of modern code editors like VS Code's debug panel. The amber warmth of old CRTs meets the precision of contemporary linting output. Sociology research papers rendered as executable pseudocode. Broken social contracts displayed as failed unit tests. ## Layout Motifs and Structure The layout is built on a **timeline-vertical** spine combined with **editorial-flow** reading patterns, deliberately avoiding the overused centered/card-grid/full-bleed combinations. The page reads like a debug session log: chronological, hierarchical, and deeply structured. **Primary structure:** - The viewport opens with a full-height simulated terminal boot sequence. A blinking amber cursor types out a system initialization message: `socialDebug v3.2.1 -- loading civic subsystems...` followed by a cascade of module-load messages (education: WARN, healthcare: FAIL, housing: CRITICAL, transit: DEGRADED). Each module line appears with a slight stagger delay, color-coded by severity. - Below the boot sequence, the main content area uses a **split-panel** layout inspired by IDE debug views. The left 35% is a persistent "call stack" sidebar showing a vertical timeline of societal breakpoints -- key moments where systems failed. The right 65% is the "source view" where the main narrative content unfolds in long-form editorial blocks. The sidebar scrolls independently on desktop but collapses into an expandable drawer on mobile. - Content sections within the source view are framed as "files" in a tabbed interface. Each tab represents a social system being debugged (education.sys, healthcare.sys, housing.sys, justice.sys). Clicking a tab transitions the content with a sharp horizontal slide, not a fade. - Between major sections, **diagnostic break panels** appear: narrow horizontal strips (about 60px tall) styled as console output lines, showing real-time "status" messages in monospaced type. These act as visual breathing room and narrative connectors. - The footer is a "console output" area with a blinking cursor prompt: `root@society:~$ _`, inviting engagement. Below it, minimal navigation links styled as command aliases. **Grid system:** An 8-column grid on desktop with a fixed 240px left gutter for the timeline sidebar, leaving a fluid 6-column area for content. Gutters are 16px. On tablet, the sidebar collapses. On mobile, a single-column stack with the timeline accessible via a slide-out panel triggered by a terminal-style hamburger icon (three horizontal dashes: `---`). ## Typography and Palette **Typography:** - **Primary (Body/Narrative):** "IBM Plex Sans" (Google Fonts) -- a humanist sans-serif designed for technical documentation with excellent readability. Weight 400 for body, 600 for emphasis. Its IBM heritage directly connects to the mainframe aesthetic. Line-height 1.7 for generous readability within the dense debug context. - **Code/Terminal:** "IBM Plex Mono" (Google Fonts) -- the monospaced counterpart, used for all terminal simulation text, status messages, diagnostic panels, and the boot sequence. Weight 400 regular, 700 for highlighted error output. Character spacing +0.03em for that authentic terminal feel. - **Display/Headlines:** "Anybody" (Google Fonts) -- a wide, variable-width grotesque with a mechanical quality. Used for section headers and the main title at weight 800. Its broad, authoritative letterforms command attention without feeling decorative. Sized large: clamp(2rem, 4vw, 3.5rem). - **Accent/Annotations:** "Caveat" (Google Fonts) -- a handwritten-style font used sparingly for margin annotations and "human notes" scattered in the debug view, as if a researcher scribbled observations next to the code. This juxtaposition of handwritten notes against rigid terminal text reinforces the human element in a technical system. **Color Palette:** - **Phosphor Amber** `#e8a020` -- The dominant accent color, drawn from vintage CRT phosphor displays. Used for active cursors, highlighted code lines, warning indicators, and the boot sequence text. - **Terminal Black** `#0c0c0e` -- Primary background. Deep, almost-pure black with a hint of blue-shift to avoid OLED harshness. All debug panels and the main viewport use this. - **Cathode Green** `#32d74b` -- Success/resolved states. When a social system shows improvement or a "fix" is applied, elements transition to this bright terminal green. Used for pass indicators and resolved breakpoints. - **Critical Red** `#ff3b30` -- Error states and critical failures. Used for FAIL badges, error line highlights, and the glow around unresolved breakpoints. Applied with a subtle outer glow (0 0 8px rgba(255,59,48,0.4)) to simulate CRT bloom. - **Stack Blue** `#5ac8fa` -- Information-level indicators and hyperlinks. Used for the call-stack sidebar entries, file tabs, and interactive hover states. A calming counterpoint to the red and amber urgency. - **Paper Cream** `#f5f0e8` -- Long-form body text color against the dark background. Not pure white -- the slight warmth reduces eye strain and references aged research paper stock. - **Degraded Gray** `#6e6e73` -- Muted UI elements: line numbers, inactive tabs, separator rules, and secondary metadata. Keeps the interface layered without competing with active indicators. - **Console Teal** `#30b0a0` -- Used for data visualization elements, charts within the debug narrative, and variable-value highlights. Provides a secondary cool accent alongside Stack Blue. **Palette strategy:** High-contrast with dark-neon accents on a near-black ground. NOT a gradient-heavy approach -- colors are used in flat, functional blocks as they would appear in a real terminal. The only gradients are subtle vignettes at viewport edges to simulate CRT screen curvature. ## Imagery and Motifs **Core visual motifs:** - **Debug breakpoints:** Small red circles (12px diameter) with a subtle glow, positioned in the left margin of content sections exactly like IDE breakpoints. These mark critical "failure points" in the social narrative. On hover, they expand to reveal a tooltip with a one-line "error message" describing the systemic failure. - **Stack trace waterfall:** The left sidebar timeline is styled as a literal call stack. Each entry is a monospaced line showing a "function call" that led to the current social state: `at policyFailure (housing.sys:1974:12)` or `at defundingEvent (education.sys:2003:08)`. These entries connect via thin vertical lines (1px solid #6e6e73) forming a continuous trace. - **Terminal scanlines:** A very subtle full-viewport overlay using a repeating linear gradient (transparent 50%, rgba(0,0,0,0.03) 50%) at 2px intervals, simulating CRT scanlines. This is purely decorative and extremely faint -- just enough to register subconsciously as "screen" rather than "page." - **Cursor blink:** The amber cursor `_` blinks using a pure CSS animation (opacity toggle at 530ms intervals) and appears at multiple narrative junctures, simulating an active system awaiting input. It signals "this is live, this is now." - **Handwritten margin notes:** Small annotations in Caveat font placed in the right margin (or inline on mobile) that appear as a researcher's handwritten observations. These provide a human counterpoint to the mechanical debug aesthetic: "this broke in 2008," "compare with Nordic model," "who approved this?" They fade in on scroll with a slight rotation (transform: rotate(-2deg)) to feel hand-placed. - **ASCII flow diagrams:** Key system relationships are illustrated using ASCII-art style flow charts rendered in IBM Plex Mono. Boxes drawn with `+---+` and `|` characters, arrows with `-->`, showing how social systems interconnect and where failures cascade. These are styled as pre-formatted code blocks with a slightly lighter background (#141418). - **Data pulse lines:** Thin horizontal SVG lines that run across the diagnostic break panels, animated as a slow left-to-right pulse (like a heartbeat monitor), using Cathode Green for healthy systems and Critical Red for failing ones. These are rendered as simple SVG path elements with stroke-dashoffset animation. ## Prompts for Implementation **Narrative-first architecture:** The entire page must read as a single debugging session. The user "boots" the system, sees the failures load in, then steps through each social subsystem examining the bugs. There should be NO traditional marketing elements -- no CTAs, no pricing blocks, no stat-grids, no testimonial carousels. The content itself IS the product. **Full-screen boot sequence (opening experience):** - On load, the viewport shows Terminal Black with only a blinking amber cursor in the upper-left - After 800ms, text begins typing out character by character (40ms per character, using JavaScript interval, NOT CSS-only): `Initializing SocialDebug v3.2.1...` - Then a rapid cascade (150ms between lines) of module status messages, each color-coded: amber for WARN, red for FAIL, teal for DEGRADED, green for OK - After all modules load (~3 seconds total), a horizontal rule appears (styled as `========`) and the main interface fades in below - The boot sequence should remain visible at the top as the user scrolls, forming the header of the debug log - Provide a "Skip" keybind (press any key or click) that instantly completes the sequence for returning visitors (use sessionStorage to auto-skip on revisit) **Section transitions:** - Content sections should NOT use parallax or smooth-scroll hijacking (both overused) - Instead, use **border-animate** transitions: when a section scrolls into view, a 1px border draws itself around the section from the top-left corner clockwise (using animated border-image or pseudo-element width/height transitions over 400ms) - **Counter-animate** elements: any numeric data (years, dollar amounts, population figures) should count up from zero when scrolled into view, using requestAnimationFrame for smooth interpolation **Interactive debug console:** - The footer console prompt should be functional: typing common commands (help, status, about, ls) returns pre-written responses that appear as new lines above the prompt, pushing content up like a real terminal - Commands are processed purely client-side with a simple switch/case handler - Unknown commands return: `socialDebug: command not found. Type 'help' for available commands.` - The console should capture keyboard focus when scrolled into view **Sidebar call-stack behavior:** - On desktop, the sidebar is position:sticky within its container - Each call-stack entry highlights (background transitions to rgba(232,160,32,0.1)) when its corresponding content section is in the viewport, using IntersectionObserver - Clicking a call-stack entry smooth-scrolls to the associated section **Animation guidelines:** - All animations must feel **mechanical and precise**, not organic or springy. Use linear or cubic-bezier(0.25, 0.1, 0.25, 1.0) easing -- never bounce or elastic - The only "organic" element is the handwritten margin notes, which use a slight spring on reveal (transform with cubic-bezier(0.34, 1.56, 0.64, 1)) - Keep total animation budget low: no animation should exceed 600ms, most should be 200-400ms - Prefer opacity and transform animations exclusively for GPU compositing performance **Responsive considerations:** - The split-panel layout collapses to single-column below 768px - The boot sequence text size reduces but the typing animation remains - Margin notes move from side-positioned to inline blocks on mobile - The footer console remains functional but uses a smaller font size **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, hero images, stock photography, gradient backgrounds, smooth-scroll hijacking, parallax layers, card-grid galleries, centered-hero layouts. ## Uniqueness Notes **Differentiators from other designs:** 1. **Society-as-codebase metaphor carried to full depth:** Unlike designs that use "tech" as a surface aesthetic, SocialDebug treats the entire page as a literal debugging session. Every UI element maps to a real IDE concept (breakpoints, call stacks, console output, file tabs, line numbers). The metaphor is structural, not decorative. No other design in this collection uses a functional debugging interface as its primary narrative framework. 2. **Functional terminal console in the footer:** The interactive command-line prompt that accepts user input and returns contextual responses is a genuine interactive element, not just a visual motif. This transforms the footer from passive navigation into an engagement mechanism. No other design has a working text-input interface as a core design element. 3. **Handwritten annotations as humanist counterpoint:** The deliberate tension between rigid monospaced terminal text and informal handwritten margin notes (in Caveat font) creates a unique visual dialectic: machine logic vs. human observation. This dual-voice approach -- the system reporting data while a human scribbles reactions -- is not present in any other design in this collection. 4. **CRT phosphor amber as dominant accent:** While other designs use neon-on-dark, none use the specific amber phosphor palette (#e8a020) as their primary accent. This roots the design in 1970s mainframe history rather than generic cyberpunk, giving it a distinct retro-technical warmth. 5. **ASCII flow diagrams as data visualization:** Rather than using SVG charts, modern data-viz libraries, or decorative illustrations, the design uses monospaced ASCII art to illustrate system relationships. This is both a callback to early computing documentation and a statement about reducing complex social systems to their bare structural logic. **Chosen seed/style:** terminal command line dev **Avoided patterns from frequency analysis:** - Avoided centered layout (80% frequency) in favor of split-panel with timeline-vertical sidebar (10%) - Avoided gradient palette (90%) in favor of flat, functional color blocks with high-contrast dark-neon treatment - Avoided immersive-scroll/layered-depth (60%) in favor of editorial-flow with independent sidebar scrolling - Avoided parallax (80%) and cursor-follow (60%) in favor of border-animate (10%) and counter-animate (10%) - Avoided photography (60%) and minimal imagery (50%) in favor of ASCII art and custom annotation illustration - Avoided mysterious-moody tone (50%) in favor of authoritative + edgy-rebellious combination (both 10%) - Avoided mono typography as primary (70%) by using IBM Plex Sans as the body font, reserving mono (IBM Plex Mono) strictly for terminal-context elements