# Design Language for miris.works ## Aesthetics and Tone miris.works is a **deep-space xenomineral archive** — imagine a crystallographer's field station built inside a decommissioned observation satellite, where every surface is coated in frost-dusted hexagonal panels and every reading instrument glows with muted amber-green bioluminescence. The name *miris* (Latin: *wondrous, strange*) + *works* (the mechanism, the hidden clockwork) frames the site as a **living apparatus of strange beauty**: a system that catalogues phenomena you cannot fully explain. The tone is **mysterious-moody but not gothic**: there is no dramatic flair, no horror-adjacent darkness. Instead it is the quietude of a scientist alone in a polar research station at 3am, surrounded by instruments, watching a crystal grow under the microscope. The atmosphere is cold, precise, and faintly uncanny — the sci-fi of Andrei Tarkovsky's *Stalker* rather than of Marvel. Every screen-frame feels like a **slow exposure photograph** taken through a telescope eyepiece: deep blacks giving way to muted teal-amber forms, crystalline structures caught mid-formation, geometry that is almost biological. The palette is **muted-vintage sci-fi**: faded like a 1970s astronomical slide show projected on a pale concrete wall. Colours are never saturated — they are always as if viewed through frosted glass or processed through an old Kodachrome developer. The vintage quality is not decorative nostalgia; it is the passage of time inscribed in scientific instruments still in use. ## Layout Motifs and Structure The page is structured as a **hexagonal-honeycomb observatory deck** — a single full-height scroll composed of interlocking hexagonal panels that tile seamlessly edge-to-edge without gaps. This is not a card grid. It is an immersive tiling system where each hex cell is a different depth, opacity, and state of illumination — some opaque, some translucent (revealing star-field beneath), some empty (void panels). **The Honeycomb Grid.** A CSS `clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)` tiling system forms the structural backbone. Hexagons are arranged in offset rows (even rows shift right by half a hex-width). The grid fills the viewport fully — 6 columns × as many rows as content requires. Hexagons are `280px` wide on desktop, scaling to `140px` on mobile via a single CSS custom property `--hex-size`. Hex cells breathe: on scroll, clusters of cells animate from `opacity: 0.3` to `opacity: 1` as they enter the viewport, creating the illusion of an observatory console powering up section by section. **Depth layers.** Three stacking layers: 1. **Background layer:** A static star-field SVG (`position: fixed; z-index: 0`) — a 3000×3000px grid of randomized 1px dots at varying opacities (0.1–0.6), giving the sense of infinite depth behind the hex panels. 2. **Hex grid layer (`z-index: 1`):** The tiling system — each cell clipped to a hexagon, filled with either the hex-panel colour or transparent (void). 3. **Glow layer (`z-index: 2`):** Floating SVG crystal formations and instrument-glow elements that sit above the hex grid, positioned absolutely in specific grid cells. **Navigation.** No top nav bar. Instead, six small hex-shaped navigation nodes are fixed to the right edge of the viewport at `position: fixed; right: 2rem`, arranged vertically at even intervals. Each is a `32px` hex button with a single character label rendered in the display font. On hover: the hex illuminates with an amber glow diffusing outward via `box-shadow`. The active section node has a slow breathing pulse animation. **Scroll behaviour.** The page does not paginate or snap. It scrolls freely and continuously. As each new section of the hex grid enters view, a JavaScript `IntersectionObserver` triggers a staggered reveal of that section's hex cells — they "crystallise" from translucent to solid over 600–900ms with a slight scale (0.92→1.0) and opacity (0→1) transition. The crystallisation sequence moves diagonally across the hex grid from top-left to bottom-right, mimicking the growth pattern of a real crystal. ## Typography and Palette **Typography — geometric-sans, all on Google Fonts:** Three faces in strict named roles. No font outside these three appears anywhere. - **Display & Section Headers: *Exo 2*** — variable weight `wght 200–900`, used at `wght 300` for large headings to create an airy, slightly alien quality. The sparing geometric strokes of Exo 2 read as **instrument labelling from a near-future probe**: scientific, precise, not humanist. Used at `clamp(44px, 7vw, 96px)` for the primary wordmark, `clamp(22px, 3.5vw, 38px)` for section titles. Tracking: `0.08em`. All-caps for section titles only. - **Body Text: *DM Sans*** — variable weight `wght 300–500`. DM Sans is geometric but warmer than pure grotesque, carrying readable text through long prose without fatigue. Used at `wght 350` for body copy, 17px / 1.65 line-height desktop. Its open apertures read well against the dark background panels. - **Mono / Data Labels: *Space Mono*** — fixed-weight monospace, used exclusively for coordinate labels, instrument readings, hex-cell content identifiers, and any data-like text. Weight 400, size 12–14px, tracking `0.04em`. Colour: `#A8C5A0` (Instrument Green) at 75% opacity. This font carries the "field station log" quality that grounds the sci-fi aesthetic in tactile reality. **Palette — muted-vintage astronomical:** All colours are desaturated and slightly aged — never pure or fluorescent. The palette is built from the five dominant hues of a 1970s-era photographic plate of the Horsehead Nebula: the cold void, the warm emission nebula, the dusty filament, the instrument amber, and the frost. - `#12100E` — Deep Carbon (primary background): almost-black with a faint warm undertone; the void between stars - `#1E2A28` — Observatory Teal (panel background, hex cell fill): dark teal that reads as aged institutional wall paint in a research station; cooler than charcoal - `#2D3F3C` — Instrument Console (secondary panel): slightly lighter teal for alternating hex panels - `#8BA89E` — Frost Sage (body text, labels): desaturated sage-green that reads clearly on dark panels without harshness - `#B8956A` — Amber Filament (accent, glow, hover states): the warm amber of an instrument light or a bioluminescent vein in a crystal; never used in large fills, always as accent or glow - `#6B8E85` — Glacial Teal (links, interactive borders): mid-value teal, the colour of a frozen lake seen through 30m of ice - `#C4B89A` — Aged Parchment (primary text on light moments, if any): warm off-white that evokes photographic paper left to age; used for the wordmark - `#3D2E1F` — Darkened Amber (hex cell hover fill): deep amber shadow, used as the hover-state background of interactive hex cells **Gradient:** The wordmark section uses a subtle three-stop gradient overlay on the background: `linear-gradient(160deg, #12100E 0%, #1E2A28 55%, #12100E 100%)` — the sense of a spotlight falling across a dark observatory floor. ## Imagery and Motifs **Imagery: duotone-photo, crystalline motifs.** All photography is processed as strict duotone — two-colour conversions mapping shadows to `#12100E` (Deep Carbon) and highlights to `#B8956A` (Amber Filament) or `#8BA89E` (Frost Sage) depending on the section. The duotone effect is applied via CSS `filter: grayscale(100%)` + a `mix-blend-mode: multiply` colour overlay, so it is computed in-browser without additional assets. Photography subjects: extreme close-up macro shots of real mineral crystals, ice formations, circuit-board traces, and organic filament structures — always ambiguous scale (could be a galaxy or a grain of salt). No portraits. No architectural exteriors. **Crystalline motifs (primary decorative language):** 1. **Procedural SVG crystals.** Each hex cell that functions as a decorative (non-content) panel contains a small SVG crystal cluster: 4–7 irregular polygon facets arranged around a central point, stroked in `#6B8E85` at 0.8px, with alternating facets filled at 3–8% opacity in `#B8956A` or `#8BA89E`. The crystals are generated programmatically on page load using a seed derived from the cell's grid position, so they are always consistent between reloads but unique per cell. No two cells share the same crystal geometry. 2. **Underline-draw animations (the primary interaction signature).** When text links, labels, or instrument-reading strings first appear (on scroll-entry), they are drawn left-to-right using SVG `stroke-dashoffset` animation: a 1px line in `#B8956A` sweeps beneath the text over 500ms at `cubic-bezier(0.25, 0.46, 0.45, 0.94)`. This is the sole pattern-draw animation on the site — used ONLY for text elements, never for decorative borders or structural lines. The effect is subtle: it reads as the instrument annotating its own readout. 3. **Hex cell breathing.** Idle hex cells perform a very slow `opacity` oscillation (0.6→1.0 over 4000ms, `ease-in-out`, staggered by `animation-delay` based on grid position), creating the impression that the honeycomb is a living membrane pulsing with faint electrical activity. The stagger period is `50ms × (column index + row index × 6)`, so the pulse travels diagonally across the grid like a slow wave in crystal lattice. 4. **Frost ring glow.** The wordmark is flanked by a large (400px diameter) SVG `` with no fill and a 1px stroke in `#6B8E85` at 10% opacity, offset slightly (15px right, 20px down from centre) — a second concentric ring at 600px in `#B8956A` at 4% opacity. These are `position: absolute` behind the wordmark, giving it the quality of sitting at the centre of a diffraction ring pattern as seen in polarised light microscopy. 5. **Coordinate readout HUD.** In the top-left corner of each major section, a small `Space Mono` text block shows mock coordinates: `RA 05h 35m 17.3s / Dec −05° 23′ 28″` (format of real astronomical coordinates). These update via JavaScript as the user scrolls — the declination value increments slowly, implying the observatory is tracking a moving object. The value never corresponds to a real coordinate; it is purely atmospheric. ## Prompts for Implementation Build miris.works as **a single continuous hexagonal observatory membrane that the visitor reads by moving through space rather than down a page**. The hex-tiling must feel structural, not decorative — every cell carries meaning or void intentionally. There are no CTAs, no pricing, no testimonials, no feature grids, no statistics blocks. Only: the wordmark, crystallographic specimens, and the unnamed system the observatory is tracking. **Macro structure (top-to-bottom, single scroll):** 1. **`SECTOR 00 — OBSERVATION LOCK` (100svh).** Full viewport opener. Background: Deep Carbon `#12100E`. The hex grid is rendered across the full viewport with ~60% of cells as void (transparent, star-field visible through them) and ~40% filled in Observatory Teal, creating a constellation-like sparse pattern. The wordmark `miris.works` sits at the geometric centre of the viewport: `Exo 2`, weight 300, `clamp(56px, 9vw, 112px)`, colour `#C4B89A`. Beneath it: a single DM Sans line, weight 300, 18px, `#8BA89E`: `"apparatus of strange beauty"`. The frost ring SVGs glow behind the wordmark. On load, the hex cells crystallise in — staggered diagonally over 1400ms. After 2000ms, the amber underline-draw animation traces beneath `miris.works`. The six fixed hex nav nodes fade in at 2500ms. 2. **`SECTOR 01 — SPECIMEN FIELD` (120svh).** The hex grid here is denser: ~75% of cells filled, alternating between `#1E2A28` and `#2D3F3C`, with 8 special cells containing SVG crystal clusters at larger scale (60–90px wide). The duotone photograph (macro mineral crystal) occupies a 3×4 hex cluster in the centre-left — clipped to the combined hexagonal outline of the cluster using CSS `clip-path` with a complex polygon. Section title `SPECIMEN FIELD` in Exo 2, all-caps, appears via underline-draw left-to-right. Body prose in DM Sans describes the nature of the specimens. 3. **`SECTOR 02 — STRUCTURAL ANALYSIS` (100svh).** A more open layout: the hex grid at 50% density. This section uses the HUD coordinate readout most prominently — six coordinate pairs are displayed in `Space Mono` within individual hex cells, each cell bordered by a 0.6px `#6B8E85` stroke. The crystal SVGs in this section are arranged to read as a schematic — positioned in a 2×3 formation that mirrors the layout of a crystallographic unit cell diagram. 4. **`SECTOR 03 — DARK FIELD` (110svh).** The full-bleed section with the highest drama. Background transitions to pure `#12100E` with only 15% hex fill — nearly all void. A single large duotone image (macro ice crystal or circuit trace, duotone in `#8BA89E` highlights) occupies a 4×5 hex cluster on the right. On the left, a vertical stack of three DM Sans paragraphs in `#8BA89E`, weight 350. The prose is in the voice of the apparatus itself — not human, not robotic, but as if the observatory is narrating its own observations. Paragraph spacing is generous: 2.4em between blocks. 5. **`SECTOR 04 — TRANSMISSION LOG` (90svh).** The most text-dense section. Left side: a `Space Mono` monologue formatted as a log — timestamps (fictional), readings, and terse observations. Right side: a 3×3 hex cluster of small decorative crystal cells. The log entries animate in one line at a time on scroll entry, each line fading from `opacity: 0` to `1` over 200ms with a `20ms` stagger — the impression of a terminal printing in real time. 6. **`SECTOR 05 — VOID` (80svh).** The closing section. Minimal: only the hex grid at 20% fill, the star-field dominant. A single line in Exo 2, weight 200, 28px, `#B8956A`, centred: `"the apparatus continues"`. No contact link. No footer. The coordinate HUD in the top-left shows a final reading. The page simply ends in the void — the observatory keeps running after the visitor leaves. **Animation principles:** - All transitions: `cubic-bezier(0.25, 0.46, 0.45, 0.94)` — never `ease-in-out` defaults - `prefers-reduced-motion`: collapse all crystallisation delays to zero, remove hex breathing - Star field: rendered once into an off-screen canvas, converted to SVG `` — never animated - Crystal SVGs: generated via a 20-line procedural function seeded by `(col * 31 + row * 17) % 997` - Hex breathing: CSS `@keyframes hex-breathe` with `animation-play-state: paused` until IntersectionObserver fires - Underline-draw: `stroke-dasharray: 100%; stroke-dashoffset: 100%` on enter, animated to `stroke-dashoffset: 0%` **AVOID:** - Any solid rectangular containers or cards - Drop shadows (use inner glow via `box-shadow: inset` only) - Gradient text effects - Particle systems (use the static star-field only) - Any rounded-corner radius on the hex panels (hexagons are angular, not softened) - The word "Works" capitalised as a standalone design element (overused in .works TLD designs) ## Uniqueness Notes **Differentiators from the existing 50+ design corpus:** 1. **Hexagonal structure as information carrier, not decoration.** Frequency analysis shows `hexagonal-honeycomb` at 4% but no existing design uses hex cells as primary information containers where void cells are semantically intentional. miris.works assigns meaning to which cells are void — the constellation of voids in Sector 00 is not random filler; it is part of the observatory's atmosphere. This is the first design where negative space within a tiling system carries as much weight as the filled cells. 2. **Muted-vintage sci-fi palette without neon or bloom.** The corpus shows `sci-fi` at 6% and `sci-fi-hud` at 6%, but analysis of those designs reveals they almost all rely on neon-blue, electric-cyan, or bloom-glow effects associated with futuristic HUD aesthetics. miris.works explicitly rejects this: the sci-fi is Tarkovskian — analogue, muted, institutional-green-amber, as if the instruments were built in the 1970s and are still running. `muted-vintage` appears at only 1% in the corpus; miris.works is the first to combine it with sci-fi crystallography. 3. **Underline-draw as sole animation language for text, coordinated with crystallisation reveals.** The corpus shows `underline-draw` at 6%, but in other designs it is typically a hover-state decoration on links. In miris.works, underline-draw is the **primary scroll-entry reveal for all text headings** — it reads as the instrument itself annotating its output. Combined with the hex crystallisation reveal (which uses scale+opacity, not underline-draw), the two animation languages are divided by content type: geometry uses crystallisation, text uses underline-draw. No other design in the corpus separates animation language by content type in this structured way. 4. **Duotone photography clipped to hex cluster outlines.** `duotone-photo` appears at 2% in the corpus, always as rectangular or free-floating images. In miris.works, the duotone images are clipped to the combined convex hull of a multi-cell hexagonal cluster, making the photographs structurally part of the hex tiling rather than elements placed on top of it. The result: images do not look inserted — they look as if they crystallised out of the grid itself. 5. **Coordinate HUD as atmospheric narrative device.** HUD-overlay appears at 3% in the corpus but is always used as static decorative chrome. miris.works uses the coordinate readout as a live narrative element that scrolls with the user — the declination incrementing as the user moves through sections implies the observatory is actively tracking something. The visitor never learns what. This creates persistent ambient mystery without any explicit copy describing it. **Seed:** aesthetic: sci-fi, layout: hexagonal-honeycomb, typography: geometric-sans, palette: muted-vintage, patterns: underline-draw, imagery: duotone-photo, motifs: crystalline, tone: mysterious-moody **Avoided patterns from frequency analysis:** - `dashboard` (21%) — no instrument panels as UI metaphor; the observatory is atmospheric, not operational - `parallax-sections` (10%) — replaced by hex-cell crystallisation reveals; no Z-axis parallax - `masonry` (9%) — explicitly rejected; all layout logic is hexagonal tiling, not masonry columns - `card-grid` (8%) — the hex cells are NOT cards; they have no borders, shadows, or hover-lift effects - `vintage` as decorative nostalgia (41%) — the vintage quality is embedded in the palette's desaturation, not in serif ornaments, torn-paper textures, or retro badge illustrations