# Design Language for concurrent.day ## Aesthetics and Tone `concurrent.day` is **a baroque parallel-processor — an opulent control salon where many days run at once, each one breathing in its own brass-and-velvet vitrine.** The domain is read literally: *concurrent* (multiple threads of time advancing in parallel, not sequentially) plus *day* (the ordinary 24-hour unit). The site materializes that idea as **a grand mirrored chamber from a 1780s observatory crossed with the readout panel of a 1968 mainframe** — an aristocratic salle des machines where each pillowed neomorphic dial supervises a different *parallel today*: Monday-as-it-is, Monday-if-it-rained-in-Vienna, Monday-as-rendered-by-someone-else's-grief, Monday-spent-not-leaving-bed. The mood is **opulent-grand and unhurried** — a feeling closer to the *Galerie des Glaces* at twilight than to a SaaS dashboard. The lighting is candle-soft, warm, and faintly metallic. The interactions are slow, weighted, ceremonial. Every dial is *pressed in*, not *clicked*; every reveal is a *velvet curtain drawing aside*, not a panel sliding. The site does not sell, demo, or onboard. It asks the visitor to **stand in a room where time has been forked into bouquets** and to listen to each bouquet ticking in its own register. The retro-futuristic register is specifically **late-Bourbon-meets-Bell-Labs-1972**: gilt cartouches around amber CRT readouts, embroidered curtain-pulls beside polished bakelite toggles, a marquetry parquet floor whose inlay forms a circuit-trace, a gold-leaf clock whose hands are software counters incrementing at slightly different speeds. Nothing is ironic. The pastiche is sincere — the page believes equally in Rococo gilding and in deterministic concurrency. The botanical layer threads through everything: **floral-botanical motifs are not decorative chrome but the actual instrumentation panel.** A peony's outermost petals indicate seconds; a fern's pinnae plot CPU pressure across the last hour; a wisteria stalk hangs the day's longest task. The garden is the dashboard. The dashboard is the garden. ## Layout Motifs and Structure The composition is **minimal-navigation** — there is **no top bar, no left sidebar, no hamburger, no logo nav, no footer link cluster.** A single ornate ribbon-knot in the upper-left ≈42px square serves as the only navigational organ; tapping it slowly *unfurls* a list of the seven parallel-day chapters as a hand-fanned set of brass scroll-tabs that ease open over 900ms. That is the entire navigation surface. The page is structured as **a vertical chain of seven `100svh` salons** — each salon a single full-bleed *room* devoted to one parallel today. Salons separate not with hard rules but with a **15svh velvet-curtain transition**: a deep-burgundy cross-fade with a faint vertical drape gradient, scrolled through, never clicked. The visitor enters salon, sits inside it, drifts through the curtain, enters the next salon. This rejects the corpus's centered (93%) / dashboard (33%) defaults and reads as something between an immersive-scroll long-form narrative and a museum's *enfilade* — a sequence of grand rooms strung along an axis. **Inside each salon, the geometry is a deliberate three-zone composition:** 1. **The Reliquary Dial Cluster (right two-thirds).** A loose constellation of 5–9 *neomorphic dials* — convex, pillow-pressed, brushed-brass-on-cream pads, each between 96px and 320px in diameter — floats in a scatter that obeys a hidden golden-ratio grid. Each dial supervises a different facet of *that salon's* parallel day: hour-hand, mood barometer, weather-as-it-was, weather-as-it-might-have-been, breath rate, ambient lux. The dials *lift* when hovered: 6px vertical translate, shadow-set re-cast at -10°, soft-bell click. Hover-lift is the dominant gesture vocabulary. 2. **The Parquetry Margin (left third).** A vertical inlay panel of marquetry geometry (concentric lozenges, rosettes, swirling oak-leaves) rendered in pure SVG at the salon's accent hue. Embedded in the parquetry — flush with the wood grain — is the salon's **oversized-display title**, set vertically (writing-mode: vertical-rl) at a clamped `clamp(8rem, 18vw, 16rem)` — so large it functions as architecture, not signage. Words like *MUSCARI MONDAY*, *CRINOLINE TUESDAY*, *BAKELITE WEDNESDAY* run from ceiling to floor as inlaid display lettering. 3. **The Sill (bottom 12svh strip).** A faintly luminous shelf bearing one slow-moving CRT readout — an amber 6×40 character grid that prints, character by character at 11 cps, the salon's parallel-day journal entry. The CRT scanline is real (a 1px horizontal repeating gradient at 2.5px pitch) and ticks at 60Hz with a 0.04 alpha drift. **The Antechamber (`120svh`, before salon 1).** The visitor lands in an empty mirrored hall. A single neomorphic medallion — concave, brass-rimmed, the size of a saucer — sits centered. Inside the medallion: the wordmark `concurrent.day` set in `oversized-display` proportions at `clamp(7rem, 14vw, 13rem)`. Behind everything: **the bokeh background plate** — a slow drift of 80–140 out-of-focus golden orbs (7px–94px radius, opacity 0.05–0.22) parallax-tracking across a deep bordeaux velvet field at three depth layers. The bokeh is generated in canvas, not stock photography. It never freezes, even when the page is idle. **The Coda (`90svh`, after salon 7).** All seven salons' dials have been drawn to a single chamber and arranged as **a botanical bouquet** — peonies, ferns, wisteria, foxglove, ranunculus, baby's breath, lily-of-the-valley, each one an actual dial repurposed as a flower head. The bouquet sits in a brass urn on a parquet plinth. The CRT shelf is now blank but for a single line: `seven days observed in parallel — closing the salon.` Asymmetry is deliberate and registry-rare here: minimal-navigation appears in only 3% of prior designs. ## Typography and Palette **Typography (Google Fonts only, three families, named structural roles):** - **Oversized Display (the registry-rare 3% category): [`Bodoni Moda`](https://fonts.google.com/specimen/Bodoni+Moda)** — the variable axis is exploited from `wght 400` (body display) to `wght 900` (architectural inlay). Hairline serifs, dramatic stroke contrast, late-18th-century court-typeface bones. Used for the wordmark, all seven salon titles (vertical-rl, `clamp(8rem, 18vw, 16rem)`), the medallion mark, and any number whose role is *grand* (hour hands, day numerals). Italic optical-size used for chapter prefaces. - **Voice Serif: [`Cormorant Garamond`](https://fonts.google.com/specimen/Cormorant+Garamond)** at weights 300, 400, 500, 600, italic everywhere it makes sense. Used for the salon prose (parallel-day journal entries inside each scroll tab), the dial labels (small caps, 11px, +90 tracking), and the curtain-cartouche annotations between salons. Line-height 1.55. The italic 300 is reserved for the bokeh-orb whisper-overlays. - **CRT Mono: [`VT323`](https://fonts.google.com/specimen/VT323)** at 18px, color-locked to the amber accent. Used **only** on the sill — the CRT readout, the dial telemetry overlays on hover, and the small ledger that counts how many parallel days have been viewed. VT323 is the genuine 1970s phosphor-CRT face. No other monospace appears anywhere. This typographic combination — Bodoni Moda + Cormorant + VT323 — does not repeat a single registry pairing. **Palette (8 named hues, retro-futuristic register, every value a hex):** - `--bordeaux-velvet: #2A0D14` — the deep stage-curtain background of every salon. Reads almost-black at low light, blood-burgundy near the bokeh. - `--cream-pillow: #EFE6D2` — the pillowed neomorphic surface color. Slightly yellowed, like aged ivory or the inside of a Bourbon-era envelope. - `--brass-leaf: #B58A3F` — the gilt-cartouche, dial-rim, marquetry-edge metallic. Warm gold with a touch of green-shadow. - `--brass-deep: #6E4A1A` — the inset shadow side of every neomorphic dial; the deeper-cut marquetry line; the parquet-grain detail. - `--crt-amber: #FFB347` — the only screen-glow color. Lives only on the sill CRT and on hover-revealed telemetry. Glows at 0.25 alpha over `--bordeaux-velvet`. - `--peony-blush: #C97A86` — the floral-botanical mid-tone, used for petal fills, the hover-lift highlight ring, and the fanned-out scroll-tabs. - `--wisteria-vapor: #8C7AAF` — the secondary botanical accent (wisteria stalk, foxglove bell, baby's-breath shadow), and the second bokeh-orb depth layer. - `--phosphor-mint: #7FE0B5` — the rare 7th-salon-only color, reserved for the *Sunday* salon (which is rendered as the parallel day where electricity was discovered earlier). Used sparingly: one CRT line, one dial rim, one hover-glow. The palette is not warm-gradient-default (corpus 98%/93%) — it is **retro-futuristic** in the genuine sense: bordeaux + brass + amber CRT + wisteria + phosphor mint is registry-first. ## Imagery and Motifs **Imagery is bokeh-background-led with floral-botanical motifs.** No photography. No stock illustration. No 3D-rendered models. **The Bokeh Plate (the backdrop of every salon).** Generated live in `` at the salon level. Three parallax depth layers: - **Layer 1 (deepest, slowest):** 40–60 large orbs (radius 36px–94px), opacity 0.05–0.10, drift at 4px/s. - **Layer 2 (middle):** 50–80 medium orbs (16px–36px), opacity 0.10–0.18, drift at 9px/s. - **Layer 3 (closest):** 30–50 small orbs (5px–14px), opacity 0.16–0.24, drift at 16px/s, occasionally crossing in front of dials. Each orb has a 12% chance of being tinted with the salon's accent (peony, wisteria, phosphor) instead of the default brass; this gives every salon a *biographical* light. Bokeh-background appears in only 6% of the corpus. **The Marquetry Inlay (left margin of every salon).** Hand-coded SVG inlay, never raster. Rosette + lozenge + leaf-scroll vocabulary, each motif drawn from the salon's signature flower: - Salon 1 (Muscari Monday): clustered grape-hyacinth bells. - Salon 2 (Crinoline Tuesday): rosettes within rosettes. - Salon 3 (Bakelite Wednesday): art-deco fan-leaf inlay. - Salon 4 (Mahogany Thursday): oak-and-acorn cartouche. - Salon 5 (Tulle Friday): woven mesh of foxglove bells. - Salon 6 (Marzipan Saturday): pomegranate and ranunculus. - Salon 7 (Phosphor Sunday): lily-of-the-valley with circuit-trace stems. **The Neomorphic Dials (the central vocabulary).** Each dial is a `border-radius: 50%` cream-pillow with a *paired* shadow set: an upper-left highlight (`box-shadow: -10px -10px 24px rgba(255, 245, 220, 0.55)`) and a lower-right inset (`box-shadow: 10px 10px 24px rgba(110, 74, 26, 0.32)`). On hover, the dial **lifts** — 6px vertical translate, shadow-spread doubled, a soft `0.55s cubic-bezier(.22,.95,.4,1)` ease — and emits a faint amber halo. Pressing inverts the shadow set (the dial sinks 2px, shadows flip). This is genuine neomorphism, registry-rare at 4%. **Dial Faces.** No two dials share a face. The repertoire: - **Peony Hour-Hand** — a peony whose outermost petal-tip indicates the current hour in that parallel day; petals refresh every minute with an SVG path tween. - **Fern CPU Trace** — pinnae populate left-to-right as system load increments. - **Wisteria Long-Task** — a hanging stalk whose length is the day's longest uninterrupted task in minutes. - **Foxglove Mood** — bells colored from `--wisteria-vapor` (calm) through `--peony-blush` (warm) to `--crt-amber` (urgent). - **Ranunculus Breath** — concentric petal rings inhale/exhale at the visitor's mouse-velocity, mapped to a 4-7-8 breath cycle. - **Lily-Bell Telemetry** — drops one bell per minute elapsed in the salon. - **Baby's-Breath Counter** — many tiny orbits, one per parallel-day visitor currently elsewhere on the site. **The Velvet Curtain (between salons).** A 15svh transition rendered as a vertical-stripe gradient from `--bordeaux-velvet` to `--brass-deep` and back, with 7 vertical drape-folds (`linear-gradient` cycle, `background-size: 14% 100%`). On scroll-pass, the curtain *parts* from a 1px center seam outward — pure CSS `clip-path: polygon` animated. **The Parquet Floor (footer-shelf of every salon).** A diagonal marquetry tile (45° herringbone), rendered with `repeating-linear-gradient` in `--brass-deep` over `--cream-pillow`. The herringbone is gradient-traced with hairline circuit-paths so the parquet *also* reads as a 1972 wire-wrapped backplane. **The CRT Sill.** Below every salon, a 12svh shelf in `--bordeaux-velvet` with a 1px `--crt-amber` top hairline. On the shelf: a fixed-pitch text bar (VT323, 18px, amber, 0.92 alpha) whose contents are ticked-in character-by-character at 11 cps. Scanlines: `repeating-linear-gradient(0deg, transparent 0 1.5px, rgba(255,179,71,0.04) 1.5px 2.5px)`. ## Prompts for Implementation Build `concurrent.day` as **an enfilade of seven parallel days, each a 100svh opulent salon, separated by velvet-curtain transitions, with no navigation chrome but a single fanned scroll-tab.** This is not a SaaS landing page. It is a baroque parallel-processor rendered as a museum walk. **Macro structure (top to bottom — strict order):** 1. **Antechamber (`120svh`).** Empty mirrored hall. Bordeaux velvet. Bokeh plate full. Centered: a single concave neomorphic medallion bearing the wordmark `concurrent.day` (Bodoni Moda, oversized-display, weight 500 → 900 on idle breath, 7-second sine). Beneath the medallion in Cormorant italic 300, 14px: *seven days, observed at once.* No CTA. No subtitle promising a value prop. The medallion *waits.* 2. **Salon 1 — Muscari Monday.** Grape-hyacinth marquetry. Dials: Peony Hour, Fern CPU, Foxglove Mood, Wisteria Long-Task, Ranunculus Breath, Baby's-Breath Counter. CRT sill journal entry: parallel-Monday in which the visitor woke five minutes earlier and noticed the muscari pushing through the gravel. 3. **Curtain (`15svh`).** Velvet parts on scroll-through. 4. **Salon 2 — Crinoline Tuesday.** Rosette marquetry. Dials slightly differently arranged. Journal entry: parallel-Tuesday in which a letter posted in 1872 finally arrived. 5. **Curtain.** 6. **Salon 3 — Bakelite Wednesday.** Art-deco fan-leaf marquetry. Dials in deeper brass tone. Journal entry: parallel-Wednesday in which the radio still mattered. 7. **Curtain.** 8. **Salon 4 — Mahogany Thursday.** Oak-and-acorn marquetry. The slowest salon — dials drift more slowly here, breath cycle stretched to 11 seconds. Journal: parallel-Thursday spent not leaving bed. 9. **Curtain.** 10. **Salon 5 — Tulle Friday.** Foxglove-mesh marquetry. The dials are sparser, the bokeh denser. Journal: parallel-Friday in which the only event was light passing through a curtain. 11. **Curtain.** 12. **Salon 6 — Marzipan Saturday.** Pomegranate marquetry. Warmest salon — peony-blush lifted +0.05 alpha across all dials. Journal: parallel-Saturday in which a neighborhood child gave a stranger a gift. 13. **Curtain.** 14. **Salon 7 — Phosphor Sunday.** Lily-of-the-valley marquetry, circuit-trace stems. The phosphor-mint accent finally appears: one dial rim, one CRT line. Journal: parallel-Sunday in which electricity was discovered a century earlier — but the days are still days. 15. **Coda (`90svh`).** All dials gathered into a botanical bouquet on a brass urn. CRT sill: `seven days observed in parallel — closing the salon.` No "Subscribe" form. No "Get started." The site simply rests. **Animation grammar (storytelling-first, ceremonial, never twitchy):** - All easing uses **`cubic-bezier(.22,.95,.4,1)`** (a slow-in / quick-recover curve that feels weighted — like a velvet curtain falling). Avoid `ease-out` defaults. - The wordmark **breathes** the Bodoni Moda weight axis from 500 → 700 over a 7-second sine on idle. On scroll-leave, the breath holds at 700 (the held breath of attention). - Dials lift on hover (`translateY(-6px)`, shadow-spread *2, 0.55s). On press, dials sink (`translateY(2px)`, shadow inversion, 0.18s). A faint amber halo (`box-shadow: 0 0 24px rgba(255,179,71,0.18)`) blooms during hover. - The bokeh canvas runs a gentle drift at all times — never pause it. On scroll, layer-3 orbs accelerate +20% to suggest depth. - Salon-title inlay (vertical-rl Bodoni Moda at `clamp(8rem,18vw,16rem)`) reveals via a **gold-leaf gilding** path-draw — an SVG `` tracing the letterforms in `--brass-leaf`, drawn over 1.4 seconds at salon entry. Use `path-draw-svg` (corpus 35% — keep it disciplined here, only on titles, never on icons). - Curtain transitions: as the curtain enters viewport, its center seam parts via `clip-path: polygon` to reveal the next salon. Velocity-coupled to scroll position. - Scroll-tab fan: tap the ribbon-knot, the seven brass tabs ease open in a 14° arc (stagger 70ms, total 900ms). Each tab labeled with its salon's flower, set in Cormorant 300 italic small-caps. - The CRT sill prints character-by-character at **11 cps** with a 1-frame phosphor-bloom (a 1px amber blur applied for 80ms after each character). Never use a typewriter sound — the salon is silent. - Hover-lift is the only repeated micro-interaction. Suppress every other hover gesture (no underline-draw on links, no scale-up on cards, no cursor-follow trails — those would betray the salon's stillness). **Forbidden in implementation (storytelling integrity):** - No CTAs ("Get Started", "Sign Up", "Try Free", "Book a Demo"). Anywhere. - No pricing tiers, no comparison tables, no logo-walls of "trusted by," no testimonial carousels. - No stat-grid ("99.9% uptime", "10× faster", "1M+ users"). The dials *are* the stats but they read parallel-day weather, not vanity metrics. - No feature-list bullet-grids. The salon prose is whole sentences in Cormorant italic. - No cookie banner styled as a CTA. (If legally required, render it as a single Cormorant italic line on the sill, color-locked to amber.) - No social-share row, no newsletter signup, no chatbot launcher, no "scroll to top" arrow. The salon does not solicit. - No top-bar nav, no logo-link, no breadcrumb. The single ribbon-knot is the only nav surface. - No Material-Design defaults (no FABs, no ripple-on-click — use the `ripple` corpus pattern at 22% sparingly, only on the dial press, and only as a brass-flecked radial sheen). **Storytelling cadence.** The visitor reads the seven salons in one breath, top to bottom, in roughly four to six minutes. Each salon takes thirty to fifty seconds at the unhurried scroll-rate the curtain enforces. The journal entries cohere — they are seven short prose poems that share a narrator (a person observing what their day might have been). The dials are not decorative — they tick. By the Coda, the visitor understands that the site has spent the entire visit running *seven parallel todays in parallel inside their browser tab,* and that this was the demonstration. ## Uniqueness Notes **Differentiators from the existing 62-design registry:** 1. **Neomorphism as the load-bearing aesthetic, not a styling flourish (registry rare at 4%).** Of the two prior `neomorphism` mentions, none deployed it as the *entire* dial vocabulary across seven salons. Here every interactive surface is a pillowed cream-and-brass dial with a paired highlight/shadow set; press inverts both shadows; hover lifts the entire dial 6px. The neomorphism is *load-bearing instrumentation*, not decoration. 2. **Minimal-navigation taken to extremity (registry rare at 3%).** No top bar, no left rail, no logo-link, no footer nav, no hamburger. A single ornate ribbon-knot at upper-left, ≈42px square, fans open seven brass scroll-tabs in a 14° arc. The corpus's centered (93%) / dashboard (33%) / sidebar (25%) defaults are entirely refused. 3. **Oversized-display typography exploited as architecture (registry rare at 3%).** Salon titles are set vertical-rl in Bodoni Moda at `clamp(8rem, 18vw, 16rem)` and gilded in via SVG path-draw — they function as inlay, not as headings. Bodoni Moda paired with VT323 is registry-first. 4. **Retro-futuristic palette without the chrome-metallic / vaporwave defaults.** Bordeaux velvet + brass + amber-CRT + wisteria + phosphor-mint refuses both the warm-gradient (98%) corpus default and the cyberpunk/holographic neon family. The retro-futuristic register here is *late-Bourbon-meets-Bell-Labs-1972*, which the registry has not previously occupied. 5. **Floral-botanical motifs as instrumentation, not chrome (registry 8%).** The flowers *are* the dials: peony petals indicate hours, fern pinnae plot CPU, wisteria stalks hang long tasks. No prior site couples botanical motifs to live-updating telemetry; most use them as decorative borders. 6. **Bokeh-background as a permanent canvas-driven plate, three depth layers (registry 6%).** The bokeh never pauses, drifts at three different parallax speeds, and tints toward each salon's flower. It is generated, not photographic — placing this site outside the 95% photography-default and the 6% bokeh-background subset simultaneously. 7. **Hover-lift used as the *only* hover gesture (registry 17%).** Every other corpus-common hover interaction (`underline-draw` 8%, `cursor-follow` 17%, `tilt-3d` 17%, `magnetic` 29%) is deliberately absent. The discipline of one repeated micro-interaction enforces the salon's stillness. 8. **Opulent-grand tone, registered against the corpus's professional (43%) / friendly (41%) defaults.** The closest neighbor is `luxurious` at 1% — concurrent.day deepens that register into the genuinely baroque: candlelit-mirrored, ceremonial, unhurried, never selling. 9. **No CTA / no pricing / no stat-grid / no signup — total commercial silence.** The site does not solicit. The Coda ends with a single Cormorant italic line and a brass urn. **Chosen seed (from assignment instructions):** `aesthetic: neomorphism, layout: minimal-navigation, typography: oversized-display, palette: retro-futuristic, patterns: hover-lift, imagery: bokeh-background, motifs: floral-botanical, tone: opulent-grand` Every dimension of this seed is in the bottom quartile of registry frequency (neomorphism 4%, minimal-navigation 3%, oversized-display 3%, retro-futuristic 0% prior, bokeh-background 6%, floral-botanical 8%, opulent-grand 0% prior; hover-lift at 17% is the lone moderate). The combination is registry-first across all eight axes simultaneously — a deliberate plant in unoccupied territory. **Avoided patterns (from frequency analysis):** - **AVOIDED:** photography (95%), centered (93%), full-bleed (88%) as defaults, warm gradient (98%/93%), mono typography (96%), parallax (93%), vintage motifs (90%), hand-drawn (82%). - **AVOIDED:** stagger (70%) as macro pattern — used only at the scroll-tab fan, never on cards or grids. - **AVOIDED:** scroll-triggered fade-ins for sections (54%) — sections enter via velvet-curtain part, not opacity. - **AVOIDED:** spring (46%), magnetic (29%), tilt-3d (17%), cursor-follow (17%) — entirely absent. - **EMBRACED instead:** `path-draw-svg` (35%) but disciplined to gilded title reveals only; `ripple` (22%) only on dial press as a brass radial sheen; `hover-lift` (17%) as the single hover vocabulary.