# Design Language for judge.club ## Aesthetics and Tone judge.club is **the softest courtroom ever built** — a members' parlour where verdicts are reached by candlelight and the gavel is made of foam. The governing idea: judgment, in its truest sense, is not the cold clang of a hammer but the slow, careful pressing of a thumb into clay until the shape is decided. So the entire surface of the site is rendered in **neomorphism** — every element looks extruded from, or pressed into, a single continuous sheet of warm putty-coloured material, lit by one soft overhead source. Buttons are gentle hills you could rest a palm on. Panels are shallow valleys carved into the page. Nothing has a hard edge; nothing casts a black shadow; everything glows faintly as if the material itself were slightly translucent and warmed from within. The tone is **whimsical-creative** — this is a "club" of judges who have decided that deliberation should feel like a garden party, not an inquisition. Copy is wry and a little theatrical ("The Honourable Members will now squint thoughtfully"; "Submit your case to the soft tribunal"). There is a running conceit that the site itself is *thinking* — when content is being prepared, the page does not show a spinner; it shows **skeleton-loading** placeholders shaped like ghostly briefs, leaf-veined index cards, and blurred speech-bubbles that slowly resolve, as if the club's collective mind is composing its opinion in front of you. The effect should feel like watching ink bloom in water: patient, organic, faintly magical. Inspiration touchstones: the inflated-pillow UI experiments of 2019–2021 neomorphism reborn with actual warmth; Carl Larsson's sunlit interiors crossed with a Quaker meeting house; the way a magnolia leaf is glossy on one side and suede on the other; the colour of light through a linen lampshade; the gentleness of a deliberation that everyone secretly wants to last longer. ## Layout Motifs and Structure The macro-structure is **editorial-flow** — judge.club reads top to bottom like a long, beautifully-set opinion piece in a Sunday magazine, NOT like an app dashboard and NOT like a card-grid landing page. There is one dominant text column (max-width 62ch) that meanders down the page, with **pulled asides, marginal annotations, and full-bleed interludes** breaking the rhythm the way a great longform article uses sidebars and section-openers. The column is never perfectly centred — it sits at roughly the optical golden line, about 38% from the left on desktop, leaving a generous left margin that fills with leaf-organic doodles, drop-caps, and "Member's note" annotations in a smaller, looser hand. Six movements, flowing into each other with no hard section breaks (transitions are achieved by the background material slowly shifting hue): 1. **The Threshold** — full-viewport opener. The page IS the putty sheet. The wordmark `judge.club` appears *pressed into* the material (an inset/debossed neomorphic treatment), and a single soft-extruded button — "Open the chamber" — sits below it like a river stone. A few abstract-shapes (a soft trapezoid, a lens, a half-curled leaf) drift in the negative space, each casting only the gentle dual-tone neomorphic shadow. 2. **What the Club Is For** — the editorial column begins. A huge eclectic drop-cap. The text explains, with whimsy, that this is a place to bring a thing — an argument, a design, a poem, a quarrel — and have it held, turned over, and judged kindly-but-honestly. Marginalia leaves curl down the left gutter. 3. **The Soft Tribunal** — the centrepiece. A horizontal interlude where three "Members" are represented not as avatars but as three large neomorphic medallions (extruded discs) with leaf-vein engravings. When the section enters view, each medallion's "opinion" loads via skeleton-loading: blurred lines that resolve into a short, characterful verdict ("Charming, but the second act sags"). The medallions breathe — a slow scale pulse — like people leaning in and back. 4. **How a Judgment Forms** — back to the column, now interleaved with a vertical sequence of small inset "wells" in the page, each holding one stage of deliberation (Receive → Consider → Argue → Decide), connected by a hand-drawn vine that path-draws as you scroll. 5. **The Members' Garden** — full-bleed interlude. The putty surface tilts into a warmer gradient and fills with abstract-shapes and leaf-organic forms arranged like a parterre garden seen from above — soft hills and hollows of material, each a "seat" in the club. Parallax: foreground leaves drift slower than background ones. 6. **Take a Seat** — closing movement. The column resolves into a single soft-extruded panel — a contemplative invitation, NOT a CTA wall, NOT a pricing block, NOT a stat-grid. One inset field ("name your case") and one pillowy button ("present it to the club"). The wordmark presses into the material one last time and the candle-warm light dims by ~6%. Grid: a 12-column reference at 1440px, but the editorial column only ever occupies columns 4–9; margins 3 and 10–12 are for marginalia and leaves. Baseline rhythm 28px. On mobile the column goes full-width with margin-leaves shrinking into small inline glyphs. ## Typography and Palette **Type system — eclectic-hybrid, Google Fonts only.** The whole point is mismatched-on-purpose: a club where the constitution is set in a stately serif but the minutes are scrawled in something playful. - **Fraunces** (variable, opsz + SOFT + WONK axes) — the constitutional voice. Used for all major headings, the wordmark, drop-caps, and the "verdict" text from the Members. Crank the WONK and SOFT axes near their maxima at display sizes so the serifs go a bit wobbly and warm — it should look *carved into clay*, not chiselled into marble. Weights 300 (large display) to 600 (sub-heads). - **Newsreader** (variable, italic supported) — the body editorial column. A warm, readable text-serif with a lovely italic; this is the longform-magazine voice. 18px/28px on desktop. Italics carry asides and the whimsical interjections. - **Caveat** (handwritten) — the marginalia hand. Every "Member's note", leaf-doodle caption, and gutter annotation is set in Caveat at ~17px, tilted ±2°, in a muted ink colour. This is the eclectic clash that makes the page feel alive. - **Space Grotesk** — the only "mechanical" type on the site, reserved for tiny UI labels, field placeholders, the deliberation-stage tags (RECEIVE / CONSIDER / ARGUE / DECIDE in 11px tracked +0.18em uppercase), and the skeleton-loading state captions. Its neutrality makes the surrounding warmth read warmer. **Palette — gradient, but warm-putty not neon.** The signature move is a *material gradient*: the page background is never flat; it is always a very low-contrast diagonal gradient between two of the putty tones, and which two it is between shifts subtly between movements, so scrolling feels like the light changing through an afternoon. - `#EFE7DA` — Linen Putty (primary surface, top of every gradient) - `#E2D6C2` — Warm Clay (bottom of the surface gradient; the "pressed-in" valleys) - `#F7F2E8` — Lamplight (the raised highlight on every neomorphic extrusion — the soft white-warm glow) - `#C9B79A` — Suede Shadow (the *light* shadow side of every extrusion — never use black; this dusty tan is the darkest "shadow" on the page) - `#7C8C5A` — Magnolia Leaf (primary accent: leaf-organic veins, the path-drawn vine, link underlines, drop-cap fills) - `#A8553B` — Persimmon Ink (secondary accent + the Caveat marginalia colour; a warm terracotta-red used very sparingly for the most theatrical bits of copy and the active deliberation stage) - `#3A332A` — Cocoa Text (body type colour — a deep warm brown, never pure black, so it sits in the material rather than punching through it) - Movement-5 garden gradient pushes warmer: `#EFE7DA → #E8D9BE → #DCCBA0` with Magnolia Leaf shapes scattered through. Neomorphic shadow recipe (the soul of the visual): every raised element gets `box-shadow: -8px -8px 18px #F7F2E8, 9px 9px 20px #C9B79A;` and every inset element gets the same values as `inset`. Border-radius is generous everywhere (18–32px). Absolutely no `border: 1px solid`. Absolutely no drop-shadow darker than `#C9B79A`. ## Imagery and Motifs **No photography. No icon library. No glassmorphic cards.** All imagery is either (a) neomorphic geometry extruded from the page material, or (b) inline SVG **abstract-shapes** and **leaf-organic** line-work. - **Abstract-shapes** — soft trapezoids, lenses, half-moons, rounded chevrons, and "river stones". They drift slowly in negative space (Movements 1, 5, 6), always rendered in the page material with the standard neomorphic shadow so they look like pebbles resting *on* the clay sheet. They never overlap text; they orbit it. - **Leaf-organic motifs** — the connective tissue. A single magnolia-leaf shape (glossy lobe + suede lobe, achieved with a subtle inner gradient) recurs at three scales: tiny (bullet markers, gutter glyphs), medium (the engravings on the three Member medallions, the drop-cap ornaments), and the path-drawn **vine** that grows down the left margin across Movements 4–5 as you scroll, sprouting a small leaf at each section anchor. SVG `stroke-dasharray` path-draw, stroke `#7C8C5A`, 2px, round caps. - **The Member medallions** — three large extruded discs (~220px), each with a different leaf-vein engraving inset into its face, each labelled in tiny Space Grotesk ("Member I", "Member II", "Member III"). These are the closest thing to "avatars" — deliberately abstract, deliberately warm. - **Skeleton-loading furniture** — when any verdict, note, or "case" content is composing, it is replaced by leaf-veined ghost-shapes: a stack of 3–4 horizontal pills with a soft shimmer sweeping across them (a slow `linear-gradient` highlight translating left→right over ~1.6s), plus a faint blurred speech-bubble outline. The shimmer uses Lamplight `#F7F2E8` against Linen Putty. These are not "loading states" hidden in the corner — they are *staged*, centre-column, as a deliberate visual: the club is thinking. - **Inset "wells"** — recurring debossed rectangles in the page (Movement 4's deliberation stages, Movement 6's input field). Each looks like a shallow pool pressed into the clay, holding one small thing. - **Deboss/emboss wordmark** — `judge.club` is treated as text *pressed into the material* (inset shadow on the glyphs via layered text-shadow: a light highlight below-right, a Suede shadow above-left). It never floats; it is always part of the sheet. Texture: a single near-invisible `2%`-opacity grain/noise overlay across everything, so the "material" doesn't look like a vector gradient. No marble, no leather, no paper-aged. ## Prompts for Implementation Build judge.club as **one long, scrolled HTML document** — no SPA, no router, no framework. Six `
` elements stacked vertically; total scroll ≈ 540vh desktop, ≈ 680vh mobile. The page is a single continuous neomorphic surface; sections are not boxes but movements in a piece, divided only by the background gradient slowly shifting. Storytelling spine: the page is **the club deliberating, with you**. It opens by pressing its name into the clay, walks you through what judgment-as-care means, stages a soft tribunal, shows how a verdict forms, wanders through the members' garden, and finally offers you a seat. Every interaction should feel like pressing into or lifting from soft material. CSS: - One CSS custom-property palette; one shared `--neo-raised` and `--neo-inset` box-shadow token used everywhere. Generous `border-radius` (clamp(18px,2vw,32px)). Never a hard 1px border. Never a shadow darker than `#C9B79A`. - Background: `body` has a fixed low-contrast diagonal gradient (`linear-gradient(155deg, var(--putty), var(--clay))`); each `.movement` overrides the two stops slightly via a CSS variable, transitioned over 1.2s when it scrolls into view, so the "light" changes down the page. Movement 5 pushes warmest. - Typography: load Fraunces (with opsz, SOFT, WONK axes), Newsreader (italic), Caveat, Space Grotesk. Drop-caps via `::first-letter` in Fraunces at ~5.5em with a Magnolia-Leaf fill and a small leaf SVG tucked beside it. Marginalia in `