# Design Language for simidiots.net ## Aesthetics and Tone simidiots.net is an **underground synthesizer collective's confessional manifesto** rendered as a holographic fever dream — somewhere between a cracked iridescent vinyl sleeve left on the floor of a basement rehearsal space and a late-night MIDI sequencer session where the patch cables start looking like they're breathing. The site is for the obsessives, the gear fetishists, the people who name their synthesizers and talk to them. It does not explain itself. It does not welcome you. It *initiates* you. The dominant aesthetic is **holographic-glitch**: prismatic light refractions fractured by digital corruption — CSS `mix-blend-mode: screen` stacked rainbow gradients over deep midnight blue surfaces, scanline overlays, chromatic aberration offsets on text, and lens flare bursts that bloom unpredictably on scroll. The holographic shimmer is not decorative; it is the visual equivalent of a modular synth patch that shouldn't work but does. The tone is **raw-authentic**: no aspirational lifestyle imagery, no product shots, no clean hero compositions. Instead: signal noise rendered beautiful, imperfection as identity, the dirt and the glitch as musical and visual truth. The site reads like a message left on a cassette tape found in a thrift store, except the tape has been re-recorded seventeen times and the original signal bleeds through every layer simultaneously. Mood references: the texture of a warped holographic sticker on a battered flight case; the light cast by a patch bay LEDs at 3am; a Casio SK-1 played through a kaoss pad in a room with no windows. ## Layout Motifs and Structure The layout metaphor is **organic signal flow** — the way a MIDI signal moves through a modular rack unpredictably, branching and looping. There is no conventional grid. Instead: **Depth layers as the primary structure.** The viewport is a 3D z-stack of translucent planes, each carrying different content at different opacity levels. The base plane holds the deep midnight blue ground. Mid-planes carry drifting holographic gradients. Foreground planes hold text and interactive elements. CSS `perspective: 1200px` with `transform-style: preserve-3d` enables subtle depth on scroll via `translate3d` micro-animations. **Organic-flow column-break logic.** Text blocks are distributed using CSS `columns: 2` with `column-rule: 1px solid rgba(180,120,255,0.2)` that breaks unpredictably — the columns are not balanced. Long strings intentionally overflow. Whitespace is distributed by feeling, not formula. Sections bleed into one another without hard borders; the transition between ideas is a fade, a glitch, a prismatic smear. **Focal asymmetry.** The primary reading axis is slightly off-center — a dominant left column at approximately 58% width with a narrower right margin that accumulates fragments, footnotes, and MIDI-data-like character strings. The asymmetry is deliberate and consistent, evoking a CRT monitor slightly de-magnetized. **Glitch interruptions.** Every third section includes a horizontal "signal dropout" — a narrow strip where the background momentarily fragments into horizontal scan artifacts rendered as CSS `repeating-linear-gradient` bands at 1-2px height, animated with a CSS keyframe that displaces them by ±8px on the X axis over 180ms in a stutter pattern. **No navigation bar.** The page is a single uninterrupted descent. Anchor links embedded inline within text, styled as holographic underlines that bloom on hover. No hamburger menu, no sticky header, no progress indicator. ## Typography and Palette **Palette — Midnight Blue Holographic:** - `--void` `#050818` — near-black blue-black, the base ground, deepest background layer - `--deep-space` `#0a0f2e` — dark navy, secondary background panels and depth planes - `--midnight` `#111644` — mid-dark blue, card surfaces and structural dividers - `--prism-violet` `#7b2fff` — electric violet, primary accent, glitch artifact color - `--hologram-cyan` `#00d4ff` — intense cyan, secondary accent, lens flare halo tones - `--spectral-magenta` `#ff2d78` — hot magenta, tertiary accent, chromatic aberration offset - `--foil-gold` `#d4af37` — warm gold, used only for the logotype, single-use precious - `--ghost-white` `#e8eaf6` — slightly blue-tinted white for body text on dark ground - `--noise-grey` `rgba(200,210,255,0.06)` — barely-there overlay for noise texture **Gradient systems:** - `--holo-shimmer`: `linear-gradient(135deg, #7b2fff 0%, #00d4ff 33%, #ff2d78 66%, #d4af37 100%)` applied at low opacity (8-15%) over dark backgrounds, animated with `background-position` shift to create drift - `--lens-corona`: `radial-gradient(ellipse at var(--flare-x, 60%) var(--flare-y, 30%), rgba(0,212,255,0.35) 0%, rgba(123,47,255,0.15) 25%, transparent 65%)` positioned via JS mousemove tracking **Typography (Google Fonts only):** - **Display / Wordmark — [Playfair Display](https://fonts.google.com/specimen/Playfair+Display)**, weights 400 italic and 900 italic. The wordmark `simidiots` is set in Playfair Display 900 italic at `clamp(72px, 16vw, 200px)`, tracked at `-0.02em`, with a chromatic aberration CSS effect: three identical copies of the text stacked via `::before` and `::after`, offset by ±3px on X, one tinted `--prism-violet` at 70% opacity and one tinted `--spectral-magenta` at 70% opacity, using `mix-blend-mode: screen`. This produces a prismatic split on the letters that pulses gently. - **Section headings — [Playfair Display SC](https://fonts.google.com/specimen/Playfair+Display+SC)**, small caps variant, weight 400, size `clamp(28px, 5vw, 52px)`, color `--ghost-white`, letter-spacing `0.05em`. The small caps give a formal quality that the glitch effects then violate. - **Body / Manifesto text — [Lora](https://fonts.google.com/specimen/Lora)**, weight 400 italic for primary body passages, `clamp(17px, 2vw, 21px)`, line-height 1.75, color `--ghost-white` at 0.88 opacity. Long-form text in italic gives a handwritten-diary quality — like the site is confessing rather than presenting. - **Utility / Data strings — [Share Tech Mono](https://fonts.google.com/specimen/Share+Tech+Mono)**, weight 400, `clamp(11px, 1.4vw, 14px)`, color `--hologram-cyan` at 0.6 opacity. Used for MIDI channel numbers, patch coordinates, signal level readouts, and any technical annotation. These appear in the right margin column and feel like diagnostic output bleeding into editorial. - **Pull quotes / Signal bursts — [Playfair Display](https://fonts.google.com/specimen/Playfair+Display)** weight 900, no italic, massive at `clamp(60px, 10vw, 120px)`, set in `--holo-shimmer` gradient via `background-clip: text; -webkit-text-fill-color: transparent`. Single words or two-word fragments only. ## Imagery and Motifs **No stock photography. No lifestyle imagery. No product photography.** **Lens flare bursts as primary visual event.** Four to six CSS/SVG lens flare compositions placed at structurally meaningful points — not decoratively, but at the moment of a key idea. Each flare is a layered composition: 1. A primary `radial-gradient` corona, 400-600px diameter, `--hologram-cyan` to transparent 2. A secondary offset corona, smaller, `--prism-violet` to transparent 3. A streaked hexagonal aperture shape (SVG ``) in `--spectral-magenta` at 25% opacity 4. Six radial streak lines (thin SVG `` elements) emanating from the center at 60° intervals 5. Two "ghost" secondary flares at 65% and 130% distance along the primary streak axis, smaller and shifted in hue Flares respond to scroll: as a flare enters the viewport, it brightens and its corona expands from 0 to full scale over 400px of scroll travel. On hover anywhere near the flare, the aperture polygon rotates 30°. **Holographic noise texture overlay.** A fullscreen `::before` pseudo-element on `` carries an SVG `feTurbulence` noise filter rendered as a semi-transparent overlay at `opacity: 0.035`. This adds tactile grain to the smooth gradient surfaces — the digital equivalent of pressing your thumb against a holographic sticker. **Glitch-art text disruptions.** On key headings, a CSS animation (`@keyframes glitch-slice`) periodically fires: the heading is duplicated via `::before`/`::after`, each copy clips to a narrow horizontal band via `clip-path: inset()`, and each copy shifts ±12px on X with a brief color shift to `--spectral-magenta` or `--hologram-cyan`. Duration: 80ms total, firing every 4-7 seconds via `animation-delay` randomized with a small JS scatter on page load. **Prismatic depth cards.** Content blocks are housed in `
` elements styled as holographic foil panels: dark base `--midnight` background, a `border: 1px solid rgba(123,47,255,0.3)`, a subtle `box-shadow: 0 0 40px rgba(0,212,255,0.08)`, and a `::before` pseudo-element carrying the `--holo-shimmer` gradient at 10% opacity. On hover, the shimmer gradient's `background-position` animates, making the card appear to shift under light like a trading card held at an angle. **MIDI data streams.** In the right-margin column, Share Tech Mono strings continuously count: `ch.01 | note 60 | vel 127`, `cc.07 | val 094 | beat 3.2`, etc. These update in real-time via a slow JS interval (every 2.4 seconds, no flash) — they are not functional, they are ambient signal noise rendered legible. ## Prompts for Implementation Build simidiots.net as a **single-page holographic transmission** — a long vertical scroll with no navigation, no sectioned pages, no return path. The user descends into the signal. There is no exit clearly marked. **Page structure (single vertical scroll, no horizontal navigation, no sticky chrome):** 1. **The void opens.** On load: pure `--void` black for 400ms, then a slow fade-in of the deep-space ground. No animation library — pure CSS transitions. A single lens flare corona blooms from the upper-right quadrant at 60% opacity over 1.2s. The wordmark `simidiots` fades in at 60% viewport height, set in Playfair Display 900 italic, chromatic aberration active, as if tuning a signal into existence. Below it in Share Tech Mono: `net / signal active / ch.01`. 2. **The manifesto layer.** First content section: a full-width Lora italic paragraph, ~180 words, left-aligned in the 58% dominant column. No heading. It begins mid-thought — the site assumes you already know why you're here. The right margin column shows a drifting holographic gradient panel and a slowly incrementing MIDI data stream. 3. **The first glitch.** After approximately 800px of scroll, a horizontal scan-artifact strip interrupts the flow: 12px height, CSS `repeating-linear-gradient` in `--prism-violet` and `--hologram-cyan` at alternating 1px bands, with the stutter animation firing once on scroll-entry. Below the glitch: a Playfair Display SC heading in small caps: `THE INSTRUMENTS KNOW`. 4. **The collective.** A section of three depth-plane cards (CSS `perspective: 1200px` layout), each containing a short Lora italic profile — not of a person but of a *synthesizer*: its character, its temperament, its place in the patch chain. Each card has its own lens flare at a different opacity and color temperature. Cards do not align perfectly — a ±4° `rotate` applied to alternating cards, slight `translateZ` depth difference. 5. **Signal dropout and reformation.** Mid-page, a section that is almost entirely empty — just `--deep-space` background, a single two-word Playfair Display 900 gradient pull quote (`PATCH EVERYTHING`), and ambient holographic noise. This is the breath of the page. Duration: approximately 600px of scroll travel with minimal content. 6. **The doctrine.** A numbered list of 7 statements — the simidiots manifesto points — set in Playfair Display SC small caps at medium size, each preceded by a Share Tech Mono channel number (`01 /`, `02 /`, etc.) in `--hologram-cyan`. Each item occupies its own flow block with generous margin. The list does not align conventionally — items are offset left/right by 4-8% alternately. 7. **Archive transmission.** A section of the right-margin column that becomes dominant — a grid of past sessions, each rendered as a holographic depth card with date in Share Tech Mono and session name in Playfair Display italic. Cards subtly parallax on scroll via `translate3d(0, calc(var(--scroll-y) * -0.08px), 0)`. 8. **Signal end.** The page closes not with a footer but with a fade: content opacity drops over the final 300px of scroll, the ground color shifts toward pure `--void`, and a single Share Tech Mono line appears: `end of transmission / ch.01 / simidiots.net`. No copyright. No contact link. The signal simply ends. **Animation philosophy:** All animations use CSS custom properties updated by a single `requestAnimationFrame` loop — no GSAP, no ScrollTrigger, no animation libraries. The loop reads `window.scrollY` and `event.clientX/Y` and writes to `document.documentElement.style.setProperty`. This keeps the site fast and the motion feel handmade rather than eased by algorithm. **Avoid:** CTA buttons, pricing tables, stat grids, testimonial carousels, newsletter signup forms, hero sections with taglines, feature comparison tables, sticky navigation, loading spinners, modal dialogs. ## Uniqueness Notes 1. **First holographic-glitch synthesis fused with Playfair Display elegant serif in the corpus.** The frequency data shows `playfair-elegant` at only 3% — and where it appears it is always paired with warm, editorial, or academic aesthetics. simidiots.net inverts this entirely: Playfair Display's classical refinement is weaponized by the holographic glitch environment. The contrast between the dignity of Playfair italic and the chromatic aberration splitting it apart is the central visual tension — elegant form being consumed by signal noise, or signal noise being given aristocratic form. 2. **Raw-authentic tone applied to an underground music community, not a brand.** The frequency report shows `raw-authentic` is rare in the corpus. Most "edgy" designs remain aspirational underneath. simidiots.net refuses aspiration — there are no success markers, no growth metrics, no community size claims. The MIDI data streams in the margin are ambient noise, not engagement numbers. This is anti-brand design for a community that distrusts brands. 3. **Organic-flow layout achieved through deliberate typographic asymmetry rather than visual decoration.** Most organic-flow designs in the corpus achieve their effect through curved shapes, blob SVGs, or flowing illustrative elements. simidiots.net achieves organic flow through text layout alone — the 58/42 column split, the off-balance card rotation, the manifesto items alternating offset. The visual irregularity is structural, not cosmetic. 4. **Lens flare as punctuation, not decoration.** In the corpus, lens flare imagery appears as background texture or ambient atmosphere (3% frequency). Here, lens flares are syntactic — they appear at specific narrative moments as a visual correlate of a musical accent: the downbeat, the filter sweep, the point of arrival. Each flare placement corresponds to a textual moment of emphasis. 5. **MIDI data streams as ambient typography.** No other design in the observed corpus uses real-time-updating technical data strings as a typographic motif in the margin column. The Share Tech Mono MIDI readouts serve three functions simultaneously: visual texture, tonal authenticity signal (the site is made by people who actually work with MIDI), and a slow-moving kinetic element that gives the page life without relying on conventional animation patterns. **Chosen seed:** `aesthetic: holographic, layout: organic-flow, typography: playfair-elegant, palette: midnight-blue, patterns: glitch, imagery: lens-flare, motifs: layered-depth, tone: raw-authentic` **Avoided patterns (frequency-informed):** `warm gradients` (overused in corpus), `gradient` as primary background device (91% corpus), `nature/circuit motifs` (overused imagery categories), `geometric-sans` typography (overused in corpus at 4%), `CTA-heavy layouts`, `stat-grids`, `hero sections with taglines`.