# Design Language for graphers.net ## Aesthetics and Tone graphers.net is a **nostalgic-retro neomorphic data observatory** — a site that feels like a beloved scientific instrument from the early 1990s, a translucent perspex panel backlit by warm amber incandescent bulbs, where every control is a sculpted soft-clay button and every readout is a wave oscillating across a cream-tinted phosphor screen. The premise: graphing is not just a utility but an art form recovered from a time before dashboards became sterile. The mood is **nostalgic-retro** in the warmest possible register: think a well-worn Texas Instruments graphing calculator left on a sunlit desk, the plastic slightly yellowed to #F5EDD8, its liquid-crystal display glowing with smooth sine waves. Grain is omnipresent — not as grime but as the tactile memory of analog paper and photographic emulsion. The palette is cream and chamomile, dusty rose, faded slate blue, warm amber — the exact colors of old scientific journals and graph paper notebooks. Neomorphism is the structural idiom: every interactive surface sits at a subtle relief depth of 4–8px, cast by two shadow sources (warm #D4C5A9 at bottom-right, cool white #FFFFF5 at top-left). No flat panels. No sharp edges. Every element feels touchable — pressed into soft clay rather than painted onto glass. The HUD-overlay layout gives the page the quality of a heads-up cockpit instrument panel layered in translucent planes. The overall experience: arriving at an instrument left on by a cartographer who loved graphs the way others loved music, still running, gently humming, tracing wave-forms in amber light. ## Layout Motifs and Structure The page is organized as a **HUD-overlay instrument panel** — layered translucent planes at depth increments, not a vertical scroll document. Visitors feel they are looking through a cockpit windshield at a nested series of readout panels, each floating at a different z-depth above a grain-textured cream background. **Structural hierarchy — the Instrument Stack:** 1. **Background Field (z: 0)** — full-viewport cream-grain canvas `#F5EDD8` with a subtle SVG `feTurbulence` grain filter (`baseFrequency 0.65, numOctaves 4, stitchTiles "stitch"`), blended at 12% `mix-blend-mode: multiply`. Not white, not gray — warm vellum. 2. **Wave Horizon Panel (z: 1)** — a full-width neumorphic panel, 480px tall, in the upper 40% of viewport. Contains the primary animated wave-form display: a `` rendering 3 overlapping sine waves in different pastel colors (#E8C4C4, #C4D4E8, #C4E8D4), oscillating at slightly different frequencies (0.8Hz, 1.1Hz, 1.4Hz). Depth shadow: inset neumorphic recess (`box-shadow: inset 8px 8px 16px #D4C5A9, inset -8px -8px 16px #FFFFFF`). 3. **Control Overlay Panels (z: 2)** — three floating neumorphic instrument cards arranged in a non-grid cluster: top-left anchored, bottom-center, and right-edge. Each card is 280–320px wide, 180–220px tall, with 16px border-radius and full neumorphic raised relief. Cards contain: domain identity, a frequency selector (visual only), and a waveform legend. Cards are positioned with `position: fixed` on desktop, stacking vertically on mobile. 4. **Navigation Capsule (z: 3)** — a 40px-tall neumorphic pill, floating 20px from top-center, containing only the wordmark "graphers" in a variable-weight display font and 2 icon-links. The pill shrinks to 32px on scroll. 5. **Footer Instrument Strip (z: 1)** — a 72px-tall neumorphic bar anchored at viewport bottom, containing a single animated wave-form equalizer (5 bars, pastel colored), micro-copyright, and one text link. **Spatial rules:** - No traditional sections, no scroll snapping. The page is a single HUD viewport. - Overlapping panel edges are permitted and encouraged — creates instrument depth. - All interactive elements (buttons, selectors) use neumorphic press animation: on `:active`, shadow reverses from raised to inset over 80ms. - Mobile: panels unstack into a single-column scroll; HUD depth collapses to 2 layers. - Horizontal rhythm: a 20px base grid, 4px micro-grid for shadow offsets. Nothing aligns to a traditional 12-column grid. ## Typography and Palette **Typography (all Google Fonts, loaded with `` + `display=swap`):** - **Display / Hero:** `Comfortaa` (variable, weight 300–700) at 72–120px — a rounded geometric sans with soft terminals that complement neumorphic surfaces beautifully. Used for the wordmark "graphers.net" and the primary wave-form label. Weight 700 for hero identity; weight 300 for ghost-text subtext beneath. Variable weight axis animates on hover from 300 → 600. - **Instrument Labels / Readouts:** `Space Grotesk` (500, 600) at 11–16px — a slightly quirky geometric sans with open counters, perfect for technical-but-warm instrument annotations. Used for all panel data, axis labels, frequency values, and legend entries. Tracking +0.06em. - **Body / Descriptive Prose:** `Lora` (400, 400 italic) at 17–19px, line-height 1.7 — a contemporary serif with calligraphic roots, evoking the handwritten annotations in a scientist's field notebook. Used for any prose descriptions or "about" content. - **Monospace / Data Values:** `JetBrains Mono` (400) at 13–14px — for numerical readouts, coordinates, frequency values. Low opacity (0.65) on cream backgrounds creates a soft teletype quality. **Palette — Creamy Pastel, Nostalgic-Retro tuned:** | Role | Hex | Description | |------|-----|-------------| | Base canvas | `#F5EDD8` | Warm vellum — aged paper, not clinical white | | Neomorphic shadow warm | `#D4C5A9` | Sepia-shifted shadow for depth recess | | Neomorphic highlight | `#FFFEF5` | Near-white cream highlight for raised surfaces | | Wave color 1 — dusty rose | `#E8C4C4` | Soft rose sine wave, primary oscillator | | Wave color 2 — slate mist | `#C4CDD8` | Faded blue-grey, secondary oscillator | | Wave color 3 — sage whisper | `#C4D8C8` | Muted green-sage, tertiary oscillator | | Accent / active | `#C49A6C` | Warm amber — CRT phosphor warmth for interactive highlights | | Text primary | `#3D3328` | Dark warm brown — not black, not grey | | Text secondary | `#8B7D6B` | Medium warm brown for instrument labels | | Grain overlay tint | `#A89880` | Used at 8% opacity for grain-overlay effect | No pure white (#FFFFFF). No pure black (#000000). Every color is warm-shifted. ## Imagery and Motifs **Wave-forms** are the primary motif and the site's identity engine: 1. **Hero Wave-form Canvas** — a `` element 100% width × 480px rendering three overlapping smooth sine curves. Each wave: - Rendered using `ctx.bezierCurveTo` path segments for fluid smoothness (not `Math.sin` point-by-point) - Stroke width 2.5px, `strokeStyle` set to wave palette colors at 70% opacity - Amplitude modulates slowly (±8% over 4s) using a second low-frequency oscillator - All three waves share the same phase origin so they appear to breathe together, then drift apart - On mouse move, the wave frequencies respond with ±5% perturbation, decaying over 800ms 2. **Neumorphic Surface Relief** — the grain-overlay system: every neumorphic panel has an SVG `` filter applied at 5% opacity in `mix-blend-mode: overlay`, giving surfaces the texture of pressed linen or old scientific illustration paper. This is the `grain-overlay` motif made tactile. 3. **Scale-hover Interactions** — all neumorphic cards respond to cursor proximity using `transform: scale(1.0) → scale(1.025)` over 200ms ease-out, plus a subtle shadow bloom (`blur 24px → 28px`). The scale is minimal — this is a precision instrument, not a bouncy UI. On mobile, scale-hover is replaced by a gentle border-glow in `#C49A6C`. 4. **Micro-waveform Icons** — an SVG sprite of 8 waveform glyphs (sine, square, sawtooth, triangle, pulse, noise, step, compound) used as decorative markers in instrument cards and the footer strip. Each is 24×14px, stroked in `#8B7D6B` at 1.5px, with a subtle 4s CSS animation cycling the active glyph. 5. **Grain texture layer** — a single 200×200px PNG tile of photographic grain (generated from `feTurbulence` at baseFrequency 0.65), tiled across the entire canvas at `opacity: 0.07` and `mix-blend-mode: multiply`. This is the soul of the nostalgic-retro feel — every surface looks slightly aged. 6. **Graph paper ghost** — beneath the wave canvas, an SVG background of 20×20px grid squares in `#C4B89A` at 6% opacity. Evokes graph paper notebooks, completely non-intrusive. ## Prompts for Implementation Build graphers.net as **a single HUD viewport**, not a scrolling narrative page. The entire experience should feel like powering on a beautiful scientific instrument — the waves are already oscillating when the page loads, the panels are already in position, and the visitor's only job is to explore what each control surface reveals. **Loading sequence (the "power-on" moment):** - Page starts at opacity 0, background `#F5EDD8` - Over 600ms, the background grain fades in (opacity 0 → 0.07) - At 400ms, the wave canvas begins rendering the first sine wave from left edge (draw from x=0 to x=viewport over 1200ms) - At 800ms, the neumorphic panels slide in from their respective edges: top-left card from `translateX(-40px)`, right card from `translateX(40px)`, bottom card from `translateY(30px)`. Each uses `cubic-bezier(0.34, 1.56, 0.64, 1)` (gentle spring, no bounce) - At 1000ms, the navigation capsule fades in from top - At 1400ms, all wave oscillations begin their live animation loop - Total time from load to fully animated: 2000ms **Wave canvas technical approach:** - Use `requestAnimationFrame` loop with a shared `time` counter incrementing each frame by `deltaTime * 0.001` - Three wave parameters: `{ freq: 0.8, amp: 120, phase: 0 }`, `{ freq: 1.1, amp: 80, phase: Math.PI/3 }`, `{ freq: 1.4, amp: 60, phase: Math.PI*0.7 }` - Draw path: iterate x from 0 to canvas.width in steps of 4px; compute `y = centerY + amplitude * Math.sin(freq * x * 0.015 + time + phase)`; use `lineTo` for each point, then `stroke()` - Layer waves with `globalCompositeOperation: 'source-over'` and per-wave alpha **Neumorphic CSS system:** ```css :root { --nm-bg: #F5EDD8; --nm-shadow-dark: #D4C5A9; --nm-shadow-light: #FFFEF5; --nm-radius: 16px; --nm-blur: 20px; --nm-offset: 8px; } .nm-raised { background: var(--nm-bg); border-radius: var(--nm-radius); box-shadow: var(--nm-offset) var(--nm-offset) var(--nm-blur) var(--nm-shadow-dark), calc(-1 * var(--nm-offset)) calc(-1 * var(--nm-offset)) var(--nm-blur) var(--nm-shadow-light); } .nm-pressed { box-shadow: inset var(--nm-offset) var(--nm-offset) var(--nm-blur) var(--nm-shadow-dark), inset calc(-1 * var(--nm-offset)) calc(-1 * var(--nm-offset)) var(--nm-blur) var(--nm-shadow-light); } ``` **Scale-hover implementation:** ```css .instrument-card { transition: transform 200ms ease-out, box-shadow 200ms ease-out; } .instrument-card:hover { transform: scale(1.025); box-shadow: 10px 10px 28px var(--nm-shadow-dark), -10px -10px 28px var(--nm-shadow-light); } ``` **Variable font animation (wordmark):** ```css @keyframes weight-breathe { 0%, 100% { font-variation-settings: 'wght' 300; } 50% { font-variation-settings: 'wght' 600; } } .wordmark { font-family: 'Comfortaa', sans-serif; animation: weight-breathe 6s ease-in-out infinite; } ``` **Grain overlay implementation:** ```css .grain-layer { position: fixed; inset: 0; pointer-events: none; background-image: url('grain.png'); /* 200×200px tiled grain PNG */ opacity: 0.07; mix-blend-mode: multiply; z-index: 999; } ``` **AVOID:** - Any CTA buttons, pricing blocks, stat counters, or feature lists — this is a design portfolio, not a product landing page - Flat drop-shadows — all shadow work must be neumorphic dual-source - Pure white or black backgrounds - Standard card grids or masonry layouts — everything is instrument-panel positioned - Parallax scrolling effects — the page does not scroll in the traditional sense - Hero images or photography — the wave canvas IS the imagery ## Uniqueness Notes **Differentiators from existing catalog (frequency-data informed):** 1. **HUD-overlay layout at 2% frequency — the only instrument-panel site.** The corpus is dominated by centered (92%) and full-bleed (76%) layouts. graphers.net uses a fixed-position multi-layer HUD that abandons scrolling entirely in favor of a cockpit-instrument viewport composition. No other site in the directory treats the browser window as an oscilloscope display rather than a document. 2. **Neomorphism + grain-overlay as a unified tactile system.** The catalog shows neomorphism at 3% and grain-overlay at 2% — and zero sites combine both. The fusion here is intentional: neomorphic depth relief normally reads as "sterile app UI," but layering grain over every surface transforms it into "aged scientific instrument." This pairing produces a completely new aesthetic register not found elsewhere in the corpus. 3. **Wave-forms as information architecture, not decoration.** Wave motifs appear at 7% in the corpus, but always as background ornament. graphers.net makes the wave-form canvas the primary content: the waves ARE the product communication. Three simultaneous oscillators with distinct colors become the site's data visualization of its core service — graphing. The wave parameters (frequency, amplitude, phase) are legible as instrument readings. 4. **Expressive-variable typography with font-weight-axis animation.** The corpus shows variable/expressive typography at low frequency. Using `Comfortaa`'s weight axis in a 6-second breathing animation (300 → 600 → 300) on the wordmark — combined with static `Space Grotesk` instrument labels and `Lora` prose — creates a three-register type system that signals both technical precision and nostalgic warmth simultaneously. 5. **Creamy-pastel palette anchored in sepia-shifted neomorphic shadows.** Creamy-pastel appears at 5% in the catalog, but always with cool or neutral shadow tones. By shifting both shadow colors to warm amber (#D4C5A9) and cream-yellow (#FFFEF5), the neomorphic depth effect inherits the palette's nostalgic warmth — the shadows themselves are colored by the era, not just the surfaces. **Chosen seed:** aesthetic: neomorphism, layout: hud-overlay, typography: expressive-variable, palette: creamy-pastel, patterns: scale-hover, imagery: grain-overlay, motifs: wave-forms, tone: nostalgic-retro **Avoided patterns (from frequency analysis):** - centered layout (92% — AVOIDED: using fixed HUD positioning instead) - full-bleed layout (76% — AVOIDED: layered panels, not full-bleed sections) - hand-drawn aesthetic (67% — AVOIDED: neomorphic precision instruments instead) - vintage motifs (55% — AVOIDED: wave-forms replace vintage ornament) - parallax-sections pattern (14% — AVOIDED: no scroll, no parallax) - asymmetric layout (47% — AVOIDED: instrument-panel clustering, not asymmetric columns)