# Design Language for jill.moe ## Aesthetics and Tone jill.moe is a **light-academia oceanographic monograph** -- a centered, scholarly site that reads like a hand-bound thesis defended in a sea-blue library at the bottom of a marble staircase. The mood is **raw-authentic**: the voice is a graduate student's first chapter, not a slick brand. Inspirations: late-19th-century sea-monograph plates (Ernst Haeckel's Kunstformen der Natur), Cecil Beaton's photographs of women reading in libraries, Le Corbusier's Modulor proportional system applied to a journal page, the Princeton library reading-room green lamps, and the unread thesis defended in Mira Nair's films. Light academia gives the site its cardigan-and-tea atmosphere: cream paper, tweed serif, soft ornament. The ocean-deep palette grounds it in marine scholarship: indigo, twilight teal, sea-fog grey. Art-deco display type pulls the headlines up into a classical register without losing the rawness of the body. The user is reading someone's actual study notes; pages have ripple animations on hover; figures have geometric-abstract diagrams; the abstract-tech motifs sit like a future scholarly apparatus annotating a present-day work. ## Layout Motifs and Structure A **centered** column layout -- the entire content sits within a 720px-wide column horizontally centered, with margin notes drifting into the side gutters. The discipline of the column is the scholarship; the margin notes are the rawness. - **Title page (110vh):** Centered in the column, the wordmark "JILL.MOE" in art-deco display at clamp(64px, 11vw, 160px), letter-spaced 6%. Beneath, a roman-numeral volume mark ("VOL. I"), a date, and a single subtitle in italic: "studies in deep water, undefended." - **Abstract section (80vh):** A single 400-word abstract in justified Cormorant body, set tightly with hanging punctuation. To the right, a small "abstract-tech" diagram (geometric-abstract waveforms over a 4x4 grid). - **Chapter sections (variable height, ~120vh each):** Numbered chapters, each opening with a Roman numeral and a chapter title in art-deco display. Body type runs at 19px / 1.85 within the centered column. Margin notes appear in the right gutter at 13px italic. - **Figure plates:** Numbered plates within chapters, each a single geometric-abstract diagram or a hand-drawn marine line illustration, captioned in small caps. - **Ripple interactions:** Hover on any plate triggers a circular ripple (220ms expansion, fade) emanating from the cursor point. Hover on chapter headings triggers a horizontal ripple under the title. - **Footnote spread (60vh):** A two-column footnote apparatus near the end, in 11px Cormorant, separated from body by a 1px rule. - **Colophon (50vh):** Centered, very small (12px caps): "set in Limelight and Cormorant. printed in twilight teal. defended in private, in winter." The centered discipline creates extreme breathing room left and right -- the page is mostly margin, with the column floating at its center like a thesis on a wide desk. ## Typography and Palette **Fonts (Google Fonts only):** - **Display:** "Limelight" weight 400 at clamp(56px, 10vw, 144px) for the wordmark, chapter titles, and roman numerals. The geometric art-deco construction registers as classical scholarly authority on a sea-blue field. - **Sub-display:** "Limelight" at 28px tracking 8% for section openers. - **Body:** "Cormorant Garamond" weight 400 at 19px / 1.85 with `font-variant: oldstyle-nums`, justified text with hyphenation. Cormorant's high-contrast Garamond letterforms carry the light-academia mood. - **Italic / margin notes:** "Cormorant Garamond" italic weight 400 at 13px / 1.6 in the right gutter. - **Small caps / captions:** "Cormorant Garamond" small caps weight 600 at 10px tracking 12%. **Palette (ocean-deep -- libraries at the bottom of the sea):** - `#f4ede0` -- vellum paper (primary background) - `#e2d8c0` -- aged manuscript (secondary surfaces, gutter notes) - `#0c1830` -- abyss indigo (primary deep background for figure plates) - `#1c3a58` -- twilight teal (gradient stop, plate frames) - `#3a6884` -- coastal slate (chapter title color) - `#6a8aa4` -- sea fog (decorative accents) - `#a86430` -- copper anchor (highlight, used for figure-plate numbers) The composition is mostly cream paper with deep navy figure-plates and copper accents. Light academia + ocean depth. ## Imagery and Motifs - **Geometric-abstract diagrams:** Each figure plate is a hand-composed geometric construction -- waveforms, polygonal sound charts, depth-profile graphs, abstract-tech grids -- rendered in 1px copper and slate on the indigo plate background. Each diagram is captioned "FIG. III" etc. - **Abstract-tech motifs:** Faint underlying 4x4 dot grids on figure plates, axis tick-marks, geometric arrowheads, and small triangular reference markers -- the apparatus of scientific notation. - **Ripple-on-hover:** Each figure plate and chapter heading has a ripple animation -- expanding 1px circle from the cursor point, fading over 220ms. - **Marginalia drawings:** Tiny hand-drawn 1px sketches in the right gutter -- a sea cucumber, a sextant, a Limnocnida medusa -- in copper ink, positioned next to relevant paragraphs. - **Wax-impressed seal:** One large copper-on-vellum seal on the title page reading "PRIVATE DEFENSE / IN WINTER / VOL. I." - **Sea-fog washes:** Two soft sea-fog gradient washes at the top and bottom of the page, fading from cream to slate at 12% opacity. ## Prompts for Implementation The site is a centered, hand-bound, never-published thesis. Build a single-column reading experience with strict centering, deep-indigo figure plates, and ripple micro-interactions. - The content column is `max-width: 720px; margin: 0 auto;` with `padding: 0 24px;`. Right-gutter margin notes are absolute-positioned with `right: -240px; width: 200px` (collapses to inline on viewports under 1024px). - Body text uses `text-align: justify; hyphens: auto; font-feature-settings: 'liga', 'onum', 'kern';` for a print-quality reading flow. - Figure plates are `
` elements with `background: linear-gradient(180deg, #0c1830, #1c3a58); padding: 48px; aspect-ratio: 4/3; margin: 64px 0;`. Inside, an SVG diagram in copper and sea-fog strokes. - Ripple animation: on `mouseenter`, a `` is inserted at the cursor coordinates with `width: 0; height: 0; border-radius: 50%; background: rgba(168, 100, 48, 0.4);` and animated to `width: 400px; height: 400px; opacity: 0` over 220ms, then removed. Pure CSS for chapter heading ripples; JS for plate ripples to track cursor. - Roman numerals are styled with `font-variant-numeric: oldstyle-nums; letter-spacing: 14%; font-family: 'Limelight';`. - AVOID CTAs, pricing modules, signup forms. There is one mailto link in the colophon: "for correspondence on the contents, write." - Storytelling: the title page presents the volume; the abstract states the scholar's intent; chapters proceed with figure plates; footnotes accrue; the colophon closes the volume with a single line about the season. - Raw-authentic voice: "chapter III, in which I admit I cannot tell the bioluminescent jellyfish apart." "fig. VII (above) is incorrect; I include it anyway." "the abyssal plain is, in fact, mostly mud." ## Uniqueness Notes **Differentiators from other designs:** 1. **Light-academia + ocean-deep + art-deco display:** Three aesthetic registers (cardigan-academia, marine-scholarship, art-deco geometry) are layered in a single site. Light academia is usually paired with forest greens; ocean here repurposes it for a marine scholarly setting. 2. **Centered 720px column with right-gutter marginalia:** Strict scholarly centering with absolute-positioned margin notes mimics a printed thesis with handwritten annotations -- rare in modern web design. 3. **Limelight + Cormorant pairing:** This Google Fonts pairing for a scholarly site is unusual; Limelight is typically used for theatrical posters, not academic volumes. The contrast creates dignified strangeness. 4. **Ripple-on-hover for plates, not buttons:** Material-design ripples are typically reserved for buttons. Here they trigger on figure plates and chapter headings, treating reading itself as the interaction. 5. **Geometric-abstract diagrams as figure plates:** Real numbered figures with axis ticks and reference markers, not decorative graphics -- the abstract-tech motif is used as scientific apparatus, not as ornament. **Chosen seed:** light-academia centered art-deco-display ocean-deep ripple geometric-abstract abstract-tech raw-authentic -- planned seed from assignment. **Frequency-aware choices:** `light-academia` (1%), `ocean-deep` palette, `art-deco-display` typography, `ripple` pattern, and `geometric-abstract` imagery are all uncommon. Avoids overused `playful`, `corporate`, `photography` patterns. The Limelight + Cormorant pairing avoids dominant Inter/Space-Grotesk type combinations.