# Design Language for sora.quest ## Aesthetics and Tone `sora.quest` is **a Victorian natural philosopher's field journal, pressed between the pages of an infinite sky** — imagine the annotated sketchbooks of an 1870s meteorologist-polymath who has spent forty years charting the upper atmosphere from a stone observatory tower, and whose notes have been gently liquefied by decades of coastal fog until the ink runs blue-grey at the margins. The site reads like a bound folio of hexagonally-tiled observation frames: each cell is a discrete sky-window, a single datum, a fragment of an unfinished theory about the nature of wave-forms in the aether. The mood is **scholarly-intellectual** with the considered patience of a mind that classifies cloud formations the way other minds catalog insects: lovingly, precisely, with small pencil annotations in the margins. The palette is the honest palette of Victorian coastal science — cold slate, deep tidal indigo, chalk, beeswax, storm-glass grey — with the occasional shock of oxidized verdigris where copper instruments meet sea air. Every typographic decision echoes the clash the Victorians loved: the ornate gilded crest on the cover of a monograph published by a very serious university press, inside which sits text set in a blunt, no-nonsense grotesque that says *this is a working instrument, not a decoration*. The tension between the decorative outer shell and the rigorous inner content is the aesthetic engine of sora.quest. **Primary tone:** scholarly-intellectual — measured, observational, quietly authoritative, never performative. ## Layout Motifs and Structure The structural backbone is **hexagonal-honeycomb tessellation** — but rigorously applied as a *natural philosophers' specimen tray*, not as a trendy CSS flex pattern. The entire page is understood as a honey-comb of hexagonal observation cells, each 240px point-to-point on desktop (scaling down to 160px on tablet and 120px on mobile), arranged in offset-row tessellation with 2px gaps between cells rendered as engraved-rule lines in the Victorian tradition. The tessellation is non-uniform in one deliberate way: every fifth row contains a **"principal cell"** — a hex that expands to span three cells, containing a full observational passage or an animated wave-form diagram. These principal cells break the honeycomb rhythm the way a master-plate breaks the field observations: authoritative disruption. Page architecture: - **Masthead strip (100vh):** Full-viewport hex mosaic with a central large principal cell bearing the wordmark. Surrounding cells contain living wave-form SVG paths that draw themselves on load, left to right, like a seismograph trace recording the site's first breath. The wordmark `sora` is set large in the display grotesque, with `.quest` as a diminutive label-font annotation below it. - **Section I — The Observatory Log (scroll-triggered):** A tight 7-column hex grid. Each cell is a sky fragment: color-field (from the coastal palette), a single datum-heading, and a micro-annotation. Cells reveal in staggered sequence as the user scrolls, like cards dealt face-up across a felt-covered table. - **Section II — The Wave-form Folio:** Three full-width principal cells stacked vertically, each containing a large path-drawn SVG wave-form diagram with Victorian engraved-style labels. These are the site's long-form sections — they behave like fold-out plates in a monograph: wide, patient, detailed. - **Section III — The Specimen Grid:** Returns to dense hex tessellation, each cell a small labeled specimen with hover-lift that raises it 3px and sharpens its engraved-rule border. - **Footer:** A single ruled horizontal band with colophon text set in the mono-width annotation face. Spatial rhythm: 8px baseline grid. All hex geometry derives from this grid (hex height = 32×8px on desktop). Margins are generous — the white (chalk) field around each hex is deliberately wide, like the margins of a careful scientist's notebook. ## Typography and Palette **Typography (Google Fonts only):** - **Primary display / wordmark / all major headings:** `Bricolage Grotesque` (Google Fonts, variable axes: wght 200→800, wdth 75→100). At H1 scale (clamp(3.5rem, 7vw, 6rem)), the weight is 800 and the width 75 — compressed and blunt, a Victorian engineering stencil. As headings descend in hierarchy, weight drops to 500 and width opens to 100 — the grotesque breathes out. The font's slight warmth (subtly humanist terminals) prevents it from reading as cold modernism; it reads as serious Victorian applied science. - **Body text / annotations / field notes:** `Source Serif 4` (Google Fonts, variable, wght 200→900, ital 0→1, opsz 8→60). Set at 16px / 1.7 line-height for body, with opsz 11 for running text (optical size optimized for the dense paragraph style of a field journal). Footnotes and margin annotations use wght 300 ital 1 at 12px. - **Labels / instrument readings / hex-cell data:** `Space Grotesk` (Google Fonts, wght 300→700). Used exclusively at small sizes (9–13px) in all-caps tracking +0.08em for instrument-panel legibility — the secondary measuring voice. In hex cell headers: wght 500. In footer colophon: wght 300. **Palette — Coastal-Blend Victorian:** - `#1C2B3A` — Deep tidal indigo (primary dark field, backgrounds of principal cells, wordmark) - `#2E4A5F` — Storm-glass slate (secondary dark, hex cell borders, engraved rules) - `#F0EBE0` — Chalk white (primary light field, body text background, specimen tray ground) - `#B8CBCC` — Sea-glass mist (mid-tone accent, wave-form line strokes, hover states) - `#7EA8A0` — Oxidized verdigris (warm accent — copper-instrument green, active states, links) - `#3B6E8C` — Prussian tide (mid-blue highlight — used in wave-form fills, principal cell tints) - `#C9A84C` — Beeswax gold (Victorian crest detail — used only in ornamental SVG borders, sparingly) - `#E8DDD0` — Fog linen (second light ground for alternating hex rows) **Color application:** Background is chalk (#F0EBE0). Dark cells use tidal indigo (#1C2B3A). Wave-form strokes are sea-glass mist (#B8CBCC) on dark cells, storm-glass slate (#2E4A5F) on light cells. Verdigris (#7EA8A0) for all interactive states. Beeswax gold (#C9A84C) used only in decorative SVG borders — never for text, never for backgrounds. ## Imagery and Motifs **No photography. No stock. No 3D renders.** All imagery is vector-art executed as inline SVG with the precision and restraint of Victorian scientific engraving. **Visual vocabulary — five families:** 1. **Wave-form diagrams** — The primary and dominant visual motif. These are animated SVG path sequences representing atmospheric wave-forms: sinusoidal, complex, damped. Each wave is a single `` element with `stroke-dasharray` / `stroke-dashoffset` animation that draws the line from left to right over 2.4–3.8 seconds on scroll entry (path-draw-svg pattern). Line weight 1.5px, color sea-glass mist (#B8CBCC). On hover, a ghost-path of the same wave in verdigris (#7EA8A0) appears 8px offset and fades in over 0.4s — as if a second measurement has been overlaid on the first. These are scientific instruments made of light. 2. **Victorian ornamental borders** — Each principal cell has an inline SVG border combining: a thin outer rule (1px), a gap (3px), and an inner ornamental rule with small repeating motifs (quatrefoils at corners, short dashes along edges). The border is drawn in beeswax gold (#C9A84C) at 0.6 opacity — present but never loud. These borders exist as a single reusable SVG `` applied as a `` element so they are defined once and instantiated everywhere without duplication. 3. **Hexagonal cell ornaments** — Every hex cell that is empty of content carries a subtle background SVG: a faint concentric hexagon series (3 nested hexagons at 60%, 40%, 20% of cell width), stroked at 0.3px in storm-glass slate (#2E4A5F), 0.12 opacity. This gives the empty cells the feel of engraved blanks waiting to be filled — specimen slots. 4. **Atmospheric cross-sections** — Three large-format SVG illustrations, one per Wave-form Folio section. Each is a transverse cross-section of the atmosphere drawn in the style of a Victorian geological diagram: horizontal strata with labels, instrument arrows, measurement annotations. Line work at 1px, labels in Space Grotesk. These are drawn on scroll entry as well (path-draw-svg), but more slowly — 4.5 seconds per illustration, strata revealing from the bottom of the diagram upward. 5. **Instrument ornaments** — Small repeated SVG vignettes: a compass rose (used in the masthead, 48px diameter), a barometer dial face (24px), a hygrometer reading (24px). These appear in hex cells as decorative-functional elements — never interactive, always precise. ## Prompts for Implementation Build `sora.quest` as **a Victorian natural philosopher's sky-journal rendered as living hexagonal tessellation**, the entire page a specimen tray of observation cells in which wave-forms draw themselves and atmospheric diagrams unfold like opening books. **Implementation blueprint:** **Masthead (100vh):** Render a full-viewport hexagonal grid using CSS clip-path or SVG polygons. The hex grid is built in JavaScript: compute hex centers for the viewport size, render each as an `` polygon. On load, trigger path-draw-svg animations in the surrounding cells (wave-forms). The central principal cell bears the wordmark in Bricolage Grotesque 800/75. A subtle CSS background noise texture (SVG feTurbulence filter, very low contrast) gives the chalk ground a paper grain. No images, no photographs. **Hex grid engine:** Write a small vanilla JS hex-grid renderer that: - Computes hexagonal tessellation for the current viewport - Assigns cell types: `plain` / `data` / `principal` / `ornament` - On scroll, reveals cells in staggered sequence (each row staggered 80ms after the previous) - Supports `path-draw-svg` cells where wave-forms animate on entry - Supports hover-lift: `transform: translateY(-3px)` + border sharpens to 2px on hover **Wave-form SVG paths:** All wave paths are pure SVG, no canvas. Each path is pre-computed as a cubic bezier sequence approximating a dampened sinusoidal wave, stored as a static string. On entry, `stroke-dasharray` = total path length, `stroke-dashoffset` transitions from full length to 0 over the animation duration. Use `IntersectionObserver` for triggering; no scroll-listener polling. **Victorian ornamental borders:** Define the hex-border ornament as a single SVG `` `` at the top of the document. Each principal cell renders ``. The ornament is a 6-sided shape that exactly inscribes the hex cell, so it works at any cell size via `viewBox` scaling. **Typography loading:** Load Bricolage Grotesque (wght 200..800, wdth 75..100) and Source Serif 4 (wght 200..900, opsz 8..60, ital 0..1) from Google Fonts with `font-display: swap`. Load Space Grotesk (wght 300..700) for labels. Preload Bricolage Grotesque 800 weight as the above-the-fold font. **Scroll narrative:** The page tells a sequential story: each section is a chapter in the field journal. Section titles appear in Bricolage Grotesque as full-width engraved-rule headers (title centered, rules extending left and right, all in storm-glass slate). The user experience should feel like slowly turning heavy pages of an illustrated monograph — patient, weighted, intellectually rewarding. **Avoid:** sidebar navigation, modal overlays, CTA buttons, pricing blocks, stat counters, infinite-scroll feeds, auto-playing video, emoji, icon packs, Bootstrap/Tailwind utility classes. **Embrace:** inline SVG, CSS custom properties for all colors and spacings, `font-variation-settings` for all variable font use, `@property` for animating CSS custom properties, `IntersectionObserver` for all scroll animations. ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = **victorian-ornate**, layout = **hexagonal-honeycomb**, typography = **grotesque-neo**, palette = **coastal-blend**, patterns = **path-draw-svg**, imagery = **vector-art**, motifs = **wave-forms**, tone = **scholarly-intellectual**. **Differentiators from the existing corpus:** 1. **Victorian-ornate + hexagonal-honeycomb combination is unoccupied territory.** victorian-ornate is at 1% in the corpus (a single occurrence), and hexagonal-honeycomb at 4%. No design in the registry combines the two. The structural tension — rigid mathematical hex geometry softened by Victorian ornamental engraving — is genuinely novel: most hex-grid designs are geometric/minimal or tech-forward; this one is a natural history museum. 2. **Wave-form as the primary narrative motif, not decoration.** wave-forms appear at 3% in the corpus, but always as background texture or accent. In sora.quest, wave-form SVGs are the primary content illustrations — they ARE the page, the specimens in the tray. The path-draw-svg animation (10% corpus usage) is used here as a scientific instrument tracing rather than as a UI reveal pattern, which is a novel semantic application. 3. **Grotesque-neo + Source Serif 4 as scholarly counter-voice.** grotesque-neo at 5% in the corpus typically pairs with minimalist or futurist aesthetics. Pairing Bricolage Grotesque with an optical-size-aware serif (Source Serif 4 with opsz axis) for body text creates the Victorian tension between a blunt instrument-label face and a refined scholarly reading face — a pairing not present elsewhere in the corpus. 4. **coastal-blend palette applied to a dark-primary Victorian scheme.** coastal-blend at 3% in the corpus is typically used for bright, airy, travel-adjacent designs. Here it is inverted: the coastal pigments (tidal indigo, sea-glass mist, verdigris) are applied to a dark-primary Victorian scientific palette, transforming the palette from breezy to austere-nautical. The beeswax gold accent grounds it in the Victorian decorative tradition without becoming maximalist.