# Design Language for parallel.day ## Aesthetics and Tone parallel.day is a **split-screen Swiss diptych** about the same twenty-four hours lived two ways. The conceit: every page is a vertical seam down the middle of the viewport, and on either side of that seam the *identical* day plays out — left side is the day you actually had, right side is the day you could have had — same clock, same light, different choices. The aesthetic is rigorously **Swiss/International Typographic Style**: a strict baseline grid, flush-left ranged-right setting, generous quiet zones, no decoration that isn't load-bearing. But it is Swiss with a fault line — the two halves are never *quite* mirror images. A headline that reads "07:14 — you pressed snooze" on the left is set on the right as "07:14 — you were already running." The type is the same; the verbs disagree. Tone is calm, exacting, faintly clinical — like a well-made train timetable or a Helvetica-set museum wall text — but underneath runs a quiet melancholy about forking paths. No urgency, no persuasion, no calls to action. The reader is invited to *compare*, not to *convert*. Think Josef Müller-Brockmann grid posters crossed with the split-frame editing of a Krzysztof Kieślowski film, printed on matte uncoated stock with one single ink colour plus black. The whole site should feel like holding two photographs of the same hour up to a window at once. ## Layout Motifs and Structure The governing motif is the **vertical meridian** — a 1px hairline (or, on wide viewports, a 2px column gutter) running floor-to-ceiling at exactly 50% of the viewport width. Everything is organised around it: - **Split-screen as the only layout.** Every section is `display: grid; grid-template-columns: 1fr 1px 1fr;`. The left column carries "DAY A", the right carries "DAY B". They scroll *together* but their content is offset — the same event lands at slightly different scroll depths on each side, so the reader's eye has to travel diagonally across the seam to reconcile them. - **A 12-column sub-grid inside each half** (so 24 columns conceptually across the spread, with the meridian eating column 12.5). Margins: 64px outer, 40px inner-toward-the-seam, tightening to 24px / 16px on mobile where the split becomes top/bottom instead of left/right. - **Timeline-vertical spine.** Down the meridian itself runs a hour-marked rule — tick marks at 00:00, 06:00, 12:00, 18:00, 24:00 — like the gutter of a Filofax. As you scroll, a small filled dot rides the meridian marking "now" in the narrated day. Section breaks happen *at* hours. - **Asymmetric within symmetry.** The frame is mirror-symmetric; the contents lean. DAY A's text is flush-left (ranged toward the seam); DAY B's text is flush-right (also ranged toward the seam) — so both columns *press inward* against the meridian, and the outer margins are wide, calm, empty. The negative space lives at the edges of the world, not the middle. - **Stacked full-viewport "hours".** Roughly seven to nine sections, each one full-height (`100svh`), each one an hour or a cluster of hours. No sticky header, minimal navigation: just a thin index of hours pinned to the very top that you can click to jump. - One closing section breaks the rule on purpose: the meridian dissolves, the two columns slide over each other and *overlap* at 50% opacity each, so DAY A and DAY B briefly become one blurred composite — "the day as you'll remember it, which is neither." ## Typography and Palette **Typefaces (Google Fonts only):** - **Archivo** (variable: weight 100–900, width axis) — the workhorse. International-style neo-grotesque with a width axis, which lets us set DAY A in normal width and DAY B in a hair narrower (width ~92) so the two halves are subtly typographically out of phase even when the words match. Headlines at weight 700, condensed width; body at weight 400. - **Archivo Expanded** (or Archivo's width axis pushed wide) — used *only* for the hour labels on the meridian spine (00:00, 06:00…), set in small caps, letter-spaced +0.22em, weight 600. These are the rivets holding the page together. - **IBM Plex Mono** (weight 400 / 500) — for the "log" micro-text: the tiny annotations beside each event ("Δ +14 min", "branch point", "outcome: unknown"), timestamps, footnotes, and the colophon. Monospace gives the data-log, flight-recorder quality. Used at 12–13px, never larger. Type is set on a strict 8px baseline grid. Line length capped at ~62 characters per column. Headlines are sentence case, never all-caps except the small-cap hour rivets. **Palette — one ink plus black, on warm paper:** - `#F4F1EA` — **Paper.** Warm off-white, the uncoated-stock background of the whole site. Slight warmth so it doesn't read clinical-cold. - `#16161A` — **Ink.** Near-black with a faint blue undertone — all primary text, the meridian hairline, hour rivets. - `#5B5B66` — **Graphite.** Mid-grey for the monospace log text and secondary annotations; recedes one step from Ink. - `#D9D4C7` — **Bone.** The faintest warm grey for grid lines, tick marks, the inactive part of the meridian spine, and section-divider rules. - `#E2473B` — **Vermilion.** The single accent ink — a hot Swiss-poster red. Used *exclusively* to mark divergence: the verb or word that differs between DAY A and DAY B is set in Vermilion, the "now" dot on the meridian is Vermilion, the "branch point" tick is Vermilion. Nothing else is ever red. Scarcity is the whole point — red = "here the days split." - `#0F0F12` — near-black variant used for the brief inverted closing section (Paper text on this near-black, with Vermilion still the accent). Roughly 90% of every page is Paper + Ink + Graphite. Bone draws the structure. Vermilion appears maybe six to ten times on the entire site, always at a fork. ## Imagery and Motifs - **No photography. No illustration. No gradients.** The imagery *is* the typography and the grid. This is a text-and-rule world. - **The meridian** — the central vertical hairline — is the hero graphic. It is drawn, it is animated, it carries the hour ticks. Treat it like a character. - **Δ (delta) glyphs** — small uppercase Greek deltas in IBM Plex Mono, in Graphite, mark every place where the two days differ in magnitude (time, mood, location). "Δ +14 min", "Δ −1 coffee", "Δ ∞". - **Hour rivets** — the small-cap, wide-set time labels on the spine. They look like the numerals stamped on the spine of a planner. - **Bracket pairs** `[ ]` rendered large and thin in Bone, used as section frames around each "hour" — left bracket opens the section on DAY A's outer margin, right bracket closes it on DAY B's outer margin, so each hour is literally *bracketed*. - **Ghost text** — in a few places the *road not taken* shows through: DAY A's headline rendered at 8% opacity, mirrored, behind DAY B's actual headline (and vice versa), like a watermark of the alternative. Pure CSS, `transform: scaleX(-1)`, very subtle. - **A single thin ruled box** in the footer/colophon listing the day's "branch points" as a mono-set table — the only place anything resembling a data grid appears, and it is deliberately austere: hairline rules, no fills, no zebra stripes. ## Prompts for Implementation Build this as **one long static HTML document** — no SPA, no router. The whole experience is a single vertical scroll down a split day. The reader's act of scrolling *is* the passage of the hours. **Core experience:** - The page opens on a near-empty cover "hour": centered on the meridian, the word "parallel" set in Archivo on the left of the seam and ".day" on the right of the seam, both pressing inward against the hairline, large — `clamp(48px, 9vw, 132px)`. Below, in Plex Mono Graphite: "the same twenty-four hours, lived two ways." Then a single Vermilion blinking dot appears on the meridian at the "00:00" rivet and a hairline begins to *draw itself downward* from the top of the page to invite the scroll (SVG `stroke-dashoffset` animation, slow, ~2.5s ease-out). - As the reader scrolls, each "hour" section enters with a **stagger**: DAY A's content fades and rises first (translateY 16px → 0, 320ms), then DAY B's content follows ~120ms later — a deliberate echo, like a delayed reflection. Use IntersectionObserver; respect `prefers-reduced-motion` by disabling the offset and just showing both at once. - **The seam follows scroll.** A small filled dot ("now") rides the meridian, its vertical position mapped to scroll progress within the current hour-section. It is Vermilion. When it passes a "branch point" tick, the diverging word in that section's headlines transitions from Ink to Vermilion over 400ms (color transition only — no movement). Before you scroll past the branch, the alternative reads grey-neutral; after, the fork is "lit." - **Diagonal reading.** Because DAY A and DAY B place the *same* event at slightly different scroll depths (offset by ~6–10vh), the matched lines are never on the same horizontal line. Optional: on hover over a DAY A event, draw a thin Bone connector line across the meridian to its DAY B counterpart (SVG path, drawn with `path-draw-svg` stroke animation, ~250ms). This is the one "interactive" flourish — it literally connects the parallel lives. - **Hour navigation.** A slim fixed bar at the very top: the hours (00 · 03 · 06 · 09 · 12 · 15 · 18 · 21 · 24) in Plex Mono small text, the current one in Vermilion, click to smooth-scroll. It's a clock face flattened into a line. - **The closing section** breaks symmetry: as it scrolls into view, the two columns animate from `1fr 1px 1fr` toward overlapping — `grid-template-columns` can't tween, so do it with transforms: translate DAY A right by 50% and DAY B left by 50%, both to 0.5 opacity, blending into a single soft composite over ~600ms tied to scroll. The headline beneath: "you only get the one you remember." The meridian fades to nothing. Then — a beat — it redraws, and a final Vermilion dot sits at "24:00". - **Micro-interactions:** hovering a Δ glyph reveals a one-line mono tooltip in a hairline-ruled box ("Δ +14 min — you left for the station at 08:02 instead of 07:48"). Hour rivets get a faint Bone underline-draw on hover. No shadows anywhere; depth is conveyed only by opacity and the 1px rule hierarchy (Ink rules > Bone rules). - **Type motion:** the cover words "parallel" and ".day" each carry Archivo's *width* axis on a 12s `ease-in-out` infinite loop, drifting between width 87 and width 100 — but **anti-phase**: when "parallel" is wide, ".day" is narrow, and vice versa. The seam between them stays fixed; the two words breathe against each other across it. Subtle, almost subliminal. **AVOID:** no hero CTA buttons, no "Get Started", no pricing tables, no stat counters/number-grids, no testimonial carousels, no feature cards. There is nothing to sign up for. The page is a parallel-text edition of a single day; it ends, the meridian closes, that's all. ## Uniqueness Notes Differentiators this design commits to (other CMassC sites must not duplicate these): 1. **The vertical meridian as a living spine.** A single 1px floor-to-ceiling rule at exactly 50% width, carrying hour rivets and a scroll-tracked "now" dot, around which a true `1fr 1px 1fr` split-screen is built — and the closing section *collapses* it by sliding the two halves into overlap. Split-screen layout is used by ~2% of sites and none use it as a parallel-text apparatus that dissolves at the end. 2. **Vermilion as a scarcity signal for divergence only.** Exactly one accent colour (#E2473B), appearing fewer than ~10 times on the whole site, *exclusively* on the word/glyph/tick where DAY A and DAY B differ. The accent isn't decoration — it's semantic ("here the days split"), and it's *triggered by scroll position* (Ink → Vermilion as you pass the branch point). 3. **Archivo's width axis driven anti-phase across a fixed seam.** Two halves of the brand wordmark breathing between width 87 and 100 in opposite phase, with the meridian between them held still — variable-font motion used to express "same thing, two states" rather than as a generic flourish. 4. **Deliberate scroll-depth offset between matched events** so DAY A and DAY B never align horizontally, forcing diagonal reading across the seam, with optional Bone connector lines (path-draw-svg) that literally tie the parallel lives together. 5. **Strict Swiss/International Style with zero imagery** — no photos, no illustration, no gradients, no shadows; warm uncoated-paper palette (#F4F1EA / #16161A / #5B5B66 / #D9D4C7 + #E2473B); 8px baseline grid; flush-toward-seam ranged text. In a field where ~98% of sites use photography and ~95% use gradients, this is pure type, rule, and grid. Chosen seed / style: **swiss typography clean** (aesthetic: swiss; layout: split-screen; typography: sans-grotesk; palette: monochrome + single accent / high-contrast; patterns: scroll-triggered + stagger + path-draw-svg; imagery: minimal; motifs: grid-lines; tone: calm-serene). Avoided patterns from frequency analysis: no hand-drawn (96%), no glassmorphism (80%), no card-grid (91%), no full-bleed photography (98%), no warm-gradient palette (95%/98%), no cursor-follow blob / magnetic buttons (89%/82%), no parallax-of-imagery (91%), no bento-box, no dashboard chrome. Underused territory leaned into: split-screen layout (2%), minimal imagery, monochrome palette, calm-serene tone, grid-lines motif, path-draw-svg as the *only* connective animation.