# Design Language for relativity.studio

## Aesthetics and Tone

relativity.studio is the portfolio-observatory of a (fictional) design practice that treats **spacetime itself as the medium**. The whole site is built on one idea borrowed from general relativity: *mass tells space how to curve, and curved space tells things how to move.* Here, the "mass" is **content** — a project title, a paragraph, a thumbnail — and every block of content visibly **dents the coordinate grid it sits on**, pulling neighbouring lines, light, and even the cursor into a gentle gravity well. Nothing in the layout is on a flat plane; everything rests in a slightly sagging fabric.

The tone is **calm, exact, and quietly awed** — the register of a physicist who finds the universe beautiful precisely because it is lawful. Not "tech bro futuristic," not neon cyberpunk: more like the inside of a clean optics lab at 2 a.m., or the margins of Einstein's 1915 notebooks. Deep slate-indigo void, a single warm "starlight" accent, faint chalk-white annotations in the margins as if someone were working a derivation alongside you. Type is set like equations: generous leading, hanging punctuation, the occasional Greek letter (Λ, τ, κ) used as an actual glyph rather than decoration. The site should feel like it is *thinking*, and like it would be just as happy if you stood still and watched the grid breathe for ninety seconds as if you clicked anything.

Mood words: **lawful, lucent, weightless-yet-heavy, contemplative, instrument-grade.** It is mysterious-moody in palette but never gloomy — there is always one warm point of light, like a distant lensed quasar, holding the composition together.

## Layout Motifs and Structure

The page is a **full-bleed, layered-depth canvas with an immersive vertical scroll** — but the scroll is reframed as *moving through gravitational potential*, not down a document. Three stacked planes:

1. **Plane Z-0 — THE FABRIC (fixed, generative).** A full-viewport `<canvas>`, never scrolls. It draws a perspective coordinate mesh (think a chessboard receding to a horizon) that is *deformed in real time* by "masses." Each content section, when it enters the viewport, registers an invisible mass at its centroid; the mesh sags toward it (a smooth `1/(r²+ε)` well, clamped), grid lines curving like ruled paper held over a marble. Light "photons" (tiny moving dots) travel in straight lines until they pass a well, then bend — visible **gravitational lensing**. The cursor is itself a small mass: wherever the pointer goes, a shallow dimple follows it with spring easing.

2. **Plane Z-1 — THE FRAMES (the content).** Content lives in **six numbered "frames of reference,"** each a wide, low-slung panel that floats just above the fabric with a soft contact-shadow puddled *under and slightly stretched* — as if it genuinely weighs on the grid below it. Frames are deliberately **asymmetric and broken-grid**: never centered, they hang from alternating edges, and the body text inside them is set ragged on a baseline grid so the column edges echo the curved gridlines behind. Sections:
   - **FRAME 00 — REST FRAME.** The wordmark `relativity.studio` and a one-line manifesto, set against the deepest, least-deformed patch of fabric. A faint readout: `Λ = present`, `c = invariant`, `studio = open`.
   - **FRAME 01 — THE PRINCIPLE.** The studio's stance in three short propositions, each numbered like an axiom (here the mass is heavy: the grid sags most under this frame).
   - **FRAME 02 — WORLDLINES.** The work/projects, presented as a **timeline-vertical of curving "worldlines"** — each project is a path that leaves a common origin, bends as it accumulates "mass" (scope), and the user reads along it. No card-grid; the projects are *trajectories*.
   - **FRAME 03 — DILATION.** The process, written as a thought-experiment: "near a deadline, time runs slow…" — paragraphs that visually compress their leading toward the bottom of the frame, a typographic time-dilation gradient.
   - **FRAME 04 — THE LENS.** A single large "observed object" — one featured piece — shown *through* the deforming canvas: its container is given a CSS-warped backdrop so the fabric behind it appears bent, like looking at a galaxy behind a cluster.
   - **FRAME 05 — HORIZON.** Contact, set at the very bottom where the fabric curves down past the viewport edge into black; a quiet line of contact details, an email written as `you @ the same reference frame`.

3. **Plane Z-2 — THE MARGIN (annotations).** Thin chalk-white hand-margin notes pinned to the far left/right gutters: `// geodesic, not a straight line`, `// κ ≈ 8πG/c⁴`, `// you are here ◦`. They scroll at a slightly different rate (subtle parallax) so they read like a second voice working the problem in the margin of the page.

Negative space (the undeformed fabric) is **load-bearing**: most of the viewport, most of the time, is just the quiet curving grid. Frames are islands of mass in a lot of empty, lawful space.

## Typography and Palette

**Type system — Google Fonts only:**

- **Display / wordmark / frame ids:** `Fraunces` — an old-style "soft serif" with optical sizes and a wobble of warmth; used at large sizes for the wordmark and the `FRAME 0X` labels, set in its highest optical size with a slightly raised "soft" axis so it reads like a beautifully printed physics monograph cover. Tracked tight, mixed-case.
- **Body / propositions / worldline labels:** `Spectral` — a screen-tuned serif with low contrast and tall x-height, set generously (`line-height: 1.85`, `max 64ch`), with hanging punctuation and old-style figures. This is the voice of the prose; it should feel like a well-set page from a Princeton physics text.
- **Readouts / margin annotations / numeric overlays / equations:** `Spline Sans Mono` — a humane, low-key monospace, weights 300–400, used for the `Λ = present` style readouts, the chalk-margin notes (in a faint near-white), axis ticks on the grid, and inline glyphs like `τ`, `κ`, `c`. Letter-spacing `+0.04em`, often lowercase.
- One controlled flourish: **Greek letters and the lensing arc** may be rendered in `Fraunces` italic at large scale as standalone graphic glyphs in the gutters — Λ for "frame 00," τ for "frame 03 dilation."

**Palette (use as CSS custom properties):**

- `--void`: `#0B1020` — the deepest spacetime background, a near-black with a drop of indigo. The canvas clears to this.
- `--fabric`: `#16203A` — mid-tone slate-indigo; the resting colour of the coordinate mesh fill between lines.
- `--gridline`: `#33446B` — cool steel-blue for the undeformed gridlines; lines *brighten toward* `--gridline-hot` as their local curvature increases.
- `--gridline-hot`: `#6E86C0` — luminous periwinkle for highly-curved lines right at the lip of a well.
- `--starlight`: `#F4C26B` — the one warm accent: lensed-quasar gold. Used for the moving "photons," the active worldline, the wordmark accent dot, link underlines, and the single point of light in FRAME 04.
- `--chalk`: `#E8ECF6` — faint blue-white for body text and margin annotations (used at ~0.7 opacity for the margins, full for body).
- `--redshift`: `#C6573E` — a muted brick-red, used *only* for the FRAME 03 "time dilation" gradient and for the email line in FRAME 05 (light "redshifted" as it climbs out of the gravity well at the bottom of the page).
- `--horizon`: `#05070E` — true near-black, the colour the fabric fades to at the very bottom edge ("event horizon").

Contrast pairing: `--chalk` on `--void` for all reading; `--starlight` on `--void` for emphasis; gridlines live entirely in the `--fabric`→`--gridline-hot` ramp so they never compete with text.

## Imagery and Motifs

- **The deformable mesh (the centrepiece — generative, zero image files).** A perspective grid drawn each frame on the fixed canvas; vertices displaced by the sum of active gravity wells (content centroids + cursor); gridlines drawn as curved polylines whose stroke colour interpolates `--gridline → --gridline-hot` by local displacement and whose width hairlines up where curvature is steepest. The grid *breathes* — a slow global sine wobble — so even at rest it looks like a held membrane, not a static texture.
- **Gravitational lensing of "photons."** ~40–80 tiny `--starlight` dots launched from the screen edges along straight worldlines; each frame their velocity is bent by the same well field (a cheap deflection `∝ mass/r²` applied perpendicular to motion); near a deep well a few of them slingshot — visible orbits — then escape. This is the only "animation that does work": light obeying the same geometry as the grid.
- **Contact shadows that stretch.** Each frame casts a soft radial shadow on the fabric that is *elongated away from the page's notional light* and *darker the heavier the frame's "mass"* — a CSS box-shadow plus a canvas-drawn smudge so the frame really seems to press into the membrane.
- **Worldlines.** In FRAME 02, each project is an SVG `path` that springs out of a shared origin point, gently curving (a Bézier whose control point is pulled toward that project's "mass"); the active one glows `--starlight` and its label rides along it. Hovering a worldline draws it (path-draw-svg) from origin to tip.
- **Margin glyphs & annotations.** Large faint `Fraunces`-italic Greek letters (Λ, τ, κ, ε) anchored in the gutters; chalk-mono one-liners that look like a working derivation. A tiny `◦ you are here` marker slides down the left gutter tracking scroll position along the "potential."
- **Light cones (a quiet recurring motif).** Section dividers are drawn as faint outward-opening "light cone" wedges (two thin lines diverging at ~45°) rather than rules — past below, future above.
- **No photography, no stock, no gradient-mesh hero panels.** Everything is line, light, type, and curvature.

## Prompts for Implementation

Build relativity.studio as **one HTML page, one CSS file, one ES module** — no framework, no build step. Target a contemplative ~90-second visit; reward both the scroller and the sitter.

- **The canvas is the page's bedrock.** One full-viewport `<canvas>` fixed at `z-index:0`, cleared to `--void` each `requestAnimationFrame`. Maintain a list of `masses[]`: each content `<section class="frame">` contributes one mass at its on-screen centroid with strength scaled by its data attribute (`data-mass="0.4|0.7|1.0|…"`), recomputed on scroll/resize via `getBoundingClientRect`; plus one transient mass that springs toward `pointermove` (stiffness ~0.08) and fades on `pointerleave`. The displacement field is `Σ mᵢ · k / (rᵢ² + ε²)` clamped to a max sag; vertices = a grid in perspective space, displaced *downward and toward* each mass in screen space.
- **Draw order each frame:** clear → faint starfield dust (slow-drifting points) → the mesh polylines (colour/width by local |displacement|) → the lensed photons (update velocities through the well field, wrap at edges) → faint light-cone dividers at section boundaries. All content is real DOM on top; the canvas never holds text.
- **Scroll = potential, not pixels.** Use scroll position to (a) translate the content planes, (b) parallax the margin annotations at ~0.85×, (c) move the `◦ you are here` gutter marker, and (d) slowly rotate the grid's vanishing point so descending the page feels like sinking into a well — near FRAME 04 the grid is at its most warped, then it relaxes toward FRAME 05's horizon fade.
- **FRAME-specific storytelling:**
  - FRAME 00: wordmark types in once (`typewriter-effect`, then settles); the readout line updates `studio = open/quiet` based on local time.
  - FRAME 01: as it enters, its mass ramps up over ~0.6s (`spring`) so the viewer *sees* the grid sag under "the principle."
  - FRAME 02: worldlines `path-draw-svg` in on enter, staggered; hover springs the active one wider and pulls a `--starlight` bead along it.
  - FRAME 03: the paragraph leading literally interpolates from `2.0` at the top to `1.15` at the bottom on scroll, with a `--redshift→--chalk` text-colour gradient — typographic time dilation.
  - FRAME 04: the featured piece's container gets a `backdrop-filter` plus a subtle CSS skew/scale tied to the underlying well so the fabric behind it visibly bends; a single `--starlight` dot pulses at its focus.
  - FRAME 05: the fabric fades `--fabric→--horizon` past the fold; contact line in `--redshift`, gently rising/blurring on enter as if climbing out of the well.
- **Motion vocabulary:** spring, stagger, parallax, path-draw-svg, cursor-follow, fade-reveal, blur-focus. **No** card-flip, no counter-stat tickers, no bounce. `prefers-reduced-motion`: freeze the mesh into one tasteful warped still, kill the photons, keep the type.
- **AVOID entirely:** CTA-button stacks, pricing tables, stat-grids, testimonial carousels, feature-card matrices. There is no "Get Started." The site ends at the horizon and that is the point.

## Uniqueness Notes

**Differentiators from other designs in this codebase:**

1. **Layout that physically responds to its own content.** Where the corpus overwhelmingly leans on `card-grid` (91%) and static `full-bleed` heroes, here every section is a *gravitating mass* that visibly deforms a live coordinate mesh and bends the light crossing it — the layout's geometry is computed from where the content currently is on screen. The page isn't decorated with physics; it's *governed* by it.
2. **No photography, no gradient-mesh, no glassmorphism.** Against `photography` 98%, `gradient` 94%, and `glassmorphism` 82% in the corpus, this site has zero images and zero frosted panels — the entire visual field is hand-drawn line, curvature, and a single warm point of light. The decoration is the subject (a deformable spacetime fabric), not a backdrop.
3. **Scroll reframed as gravitational potential, with a margin "derivation" voice.** Most immersive-scroll sites move a parallax background; here scrolling is descent into a well — the grid's vanishing point rotates, contact-shadows stretch, light "redshifts" at the bottom — and a second typographic voice (chalk-mono Greek annotations at ~0.85× parallax) works the equations in the gutters. The combination of physics-as-layout-engine + annotated-margin narration doesn't appear elsewhere.
4. **Restrained, instrument-grade palette and serif-led type.** A slate-indigo void with exactly one gold accent and a `Fraunces`/`Spectral`/`Spline Sans Mono` trio reads like a physics monograph — deliberately apart from the warm/gradient/dopamine norm.

**Chosen seed / style:** `generative art background` — extended into "generative spacetime fabric as the literal layout substrate."

**Avoided patterns from frequency analysis:** glassmorphism (82%), hand-drawn-illustration look, photography (98%), gradient-mesh imagery, card-grid (91%) layout, counter-animate stat tickers, dopamine/neon palette — none are used.
<!-- DESIGN STAMP
  timestamp: 2026-05-11T08:26:45
  domain: relativity.studio
  seed: seed
  aesthetic: relativity.studio is the portfolio-observatory of a (fictional) design practice ...
  content_hash: 4963c646b604
-->