# Design Language for courts.studio ## Aesthetics and Tone courts.studio is the imagined atelier of the people who design the surfaces athletes compete on — not the athletes, not the sport itself, but the **court as a crafted object**: its geometry, its grain, its chalk lines, the way a hardwood panel absorbs impact differently at the paint than at the arc. The aesthetic is **cinematic-tactile** — every screen is shot like a documentary still from inside an empty arena at dawn, before anyone arrives. No action. No crowd. Just the surface and its marks. The site does not celebrate sport. It celebrates the **discipline of designing the space that enables sport**. The tone is conversational but grounded — the voice of a master craftsperson who can explain why the friction coefficient on a clay surface changes a player's footwork, and who finds that genuinely interesting to talk about. Not a pitch. A conversation. What the site is **not**: a sports brand, a team identity system, a fitness SaaS, or an athletic-gear lookbook. There are no athletes, no action shots, no motivational slogans. The mood is closer to a master carpenter's workshop catalog — specific, earned, unhurried. Design thesis: A court is architecture at ground level, and this studio treats it as such — the site's formal logic mirrors the geometry of the surfaces it creates: bounded, ruled, precise, but warm in material. Inspirations: the visual weight of a Eames Case Study house interior (warm plywood against white plaster), the documentary cinematography of Frederick Wiseman (long static takes, institutional spaces observed without narration), and the material catalog of a Japanese woodworking shop (surface samples, grain studies, dimension tables as beauty objects). ## Layout Motifs and Structure The page is structured around a **fixed left sidebar** (280px wide on desktop) that functions as the studio's **logbook** — it holds the wordmark `courts.studio` in small-caps at the top, a vertical rule, and a sparse navigation list that never scrolls. The sidebar's background is a deep, matte leather-brown (#2A1F14) with the texture of a tightly-grained cowhide. It does not shimmer. It does not animate. It sits with weight. The main content area to the right of the sidebar is **a sequence of five full-height cinematic panels**, each representing one studio discipline (surface geometry, material selection, line marking, lighting design, acoustic mass). Each panel is a composition built around **a single large frosted-glass card** floating over a full-bleed background image of a court surface detail — a section of end-grain maple, a patch of freshly-raked clay, a polished concrete gymnasium floor. Panel composition logic: The frosted glass card is positioned **off-center** — it anchors to the right two-thirds of the content area, leaving the left third as a breathing field where one oversized single-character numeral (I, II, III, IV, V) sits at `clamp(120px, 12vw, 200px)`, flush-left against the sidebar boundary. This numeral is the sole decorative element in each panel's left field. All visual mass stays upright; there is no tilt, no rotation. **Frosted glass card:** each card is `width: clamp(480px, 58%, 760px)`, with `backdrop-filter: blur(18px) saturate(1.4)`, a `background: rgba(248, 244, 238, 0.72)` (warm frost, not cold ice), a `1px solid rgba(255,255,255,0.38)` border, and `box-shadow: 0 8px 48px rgba(42,31,20,0.18)`. The frost reads as a membrane over leather and wood, not as glass-tech polish. Between panels, the background bleeds continuously — the court textures cross-fade at the mid-scroll point of each transition, creating the sensation of **one continuous surface being surveyed**, rather than five separate pages. On mobile, the sidebar collapses to a top bar (60px), and the oversized numerals scale down to a 72px lead-in above each panel. **Pacing:** Each panel is 100vh. There is no scroll-jacking. The visitor moves at their own pace. Panels do not rush to fill the screen with content — the frosted card occupies roughly 40% of the panel area, giving the textured background room to read as subject matter, not wallpaper. ## Typography and Palette **Three Google Fonts, each with a clear role:** - **Display numerals and wordmark — [Nunito](https://fonts.google.com/specimen/Nunito)**, weight 300 (light), used only for the oversized panel numerals (I–V) and the `courts.studio` logotype. Nunito's rounded terminals soften the numerals so they read as chalked marks rather than stamped metal — a deliberate softness against the hard-grain backgrounds. Size: `clamp(120px, 12vw, 200px)` for numerals, `16px` letter-spaced at `0.14em` for the logotype in small-caps. - **Body and card text — [DM Sans](https://fonts.google.com/specimen/DM+Sans)**, variable, weights 300–500. The primary reading font for all panel descriptions, captions, and navigation items. DM Sans has just enough roundness in its lowercase to feel conversational without softness becoming flimsy — the studio's voice made typographic. Body text: `clamp(15px, 1.4vw, 18px)`, line-height `1.72`, color `#2A1F14`. - **Labels and dimensions — [JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono)**, weight 400, used exclusively for measurement annotations, material codes, and surface-spec callouts. At `12px`, `letter-spacing: 0.08em`, in `#7A6650`. These appear in the frost-card margins as dimension lines — `"3.05m × 6.10m"`, `"Hevea brasiliensis, grade A"` — behaving like technical drawing annotations. **Palette — authored around the material vocabulary of a court:** - `#2A1F14` — **Hide** (deep leather-brown): sidebar background, body text, primary anchoring tone - `#F8F4EE` — **Chalk** (warm near-white): frosted glass base, card backgrounds, primary page canvas - `#7A6650` — **Grain** (mid-tawny): label text, annotation marks, secondary typography - `#C4A882` — **Wax** (buffed leather accent): hover states, active navigation markers, thin ruled lines in the sidebar, the studio's accent throughout - `#D9CDBF` — **Dust** (pale clay-court neutral): used in background tints for clay-surface panels, muted separator lines - `#1C2E22` — **Baseline** (deep court-green, close to a clay-court shade line): used only in the fifth panel (acoustic mass), as a single full-bleed color moment — the one departure from warm neutrals, signaling a shift from material to space The palette has no black (#000000) and no pure white. The darkest tone is **Hide** and the lightest is **Chalk**. This prevents any panel from feeling like a standard dark-mode or light-mode screen — it always feels like a physical material system. ## Imagery and Motifs **All background images are court surface macro-photography** — shot with a tilt-shift lens from 60cm above the surface, so depth-of-field falls away at the edges but the center field is forensically sharp. The effect is an aperture-shaped focus zone that naturally frames the frosted card position without any CSS mask tricks. Image treatments: desaturated to 20% of original chroma, then re-tinted with a warm amber gel (`hue-rotate(10deg) sepia(0.3)`) so all five court textures — maple end-grain, compressed clay, poured concrete, synthetic rubber, brushed terrazzo — read as part of the same material family. **The leather-texture motif appears in three registers:** 1. The sidebar surface: a CSS `repeating-linear-gradient` approximating a cross-hatched hide pattern at 2px pitch, overlaid at 8% opacity on the `#2A1F14` base — subtle enough to read as depth, not as decoration. 2. The card's inner border: a `1px` rule at `rgba(196,168,130,0.4)` (Wax, dimmed) inside the outer glass border, spaced 8px in. This creates a leather-folio binding effect — the frost card feels like it is mounted inside a case, not floating free. 3. Transition surfaces: at each panel's 50% scroll point, the background cross-fade reveals a half-second flash of the hide texture at full opacity — a subliminal "turn of a page" moment. **Cultural motif:** Each panel carries a small sidebar annotation — in JetBrains Mono at 11px, right-aligned against the `#2A1F14` sidebar background in `#C4A882` — naming the cultural origin of that panel's court type. `"Hardwood floor — Naismith, Springfield MA, 1891"`, `"Clay surface — Roland Garros, Paris, 1928"`, `"Terrazzo — Venice, 15th c."`. These annotations treat the court as a cultural artifact, not a commodity surface, and they reinforce the conversational tone: the studio knows the history of what it builds. **Recurring forms:** thin horizontal rules (1px, `#C4A882`, 60% opacity) used only as spatial dividers within frost cards, never as decorative elements between sections. The court line as a compositional primitive — used sparingly, used exactly where a real court line would be: to define zones, not to decorate. ## Prompts for Implementation Build courts.studio as **a single HTML file, one CSS file, one JS file (≤ 160 lines)**. No framework, no bundler, no SSR. **Fixed sidebar (280px):** Rendered as a `position: fixed; left: 0; top: 0; height: 100vh` column. Contents: `courts.studio` wordmark in Nunito 300 small-caps at 14px, letter-spaced 0.14em, centered vertically at the top quarter of the sidebar. Below it, a 1px vertical rule in Wax (#C4A882) running the full remaining height. Navigation items (`Surface`, `Material`, `Marking`, `Light`, `Mass`) stacked at 40px line-height in DM Sans 300 at 13px, `#C4A882`. No hover animations — only a left-side `3px solid #C4A882` border on the active item, appearing instantly on click. The sidebar leather texture is applied via a 2px-pitch cross-hatch CSS gradient at 8% opacity over the `#2A1F14` base. **Five content panels:** Each panel is `height: 100vh; margin-left: 280px`. The full-bleed background image covers the panel — `object-fit: cover`, `filter: sepia(0.3) saturate(0.2)`. The frosted card is `position: absolute; right: 5%; top: 50%; transform: translateY(-50%)` with the blur/frost styles described above. The oversized numeral is `position: absolute; left: 32px; top: 50%; transform: translateY(-50%)` in Nunito 300 at `clamp(120px, 12vw, 200px)`, color `rgba(248,244,238,0.18)` — nearly invisible against the textured background, a ghost mark, the way chalk looks after rain. **Magnetic interaction (the assigned pattern):** The frosted card responds magnetically to cursor position. On `mousemove` over the content area, the card translates by a maximum of `±18px` on X and `±10px` on Y, with `transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1)`. The magnetic pull is **gentle** — the card drifts, it does not chase. This mimics the slight give of a surface panel under pressure, reinforcing the material metaphor. On mobile, magnetic behavior is disabled entirely. **Background cross-fades:** Between panels, use `IntersectionObserver` to detect when the next panel is 50% visible, then transition the background image opacity from 0 to 1 over 800ms (`ease-in-out`). The outgoing image holds at full opacity until the incoming image reaches 60% opacity, then fades to 0. This creates the continuous-surface survey effect. **Cultural annotations in sidebar:** When a panel becomes the active scroll target (tracked via IntersectionObserver), the corresponding cultural annotation appears in the sidebar, below the navigation list — a `opacity: 0 → 1` transition over 400ms. Previous annotation fades out simultaneously. The annotation block is `max-width: 220px`, centered in the sidebar, with the JetBrains Mono 11px text described above. **What to avoid in implementation:** Do not add hover-lift effects to the frosted card — the magnetic drift is the only positional animation. Do not add scroll-progress bars, loading spinners, or any element that reminds the visitor they are using a website interface. Do not add a hero section with an H1 — the first panel IS the introduction; the wordmark in the sidebar IS the identity. Do not add a contact form or pricing block. Do not animate the sidebar at all. ## Uniqueness Notes **Chosen seed (per assignment):** - aesthetic: cinematic - layout: sidebar - typography: rounded-sans - palette: translucent-frost - patterns: magnetic - imagery: leather-texture - motifs: cultural - tone: conversational **Frequency-analysis context:** 1. **Cinematic aesthetic at 5% in the 74-design corpus** — rare enough to be distinctive, but more importantly, no prior cinematic design in the corpus treats a non-narrative-media domain (no film studios, no streaming products). courts.studio is the first cinematic design applied to physical-material craftsmanship, making the pairing domain-specific rather than trend-reuse. 2. **Sidebar layout at 25%** — used frequently, but the corpus's sidebar designs are navigation sidebars on data-heavy products (dashboards, documentation, analytics). courts.studio turns the sidebar into a **logbook with material annotations**, a function not represented in prior designs. 3. **Translucent-frost palette at 4%** — one of the rarest palette keys in the corpus. Crucially, courts.studio does not use frost as a glassmorphic SaaS motif (the cliché it usually enables). Instead, the frost reads as a **membrane over warm physical materials** — the coldness of glass against the warmth of leather and wood creates tension that is domain-specific to a studio that works with surfaces. 4. **Cultural motif at 4%** — the corpus's four uses are all abstract (pattern references, not historical annotations). courts.studio deploys cultural motifs as factual sidebar annotations — datelines and place names that give each court surface a genealogy, reinforcing the studio's authority without resorting to testimonial blocks or client logos. **Design Thesis:** A court is architecture at ground level, and this studio treats it as such — the site's formal logic mirrors the geometry of the surfaces it creates: bounded, ruled, precise, but warm in material. **Avoid Tropes:** - Hero-image-then-features grid - Sports-brand neon-on-black energy - Generic athletic "performance" dashboard language - Glassmorphism as SaaS polish (frost here is material, not cosmetic) **Privilege:** - Tactile materiality — leather, chalk, grain, wax as a named color system - Cinematic stillness — the site is empty-arena, not game-day - Cultural specificity — every surface has a history and a named provenance - The sidebar as a fixed logbook, not a slide-in nav panel