# Design Language for courts.studio ## Aesthetics and Tone courts.studio inhabits the visual atmosphere of a sun-warmed tennis clubhouse in the Algarve, circa 1978 -- terracotta tiles underfoot, linen curtains billowing through open doors, and the distant thock of ball on gut string drifting through honeyed afternoon light. The aesthetic is **grainy-textured**: every surface carries the fine particulate quality of 35mm film stock left in a hot car, of sandstone walls photographed through a lens smeared with cocoa butter. This is not the cold grain of noir photography or the aggressive static of glitch art -- it is the warm, organic grain of sun-faded Kodachrome, of newsprint yellowed to the color of clover honey, of chalk dust floating in a shaft of golden light. The tone is **friendly** but with substance -- the friendliness of a tennis instructor who has played at Roland Garros, who teaches you the continental grip with patience and humor but never condescension. There is warmth without saccharine sweetness, approachability without casualness. The voice of courts.studio is the voice of someone who loves what they do, who invites you onto the court with genuine enthusiasm, who explains the history of the serve with the same affection they show for a perfect backhand. Think of it as the friendliness of a well-worn leather chair in a clubhouse -- it welcomes you not through design but through accumulated use and care. Every surface on the site carries a grain overlay between 3-8% opacity, applied as a CSS pseudo-element using a 200x200px noise texture tile. The grain is warm-toned (slightly amber, not neutral gray), creating the impression that you are viewing the site through a sheet of handmade Japanese kozo paper held up to afternoon sun. This grain is not decorative -- it is structural. It unifies disparate elements (type, color fields, imagery) into a single material reality, the way a shared patina unifies the objects in an antique shop. ## Layout Motifs and Structure The layout follows an **f-pattern** reading architecture -- a deliberate decision rooted in the eye-tracking research that shows Western readers scan in an F-shaped pattern: a strong horizontal sweep across the top, a shorter horizontal sweep below, then a vertical scan down the left edge. But this is not a clinical application of UX research. The f-pattern here is interpreted through the lens of a clay court's geometry: the baseline (top horizontal), the service line (second horizontal), and the tramline (left vertical descent). **Grid Foundation:** The underlying grid is a 12-column system at max-width 1200px, but the columns are grouped into asymmetric zones that mirror the f-pattern: - **Top Zone (Baseline):** Full 12-column span, used for the opening narrative block. Content stretches edge to edge with 48px padding, establishing the first horizontal eye sweep. This zone occupies 100vh and contains the site identity, a single line of subtitle text, and a gradient-mesh background that bleeds to the viewport edges. - **Mid Zone (Service Line):** Columns 1-8 carry the primary content; columns 9-12 hold a floating secondary element (a pulled quote, a detail image, a navigational hint). This creates the shorter second horizontal sweep. The gutter between column 8 and 9 is widened to 64px, creating a visible pause -- a net in the center of the court. - **Descent Zone (Tramline):** Content narrows to columns 1-6, creating a strong left-aligned vertical column. The right half of the viewport becomes negative space filled only with the warm grain texture and occasional floating motifs. This is where the narrative deepens, where the scroll slows, where the user moves from scanning to reading. **Section Transitions:** Between major sections, a full-width band of honeyed color (#E8D5B0) stretches across the viewport at 120px height, carrying a single line of text centered within it -- a chapter divider that functions like the changeover in a tennis match. These bands use a subtle CSS gradient from left to right (2% opacity variation) that creates the illusion of light falling unevenly across the surface. **Scroll Behavior:** Scroll progression is measured and deliberate. Each section is a minimum of 80vh, ensuring that the user is always immersed in one context at a time. There are no abrupt jumps, no parallax speed differentials, no scroll-jacking. The scroll is natural, but the content is paced so that each section reveals itself fully as the user moves through it, like walking through the rooms of a well-designed exhibition. ## Typography and Palette **Typography:** - **Display / Headlines:** "Fraunces" (Google Fonts) -- the variable axis version, using the optical size axis (opsz: 72) and the WONK axis set to 1 for the distinctive "soft" variant with its curling, organic terminals. Weight range 700-900 for headlines. Fraunces is an old-style serif with a playful irregularity in its stroke weight distribution -- some letterforms (the lowercase 'g', the capital 'Q') have an almost hand-drawn quality that pairs perfectly with the grainy-textured aesthetic. Used at 3rem-5.5rem for primary headings, always in sentence case. Line-height: 1.05. Letter-spacing: -0.02em for the compressed, confident feel of a tournament scoreboard rendered in warm ink. - **Body / Narrative:** "Nunito" (Google Fonts) -- weight 400 for body text, weight 600 for emphasis. Nunito's rounded terminals create a warmth that complements Fraunces' organic serifs without competing. It reads as friendly, open, and unhurried -- the typographic equivalent of a conversation held on a sun-warmed bench. Used at 1.05rem-1.2rem, line-height 1.72, max-width 38em for optimal reading measure. The generous line-height is intentional: it creates breathing room between lines that mirrors the spatial generosity of the f-pattern layout. - **Accent / Labels:** "Anybody" (Google Fonts) -- a variable-width sans-serif used at its widest setting (wdth: 150) for navigational labels, section markers, and metadata. Weight 500. Used at 0.75rem-0.85rem in uppercase with letter-spacing: 0.14em. The extreme width of Anybody at 150% creates a distinctive horizon-line quality -- letters that stretch like shadows at golden hour. This font is used sparingly: only for waymarkers and labels, never for continuous reading. **Palette:** The palette is **honeyed-neutral** -- a range built from the observation that honey is not one color but a spectrum from pale acacia through buckwheat to nearly black chestnut, and that these warm ambers create a more nuanced neutral range than any gray scale. | Role | Color | Hex | Description | |------|-------|-----|-------------| | Background (primary) | Acacia Honey | #F6EDE0 | The palest honey -- warm ivory with a golden undertone, used for the main canvas | | Background (secondary) | Clover | #E8D5B0 | Deeper golden, like clover honey spread on paper, for section dividers and accent surfaces | | Text (primary) | Chestnut Honey | #3D2B1F | Nearly-black brown with warm undertones -- never pure black, always organic | | Text (secondary) | Buckwheat | #6B5744 | Medium brown for secondary text, captions, and metadata | | Accent (primary) | Manuka Gold | #C4973B | Rich amber-gold for interactive elements, underline-draw animations, and focal points | | Accent (secondary) | Terracotta Dust | #B8704A | The red-orange of sun-baked clay courts, used for hover states and active indicators | | Surface (dark) | Evening Court | #2E2219 | Deep warm brown for footer regions and dark-mode sections | | Surface (accent) | Linen Shade | #D4C4A8 | A muted golden beige for card backgrounds and pulled-quote containers | **Color Usage Rules:** - No pure white (#FFFFFF) or pure black (#000000) appears anywhere. The lightest value is #F6EDE0; the darkest is #2E2219. - All color transitions use CSS gradients with at least 3 stops to avoid banding, creating the smooth tonal shifts of actual honey held to light. - Text always appears at a minimum contrast ratio of 7:1 against its background, but this is achieved through the warm palette rather than stark black-on-white. ## Imagery and Motifs **Gradient-Mesh as Primary Imagery:** The dominant visual language is **gradient-mesh** -- complex, multi-point gradient fields that create the illusion of light falling across curved surfaces. These are not the flat linear gradients of corporate SaaS sites. They are radial, multi-focal, and layered, producing the soft luminosity of light refracting through honey, or the dappled pattern of sun through a canopy of trees onto a clay court surface. Each gradient mesh uses 4-6 focal points with colors drawn exclusively from the honeyed-neutral palette, creating warm pools of #C4973B bleeding into #E8D5B0 fading into #F6EDE0 -- the visual equivalent of afternoon light moving across a textured wall. **CSS Implementation:** Gradient meshes are achieved through layered radial-gradient declarations (no images, no canvas), each at different positions and sizes, composited with background-blend-mode: multiply or soft-light. A typical section background might use: ```css background: radial-gradient(ellipse at 20% 30%, rgba(196,151,59,0.15) 0%, transparent 60%), radial-gradient(ellipse at 75% 60%, rgba(184,112,74,0.10) 0%, transparent 50%), radial-gradient(ellipse at 50% 80%, rgba(232,213,176,0.20) 0%, transparent 70%), #F6EDE0; ``` These gradients shift subtly on scroll (translateY at 0.02x scroll speed), creating a slow parallax of light that makes the surface feel alive without demanding attention. **Nature Motifs:** The motif vocabulary draws from the intersection of **nature** and court sports -- not literal tennis imagery (no rackets, no balls, no nets rendered as icons) but the natural world that surrounds and penetrates outdoor courts: 1. **Leaf Shadows:** SVG silhouettes of eucalyptus, olive, and fig leaves, rendered as semi-transparent overlays (#3D2B1F at 4-6% opacity) that drift slowly across gradient-mesh backgrounds. These are positioned absolutely and animated with a 30-second CSS animation loop using translate and rotate, creating the impression of shadows cast by trees onto the court surface. Each leaf is 80-200px in size and uses the clip-path property to create irregular, organic edges. 2. **Court Lines:** Thin horizontal rules (1px, #C4973B at 40% opacity) that span the full viewport width, appearing at section boundaries. These lines reference the baseline and service lines of a tennis court but function as compositional dividers. On hover, they thicken to 2px and brighten to 70% opacity over 400ms with an ease-out curve. 3. **Grain Texture Variation:** The universal grain overlay varies in density across sections -- lighter (3% opacity) in the hero/opening, denser (8% opacity) in the descent zone -- mimicking the way film grain becomes more visible in underexposed areas of a photograph. 4. **Seed Dispersal Patterns:** In the deep-scroll sections, small SVG circles (4-8px diameter, #C4973B at 20-40% opacity) are scattered in organic cluster patterns that reference the way seeds fall from a tree -- denser near a central point, sparser at the edges. These are static, not animated, and function as a subtle background texture that rewards close attention. ## Prompts for Implementation **Full-Screen Narrative Opening:** The site opens to a 100vh viewport entirely filled with a gradient-mesh background (4 radial gradients layered over #F6EDE0). The domain name "courts.studio" is set in Fraunces at opsz:72, WONK:1, weight 800, at 4.5rem, positioned at 38% from the top of the viewport and aligned to the left with 48px padding -- the f-pattern's first horizontal fixation point. Below the domain name (16px gap), a single line in Nunito 400 at 1.1rem reads as an invitation. Below that, silence. No navigation, no hamburger menu, no scroll indicator. The grain overlay at 3% opacity unifies the gradient-mesh with the typography into a single textured surface. **Underline-Draw Animation System:** All interactive text elements (links, navigational items, section headers on hover) use an **underline-draw** animation: a 2px line in #C4973B that draws from left to right using a CSS background-size animation. The initial state is `background-size: 0% 2px`; the hover/active state transitions to `background-size: 100% 2px` over 350ms with a cubic-bezier(0.25, 0.46, 0.45, 0.94) easing. The underline is positioned at `background-position: 0 100%` (bottom of text). On mouse-out, the line retracts from right to left by transitioning background-position to `100% 100%` before resetting. This creates a fluid, calligraphic gesture that reinforces the hand-made, textured aesthetic. ```css .draw-underline { background-image: linear-gradient(#C4973B, #C4973B); background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } .draw-underline:hover { background-size: 100% 2px; } ``` **Section Reveal on Scroll:** As users scroll into each new section, content elements fade in with a 600ms duration and 30px upward translate, staggered at 80ms intervals between sibling elements. This is triggered via IntersectionObserver at a threshold of 0.15 (element enters 15% into viewport). The easing is cubic-bezier(0.16, 1, 0.3, 1) -- a strong ease-out that starts fast and decelerates, creating the feeling of something settling into place naturally, like a leaf landing on a court surface. **The Mid-Section Pause:** At approximately 50% scroll depth, a full-viewport section uses the Evening Court color (#2E2219) as background, with the grain overlay intensified to 12% opacity and tinted warm amber. Text in this section switches to Fraunces at weight 700, 2.5rem, color #F6EDE0 -- a tonal inversion that creates a moment of visual rest, like stepping from the bright court into the cool interior of the clubhouse. The gradient-mesh in this section uses darker focal points (#6B5744 at 8% opacity blending into #2E2219), creating the subtle luminosity of candlelight on dark wood. **Floating Nature Motifs Animation:** Leaf shadow SVGs use a keyframe animation that combines translateX (range: -20px to 20px), translateY (range: -10px to 10px), and rotate (range: -5deg to 5deg) over a 25-35 second loop with ease-in-out timing. Each leaf has a randomized animation-delay (0s to 15s) to prevent synchronization. The animation is paused when the element is outside the viewport (detected via IntersectionObserver) to conserve resources. **Typography as Wayfinding:** The three typefaces serve strict navigational roles: Fraunces signals "stop and read this headline." Nunito signals "settle in and read this passage." Anybody signals "this is a label, a coordinate, a waypoint." Users should never have to guess what kind of content they are looking at -- the typeface tells them before they read a single word, the way the surface of a court (clay, grass, hard) tells a player what kind of game to expect before the first ball is struck. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, feature comparison tables, sticky navigation bars, hamburger menus, cookie consent banners styled as design elements. The site is a narrative, not a conversion funnel. ## Uniqueness Notes **Differentiators from other designs:** 1. **Grainy-Textured Aesthetic at 1% Frequency:** Only one other design in 80 uses the grainy-textured aesthetic. courts.studio treats grain not as a nostalgic Instagram filter but as a unifying material property -- a physical substrate that every element shares, binding gradient-mesh imagery, warm typography, and honeyed colors into a single tactile surface. The grain varies in density across the page (3%-12%), creating depth variation that no other design attempts. 2. **Gradient-Mesh Imagery at 1% Frequency:** Gradient-mesh is the rarest imagery type in the portfolio. While most designs rely on photography (62%) or minimal (96%) approaches, courts.studio uses pure CSS multi-point radial gradients as its primary visual content. No photographs, no illustrations, no icons -- just light itself, refracted through overlapping gradient fields that create the warm, luminous quality of honey held up to afternoon sun. This is imagery without images. 3. **F-Pattern Layout at 3% Frequency Reinterpreted Through Court Geometry:** The f-pattern is one of the rarest layouts, and courts.studio is the only design that maps it to a metaphorical spatial system (tennis court zones: baseline, service line, tramline). The layout narrows progressively from full-width to half-width as the user scrolls deeper, creating an experience of increasing intimacy and focus that mirrors the psychological progression of a tennis match from warm-up to decisive point. 4. **Expressive Variable Typography at 3% Frequency:** The use of Fraunces with its variable axes (opsz, WONK) and Anybody at extreme width (150%) creates a typographic system with more parametric range than any other design. The WONK axis on Fraunces produces letterforms that shift between conventional and playful depending on the heading context, while Anybody's extreme width creates a horizon-line quality unique in the portfolio. 5. **Honeyed-Neutral Palette with No Pure Black or White:** At 3% frequency, the honeyed-neutral palette is deeply underused. courts.studio enforces a strict no-#000000/no-#FFFFFF rule, building all contrast from the warm brown-to-ivory spectrum of actual honey varieties. This creates a visual warmth that is materially impossible to achieve with conventional neutral palettes. **Chosen Seed:** aesthetic: grainy-textured, layout: f-pattern, typography: expressive-variable, palette: honeyed-neutral, patterns: underline-draw, imagery: gradient-mesh, motifs: nature, tone: friendly **Avoided Overused Patterns:** scroll-triggered (97%), parallax (81%), stagger (55%), centered layout (98%), warm palette (100%), mono typography (98%), photography imagery (62%), vintage motifs (66%), playful aesthetic (97%), minimal imagery (96%). courts.studio achieves warmth through palette and texture rather than the overused "warm" designation, uses f-pattern instead of centered, and relies on gradient-mesh instead of photography or minimal imagery.