# Design Language for SSETTL.com ## Aesthetics and Tone SSETTL.com — read aloud as "settle," the doubled-S a soft hush like steam off a teacup or sediment drifting through still water — is staged as a **digital scriptorium at the settling hour**: that exact 47-minute interval between civil dusk and astronomical twilight, when a private library window goes from cobalt to ink and the brass reading lamp begins to feel necessary. The aesthetic is **light-academia**, but light-academia rotated 180 degrees away from its usual sunlit-Oxford cliché: not the morning common-room with golden motes in beech-wood air, but the same room *seventeen hours later* — same vellum, same Greek dictionary, same fountain pen, but now the walls are the color of deep ocean trench and the only warm thing on screen is the slow respiration of a single oil-lamp circle behind the masthead. The mood is **futuristic-cutting-edge**, which is the load-bearing tension of the whole site. Light-academia and midnight-blue together are a known nostalgic chord — but SSETTL refuses that chord. It treats the scriptorium as a *forward-projecting* technology: a piece of cognitive architecture humans built five hundred years ago that is, measured against any AI agentic stack, still the most efficient interface we have for letting ideas come to rest. The page argues, by being itself, that the future of "settling" — settling disputes, settling debts, settling the question, settling the dust — looks less like a court order or a consensus-mechanism and more like a leaf reaching the floor of a forest. The tone is therefore not nostalgic. It is the voice of a researcher who has read every white paper on agreement, found them all clattering, and gone to bed with a Loeb edition instead, but who is also writing tomorrow's protocol on the back of the bookmark. The reader should feel the way you feel when you walk into a college library at 9:47 PM in November, the radiators just starting to tick, three other people scattered across thirty desks, and someone two carrels over has fallen asleep on a translation. Hushed. Permitted. Slightly cold at the wrists. Not lonely — *attended to* by the room. ## Layout Motifs and Structure The page is a single continuous **organic-flow** composition — explicitly *not* a card-grid, not a stacked-section landing, not a bento. Sections do not begin and end at orthogonal lines; they bleed. The reading lane meanders. Imagine a botanical specimen press where someone laid out twelve pressed leaves, then drew a single meandering ribbon between them — the page is the ribbon, and the leaves are the seven vignettes. The vertical scroll is the time axis, but the horizontal axis breathes between roughly 38vw (the narrowest passages, like the throat of an hourglass) and 86vw (the widest oxbow bends, where pull-quotes spread like spilled ink). Structurally there are seven movements, named after what is being settled in each: 1. **The Settling of the Page** (0–110vh) — masthead and the oil-lamp ignition. 2. **The Settling of Sediment** (110–220vh) — what SSETTL.com proposes, told as a falling-particle simulation. 3. **The Settling of an Argument** (220–340vh) — dialectic shown as two columns that lean toward each other and finally interleave. 4. **The Settling of a Score** (340–460vh) — accounting and reconciliation imagery, but rendered as a stave of botanical specimens. 5. **The Settling of the Light** (460–580vh) — a slow scroll-driven dim of the page background from #1B2A4E down to #0A1024, accompanied by margin annotations becoming visible only as the room "darkens." 6. **The Settling of the Question** (580–700vh) — three open questions the project does not answer, set in the margin like marginalia on an old codex. 7. **The Settling of the Dust** (700–820vh) — colophon, signature, a final SVG leaf that finishes its drawing exactly as the page-bottom is reached. The horizontal layout within each movement is built on a **4-column flex-meander**: a baseline 12-column grid is referenced *only* for snapping marginalia; the body text is a single column that drifts left and right within columns 3–10 according to a hand-tuned `clip-path` per scroll-tick. Marginalia (handwritten in the margin) cluster in columns 1–2 on left-leaning passages and 11–12 on right-leaning passages, with the body pulling away from the marginalia as it drifts — so the eye always finds a quiet right margin or a quiet left margin, never both crowded at once. There is **no top navigation bar, no hamburger, no sticky CTA, no pricing slab, no stat-grid**. The only "interface" is a thin SVG **path-draw** ribbon along the left edge, a single 1px ink-stroke that grows downward as you scroll, with seven small leaf-shaped nodes at the seven movements; clicking a leaf is the *only* navigation, and even then it does not jump — it scroll-anchors with a 3.4s eased glide so the reader feels the distance. ## Typography and Palette **Typefaces — Google Fonts only, exploiting variable axes hard:** - **Cormorant Garamond** (variable, weight 300–700, italic and roman) — display and headline face. Set at 92–164px for movement titles like "II. The Settling of Sediment," at weight 380, with letter-spacing -0.018em and a slight optical pull on the descenders. Cormorant is chosen against the more obvious Playfair because Cormorant's terminals are *sharper* — almost steel-nibbed — which keeps the light-academia register from collapsing into bridal-invitation territory. - **Recursive** (variable, full 5-axis: MONO, CASL, slnt, wght, CRSV) — the **expressive-variable** spine of the entire site. Recursive's Casual axis is animated *live* on scroll so that body paragraphs at the top of a movement open in CASL=0 (linear, technical, almost-Inter), drift toward CASL=0.8 mid-movement (rounded, humanist, journal-like), and resolve back to CASL=0.2 at the movement's footnote. The slnt axis is also driven, more subtly, by cursor-y position: text leans slightly toward the cursor, like a candle flame leaning toward a draft. This is the load-bearing "expressive" decision — Recursive is *not* used as a static font on this site at any point; every paragraph is a tiny variable-font animation. - **Caveat** (variable, weight 400–700) — handwritten marginalia, footnotes in the gutters, the small "—Ed." annotations in the corners. Set at 16–22px, color #B8C5E0 (the muted blue-gray of pencil on dark paper). Used sparingly: roughly 14 marginalia across the entire 820vh scroll, no more. - **JetBrains Mono** (variable, weight 100–500) — the *only* place monospace appears is in three "settled" code-like fragments where the project's small technical conceit (settlement-as-protocol) is shown as a pseudo-RFC line: `SETTLEMENT/0.1 227 Sediment Reached`. Used three times total. **Palette — eight values, midnight-blue family with one warm exception:** - `#0A1024` — abyssal ink (page background after movement V dims) - `#0E1730` — deep midnight (default page background) - `#1B2A4E` — settled blue (page background at top of scroll, lightest the page ever gets) - `#2D3F6B` — column-rule and quiet UI lines - `#5B7BB8` — body text default (Recursive, weight 360) - `#B8C5E0` — marginalia blue-gray (Caveat, marginalia and small caps) - `#E8E4D6` — vellum paper (used *only* on the four pressed-leaf specimen vignettes, as a small inset card) - `#E8B26A` — the single warm value, the **oil-lamp ember**: used on exactly one element per movement (a dropcap, a leaf vein, a footnote bullet), never more, the way a single candle gives a whole room its color memory. The palette ratio across any viewport is roughly 78% midnight-blue family, 14% blue-gray text, 6% vellum (only when a leaf specimen is on screen), 2% ember. ## Imagery and Motifs The visual language is **gradient-mesh** anchored to a single recurring motif: the **leaf-organic** specimen. There is no photography on this site — none. Every image is either a CSS gradient-mesh, an SVG botanical line drawing, or a generated particle field. This is a deliberate refusal: a scriptorium does not display photographs. **The Settling Mesh.** The page background is not flat midnight blue. It is a slow, low-frequency CSS `radial-gradient` mesh of seven overlapping ellipses in the four darkest palette values — the meshes drift on a 47-second loop (the same 47-minute settling interval, scaled), so the page feels like it is being lit by a slowly moving oil lamp on a desk just out of frame. The mesh is rendered with `mix-blend-mode: screen` over the base color so the brightest spot of the mesh — typically wandering in the top-third of viewport — gives the page its "where the lamp is" cue. As the reader scrolls past movement V ("The Settling of the Light"), the mesh's brightest ellipse fades from 0.18 alpha to 0.06 alpha and shifts hue from `#1B2A4E` toward `#0A1024`. The room dims. Literally. **The Specimen Leaves.** Seven SVG leaf specimens — one per movement — each a single-stroke ink drawing of a real botanical species (Ginkgo biloba, Quercus robur, Acer saccharum, Olea europaea, Salix alba, Fagus sylvatica, Hedera helix), each with a handwritten Linnaean caption set in Caveat. Each leaf is implemented as a single SVG `` with `stroke-dasharray` set to its own length; the leaf draws itself over 2.4–3.8 seconds on entering viewport via `IntersectionObserver`, and the petiole (stem) draws *last*, terminating in a single ember-color dot at the cut end — the moment the leaf was pressed. This is the **path-draw-svg** pattern, but applied with botanical specificity: each leaf's drawing speed is tuned to its actual visual weight, so the ginkgo (broad, fan-veined) draws slower than the willow (narrow, simple). **Falling Sediment.** In Movement II ("The Settling of Sediment"), a particle system of roughly 240 micro-flecks (1–3px each, in `#5B7BB8` at varying alpha) drifts downward at terminal-velocity-curves through the section's 110vh, then *settles* — each fleck has a target Y coordinate where it stops moving and joins a slowly-thickening band along the section's lower edge. By the end of Movement II, the band is a visible sediment layer, and that layer is the *next* section's top border. Sediment continues to accumulate movement-by-movement; by Movement VII the bottom of the page has roughly seven horizontal strata, like a varved lake-bed core. **The Marginalia Drift.** Caveat-set marginalia (in `#B8C5E0`) are placed against the gutter. When the reader's cursor approaches within 240px of a marginalium, the marginalium drifts 6px *away* from the cursor, as if shy. Move the cursor closer, it retreats further. Move away, it returns to its original position with a 1.4s eased return. This is the only cursor-follow gesture on the site, and it is applied only to marginalia — body text never reacts to the cursor. **No icons.** No SaaS icon set. No Heroicons, no Phosphor, no Lucide. Where an icon would normally appear (e.g., to indicate a footnote), the page uses either a tiny Caveat-set asterisk, a Caveat-set superscript number, or a single SVG fern frond. ## Prompts for Implementation Build SSETTL.com as a **single static HTML document, one continuous 820vh scroll**, no SPA, no router, no client-side framework heavier than vanilla JS plus a `IntersectionObserver` and a single `requestAnimationFrame` loop. The reader arrives, scrolls once, leaves with the residue of having been somewhere quiet. **Boot sequence (0–1.8s after DOMContentLoaded):** The page opens on a flat `#1B2A4E` field — no content visible, no logo. Over 1.8s the gradient-mesh ignites: the first ellipse fades up at the top-third, alpha 0 → 0.18, while a single SVG element in the masthead — a small oil-lamp glyph — ignites its inner `` from 0% to 18% opacity in `#E8B26A` with a `filter: blur(2px)` glow. As the lamp reaches 18%, the masthead text — `SSETTL` set in Cormorant Garamond at 168px, weight 320, letter-spacing -0.022em, color `#5B7BB8` — fades up underneath, and *only then* does Recursive's Casual axis begin to drive on the subhead. The subhead reads, in Recursive at 22px CASL=0.2 → 0.6 over 600ms: `the settling hour, in seven movements`. No CTA. No "scroll to begin" indicator. The path-draw ribbon on the left edge is already drawing — by 2.4s it has reached the first leaf-node, the ginkgo of Movement I. **Scroll-driven type animation:** Every paragraph in the body lane is wrapped in a `` with three custom CSS variables: `--casl`, `--slnt`, `--wght`, mapped to the Recursive variable axes. A single `scroll` listener (debounced via `rAF`) updates `--casl` per paragraph based on the paragraph's distance from viewport center: at center, CASL=0.8; at viewport edges, CASL=0.0. The `--slnt` is updated by `mousemove` based on cursor's vertical distance from the paragraph (paragraphs lean toward the cursor, max 4 degrees). The `--wght` axis is fixed per paragraph at 360 except for the dropcap of each movement, which is set to wght 540, opsz 144 (via Cormorant on the dropcap, *not* Recursive — the dropcap is the only place Cormorant appears in body flow). This is the load-bearing animation: the text is *literally alive* in a way no other site in the registry attempts. **Movement transitions:** There are no horizontal section dividers, no `
`, no underlines. Movements are separated by three signals only: (a) a 240vh of vertical breath, (b) the appearance of the next leaf specimen drawing itself in the right margin, and (c) the next sediment layer beginning to accumulate. The reader should never feel they have "entered a new section" — they should feel they have walked deeper into the same library. **The dialectic in Movement III:** Two columns of body text begin at viewport-left and viewport-right respectively, each 36vw wide, each disagreeing with the other (one column is the voice of "settle by ledger," the other "settle by leaf"). As the reader scrolls, the columns lean inward at 1.2 degrees of slnt per 100vh, until at the bottom of Movement III they are physically interleaved — alternate paragraphs from each column, no longer two voices but one. Implement via `transform: skewY()` driven by scroll position, with the merge happening via a CSS Grid `grid-template-areas` swap at the 86% scroll mark of the section. This is the only "trick" on the page; do it once, well. **The lamp-dim of Movement V:** At scroll position 460–580vh, the page's `--bg` CSS variable is animated from `#1B2A4E` toward `#0A1024` via a single `linear-gradient` overlay that ramps from alpha 0 to alpha 1. Simultaneously, a previously-invisible layer of marginalia (set with `color: #1B2A4E` — same as the bright background, therefore invisible) becomes legible against the new dark background. The room darkens; new text appears that was always there. Do not announce this. Let the reader notice. **The colophon:** Movement VII closes with a single Caveat-set line bottom-right: `pressed and settled, 2026, by candle-light` followed by a single ember-color SVG dot. The path-draw ribbon on the left has, by this point, reached its end — the last leaf-node is the ivy of Movement VII, and the ribbon terminates in a small ink-blot. No "back to top," no "subscribe," no footer links. The page ends. **Bias every implementation choice toward atmosphere over information density.** Generous leading (1.74 for body, 1.92 for marginalia). Long pauses between paragraphs (2.4em margin-bottom). Full-bleed quiet. AVOID at all costs: feature grids, pricing tiers, testimonial cards, stat counters, "trusted by" logo strips, hamburger menus, breadcrumbs, search bars, dark-mode toggle (the page is *already* the dark mode, and there is no light alternative — the site declines that whole binary). ## Uniqueness Notes This design's distinct departures from the other thirty completed designs and from default web aesthetics: 1. **Light-academia inverted into night.** Light-academia in the registry (and on the wider web) almost always reads sun-drenched, beige-and-cream, golden-hour. SSETTL.com pulls light-academia entirely into the midnight register — same scholarly affect, opposite color temperature. No other CMassC site does this inversion. The result is a register I have not seen elsewhere: a *late-shift* academia, a library at 11 PM, vellum read by lamplight. 2. **Recursive's Casual axis driven by scroll position, every paragraph.** Variable fonts on the web are overwhelmingly used as a load-time choice, not a continuously-animated parameter. SSETTL animates Recursive's CASL axis on every paragraph, every scroll tick. The body of the site is *literally* a font animation — it is the chosen `expressive-variable` typography pushed to its actual capability. No other CMassC design treats variable axes as a scroll-bound rendering pipeline. 3. **Sediment as accumulating page memory.** The falling-particle "sediment" of Movement II does not reset; it persists, and accretes layer-by-layer, all the way through Movement VII. By the end of the page, the bottom 4vh contains a varved-lake-core stratigraphy of every section the reader has scrolled past. This is the visual literalization of the domain's name — "settle" — and no other design in the registry uses particle persistence as a structural memory of scroll progress. 4. **The lamp-dim that reveals invisible marginalia.** Movement V dims the background, and the act of dimming surfaces text that was rendered same-color-as-the-bright-background and was therefore invisible until the room "darkened." This is a single subtle conjuring trick, used once, that reframes scrolling as *moving through an atmosphere whose lighting is changing*. No other site in the registry uses background-color-shift to surface previously-camouflaged content. 5. **No photography, no icons, no logos.** A categorical refusal. The visual vocabulary is exclusively (a) gradient-mesh atmospheres, (b) hand-drawn SVG botanical specimens, (c) particle systems, (d) variable typography. Most "light-academia" sites lean on photography (old-book photos, library interiors); this one rejects raster imagery entirely. 6. **The 47-second mesh loop tuned to a 47-minute civil-twilight interval.** The gradient-mesh's drift period is not arbitrary — it is the duration of civil twilight at 51° N latitude in early November, scaled 60:1 to seconds. The page is a tiny clock running at sixty times real-time. The reader will not consciously detect this, but the cadence of the lamp's wandering will feel *correct* in a way an arbitrary 30s or 60s loop would not. 7. **Cursor-shy marginalia.** The only cursor-reactive element on the page is the marginalia, which drift *away* from the cursor rather than toward it. This inverts the standard cursor-follow gesture (which is used for magnetic CTAs across the rest of the registry) and reads as bashfulness — the marginalia are, in voice, a nervous editor whispering at the edge of the page. **Chosen seed (from assignment):** `aesthetic: light-academia · layout: organic-flow · typography: expressive-variable · palette: midnight-blue · patterns: path-draw-svg · imagery: gradient-mesh · motifs: leaf-organic · tone: futuristic-cutting-edge` **Avoided patterns from frequency analysis:** - Avoided `hand-drawn` aesthetic (86%, oversaturated) — this is light-academia, not sketchbook. - Avoided `glassmorphism` (56%) — there is no frosted glass anywhere; the page's depth comes from gradient-mesh and particle stratigraphy, not blur. - Avoided `photography` imagery (93%, near-universal) — categorically no raster photography. - Avoided `card-grid` and `bento-box` layouts — replaced with organic-flow meander. - Avoided `parallax` (90%) — the page has zero parallax; sediment falls *forward* in z-space, but the background mesh does not parallax against the foreground. Scroll is a pure y-axis time signal, undisturbed. - Avoided `mono` typography as primary (90%) — JetBrains Mono appears exactly three times, as a deliberate intrusion, not a default. - Avoided `cursor-follow` magnetic CTAs (46%) — inverted into cursor-shy marginalia, the opposite gesture. - Avoided `gradient` palette (86%) and `warm` palette (86%) — the palette is solidly midnight-blue with one ember exception per movement.