# Design Language for a6c.boo ## Aesthetics and Tone a6c.boo is a **Scandinavian opulence** experiment: imagine the moment a state-funded Norwegian oceanographic institute commissions a court jeweler to redesign their public archive. The result is the visual paradox the site lives in — Nordic restraint draped over deep-water grandeur. The `.boo` TLD is treated not as cute but as **spectral**: a quiet haunting that drifts beneath the surface, the way a humpback's call carries 600 km through the SOFAR channel without ever breaching. The mood references three specific touchstones: 1. **Edvard Munch's "Melancholy" (1894)** — that band of slate ocean under a thick sky, the figure pushed to the edge of the frame, the negative space doing all the emotional work. 2. **The interior of the Stockholm City Hall's Golden Hall (Gyllene salen, 1923)** — eighteen million tesserae over a Nordic-functional brick shell. This is the design's central paradox: ascetic structure, opulent surface. 3. **The Mariana Trench bioluminescence footage from Schmidt Ocean Institute** — pinpoints of cold-blue light against a void so deep it has no Pantone equivalent. The tone is **opulent-grand without being loud**. The site whispers in gilded whispers. Where most "luxury" sites shout in serifs and gold gradients, a6c.boo holds its breath. The experience is contemplative, slightly unnerving, deeply serious — a museum at 2am with one wall lit and the rest swallowed by trench-blue dark. The "boo" reading: it is the sound a deep-sea pressure wave makes in a hydrophone. It is the half-vowel of a ghost being polite. It is *boreal* + *ocean* compressed into two letters and held there. ## Layout Motifs and Structure The structure is a strict **F-pattern** — and this is unusual; the frequency analysis shows F-pattern at 2%, which means almost no other site in this archive uses it. Most sites here lean immersive-scroll, full-bleed, asymmetric. a6c.boo commits to the F-pattern because it is the layout of *reading*, not *consuming*, and the site treats its visitor as a reader walking through a marine library. **The F skeleton:** - A **horizontal masthead bar** runs the full width at the top — 64px tall on desktop, 48px on mobile — containing only the wordmark "a6c.boo" set flush left, a thin vertical hairline divider, and a single discreet UTC timestamp at flush right. No nav. The masthead is the upper stroke of the F. - A **vertical reading rail** sits at left, exactly 18% of viewport width on desktop (clamped 240px–320px), holding section glyphs and an isometric depth-meter. This is the spine of the F. - The **content river** flows right of the rail in a single column constrained to 62ch (≈ 720px) of measure, with paragraph indents only on continuation paragraphs (Norwegian academic-typesetting rule). The first horizontal arm of the F. - A **midspan horizontal band** at scroll position ~40% sweeps full-width as a single oceanographic plate — a deep-section illustration that breaks the column to remind the eye that water has horizons. The second arm of the F. - Below the second arm, the column resumes alone — narrower attention, footnotes only. This is the descender of the F. **Spatial relationships:** - 12-column grid, 24px gutters, baseline grid 8px, all type aligned to baseline. - The vertical rail is **not** a sidebar. It does not scroll independently. It uses sticky positioning with a subtle parallax delta (-0.15) so the depth meter drifts slightly slower than content — a gentle suggestion of descent. - Section breaks are signaled by a **single horizontal hairline** at 0.5px, set in the gilded color (#C9A96A). No section headers in the conventional sense; instead, the depth meter on the rail advances and the first letter of the next section is set as a 6-line drop cap. - White space is generous on the right margin (often 200px+ on wide screens) — this is the "ma" (間) of the design, deliberately uneconomical. ## Typography and Palette **Typefaces (Google Fonts only):** - **Space Grotesk** — variable, 300–700, used as the **grotesque-neo** display face. Headings, masthead wordmark, depth-meter labels. The wordmark "a6c.boo" is set in Space Grotesk at weight 500, tracked +60, lowercase. The "6" is treated as a small quirk — its open terminal is the only "warm" mark on the page. - **Cormorant Garamond** — for the opulent register. Used only for: the single hero pull-quote per section, the drop caps, and the colophon. Weight 300 italic for pull-quotes (sets a "field-notebook" feel), weight 600 for drop caps. This is the gilded cathedral inside the wooden chapel. - **JetBrains Mono** — for the depth-meter readouts, hydrophone timestamps, the UTC stamp in the masthead, and any hashed identifiers (a6c is itself a 3-byte hex string; the site treats it as such). 12px on the rail, 11px in footnotes. - **Inter** — body copy, 16px base, 1.65 line-height, weight 400. Inter handles the academic-archive prose without drama. Falls back gracefully on every system. **Palette — "ocean-deep" interpretation, named:** - `#0A1628` — *Trench* — primary background, this is the void below the photic zone. Not black, not navy, a specific bluish-charcoal that absorbs ambient light. - `#13243C` — *Bathyal* — section panels, slightly lifted off the trench. Used for the rail, the midspan band's shadow side, card backgrounds. - `#1F3A5F` — *Mesopelagic* — interactive states, hover backgrounds, subtle stratification. - `#3B6E8F` — *Photic* — accent for active elements, the depth meter's current-position indicator. - `#8FB8C9` — *Surface* — body text on dark backgrounds. A pale, slightly cold blue-gray that reads as "moonlight on water" rather than pure white. - `#E8E4D7` — *Linen* — primary text color when used on lighter inversions; also the "paper" tone for the midspan oceanographic plate. - `#C9A96A` — *Brass* — the opulent register. Drop caps, the hairline rule, the ornamental marginalia, the wordmark's quirked "6". Used sparingly — never more than 2% of pixel coverage on any given screen. - `#7A2238` — *Coral-deep* — emergency-only accent, for citation flags and the rare error state. A burgundy with bruised edges. The palette is bound by a strict rule: **no gradient may span more than two adjacent palette steps.** The "ocean-deep" register is built from layered solids and 6%-opacity noise overlays, not from mesh gradients. ## Imagery and Motifs **Primary imagery: isometric-icons.** Every illustrative element is constructed on a 30°/30° isometric grid, line weight 1px, drawn in `#C9A96A` brass on `#0A1628` trench, occasionally inverted. The icons are not generic — they are a custom set of **17 oceanographic instruments**: - Niskin bottle, CTD rosette, Secchi disk, Nansen bottle, hydrophone, Argo float, ROV manipulator arm, gravity corer, plankton net, bathyscape porthole, sextant, lead line, sonar buoy, current meter, water sampler, pressure housing, deep-sea camera trap. These appear at three scales: - **Hero scale** (180–240px) at the top of major sections, line weight 1.5px, with a slow rotational drift of ±2° on a 30s loop. The rotation is so slow it reads as "settling," not animating. - **Inline scale** (32px) in the depth-meter rail, marking each "fathom" of scroll progression. - **Marginalia scale** (16px) as scholarly footnote anchors. **Secondary motifs: retro-patterns** — used as an unexpected counterpoint to the Nordic restraint. Specifically: - A **wallpaper-pattern band** appears once, behind the colophon, drawn in the style of a 1968 Marimekko *Unikko* but rendered in single-color brass on trench at 30% opacity — a deliberate quotation, not a copy. It functions as the "signature" of the design: a moment where the Scandinavian heritage shows through the oceanographic frame. - **Decorative diamonds** (1.5px brass) used as section terminators, set in groups of three with 8px spacing. A nod to 19th-century printer's flowers without ever being one. **Texture:** every surface carries a faint **plate-paper noise** — SVG `feTurbulence` baseFrequency 0.85, numOctaves 2, opacity 4%. It reads as the grain of high-rag oceanographic chart paper, not as digital noise. **The midspan oceanographic plate** is the visual centerpiece: a full-width SVG cross-section showing the water column from surface to abyss, with the 17 instruments suspended at their working depths, each tethered by a hairline brass line to a marginalia label. The plate uses the full palette and is the only place where multiple palette steps share a frame. ## Prompts for Implementation Build this as a single-document HTML site, no SPA, no client-side router, no build step required beyond a Google Fonts link and a single CSS file. The whole experience should fit comfortably in 60KB of HTML+CSS+JS, before fonts. **Storytelling spine:** The site is structured as a **descent**. The reader enters at the surface (masthead, sunlit linen tones, photic-zone scale) and the page progressively darkens as they scroll — `body` background-color is animated via `IntersectionObserver` on five "depth markers," interpolating from `#13243C` at 0m through to `#0A1628` at 4000m. The shift is subliminally slow — over a 4-second easing per marker — so the reader never sees the change happen, only feels that the room has gotten quieter. The depth-meter on the left rail is the narrative HUD: it shows `0000m · PHOTIC`, then `0200m · MESOPELAGIC`, then `1000m · BATHYAL`, then `4000m · ABYSSAL`, then `6000m · HADAL`. Each transition triggers a section break and a soft hairline draw. **Animation pattern: skeleton-loading (deliberately, as the primary load motif).** This is the unique commitment of the site. The frequency analysis shows skeleton-loading at 2% — almost no one in the archive uses it as a primary aesthetic. a6c.boo treats skeleton-loading as **part of the visual language, not a fallback.** - On initial paint, every isometric icon, drop cap, and marginalia element renders as a **brass-hairline skeleton** for 600–1200ms (randomized per element with stagger), then the interior detail "develops" as if a chemical photograph is fixing in a tray. The line weight stays; the fills come in. This is the *only* entry animation. - Section transitions reuse the skeleton: as a new section enters viewport, its drop cap renders as outline first, then fills. - The midspan oceanographic plate is the showpiece — its 17 instruments load in sequence, each on its own 80ms delay, line-first, fill-second. The full plate takes ~2.4s to "develop." The reader is meant to *watch* it form. **Other interaction details:** - **Cursor behavior:** no magnetic effects, no cursor-follow. The cursor remains the default arrow. This is a quiet design and pointer chrome would break the spell. - **Hover states:** body links underline-draw in brass over 200ms, with a 1px translation downward in the underline that suggests the line "settling" onto the baseline. No color change. - **Scroll:** native scroll, no smooth-scroll hijacking. The depth-marker observer is the only scroll-reactive element. - **Sound:** optional. A toggle in the masthead labeled `[hydrophone]`. When enabled, plays a single 22-second loop of a real humpback song fragment (cite the recording in the colophon, attribute Cornell Lab Macaulay Library), volume 0.15, low-pass filtered. The default is **off** — opulence does not impose itself. - **The "boo":** at exactly 4000m depth (the ABYSSAL marker), the wordmark in the masthead briefly inverts colors for 80ms, a single frame of "ghost." It is the only moment in the entire experience where the site acknowledges its TLD. Easy to miss. That is the point. **AVOID:** - No CTA buttons. No "subscribe" prompts. No pricing. No stat-grids. No testimonial carousels. No team headshots. No feature comparisons. - No glassmorphism, no full-bleed photography, no parallax beyond the rail's -0.15 delta. The frequency analysis shows these patterns are saturated; this site refuses them. - No emoji, no flag iconography, no reaction widgets. - No light-mode toggle. The site is a deep-ocean experience; surfacing it would be a category error. **Content tone for any prose written into this design:** Write as a marine archivist who is also a poet — precise, unhurried, occasionally allowing a Nordic understatement to crack into a quiet astonishment. Sentence length varies. Scientific units are never approximated. Citations are first-class. There is exactly one joke in the whole site, buried in the colophon. ## Uniqueness Notes Five differentiators that this design commits to and that other CMassC sites should not duplicate: 1. **The Scandinavian + opulent-grand tension.** The frequency analysis shows zero (0%) sites in this archive currently use `scandinavian` aesthetic, and only 5% use `opulent-grand` tone. Combining them — Nordic functional skeleton with a single restrained gilded register — is a position no other site in the corpus occupies. Most opulent sites in the archive are warm and gradient-heavy; this one is cold, structural, and 98% un-gilded. 2. **F-pattern as primary structure.** F-pattern is at 2% in the archive. Almost everything here is full-bleed (85%) or centered (72%). a6c.boo's strict masthead + vertical rail + content river commits to the *reading-pattern* layout, not the *consumption-pattern* layout. The vertical rail is sticky-with-parallax-delta, not a sidebar — a distinct mechanic. 3. **Skeleton-loading as the primary entry aesthetic, not a fallback.** Skeleton-loading is at 2% in the archive. Treating the brass-hairline outline as the *first state* of every illustration, then "developing" the fill as a deliberate 600–1200ms reveal — and reusing this on section transitions — turns a loading anti-pattern into the signature animation. No other archive site uses skeleton-loading as a designed experience. 4. **Custom 17-piece oceanographic instrument iconset, drawn at strict 30°/30° isometric, used at three scales as the only illustration system.** Most sites here that use isometric (10%) use it for generic tech objects; this site uses it for a specific, researched, narrowly scoped instrument library, which becomes the visual through-line. 5. **The 4000m "boo" — a single 80ms color inversion of the wordmark, triggered exactly once at the abyssal scroll marker.** A deliberately easy-to-miss, non-repeating microevent. No other site in the archive (per the patterns frequency: glitch at 10%, blur-focus at 12%) commits to a single, unrepeated, 80ms event as the design's TLD-signature. **Chosen seed:** `aesthetic: scandinavian, layout: f-pattern, typography: grotesque-neo, palette: ocean-deep, patterns: skeleton-loading, imagery: isometric-icons, motifs: retro-patterns, tone: opulent-grand`. **Avoided patterns from frequency analysis:** - Avoided **hand-drawn aesthetic** (90% — saturated). - Avoided **photography imagery** (95% — overwhelming dominance). - Avoided **full-bleed layout** (85%) and **centered layout** (72%) — both saturated. - Avoided **gradient palette** (90%) and **warm palette** (90%) — both ubiquitous. - Avoided **parallax patterns** (92%) as a primary motion language; permitted only the rail's subtle -0.15 delta. - Avoided **mono typography** (92%) as the *primary* face — used JetBrains Mono only for instruments (depth meter, timestamps), Space Grotesk and Cormorant Garamond carry the voice. - Avoided **glassmorphism aesthetic** (65% — heavily used). - Avoided **spring/stagger/cursor-follow** as the headline interaction patterns; skeleton-loading carries that role here instead.