# Design Language for murasaki.day ## Aesthetics and Tone murasaki.day is a **swiss**-grid daily-rhythm journal of an imagined Tokyo bordello-of-words — a fictional café-bar in Shibuya 1F that posts daily aphorisms scrubbed of all decoration except a strict Helvetica-grade typographic grid and an unexpectedly playful voice. The aesthetic obeys the orthodoxy of Swiss design: 12-column grid, ranged-left ragged-right body, generous baseline rhythm, ratio of 3:2 for image vs. type — but tints itself in deep burgundy and lets a serif revival speak in the headlines, so it never reads as cold. The tone is **playful** — a deliberate counter-melody to the rigorous frame: short captions written in the voice of a friendly bartender ("you walked past us twice today before coming in"), date stamps that include the weather as a single emoji-substitute glyph. Inspiration draws from Karl Gerstner's *Designing Programmes*, the cover spreads of *032c* magazine, the city-night signage of Studio Dumbar, and the floral-stem typographic accents found in Wolfgang Weingart's late posters. ## Layout Motifs and Structure The architecture is a **card-grid** layout, but every card is anchored to a strict 12-column Swiss grid — cards span 3, 4, 6, or 8 columns at fixed widths, never improvised. The page hosts 28 daily cards (one per day of a 28-day cycle), each displaying that day's aphorism, the weather glyph, the timestamp, and a small **gradient-mesh** illustration in burgundy tones. Cards are arranged in a vertically rhythmic grid: rows of (4+8), (6+6), (3+3+6), (8+4), repeating with subtle variation so the eye never settles into a single rhythm but always senses an underlying order. A 72px top header runs the full width with the wordmark "murasaki.day" set in ranged-left serif revival, a section breadcrumb in micro-monospace, and a 28-segment progress bar showing where in the cycle today falls. The page scrolls vertically and uses **morph** transitions on hover — cards subtly morph their corner radii from sharp to slightly rounded as the cursor approaches, breathing. ## Typography and Palette **Typography** is led by Source Serif 4 (the **serif-revival** brief): Source Serif 4 96pt Display Italic for the daily aphorism on each card, Source Serif 4 24pt Regular for body, and Source Serif 4 14pt Italic for date stamps. A secondary face, Inter Variable at 11px tracked +180 uppercase, handles micro-labels and the breadcrumb header. A monospace third face, JetBrains Mono 12px, appears only in card serial numbers ("M-014.05.12"). All typography sits on an 8px baseline grid that the user can almost feel beneath the page. **Palette** is **deep-burgundy**, drawn from old Murasaki dye and oxblood leather: - `#1A0612` — true murasaki midnight (page ground) - `#2D0E20` — burgundy umber (card ground) - `#5C1B3E` — oxblood velvet (primary accent, serif headlines) - `#8B3A5E` — wine-rose (secondary accent, hover state) - `#D4A5B5` — rose-blush (text on dark, soft secondary) - `#F4E4D4` — bone cream (high-emphasis text, key aphorisms) - `#3D2235` — plum shadow (gradient-mesh deep) - `#FFD466` — saffron (single warm accent for weather glyphs only) Saffron appears only inside weather glyphs — nowhere else. ## Imagery and Motifs Imagery is built around **gradient-mesh** compositions in burgundy and oxblood — each card hosts one mesh illustration sized 240×320, evoking soft window-light through cabaret curtains, the bleed of bordeaux ink on velvet, or the cool burn of a stage light through dust. Mesh is built from 5-stop CSS conic-gradients with `@property` interpolation so they slowly drift between two presets over 18-second cycles. **City-urban** motifs appear in the page furniture: a small thin-line subway-map fragment running across the bottom of the page as a footer-band, a recurring isometric Tokyo-block silhouette as a card-corner ornament, and faint neon "vacancy" glyph references in low opacity. The aphorism on each card is set with a small floral-divider character beneath (an asterism of three star-glyphs). No photographs. ## Prompts for Implementation Build a Swiss-grid daily-rhythm journal of 28 cards. Use CSS Grid `grid-template-columns: repeat(12, 1fr); gap: 24px;` with cards spanning 3/4/6/8 columns. Each card's gradient-mesh illustration is rendered as a CSS conic-gradient with five color stops and a `@property --hue-shift` declared with `syntax: ''` so it can be smoothly interpolated by `animation: drift 18s ease-in-out infinite alternate`. The signature interaction is **morph**: as the cursor approaches a card within 240px, the card's `border-radius` interpolates from 2px to 14px via `--radius` CSS variable updated by a JS pointermove listener, and the card lifts 4px via `translateY(-4px)` with a 240ms ease. Source Serif Display Italic at 96pt acts as the aphorism — it must support natural wrapping to two or three lines, with hanging punctuation enabled (`hanging-punctuation: first allow-end`). The 28-segment progress bar in the header lights up segments 1 through (today's day-of-cycle) with a soft wine-rose glow. Avoid CTA stacks, pricing menus, signup ladders, stat grids, FAQ accordions — the page is a calendar of voice, not a product. The footer is a single line of Source Serif Italic: "murasaki.day — open every night until the last guest leaves." ## Uniqueness Notes - **Differentiator 1:** Swiss-grid orthodoxy held strictly while letting a playful voice and burgundy palette warm it — a rare register pairing in the registry. - **Differentiator 2:** Gradient-mesh illustrations on every card with `@property` hue-shift animation — meshes drift continuously, almost no other registry design animates the mesh. - **Differentiator 3:** 28-card daily cycle with header progress bar reflecting "where in the cycle" — gives a temporal narrative to a card-grid. - **Differentiator 4:** Morph interaction implemented as a corner-radius lerp tied to cursor proximity rather than the typical hover scale. - **Differentiator 5:** Saffron is reserved exclusively for weather glyphs — a single-purpose accent that creates a quiet hidden game for the visitor. - Planned seed: aesthetic=swiss, layout=card-grid, typography=serif-revival, palette=deep-burgundy, patterns=morph, imagery=gradient-mesh, motifs=city-urban, tone=playful. - Avoids overused patterns flagged by frequency.sh: `playful` aesthetic (28%) is NOT used as the aesthetic here — playful is the tone, the aesthetic is `swiss` (only 4%). Photography imagery (89%) is avoided entirely; corporate aesthetic (24%) is avoided.