# Design Language for relativity.quest
## Aesthetics and Tone
relativity.quest is a **dark atlas of spacetime graffiti** — as if Einstein spray-painted field equations across the underbelly of a mountain highway overpass, and someone photographed it at dusk, when the gradient sky turns violet and the data starts to bleed. The site lives in that exact moment: the intersection of raw urban mark-making and sublime physics, rendered in a palette that feels simultaneously cosmological and street-level.
The mood is **mysterious-moody with gravitational weight**: every section has mass, every transition warps the surrounding space. The visitor doesn't scroll — they *fall* through a gravitational well of content, pulled deeper into the domain's strangeness. Graffiti serves not as decoration but as epistemology — jagged tags spelling out relativistic concepts (TIME DILATION, MASS-ENERGY, SPACETIME) are the primary content layer, rendered in thick rounded-sans letterforms that feel simultaneously wild and precise.
The visual inspiration draws from three sources colliding:
1. **Urban tunnel photography** — the angular perspective of a mountain freeway tunnel, receding into darkness, walls tagged with luminescent equations
2. **Gravitational lensing data visualizations** — rings, arcs, and warped light paths rendered as glowing SVG splines
3. **Moody gradient skies at altitude** — the palette of twilight above the treeline, where violet transitions to indigo transitions to the deep black of space
Everything is rendered with the confidence of someone who has tagged a thousand walls and also solved a thousand differential equations. Rough where roughness carries meaning. Precise where precision carries awe.
## Layout Motifs and Structure
The page is structured as a **hero-dominant vertical descent**, where the viewport is owned by a single immersive composition that occupies 100svh and sets the entire atmospheric contract before any information is disclosed. Below the hero, content arrives in staggered asymmetric panels — never centered grids, never equal columns.
**Hero Architecture:**
- Full-viewport dark canvas with a receding tunnel perspective drawn in thin SVG lines (vanishing point centered, walls angled at ~18°)
- Mountain silhouettes layered as SVG fills at the base — three depth planes at #0d0020, #1a0035, #2d0055
- Gravitational lens rings centered on the vanishing point — 4 concentric ellipses with heavy gradient strokes, glowing violet-to-cyan
- The domain name `relativity.quest` spray-painted in the hero center as an oversized graffiti tag — thick rounded letterforms, hand-drawn path effect, #e040fb fill with #7c4dff shadow offset
**Below the fold — asymmetric content descent:**
- Section 1 ("MASS"): Left-heavy 70/30 split — large graffiti concept tag on left, data-viz bubble cluster on right
- Section 2 ("ENERGY"): Full-width dark panel with a kinetic equation rendered as animated SVG paths writing themselves
- Section 3 ("CURVATURE"): Right-heavy 30/70 split — mountain skyline silhouette on left, warped grid visualization on right
- Section 4 ("OBSERVATION"): Three staggered cards at 15° diagonal offset, hover-lift effect drops 24px shadow
- Footer: Narrow dark strip with spray-paint texture, coordinate system origin marker
**Spatial principles:**
- Negative space is gravitationally heavy — emptiness has mass and pulls the eye
- No horizontal rules or dividers — sections breathe into each other through fade transitions
- All text alignment is intentionally off-center or angled (never purely center-aligned block text)
- Cards and panels use `border-radius: 4px` — barely rounded, just enough to feel tactile
## Typography and Palette
**Typography — rounded-sans vocabulary, all from Google Fonts:**
- **Primary display (hero tag, H1):** `Nunito` (Google Fonts, weight 900 Extra-Bold, `font-style: italic`). Used at `clamp(4rem, 10vw, 8rem)` for the hero graffiti tag. Letter-spacing -0.02em for condensed spray-painted density. Applied with a subtle `text-shadow: 4px 6px 0px #3d0060` for depth offset that reads as graffiti perspective.
- **Secondary headers (section titles, concept tags):** `Nunito` weight 700, uppercase with `letter-spacing: 0.08em`. Used for the large graffiti concept words at `clamp(2.4rem, 6vw, 4.8rem)`. Color alternates between #e040fb (neon violet) and #00e5ff (electric cyan) to create visual rhythm.
- **Body and data labels:** `Nunito Sans` (Google Fonts, weight 400/600). `clamp(0.9rem, 1.5vw, 1.1rem)`. Color #c8b8d8 (soft lavender-gray for readability on dark backgrounds). Used for equation labels, axis legends, and all prose content.
- **Monospace data (equations, coordinates):** `Space Mono` (Google Fonts, weight 400). `clamp(0.8rem, 1.2vw, 0.95rem)`. Color #7c4dff (deep violet) for equations that appear inside data visualization panels. Used for all LaTeX-like notation displayed as text.
**Palette — gradient with mountain-dusk cosmology:**
- `#05000f` — Near-absolute black, the ground of everything. Page background, hero base.
- `#0d0020` — Deep space indigo. Mountain silhouette foreground layer, dark panel backgrounds.
- `#1a0035` — Cosmic purple-black. Mid-ground mountain layer, card backgrounds.
- `#3d0060` — Violet-black. Section divider gradient terminal color, shadow depths.
- `#7c4dff` — Deep electric violet. Primary accent: equation text, data node centers, focus rings.
- `#e040fb` — Neon magenta-violet. Hero graffiti tag color, primary highlight, active states.
- `#00e5ff` — Electric cyan. Secondary accent: data-viz lines, gravitational lens rings, hover states.
- `#c8b8d8` — Soft lavender-gray. Body text color, readable against all dark backgrounds.
- `#f5e6ff` — Near-white violet. Pull quotes, critical labels, maximum legibility text.
**Gradient vocabulary:**
- Hero sky gradient (CSS): `background: radial-gradient(ellipse at 50% 0%, #3d0060 0%, #1a0035 40%, #05000f 100%)`
- Lens ring stroke: `stroke: url(#lensGrad)` where `lensGrad` interpolates `#e040fb → #7c4dff → #00e5ff`
- Card hover gradient: `background: linear-gradient(135deg, #1a0035 0%, #0d0020 100%)`
- Mountain layer deepening: three SVG fills at #0d0020, #1a0035, #2d0055 with 40% opacity each
## Imagery and Motifs
**Gravitational data-viz as primary imagery system:**
- Warped spacetime grid — SVG mesh of 16×16 bezier curves distorted toward a central attractor point, stroke #7c4dff at 0.5px, fading toward edges
- Gravitational lens rings — 4 concentric SVG ellipses centered at vanishing point, each with a gradient stroke (#e040fb → #00e5ff), opacity decreasing outward (0.9, 0.6, 0.4, 0.2)
- Light path arcs — 6 parametric curves arcing around the lens center, stroke #00e5ff at 1px, animated with `stroke-dashoffset` to appear as light being bent
**Mountain landscape silhouettes (SVG, layered):**
- Three depth planes of jagged mountain ridgelines drawn as closed SVG polygons
- Foreground ridge: #0d0020, most detail, 40% of viewport height from bottom
- Mid ridge: #1a0035, smoother profile, 25% of viewport height from bottom
- Background ridge: #2d0055, barely visible against hero, 15% of viewport height from bottom
- All ridges have a faint gradient fill that bleeds from ridge color to transparent at base
**Graffiti motifs (SVG path art):**
- Spray-can drip lines: thin SVG paths with rounded endcaps running 60–120px below key letterforms
- Tag halos: `filter: blur(8px)` colored aura behind primary display text simulating spray overspray
- Texture suggestion: `background-image: url('data:image/svg+xml,...')` with a fine noise pattern (SVG feTurbulence) at 3% opacity over all dark surfaces — simulates concrete wall texture without photograph
**Hover-lift pattern:**
- All cards and interactive panels: `transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease`
- Resting state: `transform: translateY(0); box-shadow: 0 4px 24px rgba(124, 77, 255, 0.15)`
- Hover state: `transform: translateY(-12px); box-shadow: 0 20px 60px rgba(224, 64, 251, 0.35), 0 8px 24px rgba(0, 229, 255, 0.2)`
- The double-layer shadow on hover simulates gravitational lensing of light from two sources
**Motion vocabulary:**
- Lens rings pulse at `animation: lensBreath 6s ease-in-out infinite; transform: scale(1) → scale(1.03) → scale(1)` with subtle opacity shift
- Spacetime grid distorts on scroll: `transform: perspective(800px) rotateX(calc(var(--scroll) * 0.02deg))` creating parallax depth
- Equation SVG paths self-draw using `stroke-dashoffset` animation over 2.4s on viewport entry
- Mountain layers move at 0.3× scroll speed (slowest, background) to 0.85× (foreground) for parallax depth
## Prompts for Implementation
Build relativity.quest as a **single, gravitationally immersive scroll journey** through the concepts of special and general relativity, told through the visual language of urban graffiti on mountain walls, with data-viz as the connective tissue.
**Macro structure (top to bottom):**
1. **HERO — `100svh`**: Full-viewport dark canvas. Mountain silhouettes layered in three SVG depth planes. Gravitational lens rings centered. Spacetime grid mesh as faint background layer. Hero graffiti tag `relativity.quest` in Nunito 900 italic #e040fb, letter-spacing -0.02em, positioned 40% from top. Tag has spray-drip lines below letters. Below the tag, a one-line descriptor in `Space Mono` 400 #7c4dff: `// where mass curves the quest`. No CTA, no button. Just atmosphere and a slow downward scroll cue (a subtle pulsing `↓` arrow at viewport bottom center, color #c8b8d8).
2. **MASS section**: Full-width dark panel `#0d0020` background. Left 65%: giant graffiti tag `E=mc²` in Nunito 900 #e040fb at ~10vw, with drip motifs. Right 35%: animated SVG data-viz showing particle mass as bubble chart (bubbles in #7c4dff, #e040fb, #00e5ff at varying radii, with `spring` hover responses that expand bubbles 120% on hover).
3. **CURVATURE section**: Asymmetric layout. Full-width SVG warped spacetime grid in background. Text content right-aligned in a 45% panel on the right edge — graffiti section header `CURVATURE` in Nunito 700 #00e5ff, body in Nunito Sans 400 #c8b8d8. Left 55%: large SVG of a planet-mass distorting the spacetime grid, drawn with bezier curves compressing toward a heavy center.
4. **TIME DILATION section**: Full-width dark panel. A single large central SVG: two clock faces rendered as graffiti — thick Nunito letterforms for numerals, spray-halo behind each clock. One clock runs fast, one slow — `animation: clockHandFast` and `clockHandSlow` CSS keyframe animations rotate the SVG hands at different rates. Below: a short paradox statement in Nunito Sans 600 #f5e6ff.
5. **OBSERVATION section**: Three horizontally staggered cards (each `width: 380px`, diagonal offset: middle card `translateY(-40px)`). Cards have `border-radius: 4px`, `background: linear-gradient(135deg, #1a0035, #0d0020)`. Each card has a graffiti-styled header in Nunito 700, a data-viz icon in #00e5ff, and a body paragraph. Hover-lift as specified above.
6. **FOOTER**: Full-width narrow strip (100px height). Background `#05000f`. Left: `relativity.quest` in Nunito Sans 400 #7c4dff at 0.85rem. Center: a tiny coordinate origin `(0,0)` marker in #3d0060. Right: a single spray-can drip SVG motif in #e040fb at 20% opacity.
**Implementation notes:**
- All SVGs are inline (not `![]()
`) to allow CSS animation and filter access
- Use `IntersectionObserver` to trigger section entrance animations
- The spacetime grid in the hero is a `