# Design Language for concurrent.day ## Aesthetics and Tone concurrent.day is a contemplative observatory of simultaneity -- a website where the central conceit is that the same day is being lived in parallel by many threads of time, and the visitor's role is to witness those threads running side by side. The aesthetic blends **isometric technical documentation** with the calm, observational tone of a horologist's atelier: precise, axonometric, blueprint-like, but cool to the touch and faintly luminous, as if the diagrams were etched into translucent quartz panes lit from behind. The mood is **calm-serene** with an undercurrent of **scholarly-intellectual** rigor. There is no urgency, no marketing exhortation, no warmth-of-sales. Instead the visitor enters a kind of clean room where parallel chronologies are catalogued, measured, and visualized -- the digital equivalent of walking into an ISO-7 lab where time itself is the specimen. The reference points are: the engineering plates of Eadweard Muybridge's motion studies, the axonometric line drawings of mid-century Japanese factory blueprints, the cool teal-and-graphite palette of an oscilloscope at rest, and the meditative pacing of a seismograph drum slowly turning while nothing happens and everything does. There is a quiet science-fiction undertone -- not cyberpunk, not neon, not adversarial -- closer to the patient cosmology of *Solaris* or the procedural calm of NASA mission-control documentation from the 1970s. The site does not shout. It catalogues. It draws. It hums. ## Layout Motifs and Structure The dominant structural motif is **isometric layered tracks** -- multiple horizontal time-rails stacked along a 30-degree axonometric projection, each rail representing a concurrent thread of the same day. The viewer looks down the length of these rails as if peering into a deep filing cabinet of parallel hours. **Primary structure (top to bottom of scroll):** 1. **The Synoptic Plate** -- The opening viewport is a single full-bleed isometric diagram: seven translucent rails receding into the distance along a 30/30 isometric axis, each rail labelled with a different timezone or thread-name. A single horizontal cursor-line ("Now") cuts across all rails simultaneously, demonstrating the core thesis: this moment, multiplied. No hero text overlay -- only fine technical annotations in monospace, like an engineering drawing's callouts (a circled "1" with a leader line pointing to the cursor, etc.). 2. **The Concurrent Field** -- Scrolling reveals an immersive horizontal-vertical hybrid: vertical scroll advances "the day" along the rails, while small horizontal animated pulses travel rightward along each rail at slightly different rates, demonstrating the asynchronous-yet-simultaneous nature of concurrency. Content lives *on* the rails, not adjacent to them. Each event-card is a small isometric prism docked onto a rail at a specific timestamp. 3. **The Cross-Section** -- A single full-viewport stop where all rails are intersected by a vertical "instant plane." The page slows. The viewer is invited to study what is happening across all threads at the same instant. Annotations bloom outward from each intersection point with **path-draw-svg** leader lines. 4. **The Atlas** -- A grid of small isometric thumbnails, each one a miniature day-diagram. This functions as the navigational index but rendered as a wall of blueprints rather than a card-grid. The grid is intentionally **broken-grid**: thumbnails sit at slightly varied y-positions to suggest the irregular tempo of different days. 5. **The Colophon** -- A flat, oblique footer-plate listing technical notes, version, sources, and a quiet credit line, set as a scaled-down isometric drawing legend. **Spatial principles:** - All major elements obey a strict **30-30-90 isometric projection**. Text remains upright (true to the page) but containers, rails, prisms, and decorative geometry tilt into iso-space. - Generous **ma-negative-space** between rails -- at least 1.5x the rail-thickness as breathing room. - No traditional centering. The compositional center of gravity sits roughly 38% from the left to allow the rails to "exit" off the right edge of the page, reinforcing the sense that each rail extends infinitely beyond what the viewer sees. - Asymmetric stacking: even-numbered rails carry slightly more weight (more docked prisms) than odd-numbered, creating a subtle visual rhythm. ## Typography and Palette **Typography:** - **Display / Section Headings**: "Major Mono Display" (Google Fonts) -- a thin, all-caps monospace face with the visual personality of an architect's stencil. Used at large sizes (clamp(2.5rem, 5.5vw, 5rem)) for section markers. Letter-spaced 0.18em. Always lowercase for the wordmark "concurrent.day" but uppercase for section labels like "SYNOPTIC PLATE" or "CROSS-SECTION 04:17 UTC". - **Sub-Display / Annotations**: "Space Grotesk" (Google Fonts) at weight 400 and 500 -- chosen specifically because of its hybrid mono-grotesque DNA, which lets it sit comfortably alongside the technical-document feel without becoming sterile. Used for callout titles and rail-labels. - **Body / Documentation**: "IBM Plex Sans" (Google Fonts) at weights 300 and 400 -- the neutral, IBM-research-paper voice. Generous line-height (1.7). Used for paragraph text, descriptions, and "specification" blocks. - **Numerals / Timestamps**: "IBM Plex Mono" (Google Fonts), weight 400, with `font-variant-numeric: tabular-nums slashed-zero`. Every numeral on the site -- timestamps, indices, coordinates, version numbers -- is set in this. The slashed zero is non-negotiable; it is a visible signal that this is a technical document. - **Decorative inscription**: "Cormorant Garamond" (Google Fonts) at italic 400, used **only** for the single epigraph at the top of the colophon and for footnote-numerals -- a quiet, scholarly counterpoint to the otherwise technical register. **Palette (cool, low-warmth, high-contrast against deep slate):** - `#0E141B` -- **Graphite Vellum** (primary background; deep blue-black with a hint of slate, evoking blueprint paper at midnight) - `#152030` -- **Drafting Shadow** (secondary surface; for inset panels and rail-bases) - `#7BD0C4` -- **Phosphor Teal** (primary accent; the luminous "live" color for active rails, cursors, and the "Now" line -- references both oscilloscope green-cyan and the patina of weathered copper) - `#3F8C9E` -- **Oxide Cyan** (secondary accent; for inactive rails, subdued annotations) - `#D9C77A` -- **Brass Annotation** (tertiary accent, used very sparingly; for footnote markers, version stamps, and the single "official" seal) - `#E8EEF2` -- **Mist Paper** (primary text color; not pure white -- a slightly cool off-white reminiscent of tracing paper) - `#8B9AAB` -- **Drawing Pencil** (secondary text color; for annotations, captions, and inactive states) - `#FF6B5C` -- **Anomaly Coral** (alarm-only accent; reserved exclusively for the rare "concurrency violation" indicator -- a deliberately startling warm color that almost never appears, so when it does it lands) The palette intentionally avoids the warm/gradient defaults overused across the portfolio. There are no warm gradients on this site -- only thin gradient-ramps within the teal-cyan range (from `#3F8C9E` to `#7BD0C4`) used for the live-cursor glow. ## Imagery and Motifs **Core motifs:** - **The Rail**: A long, isometric rectangular prism that extends from the left edge into the distance. Each rail has a top surface (slightly lighter), a front face (mid-tone), and a side face in shadow. Rails are the load-bearing visual element of the site. They are drawn with pure CSS (transforms + box-shadows) wherever possible, falling back to inline SVG where needed. - **The Now-Cursor**: A vertical phosphor-teal line with a soft glow (`filter: drop-shadow(0 0 6px #7BD0C4)`) that crosses every rail. It animates very slowly -- 1px every ~2 seconds during idle, accelerating subtly when the viewer scrolls. It is the only element on the page that is always in motion. - **Docked Prisms**: Small isometric cubes or rectangular blocks "docked" onto rails at specific timestamps. Each prism represents an event in that thread's day. Hovering a prism causes it to rise 8px on its z-axis with a **spring** transition (cubic-bezier(0.34, 1.56, 0.64, 1)) and reveals a tooltip-card written in IBM Plex Sans. - **Crystalline Lattice (background)**: A faint, fixed-position SVG mesh of intersecting 30-degree lines covering the body background at ~6% opacity. It is the "drafting paper" beneath the entire experience. It does NOT scroll with content -- it stays anchored, so as the foreground rails slide past, the lattice remains as a stable substrate, suggesting the absolute reference frame against which all concurrent threads are measured. - **The Leader Line**: A thin (1px) Phosphor-Teal line with a hollow-circle terminus at one end and a flag-text at the other, used for technical callouts. Always animated in via **path-draw-svg** when entering the viewport. - **The Compass Rose**: An isometric reinterpretation of a compass -- six-armed instead of four, lying flat in iso-space, used as the section divider. Each arm of the rose terminates in a different annotation: "00h", "04h", "08h", "12h", "16h", "20h". The rose rotates slowly (one full revolution per 86,400 seconds = one earth-day, real-time). - **The Margin Glyph**: A tiny isometric cube glyph (8x8px) used in place of a bullet point in lists. It rotates 90deg on hover. **Imagery:** No photography. No 3D renders. No stock illustration. The entire visual language is constructed from line-drawing primitives -- isometric prisms, leader lines, dotted reference grids, technical callouts. This is a deliberate constraint: the site is a single coherent technical drawing. ## Prompts for Implementation **Narrative spine -- the day as a procession of plates:** Implement the page as a single long-scroll experience structured like a five-plate engineering drawing set: (I) Synoptic Plate, (II) Concurrent Field, (III) Cross-Section, (IV) Atlas, (V) Colophon. Each plate occupies at least 100vh. Scroll between plates triggers a brief deceleration and an annotation-pulse on the plate-number indicator (top-right, fixed). The visitor should feel they are paging through a bound folio of technical drawings, not browsing a marketing site. **Isometric in pure CSS:** Build the rail system using `transform: rotateX(60deg) rotateZ(-45deg)` (true isometric) on a 3D-transformed container. Children of the container can then be laid out as ordinary block elements but rendered in iso-space. Use `transform-style: preserve-3d` on the container and `backface-visibility: hidden` on children. Lighting is faked with three flat tones per face (top, front, side) using carefully tuned `background-color` rather than gradient fills -- keeping the technical-drawing flatness. **Always-on subtle motion (the Now-Cursor):** A single CSS keyframe animation translates the Now-Cursor 1px every 2 seconds, looping every viewport-width. This is the heartbeat of the site. Even when the visitor is idle, something is happening. Pair with a near-imperceptible **pulse-attention** (opacity 0.85 -> 1.0, 4-second cycle) on the cursor's hollow-circle terminus. **Scroll-driven plate transitions:** Use IntersectionObserver to detect when each plate enters the viewport. On entry, fire a coordinated sequence: 1. Plate-number stamp (top-right) flips to the new plate roman numeral with a quick **typewriter-effect**. 2. The plate's title text reveals via **path-draw-svg** -- the strokes of each glyph drawn as if by a plotter pen, left-to-right, ~600ms total. 3. Leader-lines for callouts draw in with staggered 80ms delays. **The Cross-Section interlude:** When the visitor reaches Plate III, scroll-jacking activates briefly (~1.5s) to slow the experience to a crawl. The vertical "instant plane" sweeps across all rails. As it intersects each rail, a small annotation-card blooms outward at that intersection. This is the moment the site's thesis -- *all of these days, this exact instant* -- becomes legible. After the sweep completes, normal scroll resumes. Implement with a paused `requestAnimationFrame` sequence rather than a hard scroll-lock. **Cursor-aware drafting tools:** The visitor's cursor, while hovering over the rail-region, displays a small monospace coordinate readout: ``. The readout updates live. It is not a gimmick -- it reinforces the technical-drawing metaphor at every interaction. **No CTAs, no pricing, no testimonials:** This site has none of those. It does not ask the visitor to do anything. The only "action" is to scroll, hover, and observe. If there must be a contact mechanism, it is a single line at the bottom of the Colophon, set in IBM Plex Mono: `correspondence: ` with a thin underline that draws on hover. **Typography animation:** When the wordmark "concurrent.day" first loads, animate it using a staggered character-mask: each glyph emerges from below a horizontal clip-path, 30ms apart. The full wordmark resolves in ~330ms. After that, it is static -- it never animates again. **Storytelling as documentation:** Treat all body copy as if it were specification text in a technical document. Number sections (1.0, 1.1, 1.1.1). Use small-caps for defined terms on their first appearance. Include genuine-looking footnote numerals that link to a single endnotes block in the Colophon. The visitor should feel they are reading a specification, not a sales page -- and find that surprisingly compelling. **Performance posture (visual only):** Even though we ignore performance metrics, *visually* the page should feel like a precision instrument: no janky transitions, no overshoot in springs that don't earn it, no excessive parallax. Restraint is the aesthetic. ## Uniqueness Notes **Differentiators from other designs in the portfolio:** 1. **True isometric construction throughout** -- not a stylistic isometric badge or icon set, but a layout where the load-bearing primary structure (the rail system) is rendered in genuine CSS 3D-transformed isometric space. No other design in the portfolio uses isometric projection as the page's structural skeleton; where isometric appears elsewhere it is decorative. Here it IS the page. 2. **Cool, low-warmth palette deliberately avoiding the portfolio default** -- the frequency report shows "warm" palettes appear in 97% of designs and "gradient" in 98%. This site uses neither: the palette is anchored in deep blue-graphite (#0E141B / #152030) with phosphor-teal accents and no traditional gradients. The single warm color (Anomaly Coral #FF6B5C) is reserved as an alarm-state and is essentially absent from the resting page. This is one of the few designs in the portfolio without a warm color story. 3. **Time-as-spatial-axis as load-bearing concept** -- the rail-system literalizes the metaphor "time is a line" and then multiplies it: many lines, in parallel, all anchored to a single Now-Cursor. The structural metaphor matches the domain ("concurrent.day") at a deeper level than mere theming -- the layout *is* an argument about concurrency. 4. **Documentation register instead of marketing register** -- the entire copy voice and information architecture mimics a published technical specification (numbered sections, footnotes, plate numerals, drawing legends). No CTAs, no value-props, no pricing tables, no stat-grids. The frequency report shows card-grid (95%) and centered (90%) dominate the portfolio; this site uses neither as a primary structure. 5. **Real-time chronological elements** -- the Compass Rose rotates at 1 revolution per actual 24 hours, the Now-Cursor heartbeat is bound to wall-clock time, and the cursor-coordinate readout includes a live UTC timestamp. The site is mildly *aware* of when it is being viewed, in a way that other static sites are not. 6. **Underused aesthetic + underused motif combination** -- isometric (12% of portfolio) paired with crystalline lattice (12%) and wave-forms-via-rail-pulses (10%) sits in an uncommon zone of the design space. Tone is calm-serene (8%) and scholarly-intellectual (27%), avoiding the dominant mysterious-moody (51%). **Chosen seed/style:** `isometric technical docs` -- adapted toward an observatory-of-time concept rather than a product-documentation concept. The seed's core DNA (axonometric projection, technical-drawing register, callouts, leader-lines, monospace numerals) is preserved; what is unique is the application to a domain about concurrent time, and the cool phosphor-teal palette which departs from typical iso-doc earth tones. **Avoided patterns from frequency analysis:** No corporate aesthetic (92%), no warm palette (97%), no gradient palette (98%), no card-grid layout (95%), no centered layout (90%), no full-bleed hero with photography (95%), no scroll-triggered parallax storm (60%), no CTA-heavy structure, no pricing block, no stat-grid, no testimonial carousel. The site is intentionally a quiet outlier in the portfolio.