# Design Language for monopole.studio ## Aesthetics and Tone monopole.studio is the imagined digital atelier of a single obsessive: a sound engineer turned visual artist who spent a decade on deep-sea research vessels and returned with a hard drive full of sonar renders, bioluminescent creature photographs, and a pathological need to pixelate everything they see. The studio makes music-reactive visual art — film scores, installation pieces, album sleeve systems — and this site is the portfolio of that practice. The aesthetic is **pixel-art elegance**: every element of the page exists on a 4px grid, but the grid is not retro-gaming nostalgia. It is the grid of sonar sweeps, of echo-location returns, of deep-water acoustic maps rendered at low bit-depth because the ocean floor has no WiFi. The color field is the ocean at 800 meters — not the postcard ocean, but the thermocline ocean, where the blues become absolute and the only light is bioluminescent and electrical. The tone is **elegant-sophisticated**, not cute. This is not a pixel-art tribute to 1986 Nintendo. It is pixel-art as a formal constraint, the way a sculptor works in marble because stone limits are generative. Each dithered edge and aliased curve is intentional. The glitch elements — scan-line artifacts, data-corruption dissolves, chromatic aberration on hover — are treated as documentation of signal degradation in extreme environments, not as aesthetic ornament. Inspiration: the signal-processing screens aboard oceanographic research vessels, the visual language of acoustic tomography, the pixelated depth maps of multibeam sonar systems, and the cover art of early 1990s ambient electronic records — Aphex Twin's *Selected Ambient Works Volume II*, The Orb's *U.F.Orb* — where low-resolution imagery became its own aesthetic category. ## Layout Motifs and Structure The page uses a **fixed sidebar + main panel** architecture — among the rarest layouts in the corpus (sidebar is significantly underused). The sidebar is permanently docked on the left at exactly 240px wide and runs the full viewport height. It is never a hamburger-menu-behind, never a drawer — it is always visible, always structural, always pixel-grid-snapped. **Sidebar anatomy:** - A 4px-grid vertical progress ticker running from top to bottom on the leftmost 4px column — a sonar-sweep line that advances as the user scrolls through the main panel. - Below the logo: six navigation items rendered in a 7-segment LED font (`Share Tech Mono` at 11px, letterspacing +0.25em, all caps). Each item sits inside a dithered selection box: unhovered, the box is the pixel-art equivalent of a deselected button; hovered, the box fills with a 2-color ordered dither at 4px grain. - At the sidebar bottom: a coordinate readout that displays the current scroll position as fictional deep-ocean coordinates — `39°22.7'N 142°06.3'E −812m` — updating as the user scrolls, formatted in `Share Tech Mono` at 10px. **Main panel:** - The main panel occupies the remaining viewport width from 240px to the right edge. - Content is arranged in **layered-depth stacking zones**: a fixed full-panel background layer (sonar grid), a mid-depth scroll layer (content cards), and a foreground layer (oversized type that breaks out of its container and overlaps adjacent cards). This creates the sensation of looking through multiple glass plates of different depths — a stereoscopic effect achieved entirely through z-indexing, not 3D transforms. - The content is not a single scroll. It is a **panel-sequence**: each work in the portfolio occupies one full-viewport-height panel within the main area. Panels scroll vertically with `scroll-snap: mandatory`, so the experience is paged, not streamed. - Within each panel: a large pixel-art thumbnail in the top-right quadrant (always 3:2 aspect ratio, always rendered at 1x and displayed at 3x to enforce visible pixelation), and a text zone in the bottom-left with oversized title, medium subtitle, and sparse paragraph copy. **Spatial relationships:** - 4px base grid throughout. All padding is multiples of 4px. All font sizes are multiples of 4px. All element dimensions are multiples of 4px. The precision creates a subliminal sense of order beneath the apparent chaos of glitch effects. - Margins are generous: 48px horizontal padding in the main panel. 32px vertical breathing room above each panel title. ## Typography and Palette **Type system (all Google Fonts, verified):** - **Display titles — `Unbounded`** (variable, wght 200–900). Set at 96px on desktop, weight 800, tracking -0.03em. The letters are wide and aggressive — Unbounded's exaggerated width echoes pixel-art's preference for horizontal resolution over vertical. Titles are set in `#B8E4FF` (bioluminescent pale blue) against the deep panel backgrounds, with a 2px offset shadow in `#001F3F` for a crude drop-shadow that looks hand-pixeled. - **Navigation and UI labels — `Share Tech Mono`** (400 only). Monospaced, terminal-adjacent but not aggressive. Used for the sidebar nav (11px, caps, +0.25em tracking), coordinate readout (10px), caption data (11px), and all system-text elements. Color: `#4DAADC` (mid-ocean blue). - **Body and paragraph text — `DM Sans`** (variable, wght 300–500). Clean, neutral, modern without being corporate. Set at 16px, weight 350, line-height 1.65, `#8AC8E8` (light ocean, 70% opacity against dark backgrounds). Paragraph blocks are narrow — max 52ch — and sit in the lower-left quadrant of each panel. - **Accent / pull-quote — `Unbounded`** at weight 200 (ultra-thin), 48px, in `#1A6B8A` (mid-depth ocean, as a whisper in the background). Used once per panel at most, behind the main title, slightly offset. **Color palette — ocean-deep:** | Token | Hex | Role | |---|---|---| | `--abyss` | `#020D18` | Page and sidebar background | | `--thermocline` | `#041E33` | Panel backgrounds, subtle variation | | `--hadal` | `#06314F` | Card backgrounds, elevated surfaces | | `--current` | `#1A6B8A` | Mid-depth accent, secondary elements | | `--phosphor` | `#4DAADC` | Primary interactive blue, nav text | | `--biolume` | `#B8E4FF` | Display type, highest-contrast white-adjacent | | `--surface` | `#E8F6FF` | Pure white-adjacent, sparingly for hottest highlights | | `--glitch-red` | `#FF2D55` | Used exclusively for glitch chromatic aberration — never for UI | | `--glitch-green` | `#00FF88` | Paired with glitch-red for RGB split effect only | No warm tones whatsoever. The ocean at 800m has no yellows, oranges, or reds except the alien red of hydrothermal vents, which is what `--glitch-red` references. ## Imagery and Motifs **All imagery is pixel-art-rendered**, never photographic. The corpus shows photography at high frequency (vintage-photography 2%, but broadly photos dominate); monopole.studio abstains entirely. Every visual asset is a commissioned or generated pixel-art piece, displayed at 3x integer scaling to make the pixels visible and intentional. **The sonar-grid background:** A full-panel SVG of circular sonar rings emanating from a single off-center point (roughly at x=70%, y=45% of the main panel). The rings are 1px strokes in `#0A3A5C` (barely visible against the `--thermocline` background), spaced 48px apart. Four or five radial sweep lines rotate slowly at 4 RPM using a CSS `@keyframes` rotation, creating the feeling of an active sonar display. A small phosphorescent dot traces the sweep line's leading edge. **Pixel-art thumbnails:** Each portfolio panel features one pixel-art work at 320×213px (displayed at 3x = 960×639px). The artwork style: oceanic bioluminescence scenes, deep-water creatures, acoustic waveforms rendered as pixel landscapes. Palette locked to the site's color tokens — no browns, beiges, or warms. The pixel-art pieces function as a visual signature; they are the studio's actual output medium. **Layered-depth motifs:** Three depth layers are always present in each panel: 1. **Background layer (z-index 0):** sonar grid SVG at 10% opacity 2. **Mid-depth layer (z-index 10):** the pixel-art thumbnail, positioned absolutely in the top-right quadrant, clipped at the panel edge 3. **Foreground layer (z-index 20):** the oversized display title, which extends beyond its natural bounding box and visually overlaps the thumbnail — as if the text and image occupy different depths in the same water column **Glitch-art treatment:** On hover over any portfolio panel, a CSS-only glitch fires over 600ms: - The panel's thumbnail undergoes `clip-path` slicing (3–4 horizontal slices, each translated ±8px to ±24px on the x-axis for 40ms–80ms intervals) - A `filter: hue-rotate(180deg)` flash sweeps the thumbnail for 80ms - Two absolutely-positioned copies of the thumbnail, tinted `--glitch-red` and `--glitch-green`, offset by (+3px, 0) and (−3px, 0) respectively, appear at 60% opacity for 120ms — classic RGB channel split - All glitch keyframes use step timing (`animation-timing-function: steps(1)`) to respect the pixel-art aesthetic **Sidebar decorative element:** The 4px left column of the sidebar contains a vertically-running binary sequence: alternating filled and empty 4×4 squares in `--phosphor` and `--abyss`, shuffled slowly (one bit flip per 800ms) — a subliminal reference to sonar return signals and acoustic data transmission. ## Prompts for Implementation Build monopole.studio as a **fixed-sidebar panel-sequence portfolio**. The site does not have pages. It has **one URL, one DOM, six full-viewport-height panels** within the main scroll area, plus a header and footer panel. **Structural contract:** The root layout is `display: grid; grid-template-columns: 240px 1fr; height: 100vh; overflow: hidden;`. The sidebar is `position: sticky; top: 0; height: 100vh; overflow: hidden;`. The main panel is `overflow-y: scroll; scroll-snap-type: y mandatory; height: 100vh;`. Each portfolio panel inside is `scroll-snap-align: start; height: 100vh;`. **The 4px grid discipline:** Before writing any CSS values, establish: `--grid: 4px;`. Every spacing value in the codebase is expressed as `calc(var(--grid) * N)` where N is an integer. This is not optional. A spacing value of `14px` is forbidden; `calc(var(--grid) * 3)` (= 12px) or `calc(var(--grid) * 4)` (= 16px) is required. Font sizes that are not multiples of 4px must be rounded to the nearest multiple. **The glitch animation system:** Create a `glitch.css` file containing exactly the set of keyframes described in the Imagery section. The glitch effect is attached to `.panel:hover .panel__thumb`. No JavaScript is required for the glitch — pure CSS animations on the `:hover` state. The glitch must respect `prefers-reduced-motion: reduce` by disabling animation entirely (not just slowing it — disabling, because the glitch is jarring even at slow speed). **The sonar background:** Implement as an `` element with `viewBox="0 0 1200 900"`, using SVG circles and lines. The sweep line rotation is a CSS `@keyframes` animation on an SVG `` element containing the sweep lines, rotating around the sonar origin point. The origin point must be set as a CSS custom property `--sonar-x: 70%; --sonar-y: 45%` so it can be adjusted per panel if needed. **The sidebar coordinate readout:** Use a JavaScript `scroll` event listener on the main panel element. As the panel scrolls, interpolate between pre-defined fictional coordinates for each panel boundary (e.g., panel 1 = `39°22.7'N 142°06.3'E −812m`, panel 6 = `11°04.2'S 157°38.9'E −3441m`). Update a `` element in the sidebar. Keep the JS under 30 lines. **The hover-lift pattern:** Every `.panel` card applies `hover-lift` on hover: `transform: translateY(-4px)` with `transition: transform 200ms ease-out`. The lift is exactly one grid unit (4px) — not 6px, not 8px. The discipline of the single grid unit is what distinguishes this hover-lift from generic card-hover effects. The shadow on lift: `box-shadow: 0 8px 32px rgba(2, 13, 24, 0.8)` (the shadow is `--abyss` at high opacity, deep and narrow, as if the panel is casting a shadow into deeper water). **Typography loading:** Load `Unbounded:wght@200;800`, `Share+Tech+Mono:wght@400`, and `DM+Sans:ital,wght@0,300;0,400;0,500` from Google Fonts. Set `font-display: swap`. The fallback stack for Unbounded is `'Arial Black', system-ui, sans-serif` — wide, heavy fallback. For Share Tech Mono: `'Courier New', monospace`. **The pixel-art scaling contract:** All `` tags displaying pixel-art must carry `style="image-rendering: pixelated; image-rendering: crisp-edges;"`. Sizes are always set at 3x the source resolution. A source file at `320×213px` is displayed at `width: 960px; height: 639px`. Do not use `object-fit: cover` on pixel-art images — it resamples and destroys the pixel edges. **Anti-patterns to explicitly avoid:** - No call-to-action buttons with rounded corners and gradient fills — this is a portfolio, not a SaaS landing page - No pricing blocks, stat grids, testimonial carousels, or "how it works" sections - No hero section with a headline, subheadline, and two CTAs — the first panel is a work panel, not an introduction panel - No navigation bar at the top — the sidebar IS the navigation - No light mode / dark mode toggle — the ocean is always dark **Panel sequence:** 1. **Hydrothermal** — A deep-vent acoustic installation. Title: `HYDROTHERMAL`. Medium: sound installation, pixel art series. 2. **Pelagic** — An album visual system for a drone ambient record. Title: `PELAGIC`. Medium: album artwork, motion graphics. 3. **Bathyal** — A film score for a documentary about deep-sea mining. Title: `BATHYAL`. Medium: film score, generative soundtrack. 4. **Abyssal** — A data-sonification installation using ocean temperature data. Title: `ABYSSAL`. Medium: generative audio, live performance. 5. **Hadal** — A pixel-art series for a gallery showing of deep-trench imaging. Title: `HADAL`. Medium: pixel art, large-format print. 6. **Signal** — An ongoing series of glitch-art pieces derived from corrupted sonar data. Title: `SIGNAL`. Medium: glitch art, archival inkjet. Each panel title is set at 96px in `Unbounded` 800 weight. Each subtitle (the medium line) is set at 14px in `Share Tech Mono`. Each body paragraph (2–3 sentences maximum) is set at 16px in `DM Sans` 350 weight. ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = **pixel-art**, layout = **sidebar**, typography = **oversized-display**, palette = **ocean-deep**, patterns = **hover-lift**, imagery = **glitch-art**, motifs = **layered-depth**, tone = **elegant-sophisticated**. **Differentiators from the corpus:** 1. **Pixel-art as formal discipline, not nostalgia.** The frequency report shows pixel-art at 2% — one of the rarest aesthetics in the corpus. The 60%-dominant aesthetic is hand-drawn; the 52%-dominant is editorial. monopole.studio refuses both. More critically, it refuses to treat pixel-art as cute or retro — the 4px grid is a formal constraint derived from sonar and acoustic imaging, not from Game Boy games. No other design in the corpus has established this genealogy. 2. **Fixed sidebar as permanent structure.** The frequency report shows sidebar layout as rare. The corpus is dominated by centered columns and full-bleed layouts. Here the sidebar is not a mobile menu or a utility drawer — it is a structural equal to the main panel, present always, carrying the live coordinate readout and progress indicator. The sidebar makes the site feel like a piece of equipment, not a document. 3. **Ocean-deep palette as absolute darkness.** The palette builds from `#020D18` (nearly black) upward through deep blues, with zero warm tones and zero gradients. The corpus is dominated by warm palettes (97%) and gradient treatments (91%). monopole.studio's palette has no warmth and no gradients — every color is a flat field. The only color anomalies are the glitch chromatic aberration (`--glitch-red`, `--glitch-green`), which appear only as brief artifacts, never as sustained color. 4. **Glitch-art as environmental documentation, not decoration.** Glitch-art appears at 2% in the corpus, always as a purely visual style choice. Here, glitch effects are framed as sonar signal degradation — the visual language of corrupted acoustic data returned from extreme depths. The framing gives the glitch meaning beyond aesthetic novelty. The RGB-split is not a CSS trick; it is what happens when a sonar signal bounces off a thermal layer and the channels desynchronize. 5. **Layered-depth z-stacking as spatial metaphor.** The three-layer compositing (sonar background / mid-depth thumbnail / foreground oversized type) creates literal depth in a medium that has no depth. The panels feel like looking through stacked acetate sheets into a water column. No other design in the corpus uses z-depth as the primary compositional strategy. The corpus uses flatness (editorial) or surface texture (hand-drawn) — monopole.studio uses depth.