# Design Language for masugomi.com ## Aesthetics and Tone masugomi.com (マスゴミ — Japanese portmanteau of "mass media" and "trash," a critical term for irresponsible journalism) channels a surreal aesthetic — distorted perspectives, impossible juxtapositions, and the dreamlike logic of Dali and Magritte applied to the critique and analysis of mass media manipulation. The site presents media literacy as a journey through the looking glass, where what appears normal is revealed as constructed and what seems impossible is the hidden truth. Inspiration draws from Salvador Dali's melting clocks, Rene Magritte's "This is not a pipe," the visual propaganda analysis of John Heartfield's photomontage, and the glitchy aesthetics of digital media corruption. The tone is futuristic-cutting-edge — positioning media analysis as the next frontier of information technology. The HUD-overlay layout frames all content within a heads-up-display, treating media analysis as a mission requiring sophisticated instrumentation. ## Layout Motifs and Structure The layout uses a **HUD-overlay** architecture — content framed within heads-up-display borders, treating media analysis as a surveillance and detection operation. **HUD-Overlay Architecture:** - Viewport frame: angular bracket corners (CSS borders) fixed to screen edges - Side data panels: 36px vertical strips with rotated text (writing-mode: vertical-rl) showing analysis metadata - Main content: max-width: 960px centered within the HUD frame - Targeting reticle: CSS-drawn crosshair following analyzed content sections - Scan lines: subtle horizontal line overlay for CRT monitor aesthetic **Section Sequence:** 1. **Signal Intercept:** Hero with HUD-framed title in tech-mono, aurora-lights gradient background pulsing behind, and "SCANNING MEDIA LANDSCAPE..." status text 2. **Threat Assessment:** Media analysis categories in HUD-bordered cards with data-viz statistical displays 3. **Decode:** Feature articles revealing media manipulation techniques with slide-reveal animations 4. **Frequency Spectrum:** Data visualization section showing media bias distribution as aurora-colored waveforms 5. **Signal Lost:** Footer as transmission end — "CONNECTION TERMINATED // STAY VIGILANT" ## Typography and Palette **Typography:** - **Headlines:** "Share Tech Mono" (Google Fonts) — technical monospace at 2rem-3rem, weight 400. Its mechanical precision creates the cold efficiency of surveillance system readouts. - **Body Text:** "Space Grotesk" (Google Fonts) — geometric sans at 0.95rem, weight 400, line height 1.7. - **HUD Data:** "Share Tech Mono" at 0.75rem, weight 400 for all HUD readouts, coordinates, and metadata. - **Japanese:** "Noto Sans JP" (Google Fonts) — clean sans for Japanese content. **Color Palette:** - **Gradient Violet:** #6a20c0 — deep purple for primary gradient base - **Gradient Cyan:** #20c0c0 — vivid teal for gradient mid-point - **Gradient Magenta:** #c020a0 — bright magenta for gradient accent - **HUD Dark:** #0a0a10 — near-black for primary background - **Scan Green:** #40d070 — terminal green for HUD text and indicators - **Warning Amber:** #e0a020 — alert yellow for warnings and critical data - **Text Pale:** #d0d0d8 — cool light gray for body text - **Panel:** #12121a — dark gray for card backgrounds ## Imagery and Motifs **Data-Viz Media Analysis Charts:** Media manipulation data rendered as sophisticated visualizations (SVG) — bias distribution as bar charts, truth-score as gauge dials, source credibility as network graphs. All rendered in the gradient palette with glow effects (filter: drop-shadow(0 0 4px)). **Aurora-Lights Atmospheric Gradients:** Background sections pulse with aurora borealis gradients — overlapping radial-gradient layers in Gradient Violet, Gradient Cyan, and Gradient Magenta at 0.05-0.1 opacity, slowly shifting position over 15-20 seconds, creating the ethereal light show of northern lights behind dark HUD panels. **Slide-Reveal Content Exposures:** Analysis articles enter with a dramatic slide-reveal — a solid color block (Panel color) slides horizontally across the content area (left to right), revealing the content behind it. Width animated from 100% to 0% over 600ms. Creates the feeling of uncovering hidden information. **Surreal Distortion Effects:** Select images and illustrations have subtle surreal distortions — CSS filter combinations of hue-rotate(small-value) and slight skew(1deg) on hover, suggesting the reality distortion that media creates. On hover-exit, the distortion smoothly resolves. **HUD Targeting Brackets:** Important content sections are flanked by animated targeting brackets — CSS-drawn L-shaped corners that contract toward the content on scroll entry (transform from scale(1.2) to scale(1) over 400ms), as if the HUD is locking onto critical information. ## Prompts for Implementation Build the page as a surreal media analysis HUD. Fixed viewport frame: four corner divs with border combinations forming right-angle brackets, position: fixed, z-index: 1000. Aurora backgrounds: 2-3 radial-gradient layers with @keyframes shifting position: radial-gradient(ellipse at var(--x) var(--y), color 0%, transparent 60%). Update --x and --y with JavaScript on a timer or use CSS animation with different background-position keyframes. Slide-reveal: container with overflow: hidden. Pseudo-element (::after) with position: absolute, inset: 0, background: Panel color. On .visible: @keyframes slideReveal { from { transform: translateX(0); } to { transform: translateX(100%); } } 600ms ease forwards. Targeting brackets: four small divs at content corners, each with two border sides (10px length). Start: transform: scale(1.2), opacity: 0.5. On .visible: transform: scale(1), opacity: 1, transition: 400ms ease-out. Surreal distortion: .media-item:hover { filter: hue-rotate(10deg); transform: skew(1deg); transition: 300ms; } .media-item { transition: filter 500ms, transform 500ms; } AVOID: Neutral, balanced media design, and corporate news aesthetics. The surreal distortion and HUD surveillance frame should communicate that media requires active critical analysis, not passive consumption. ## Uniqueness Notes 1. **Surreal aesthetic for media criticism:** Dali/Magritte-inspired distortion makes visible the reality-bending nature of mass media manipulation. 2. **HUD-overlay as media analysis instrument:** The surveillance interface frames media consumption as an operation requiring sophisticated detection tools. 3. **Aurora-lights behind dark HUD:** Ethereal light gradients add otherworldly beauty to the cold surveillance aesthetic. 4. **Slide-reveal as information uncovering:** The block-slide animation literalizes the process of revealing what media hides. 5. **Surreal hover distortions as truth-bending:** CSS distortion effects on media elements physically demonstrate how media warps reality. **Seed/Style:** aesthetic: surreal, layout: hud-overlay, typography: tech-mono, palette: gradient, patterns: slide-reveal, imagery: data-viz, motifs: aurora-lights, tone: futuristic-cutting-edge **Avoided Overused Patterns:** corporate aesthetic (76%), parallax patterns (85%), asymmetric layout (85%), mono typography (86%), warm palette (89%), friendly tone (76%), minimal imagery (84%). This design uses surreal aesthetic, hud-overlay layout, gradient palette, data-viz imagery, and futuristic-cutting-edge tone.