# Design Language for globaltonecheck.com ## Aesthetics and Tone globaltonecheck.com is a **frequency-calibration instrument disguised as a fairy ring** — the site where a sound engineer's spectrum analyzer was left running overnight in a forest clearing and woke up covered in frost and spider silk. The aesthetic is **fairycore-meets-futuristic-cutting-edge**: raw signal data rendered as bioluminescent terrain, oscilloscope traces that bloom into crystalline wings, FFT readouts that look like prismatic insect eyes. The visual logic is that sound itself is a living thing — it has texture, iridescence, and weight — and this tool exists at the exact crossing where rigorous acoustic measurement meets the uncanny beauty of natural structures. The mood is **urgent and otherworldly simultaneously**: a professional tool that doesn't look like any other professional tool. No charts that feel like spreadsheets. No dashboards that feel like SaaS. Instead, every readout is a living artifact — a bloom of color that shifts as the signal shifts, a needle that trembles like a moth wing. The site communicates precision through strangeness: the viewer understands immediately that something very exact is happening here, even if the instrument looks like it was grown, not built. Color temperature: cold-sharp, iridescent. Every element should appear to emit faint light against deep darkness, like phosphorescent organisms at the ocean floor. The overall sensation is **deep-field bioluminescence** — #050A0F for the void, and everything else lit from within. ## Layout Motifs and Structure The structure is **immersive-scroll**: a single continuous vertical canvas that unfolds like a film strip or a scientific field recording. There are no navigation tabs, no footer menu, no sidebar panels. The page is one unbroken descent into the instrument. **Macro structure:** 1. **Signal Origin** — Full-viewport opening frame: a massive, centrally-placed oscilloscope trace rendered as a glowing hairline against near-black. The domain name appears in retro-display type over the top, almost lost in the glow, like a label stamped on a glass specimen vial. 2. **Spectrum Field** — The waveform expands into a full-bleed FFT spectrum collage: stacked layers of frequency bands at slight angular offsets, each band a different iridescent hue, depth-blurred except for the center band in sharp focus. This is the `blur-focus` pattern made structural — only the middle frequency range is crisp; everything else is dreaming. 3. **Instrument Panel** — A mid-page section built on sharp geometric angles: rhombus-framed readouts, parallelogram-shaped data tiles, diagonal grid lines at 17-degree offsets. Sharp angles dominate here — no rounded corners, no bubbles. The data tiles are cut at hard diagonals, stacked slightly asymmetrically. 4. **The Collage Core** — A full-bleed mixed-media collage section where photographic fragments (spectrum analyzers, tuning forks, moth wings, crystalline mineral cross-sections) overlap in a layered composition with no rigid grid. Elements bleed into each other, held together by the tonal darkness of the palette rather than any spatial container. 5. **Signal Close** — A closing frame with a single massive numeral (the tonal reading result, as placeholder: "—") in enormous retro-display type, centered, with the frost-iridescent hue, fading out at the very bottom into the background darkness. **Spatial logic:** No symmetry axes enforced at the element level — asymmetric composition throughout, with the angular cuts providing visual rhythm instead. White space (black space here) is used generously between the signal zones to create the sensation of deep field between events. ## Typography and Palette **Typography (all Google Fonts, verified):** - **Display / Instrument Readouts**: [`Bebas Neue`](https://fonts.google.com/specimen/Bebas+Neue) — weight 400, all-caps, extreme letter-spacing (0.3em to 0.6em). Used for the domain wordmark, section numerals, and the frequency-band labels. Bebas Neue's tight geometric slab geometry reads as both industrial label and retro-scientific instrument plate. Set at `clamp(5rem, 18vw, 22rem)` for the hero wordmark. - **Secondary Display / Data Labels**: [`Orbitron`](https://fonts.google.com/specimen/Orbitron) — weights 400 and 700, all-caps, tracking 0.15em. Used for instrument panel readouts, frequency values, and data tile headers. Orbitron's geometric futurism reinforces the instrument aesthetic. - **Body / Annotation Text**: [`Space Mono`](https://fonts.google.com/specimen/Space+Mono) — weight 400 regular and italic. All annotation text, small labels, caption text. Set at 0.8rem–1rem, line-height 1.7. Space Mono's monospaced angularity connects annotation text to the signal-data context. **Palette (high-contrast, cold iridescent):** - `--void`: `#050A0F` — near-black blue-void, all backgrounds - `--frost`: `#C8F0FF` — ice-cold white-blue, primary text, hairline traces - `--iris`: `#7B4FFF` — deep violet-electric, primary accent, active readout glow - `--signal`: `#00FFB2` — bioluminescent cyan-green, live data traces, hover states - `--spectrum-amber`: `#FFB300` — warm amber-gold, warning/active band indicators - `--crystal`: `#E0F4FF` — near-white crystal blue, secondary text, annotations **CSS custom properties:** ```css --void: #050A0F; --frost: #C8F0FF; --iris: #7B4FFF; --signal: #00FFB2; --spectrum-amber: #FFB300; --crystal: #E0F4FF; ``` ## Imagery and Motifs **Collage approach (primary visual mode):** All imagery is layered collage — fragments of photographic material, scientific diagram line art, and SVG geometric shapes overlaid at varying opacities (0.3–0.9) using `mix-blend-mode: screen` and `mix-blend-mode: overlay`. The collage method creates material texture without any single image dominating. No image should read as a traditional photograph at the hero scale; all imagery is subsumed into the tonal field. **The visual corpus (collage fragments, all rendered at reduced opacity):** 1. **Oscilloscope trace photography** — extreme close-ups of analog oscilloscope screens showing Lissajous figures in green phosphor light. Blended at `multiply` over the dark background. 2. **Moth wing macro photography** — iridescent wing scales, the structural color visible in the micro-hexagonal texture. Blended at `screen` at 40% opacity over the spectrum panels. 3. **Quartz crystal cross-sections** — geological thin-section microscopy (transmitted polarized light, creating rainbow interference patterns). Used as full-bleed texture panels between sections. 4. **Tuning fork long-exposure photographs** — fork vibration trails in violet light against black. Blended into collage layers at `lighten`. 5. **Vintage spectrum analyzer prints** — fragments of old audio engineering charts with handwritten calibration marks, desaturated then tinted with `--iris`, used as background texture in the instrument panel section. **Sharp-angle motifs (structural vocabulary):** - All data panels are cut with hard diagonal edges, not rounded corners. Border radius: 0 throughout. - Section dividers are diagonal slashes (CSS `clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%)`) — no horizontal lines. - Decorative rules are parallelograms (3px tall, 80px wide, skewed 20deg). - Grid lines where they appear are at 17-degree tilts, rendered as `--signal` at 12% opacity. **Blur-focus pattern (primary motion vocabulary):** - The FFT spectrum collage uses a CSS `perspective` stack: background layers at `blur(12px)`, mid-ground at `blur(4px)`, foreground center band at `blur(0)`. On scroll, the blur values interpolate — as the user scrolls into the Spectrum Field section, the mid-ground resolves from blur to sharp over 200px of scroll travel. - Individual collage fragments use `filter: blur(0px)` by default and transition to `blur(3px)` on a neighbor element's hover, focusing attention by blurring context. ## Prompts for Implementation **The story to tell:** A precision audio analysis tool that measures the "tone" of global audio content — broadcasts, recordings, public media. The visitor lands in darkness and silence. The oscilloscope trace appears at the center, extremely thin, barely visible, then slowly brightens as if the instrument is warming up. No text for the first 1.2 seconds. Then the wordmark assembles itself letter by letter in Bebas Neue from left to right — not a typewriter effect (no cursor) — letters simply appear at intervals of 80ms, no animation on the individual letter, pure presence. The domain appears complete at ~1.5s, and immediately the first data trace begins a slow, looping animation across the scope line. **Scroll behavior (immersive-scroll implementation):** - Use `scroll-snap-type: y mandatory` on sections 1 and 2 only (Signal Origin and Spectrum Field), so the first two sections snap into view. After that, free scroll. - Blur-focus interpolation: use `IntersectionObserver` with threshold array `[0, 0.25, 0.5, 0.75, 1]` to drive CSS custom property `--focus-pct` (0→1) as the spectrum section enters the viewport. Bind `filter: blur(calc((1 - var(--focus-pct)) * 12px))` to background spectrum layers. - Sharp-angle clip-path transitions: on scroll-enter, instrument panel tiles animate from `clip-path: polygon(0 0, 100% 0, 100% 0, 0 0)` (flat, invisible) to `clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%)` (full parallelogram) over 400ms with `cubic-bezier(0.16, 1, 0.3, 1)`. **Motion principles:** - The oscilloscope trace should be a looping SVG `` with `stroke-dashoffset` animation at ~8s loop time, varying the amplitude slowly using a JS sine function on the path's `d` attribute (subtle — never theatrical). - All data numerals in the instrument panel should use a counter increment animation (counting up to target value over 1.2s using `requestAnimationFrame`) only when the tile first enters viewport. - Hover on any collage fragment: neighboring fragments blur (`blur(3px)`) and shift slightly toward the background (`scale(0.98) translateZ(-20px)` in a 3D transform context), while the hovered fragment sharpens and scales up (`scale(1.02)`). This behavior mirrors the blur-focus pattern on hover rather than scroll. - NO auto-playing video, NO parallax on the hero (the oscilloscope trace is the living element, no background layer movement). **Section-specific guidance:** - Signal Origin: Full-viewport, `background: var(--void)`. Centered composition. The oscilloscope hairline is `2px` stroke, `--signal` at 70% opacity, rendered in SVG. The wordmark sits 3rem above the trace baseline, Bebas Neue at hero scale, `--frost` color, `letter-spacing: 0.5em`. - Spectrum Field: The FFT collage is built as a CSS `transform: perspective(800px)` stack of 7 horizontal bands, each `100% × 14vh`, positioned with slight `rotateX` angles (outer bands: ±8deg, inner: ±3deg, center: 0). Each band is a different `--iris`/`--signal`/`--spectrum-amber` gradient with collage texture overlaid. - Instrument Panel: Use CSS grid with `grid-template-columns: repeat(5, 1fr)` at desktop, all cells using `clip-path` parallelograms. Background: `--void` with `--iris` grid lines at 17-degree tilt via `repeating-linear-gradient`. Orbitron font for all numbers. - Collage Core: `position: relative`, children are `position: absolute` with mixed z-indices. Use `mix-blend-mode: screen` for bioluminescent fragment overlays. No explicit container shape — fragments can overflow section bounds by ±40px. - Signal Close: Single large numeral "—" at 35vw font size, Bebas Neue, `--iris` color, centered, with a radial-gradient glow of `--iris` at 8% opacity at 300px radius behind it. **Strictly avoid:** - CTA buttons (no "Get Started", "Try Now", "Sign Up") - Pricing blocks or feature comparison tables - Testimonial carousels - Any horizontal navigation bar or top nav with multiple links - Rounded corners anywhere in the design - Warm palette colors (no oranges, reds, or browns except `--spectrum-amber` used sparingly for alert states) - Full-width gradient hero with text overlay (the "standard SaaS hero") ## Uniqueness Notes 1. **Fairycore applied to professional instrumentation, not fantasy aesthetics.** The corpus shows fairycore at 0% — it has never been used. This design doesn't use fairycore as a pastel-whimsy decorative gesture (cottages, mushrooms, dewdrops). Instead, it extracts the fairycore logic of *bioluminescent organisms in dark environments* and applies it directly to signal-data visualization. The instrument glows like a deep-sea creature; the FFT bands are iridescent like beetle carapaces; the collage fragments include moth wings and crystal cross-sections because these are the actual structural-color organisms that inspired the fairycore aesthetic. This is fairycore as a *scientific phenomenon* rather than a cultural aesthetic. 2. **Blur-focus as the primary depth metaphor, not as a glassmorphism effect.** The corpus uses blur almost exclusively in the glassmorphic-cards pattern (23%) or as hover decoration. This design uses blur-focus as a structural scroll narrative: the instrument "locks on" to the signal as the viewer scrolls into the spectrum section, resolving from diffuse blur to surgical precision. The blur is diegetic — it is the instrument acquiring focus, not a CSS card style. 3. **Sharp-angle geometry as the sole structural language.** The corpus defaults to rounded corners and card grids. This design uses zero border-radius throughout, with all panels cut at hard diagonal clip-paths (17-degree parallelograms). Sharp angles are the only structural motif — they read simultaneously as crystal facets (fairycore), cutting edges (futuristic-cutting-edge), and oscilloscope waveform geometry. Three semantic registers, one visual rule. 4. **Chosen seed: aesthetic: fairycore, layout: immersive-scroll, typography: retro-display, palette: high-contrast, patterns: blur-focus, imagery: collage, motifs: sharp-angles, tone: futuristic-cutting-edge.** 5. **Avoided overused patterns from frequency analysis:** parallax (91% corpus usage — avoided entirely), stagger animation (63% — avoided), hand-drawn aesthetic (66% — replaced with collage and photography), warm palette (93% — inverted to cold iridescent), centered layout (91% — asymmetric composition at element level with centered global axis only for the close section), spring physics (42% — replaced with sharp cubic-bezier easing without spring bounce).