---
name: Sightline
version: "1.0"
slug: sightline
tier: premium
price: 29
type: Museum / Institution
axis: "8 — Dimensional depth (scroll-travel enfilade)"
theme: light-museum-white-cube
gesture: "Scroll does not move the page — it moves the visitor. Rooms sit on a real Z axis (CSS perspective, one plane every 1600px); scrolling drives a camera that walks from room to room and holds still at each one, so reading always happens at rest. The next room glows faintly through the distance like the far door of an enfilade. Pure CSS transforms, zero WebGL."
colors:
  paper:    "#F5F4F1"
  concrete: "#D8D6D0"
  ink:      "#23221F"
  patina:   "#3E7C6F"
  muted:    "#8B897F"
fonts:
  display: "Prata"
  body:    "Mulish"
spacing:
  s1: "0.5rem"
  s2: "1rem"
  s3: "1.5rem"
  s4: "2.5rem"
  s5: "4rem"
  s6: "7rem"
radius:
  sm: "2px"
  md: "6px"
type-scale:
  hero:    "clamp(3rem, 9.5vw, 7.2rem)"
  room:    "clamp(1.7rem, 4vw, 2.7rem)"
  stat:    "clamp(1.6rem, 3.2vw, 2.5rem)"
  body:    "1rem / 1.7"
  wayfind: "0.66–0.72rem / ls .2–.34em"
full-kit: "https://www.stacklift.design/kit/sightline"
---

# Sightline — Design System

## §1 Identity

Sightline is a light museum kit built on one idea: **the screen has depth, and scrolling walks you into it**. The demo is the site of the Sightline Museum of Modern Art, a fictional institution named after its own architecture: every doorway aligned on a single axis — an enfilade — and the interface does exactly what the building does: rooms sit one behind the other in real CSS 3D space, and the visitor travels through them. The signature gesture is not scrolling a page; it is **walking through a museum**. The brand in the top corner always walks you back to the hall.

The palette is a white cube: gallery white `#F5F4F1` is the air, polished concrete `#D8D6D0` the ground, graphite `#23221F` speaks, and verdigris `#3E7C6F` — the patina of aged bronze — is **the only signal**: room numerals, wayfinding ticks, key figures, the primary button. Artworks are framed content and may carry any colour they like; the building never competes with them.

Typography: Prata (a sharp, single-weight didone) carries display and cartel titles; Mulish (300–800) does body and, in wide-tracked caps, all museum wayfinding. The name Sightline is the museographer's term for the visual axis that runs through aligned rooms.

## §2 The Signature Gesture — Scroll-Travel

The page never scrolls. A fixed `.stage` holds `perspective: 1200px`; inside it, `.world` (`transform-style: preserve-3d`) carries the rooms, each positioned at `translateZ(-i × 1600px)`. A hidden spacer gives the document its scroll length — **1.7 viewport-heights per room** — and the scroll position drives the camera:

```js
var DEPTH = 1600, SEG_VH = 1.7, TRAVEL = 0.45, CAM_LERP = 0.09;
// each segment: [dwell 55%][travel 45%] — rooms hold still while you read
var walk = p > (1-TRAVEL) ? easeInOut((p-(1-TRAVEL))/TRAVEL) : 0;
target = (i + walk) * DEPTH;
cam += (target - cam) * CAM_LERP;      // the camera has weight
world.style.transform = 'translateZ(' + cam + 'px)';
```

Two rules make it feel like architecture instead of an effect:

1. **Dwell plateaus.** Each room owns the first 55% of its scroll segment at rest — reading happens on a still page. Travel lives only in the last 45%, eased in and out. These are the rest zones.
2. **Atmospheric fog.** A room ahead fades with distance (`op = (1 − d/2720)^2.2` on desktop — about 0.14 at rest: the next room *whispers*, like the far door of the enfilade). A room you have passed fades out in 260px, as if you walked through its wall. On narrow screens the ghost is muted to near zero.

Every room is fit-scaled so it always reads whole inside the viewport (`fit = min(1, 0.84·vh / roomHeight)`). `prefers-reduced-motion` collapses the walk into a classic vertical page (`body.no3d`); on touch, scroll is scroll — the walk works unchanged.

**Tunable feel constants:** `CAM_LERP` (0.09 — lower = heavier camera) and `TRAVEL` (0.45 — smaller = longer rests, snappier walks). Tune these two first.

## §3 Color

- `--paper` — the air of the museum; page ground and room panels (`#F8F7F4` variant on walls).
- `--concrete` — secondary surfaces, swatch rails; never text.
- `--ink` — all reading text. Warm graphite, never `#000000`.
- `--patina` — THE signal, used sparingly: roman numerals, wayfinding ticks, eyebrows, key figures, the primary button, brand accent. Never large fills.
- `--muted` — cartel labels, captions, microcopy.
- Artworks (the framed images) are exempt from the palette — they are content, and the white cube exists to let them speak.

## §4 Typography

- **Prata, 400 only** — display sizes carry the museum's gravity: the hero fronton, room titles, cartel titles, stats. Never bold (it has no bold); scale and case do the work.
- **Mulish** — body 400, ledes at 1.02rem; wayfinding in 700–800 caps, tracked `.2–.34em`. All museum signage (ROOM II · THE COLLECTION) is Mulish caps + patina.
- Cartels follow museum convention: title in Prata, artist/year in tracked caps, medium in muted.

## §5 Layout & Spacing

Rooms are centered panels `min(1080px, 90vw)` wide, vertically centered in the stage. Inside a room, layouts are simple two-column grids (`1.35fr/1fr` exhibition, `1fr/1.25fr` building) or a four-across works rail — the 3D walk is the drama, so in-room layout stays calm. Spacing scale `--s1…--s6` (0.5 → 7rem); shadows are the depth cue: long, soft, warm grey (`rgba(35,34,31,…)`), never black. Radius is architectural: 2px on panels and photos, 6px on buttons.

Fixed UI: brand top-left, menu top-right, wayfinding bottom-left (numeral + room name + progress ticks), scroll cue bottom-right. All of it stays out of the rooms' way.

## §6 Agent Instructions

You are adapting Sightline for a new subject. Rules:

- **Edit freely:** the museum's name and story, room titles, exhibition and artwork content, cartels, hours, stats, all images. The rooms can host any institution or product that benefits from being *visited* — a foundation, a hotel, a winery, a watchmaker's manufacture, a portfolio told as rooms.
- **Preserve exactly:** the travel engine (`DEPTH`, `SEG_VH`, `TRAVEL`, `CAM_LERP`, the fog and fit-scale logic), the dwell-then-walk rhythm, the one-signal colour discipline, the Prata/Mulish pairing, the fixed wayfinding UI, and the reduced-motion fallback.
- **Room count:** add or remove `.room` sections freely — the engine, wayfinding ticks and menu adapt automatically. Keep each room's content under ~84vh of height; the fit-scale will protect you, but design rooms as slides, not scrolls.
- **Images:** follow the photographic recipe — soft diffuse north light, pale plaster and polished concrete, silver-grey shadows, one lone figure at most for scale. Rooms in 3:2 landscape, artworks/objects in 4:5 portrait. Keep the series shot "the same morning in the same building". Artworks may be colourful; the architecture may not.
- **The screenshot test:** if a still frame fully describes your adaptation, you have flattened the walk — restore the depth before shipping.

Full kit: https://www.stacklift.design/kit/sightline