# Design Language for chrono.games
## Aesthetics and Tone
chrono.games is a museum-arcade hybrid for **time-based games** -- a curatorial landing experience where every interactive surface is a chrono-instrument and every visual gesture collapses two centuries of time-technology into a single screen. The site imagines what would happen if an 1887 horological workshop (full of pallet forks, escapement wheels, astrolabes, and Victorian chronographs in brass-and-ebony cases) were invaded by a 1994 CRT arcade cabinet running a glitching time-travel game. The result is **pixel-art victoriana**: baroque ornament rendered in 1-bit dithered sprites, steam-pressured gauges with scanline sweep, and parchment-plated physics tables that flicker like a failing vacuum tube.
The tone is **reverent-playful, mysteriously nostalgic, mechanically obsessed**. The site is neither a product page nor a marketing funnel -- it is a **Chronometric Cabinet**, a scrolling atlas of time-game paradoxes, grandfather clocks that tick in reverse, and causality loops diagrammed with copper-plate engraving and NES-era sprite sheets pressed together. Inspiration comes from: Patek Philippe vintage catalogues, Breguet's 1810 technical drawings, the opening title sequence of *Chrono Trigger* (1995), MS-DOS bootscreens, Jules Verne's illustrated editions, Hieronymus Alexander Deichsel clockwork diagrams, the cabinet art of *Time Pilot* (Konami, 1982), Muybridge's locomotion plates, and the amber phosphor glow of a Kaypro II monitor at 3am. The mood is hushed and slightly haunted -- as if every pendulum in the room remembers a different century.
## Layout Motifs and Structure
Primary layout: **timeline-vertical fused with magazine-spread**, and crucially using **stacked-sections** (a rarely-seen 1% pattern) where each section is framed as a distinct "plate" in a horological catalogue -- not a card grid, not a bento box, but discrete folio pages with heavy engraved borders separating them. No card grid. No centered hero. No CTA block.
**Structural anatomy (top to bottom):**
1. **The Movement Plate (0-100vh)** -- A full-bleed opening that mimics the exposed movement of a pocket watch. A single colossal gear (SVG, rotating imperceptibly at 0.1rpm) dominates the left two-thirds. To its right, the wordmark `chrono.games` is set in a revival display serif with pixel-art stippling worn into its terminals. Subtitle in tech-mono: `EST. ???? -- a cabinet of temporal amusements`. Beneath the wordmark, a tiny 16x16 sprite of a wound-up mainspring pulses.
2. **The Escapement Gallery (100-260vh)** -- A **timeline-vertical** column of 7 "game artifacts" arranged like entries in a 19th-century auction catalogue. Each entry is a horizontal plate (no grid; each is full-width, stacked). Left half: a pixel-art rendering of the game in progress, framed by ornamental brass corners. Right half: engraved-style typography giving the game's name, mechanical principle, and a paradox warning. Entries include: *The Grandfather Paradox Clock* (a reverse-tick idle game), *Rewind Parable* (a puzzle that plays itself if you don't move), *Entropic Gardens* (time flows backwards in three of four quadrants), *The Causal Billiards Parlor*, *Dilated Runner*, *Chronosolitaire: Two Decks, Two Epochs*, and *The Last Tuesday Problem*.
3. **The Horological Diagram (260-380vh)** -- A full-width technical illustration rendered in SVG as an animated exploded-view diagram of a fantastical time-machine. Labels are drawn on via `path-draw-svg` with copperplate italic captions. This is the site's centerpiece and takes up an entire viewport of vertical space without text-dense filler.
4. **The Paradox Index (380-500vh)** -- A **magazine-spread** two-column editorial essay on narrative time in games, typeset like a Victorian scientific journal, with drop-caps, margin glyphs, and a running footer. Columns are asymmetric (7/12 + 5/12). Pixel-art marginalia dot the page -- tiny sprite-animated figures walking backwards, pendulums swinging, hourglasses inverting.
5. **The Demonstration Room (500-600vh)** -- A single interactive demo frame: a minimal JS-rendered toy where dragging your cursor horizontally moves a pixel-art character forward or backward through time. The background color-grades from sepia dawn to CRT-phosphor midnight as you drag.
6. **The Colophon (600-700vh)** -- A quiet closing plate in the style of a printed dedication page: a single line of centered text in italic revival serif, a small ornamental rule (a horizontal pendulum), and the imprint: `PRESSED ON THE OCCASION OF A WEDNESDAY THAT HAS NOT YET OCCURRED`.
The structure avoids: centered hero sections, card-grids, bento-box modules, pricing tables, stat counters, feature icons in rows of three, and testimonial blocks. The entire page is **one continuous engraved folio**, scrolled rather than clicked.
## Typography and Palette
**Typography (all Google Fonts, real and available):**
- **Display / Headings:** **"IM Fell English SC"** (Google Fonts) -- a 17th-century revival based on the John Fell types, with the uneven inking and slight metal-letterpress imperfections left intact. Used at `clamp(3rem, 9vw, 9rem)` for the wordmark and major plate titles. Its historical authenticity anchors the victoriana; its slight roughness ties visually to pixel-art stippling.
- **Editorial body / long-form:** **"Cormorant Garamond"** (Google Fonts), 400 and 500, used for the Paradox Index essay and all catalogue descriptions. Generous line-height `1.75`, measure capped at `62ch`.
- **Captions, margin notes, paradox warnings:** **"IM Fell Double Pica Italic"** (Google Fonts) at `0.95rem` -- reserved for hand-annotation style labels on diagrams and calligraphic asides.
- **Technical / mono / meta:** **"VT323"** (Google Fonts) -- a CRT-monitor revival pixel-mono, used for timestamps, game identifiers (`ARTIFACT #4.117.a`), and all machine-generated inscriptions. This is the single largest tonal intrusion from the 1994 arcade side of the house.
- **Display accent (sprite-adjacent):** **"Silkscreen"** (Google Fonts) -- a tight bitmap sans, used sparingly for pixel-art label plaques beneath sprites (4-6 words maximum per use).
**Palette (8 colors):**
- `#1a1410` -- **charred ebony** (primary background; the lacquered case of an antique clock)
- `#f4e9d1` -- **parchment cream** (primary surface; aged cataloger's paper)
- `#b8894b` -- **aged brass** (accent; gear teeth, ornamental rules, section dividers)
- `#6b3410` -- **walnut umber** (secondary surface; wood grain borders, engraved shadows)
- `#2d5a3f` -- **patina verdigris** (quiet accent; copper-oxide on old mechanisms)
- `#d94a1c` -- **cinnabar alarm** (rare accent; the "paradox detected" warning color, used at most twice per viewport)
- `#38d878` -- **phosphor green** (the CRT intrusion; glows on interactive pixel elements only, reserved strictly for moments where 1994 punctures 1887)
- `#8e7a5a` -- **dust-filmed gold** (hover state for brass elements, a step darker than aged brass)
The palette is **duotone-by-section**: each plate uses at most three of these eight, so the reader experiences a quiet chromatic drift rather than a noisy full-palette page.
## Imagery and Motifs
**Core organizing metaphor: the exploded horological plate.** Every decorative element is either a clockwork component or a pixel-art sprite, sometimes both fused into one object.
**Specific motifs:**
- **Gears, escapements, pendulums** rendered as SVG line-art with hairline (0.5px) engraving hatches. A 220-tooth gear slowly rotates in the opening plate; smaller pinions at 24, 36, and 12 teeth turn at mathematically correct gear-ratio speeds. The animation is **imperceptibly slow** (full rotation = 10 minutes) -- visitors who linger notice movement; quick scrollers do not.
- **Pixel-art vignettes (16x16, 32x32, 48x48)** drawn in 1-bit dither with `image-rendering: pixelated`. Characters include: a bowler-hatted figure winding a pocket watch, a raven perched on a pendulum, a tiny cathode-ray tube, a grandfather clock with a trapdoor in its base, an hourglass spilling stars, a key turning in a keyhole that has no door around it.
- **Engraved ornamental borders** at plate boundaries: dingbat chains of tiny gears and ampersand-like scrollwork, rendered as SVG along a path. These act as section dividers instead of `
` rules.
- **Scanline overlay** -- a nearly-invisible `repeating-linear-gradient` at 3% opacity across the whole document, applied only on elements that want to feel "tuned in" (the Demonstration Room demo frame, the pixel-art sprites). The rest of the page is clean parchment.
- **Marginalia**: tiny annotations in IM Fell italic written in the page margins, as if a 19th-century editor had reviewed the page: `query: is this mechanism a game or a grief-manager?` `see plate IV, fig. 2b.` `attrib: prob. English, c.1884, likely forgery.`
- **Copper-plate diagram lines** drawn onto the page with `path-draw-svg`, activating only when their plate enters the viewport.
- **Stippled halftones** used sparingly for photographic-feeling illustrations -- hand-rendered in the pixel-art style, not real photography.
No stock photography. No 3D renders. No photograph grain overlays. No gradient meshes. No glassmorphic cards. The imagery is **100% drawn** -- part engraving, part pixel-art -- with zero raster photography anywhere on the page.
## Prompts for Implementation
**Narrative stance:** The site tells the visitor that they have walked into a museum cabinet that was once an arcade. They are not customers; they are curators looking through a vitrine. Every interaction must feel like winding a watch or coaxing a tube-amp to life. There is no CTA above the fold, no sign-up modal, no pricing, no feature matrix, no testimonial wall, no trust-badge strip, no "trusted by" logos, no stat counter, no social-proof rail, no newsletter popup, and no hero-image-with-button.
1. **The Movement Plate opening:** On load, the page is dark. An escapement tick-tock plays once (optional audio, muted by default), and a single hairline stroke draws itself across the top of the page from left to right over 1600ms using `path-draw-svg`. Behind it, the colossal gear fades up from `#1a1410` to full opacity. The wordmark `chrono.games` types itself in **not** with a typewriter effect (overused at 18%), but with a **pixel-fill effect** -- each glyph is initially drawn as its silhouette in 1-bit pixels, then individual pixels invert themselves in a spiral pattern until the serif shapes emerge. This is unique to this site.
2. **Parchment reveal on scroll:** As the visitor scrolls past the Movement Plate, the background transitions from ebony to parchment with a **page-lift effect** -- the ebony appears to be a page being turned, with a subtle shadow sweeping left-to-right, revealing cream beneath. Implemented with a CSS `clip-path` inset animation driven by `scroll-triggered` intersection observer.
3. **Gear sync on cursor:** In the Horological Diagram section, moving the cursor across the viewport causes the main gear to micro-advance or micro-retard its rotation by fractions of a tooth. Small pinions follow via gear ratios. This is `cursor-follow` but translated into mechanical coupling -- the cursor is the crown of an invisible watch.
4. **Pixel-art sprites on IntersectionObserver:** Each sprite is static until its entry enters the viewport, at which point it begins a 4-frame loop (bowler figure tips hat; raven blinks; hourglass flips). Sprites use `image-rendering: pixelated` and are drawn as SVG `` or inline `