# Design Language for masugomi.com ## Aesthetics and Tone masugomi.com is an art-deco fever dream rendered in impossible blues — the imagined masthead of a 1927 Parisian literary gazette that was somehow also a dream. The aesthetic is **art-deco maximalism played with a light hand**: gilt geometry disciplined by gossamer, ornamental frames that dissolve at their edges into soft chromatic haze. The mood is playful but never frivolous — more *Vogue Paris 1929* than *carnival poster*. Every panel reads like a spread torn from a magazine that ceased publication just before the world changed, yet its typography is alive and restless, titles scaling to fill the full viewport width like a broadsheet headline demanding attention. The tone is **wistful and self-aware**: the site knows it is a beautiful anachronism. Decorative chevrons and sunburst motifs float at reduced opacity, half-present like a memory. The palette refuses warmth — everything resolves into a spectrum from deep midnight lapis (#0d1b2a) to frosted cerulean (#b8d8f8) to near-white vapour (#e8f4fd), with a single accent of burnished pale gold (#d4af6e) used only at ornamental joints and ligature ornaments. No amber. No orange. No terracotta. Skeleton-loading shimmer is woven into the visual language as an aesthetic choice, not just a loading state — sections emerge from a glowing lapis placeholder shimmer as the page assembles, making the initial load feel like ink bleeding across wet paper. ## Layout Motifs and Structure The structural concept is the **magazine spread split across two unequal columns**, one the width of three-fifths of the viewport, one two-fifths — a classic French magazine's *recto/verso* asymmetry. On desktop, the left column carries the oversized display headline (the masthead) and dense ornamental geometry; the right column carries body copy set in a tighter measure with drop initials and pull-quotes floated into the gutter. **Grid logic:** - Outer margin: 6vw left, 4vw right - Primary column: 58vw (content and display type) - Secondary column: 32vw (body copy, captions) - Gutter: 4vw (used for ornamental vertical rules and pull-quotes) - Baseline grid: 8px, major text aligned to 24px intervals **Horizontal registration lines** — single 1px strokes at `rgba(184,216,248,0.25)` — divide the page into named "plates" like numbered sections in a print magazine. Each plate has a small plate-number lozenge in the upper-left corner, rendered in the gold accent. The page scrolls vertically in one continuous movement. There are no tabs, no navigation drawers, no sidebars — only the scroll and the spread. On mobile, the two columns stack, the display headline scales to 18vw, and the horizontal rules condense to full-width dividers. **Art-deco structural ornaments** appear as SVG: sunburst fans in corners, chevron borders between plates, and a central symmetrical medallion on the hero plate that the headline title bisects. ## Typography and Palette **Display / Masthead:** [Playfair Display](https://fonts.google.com/specimen/Playfair+Display) — weight 900 italic, tracked at -0.02em, scaled to `clamp(4rem, 12vw, 10rem)`. Used exclusively for the primary page title and section plate numerals. **Subheadings / Deck copy:** [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond) — weight 600, small-caps variant for subheadings, `clamp(1.1rem, 2.2vw, 1.6rem)`. Art-deco letterforms with high contrast strokes. **Body / Running text:** [Libre Baskerville](https://fonts.google.com/specimen/Libre+Baskerville) — weight 400, 16px / 1.75 line-height, `max-width: 62ch`. Dense scholarly setting with generous leading for readability. **Ornamental / Accent labels:** [IM Fell English](https://fonts.google.com/specimen/IM+Fell+English) — italic, used only for pull-quotes, captions, and ornamental date stamps. **Palette — Ethereal Blue:** | Role | Hex | Usage | |---|---|---| | Deep midnight | `#0d1b2a` | Page background, full-bleed sections | | Prussian deep | `#1a3a5c` | Card backgrounds, secondary panels | | Slate cerulean | `#2e6da4` | Primary interactive color, link underlines | | Sky powder | `#7ab3d8` | Body text on dark backgrounds | | Frost mist | `#b8d8f8` | Borders, horizontal rules, shimmer end-stops | | Vapour white | `#e8f4fd` | Primary body text, headline | | Gold accent | `#d4af6e` | Ornamental joints, plate numerals, divider ends | | Skeleton base | `#162940` | Skeleton-loading background pulse | | Skeleton shine | `#243f5e` | Skeleton-loading shimmer highlight | ## Imagery and Motifs **Imagery is exclusively abstract geometric shapes** — no photography, no illustration of figures. Every visual asset is a constructed composition of SVG geometry rendered at large scale: arcs, chevrons, concentric ellipses, radiating line fans, and tessellated diamond grids. These are the vocabulary of 1920s art-deco pattern books translated directly into browser-native SVG. **Specific shape corpus:** 1. **Hero medallion** — a bilaterally symmetric sunburst with 24 radiating blades at alternating lengths, encircled by two concentric rings with chevron notching. Rendered in `#2e6da4` at 60vw width, centered behind the masthead headline. The headline text sits atop it, the medallion visible through `mix-blend-mode: screen`. 2. **Plate corner ornaments** — four-directional corner fans (45° arcs, 6 concentric strokes each) in `#d4af6e` at 80px × 80px, placed at each plate boundary's outer corners. 3. **Section divider chevrons** — a row of 7 chevron glyphs (`‹ ‹ ‹ · › › ›`) in `#7ab3d8` at small scale, centered between plates. 4. **Background diamond grid** — a `repeating-linear-gradient` lattice at 12px spacing in `rgba(46,109,164,0.08)`, creating a subtle tessellation across all dark sections. 5. **Floating geometry** — three large abstract shapes (an arc segment at 40vw radius, a rhombus at 30vw, a radiating fan at 25vw) positioned with CSS `position:absolute` and animated with a slow 40-second CSS rotation at `opacity:0.04`. These are the "wallpaper" layer behind all content. **Vintage motifs:** - Plate number lozenges styled as postage-stamp perforations (CSS `outline` with `dashed` style) - Section titles preceded by a small fleur-de-lis `✿` glyph in gold - A running footer that mimics a magazine's colophon line: issue number, date, volume in small-caps ## Prompts for Implementation Treat masugomi.com as a **single magazine spread in perpetual motion** — a continuous vertical scroll through four plates, each a full viewport height, each with a distinct typographic act. The site tells its story entirely through type scale contrast, geometric ornament, and the shimmer of skeleton-loading transitions. **Plate sequence:** 1. **Plate I — The Masthead** (100vh): Full-bleed `#0d1b2a` background. The hero medallion SVG animates in with a 2-second radial `scale` from 0.6 → 1.0 on first scroll into view. The headline "masugomi" in Playfair Display 900 italic fills `clamp(6rem, 14vw, 12rem)`, tracking -0.03em, in `#e8f4fd`. A deck line in Cormorant Garamond small-caps appears 0.4s after the headline. Corner ornaments fade in with a 0.6s delay per corner, staggered clockwise. 2. **Plate II — The Feature** (min 120vh): Two-column magazine layout. Left: a drop-initial "M" in Playfair Display at 8rem, beginning a 400-word essay set in Libre Baskerville. Right: a 40vw abstract arc SVG (the "window shape") framing a nested smaller composition of concentric ellipses in `#7ab3d8`. A skeleton shimmer runs across this right-column shape on initial load: a `@keyframes shimmer` animation moving a `linear-gradient` from `#162940` to `#243f5e` to `#162940` across the shape at 1.8s loop, playing for 2 seconds before the real geometry fades in with `opacity` transition. 3. **Plate III — The Pull-Quote** (80vh): A single sentence in IM Fell English italic at `clamp(2rem, 5vw, 4rem)`, white on midnight, with the ornamental chevron row above and below. This plate is purely typographic — no shapes, maximum white space. The sentence reveals word-by-word via a CSS `clip-path` slide-up on scroll intersection. 4. **Plate IV — The Colophon** (60vh): Dense two-column footer in small-caps Cormorant. Left column: navigation links as decade-style catalog entries. Right column: contact and provenance information set as a French magazine colophon. Gold fleur-de-lis separates entries. Background shifts to `#1a3a5c`. The entire plate skeleton-loads before content resolves: all text begins as shimmer bars at correct typographic widths before Libre Baskerville text fades in at 0.4s opacity transition. **Animation principles:** - All scroll-triggered reveals use `IntersectionObserver` with `threshold: 0.15` - Skeleton shimmer always precedes content reveal by exactly 1.5–2.0s to be aesthetically felt - Floating background geometry rotates at exactly `40s linear infinite` — imperceptibly slow - No bounce, no spring, no cubic-bezier overshoot — only `ease-out` and `linear` easing - Hover states on interactive elements: horizontal underline draws from left (`width: 0 → 100%`) at `0.25s ease-out` **Explicitly avoid:** - CTA buttons with rounded corners and fill colors — use text links with underline-draw only - Pricing blocks, stat grids, feature comparison tables - Any warm color (amber, orange, red, yellow, terracotta) — the palette is exclusively cold blue and pale gold - Photography or realistic illustration - Navigation bars — the only navigation is the colophon catalog in Plate IV ## Uniqueness Notes 1. **Ethereal-blue as the primary and only palette** — the frequency report shows `warm` at 90% and `gradient` at 77% domination of the corpus. masugomi.com refuses both: no warm tones appear anywhere, and the only gradient is the skeleton-shimmer animation. The blue spectrum from `#0d1b2a` to `#e8f4fd` is a deliberate counter-position to the corpus mainstream. 2. **Skeleton-loading as a first-class aesthetic, not a utility** — `skeleton-loading` appears in only 3% of analyzed designs, and those treat it as a purely functional loading state. Here, the shimmer is designed to be *seen and appreciated* — it runs for 2 full seconds even when content is already loaded, because the pulsing lapis-to-cerulean shimmer is part of the visual language of the site. No other design in the corpus uses skeleton-loading decoratively. 3. **Magazine-spread asymmetric column layout with art-deco ornamental geometry** — `magazine-spread` at 4% and `art-deco` at 5% are both rare in the corpus; their combination is unique. The two-column 58/32vw split with SVG plate ornaments and sunburst medallions is a direct translation of 1920s French magazine typography into browser-native layout — not a "retro" pastiche but a structural argument that the art-deco grid system is the most elegant solution for long-form text with decorative geometry. 4. **Abstract-shapes imagery replacing photography entirely** — `photography` dominates imagery at 90% of the corpus. masugomi.com uses zero photographs. Every visual element is a constructed SVG geometric composition, making the site unusual in a corpus that almost universally defaults to photographic backgrounds and hero images. 5. **Oversized display type as structural geometry, not decoration** — at `clamp(6rem, 14vw, 12rem)`, the Playfair Display headline is so large it functions more as a visual shape than a readable word on first glance — it registers as dark geometry before the eye resolves it as language. This typographic role is distinct from the "oversized-display" category in the corpus (4%), where large type is typically a decorative layer over a photograph. **Chosen seed:** aesthetic: art-deco, layout: magazine-spread, typography: oversized-display, palette: ethereal-blue, patterns: skeleton-loading, imagery: abstract-shapes, motifs: vintage, tone: playful **Avoided patterns (from frequency analysis):** hand-drawn (61%), editorial (51%), photography (90%), warm palette (90%), gradient palette (77%), terminal aesthetic (31%), botanical (26%)