# Design Language for judge.bar ## Aesthetics and Tone `judge.bar` is **a cocktail-napkin verdict machine** — imagine a neighborhood bar where the back wall is covered in frosted glass, and someone has been pressing their opinions flat against it from the other side for years. The glass is cold, lit from within, slightly fogged; through it you can see the blurred impressions of arguments, rankings, and hot takes, layered like a palimpsest of bar debates. The neomorphic surfaces are not the sterile iOS-app kind — they are the frosted glass behind the bar, backlit amber, with condensation rings left by glasses that have been moved. The aesthetic is **neomorphism-meets-speakeasy**: soft extruded surfaces that feel physically pressable, a translucent-frost palette that makes every element look like it's been set inside a thick block of ice, and a pervasive sense that you're interacting with something physical and weighted, not a flat digital screen. Colors are cool and luminous — ice-blue whites, frosted grays, a deep slate substrate, and a single warm amber accent that bleeds through the frost like the light of a bourbon-backlit shelf. Tone is **approachable-casual**: the site doesn't take itself seriously. Verdicts are delivered with the confidence of a bar patron three drinks in — opinionated, funny, direct. The writing voice is second-person and present-tense. Nothing is explained twice. ## Layout Motifs and Structure The page is structured as **parallax frost panels** — distinct horizontal sections that each exist at a different depth behind the frosted glass, creating genuine spatial separation as you scroll. Each panel is a neomorphic "slab" that appears to be pressed into or extruded from the substrate. The panels do not have uniform heights; they breathe. **Section cadence (top to bottom):** 1. **Hero slab** — full-viewport, neomorphic raised panel with the site's wordmark debossed into it. The wordmark reads as an inset carved into the frosted surface. A particle field of slow-drifting frost crystals occupies the background layer. No CTA, no tagline — just the name and a low hum of motion. 2. **Verdict ticker** — a narrow inset panel that sits recessed below the hero surface. A horizontally scrolling marquee of recent verdicts in variable-weight type. The ticker runs continuously without pause, styled as if engraved on a frosted belt. 3. **Topic collage slab** — the widest, tallest panel. A full-bleed collage layer sits inside a clipped neomorphic frame. The collage is composed of overlapping images, cropped text fragments, and torn-edge shapes — all desaturated and color-graded through a cool frost filter so they read as unified. Individual collage pieces surface slightly (raise a few px on scale-hover) when the cursor passes over them. 4. **Featured Verdict panel** — a neomorphic card island that floats at mid-depth. A single verdict, typographically oversized, with the subject and ruling rendered at different weights using a variable font axis. Surrounding the card, small frost particles drift. 5. **Submission slab** — recessed panel, debossed. A simple "submit your take" form, styled as if typed on frosted glass with a blunt instrument. **Spatial rules:** - No traditional grid columns. All content sits within neomorphic slabs that respect a center-implied 1200px maximum width but never enforce rigid column divisions. - Parallax depth ratios: background frost layer scrolls at 0.15× page speed; mid-depth slabs at 0.6×; foreground typography at 1.0×. - Section transitions are not dividers or lines — they are depth changes felt through the parallax, never marked explicitly. ## Typography and Palette **Type system (all Google Fonts, verified):** - **Display — `Syne`** (variable, wght 400–800). The wordmark and hero text. Set at wght 800 for the debossed hero, dropping to wght 400 for subtext in the same visual block. The variable weight axis is used animatedly: on scroll entry, heading weight morphs from 400 to 700 over 400ms — a "solidification" effect, as if the letters are freezing into place. Size: 96px hero, 52px section heads. - **Body and UI — `DM Sans`** (variable, wght 300–700). Clean, approachable, slightly rounded. Used for all body copy, form labels, and interactive elements. Set at 300 for ambient descriptive text, 500 for readable paragraphs, 700 for verdict labels and category tags. - **Accent / ticker — `Space Grotesk`** (wght 300–700). The continuous ticker uses Space Grotesk at wght 300, tracking +0.08em, all-caps. The contrast between this geometric sparseness and the rounded DM Sans body creates productive typographic friction. **Palette:** - `#E8EEF4` — frost white (dominant surface, neomorphic base) - `#CDD8E3` — ice shadow (neomorphic shadow side, inset wells) - `#FFFFFF` — highlight (neomorphic light side, raised edges) - `#1C2B3A` — deep slate (substrate layer, dark mode underpinning) - `#D4A853` — amber warmth (the single warm accent — the bourbon light through the frost) - `#7A9BB5` — muted steel blue (secondary accent, borders, active states) - `#8FA8C0` — frost mid-tone (particle color, mid-depth collage tint) **Neomorphic shadow formula:** - Raised element: `box-shadow: 6px 6px 12px #b8c4cf, -6px -6px 12px #ffffff` - Inset/debossed: `box-shadow: inset 4px 4px 8px #b8c4cf, inset -4px -4px 8px #ffffff` ## Imagery and Motifs **Collage layer (primary imagery motif):** The topic collage is built from real photographs and printed-text fragments, all run through a uniform CSS filter pipeline: `saturate(0.25) brightness(1.1) hue-rotate(195deg) contrast(1.05)`. This cold-blue desaturation transforms disparate images into a unified frost-tinted mass. Collage pieces are positioned with slight rotations (±6°) and varying scales. Torn paper edge shapes (SVG clip-paths with ragged bezier curves) define the boundaries of each piece, so nothing has a clean rectangle. The total collage impression is of a corkboard glimpsed through frosted glass — recognizable but indistinct. **Particle effects (ambient motif):** A `` layer fixed behind all content renders 160–200 frost particles: small irregular hexagon shapes (4–9px across), semi-transparent white (`rgba(255,255,255,0.35)`), drifting slowly downward and laterally with sinusoidal sway. Each particle has a randomized drift speed (0.3–0.8px/frame) and independent oscillation frequency. On mouse proximity (within 120px), nearby particles accelerate and scatter, then drift back. Particles do NOT appear above interactive elements — z-index is managed so they remain strictly decorative background texture. **Scale-hover on collage pieces:** Individual collage image fragments respond to cursor proximity with a CSS `transform: scale(1.04)` and a simultaneous `box-shadow` intensification (neomorphic raised state). Transition is `cubic-bezier(0.25, 0.46, 0.45, 0.94)` over 280ms. No rotation change on hover — just the clean lift. This makes the collage feel physically browsable. **No icons.** The frequency report shows `icon-heavy` at 5% — judge.bar deliberately avoids icon libraries entirely. Navigation and affordances are communicated through typographic weight shifts and neomorphic surface state changes only. **Verdict "stamp" motif:** Each verdict has a circular stamp-mark graphic — a CSS-drawn circle with a double-ring border, the ruling word rendered inside in `Syne` 800 all-caps, rotated ±12°. Colors: amber stamp on frost, slate stamp on amber background. The stamp feels like it was pressed into the surface — achieved with `mix-blend-mode: multiply` and a faint inner shadow. ## Prompts for Implementation Build this as **a slow-moving, layered scroll experience** — the user is descending into a bar at night, moving through layers of frost and amber light. Every implementation decision should reinforce physical depth and tactility. Avoid every convention of the opinionated-content startup page. **DO NOT BUILD:** star-rating widgets, numbered ranking lists, social proof badges, share buttons, comment threads visible on scroll, sticky sidebars with "trending" topics, "hot takes" counters, notification bells, gamification points, progress bars, pricing, login walls, or any modal that interrupts the scroll narrative. **Particle system (canvas):** Initialize 180 particles on `DOMContentLoaded`. Each particle stores: `{x, y, vx, vy, size, opacity, phase}`. In the animation loop, update `y += vy`, `x += vx + Math.sin(phase + t * 0.002) * 0.4`. On mouse move, compute distance to each particle; if `dist < 120`, apply a repulsion vector scaled by `(120 - dist) / 120 * 2.5`. Use `requestAnimationFrame`. Cap at 60fps with a delta-time guard. **Parallax panels:** Use `IntersectionObserver` to trigger panel entry animations, but drive the depth parallax via a single `scroll` event listener that reads `window.scrollY` and applies `transform: translateY()` to each depth layer. Three depth classes: `.depth-bg` (0.15 ratio), `.depth-mid` (0.5 ratio), `.depth-fg` (0.85 ratio). This is NOT CSS `perspective` / `transform3d` parallax — it is scroll-driven JS translation, giving precise control. **Variable font animation:** On `IntersectionObserver` entry (threshold 0.3), trigger a `@keyframes` that animates `font-variation-settings: "wght" 300` to `font-variation-settings: "wght" 750` over 500ms with `ease-out`. Use a CSS custom property `--wght` driven by a JS counter for the ticker's continuous scroll. **Neomorphic states:** All interactive neomorphic elements (verdict cards, form inputs, submit button) have three states managed by class toggle: `.nm-raised` (default), `.nm-flat` (hover), `.nm-pressed` (active/focus). The box-shadow values transition between these states over 180ms `ease`. The pressed state uses the inset shadow formula. This creates physically convincing button behavior without any borders or background-color changes. **Collage composition:** Position collage pieces with absolute positioning inside a `position: relative` overflow-hidden container. Each piece has a `data-layer` attribute (1–3) that controls its parallax ratio within the collage container (inner parallax, separate from page parallax). On viewport entry, pieces animate in via `opacity: 0 → 1` with staggered delays (80ms apart) and a `translateY(20px) → translateY(0)` settle. After settle, the scale-hover behavior activates via JS event delegation on the container. **Ticker:** Use `requestAnimationFrame` to drive a CSS `translateX` that runs indefinitely. Clone the ticker content once and append it to create a seamless loop. Speed: 0.5px/frame at 60fps. On focus (tab navigation), pause the ticker and highlight the focused verdict via outline. **Frost filter on collage:** Apply a single SVG `` defined inline with `feColorMatrix` for the cold hue shift, `feComponentTransfer` for brightness/contrast. Reference this filter via `filter: url(#frost-grade)` on all `.collage-piece` elements. This is more performant than per-element CSS filter stacks. ## Uniqueness Notes **Chosen seed:** aesthetic: neomorphism, layout: parallax-sections, typography: variable-fluid, palette: translucent-frost, patterns: scale-hover, imagery: collage, motifs: particle-effects, tone: approachable-casual **Differentiators from other designs in the registry:** 1. **Neomorphism applied to editorial content, not app UI.** At 3% frequency, neomorphism in the registry appears almost exclusively as mock app interfaces. judge.bar applies neomorphic surface depth to an opinionated-content/editorial context — frosted slabs as containers for text verdicts, not buttons and toggles. The raised/inset duality becomes a metaphor for agreement vs. dissent. 2. **Particle effects as atmospheric texture, not hero decoration.** Particle effects are at 1% in the registry, and when present they are typically the hero's centerpiece (a shooting-star field, a code-rain effect). Here, particles are permanently ambient background texture — frost crystals drifting behind all content at all times. They are never the focal point, only the air the content breathes in. 3. **Collage imagery filtered to unified frost tone.** Collage is at 4% in the registry and always used for its inherent variety and contrast. judge.bar inverts this: the collage is deliberately unified into a single cold color world via SVG filter, so the variety reads as texture rather than chaos. The frost filter is the design's unifying move — applied to collage, implied by particle color, embodied in the palette. 4. **Variable font weight as "freezing" animation.** Variable-fluid typography is at 6%. The specific use here — weight animating from thin to bold on scroll entry, as if the letterforms are solidifying out of frost — is not documented in any other registry design. It aligns the typography behavior with the site's core physical metaphor. 5. **Scale-hover at 1% frequency, used precisely.** Scale-hover is the rarest pattern in the registry at 1%. Its use here is scalpel-thin: only collage fragments respond to it, reinforcing their physicality. All other interactive elements use neomorphic shadow-state changes instead. This restraint prevents the scale-hover from feeling like a catch-all animation tic.