# Design Language for matsurika.date ## Aesthetics and Tone matsurika.date is a **minimalist data-driven aurora-calendar journal** -- the visual love-child of Dieter Rams's restrained product design and a vintage aurora-borealis photograph. The aesthetic is deeply minimalist (clean type, low-information panels, generous white space) but its content is *data-viz first* -- the journal of dates is presented as a sentiment-over-time graph, a horizon chart, a calendar heatmap, all rendered in muted-vintage colors with occasional aurora-lights motif breaking through. The tone is *opulent-grand* -- not loud, but *grand* in the way a well-designed Braun calculator from 1973 is grand: every element is exquisitely chosen. The brand "matsurika.date" reframes the calendar as a chronicle of moments. Each "date" (calendar date, not romantic date) is one observation -- the temperature of the day's emotional weather, plotted on a sentiment chart. The site is a quiet, opulent data journal. Inspirational anchors: Dieter Rams's Braun T1000 radio interface, MAYU Aoyama's calendar typography, Lufthansa's 1960s identity by Otl Aicher, Charles & Ray Eames's data exhibition designs, Aurora Borealis time-lapse photography from Iceland, and the muted-vintage palette of mid-century European graphic design. ## Layout Motifs and Structure An **organic-flow** composition where data visualization elements weave across the page in non-rigid arrangements -- not a strict grid, but a *flow* of charts and journal fragments. Each chart sits in negative space and is connected to the next by faint flowing lines. **Structural anatomy:** - **Top frame (full-width, 88px):** A single thin muted-vintage band at the top with the wordmark "matsurika.date" in grotesque-neo sans at left, a tiny current-date marker at right, and a single 1px horizontal rule extending across the entire width. - **Hero data chart (full-width, ~70vh):** A single oversized horizon chart spanning the full viewport width, showing "sentiment over 365 days" in muted gradient bands. Aurora-light bands appear faintly in the chart's negative space, suggesting emotional weather. - **Journal fragment + chart pairings (vertical scroll, organic positions):** 12-16 paired entries. Each entry has: - A small chart (sparkline, heatmap, scatter, or radial chart) sized ~480x240px, positioned organically (sometimes left, sometimes right, varied vertical position). - A 2-3 line journal fragment in italic grotesque-neo, positioned in the negative space adjacent to the chart. - A small date stamp ("21 · IX · MMXXVI"). - Connections: faint 0.5px flowing lines from one entry's chart to the next entry's date stamp. - **Aurora interludes (rare):** 3-4 times throughout, a faint aurora-light gradient band sweeps horizontally across the layout -- not a divider, but an *atmospheric event*. - **Footer fragment:** A single italic line "the year, observed" with a small radial sparkline below. Spatial rhythm: organic and meditative -- nothing snaps to a grid. Each pairing is *placed* with care. ## Typography and Palette **Fonts (all Google Fonts):** - **Primary grotesque-neo:** "Manrope" 400/500/600 -- a modern neo-grotesque sans with precise geometry but humanist warmth. Used for the wordmark at clamp(40px, 6vw, 88px), entry labels at 14-15px, body at 15-16px. - **Italic for journal fragments:** "Manrope" 400i at 17-18px, line-height 1.62 -- the journal voice. - **Chart labels:** "Manrope" 500 small-caps at 11-12px, letter-spacing 0.18em, tabular numbers. - **Numerals (dates):** "Manrope" 600 with lining figures at 13-15px, tabular numbers. **Palette (muted-vintage):** - `#EDE6D9` -- Aged Cream (primary background, like a 1970s notepad) - `#3D3A35` -- Slate Charcoal (typography, deep accents) - `#7E796D` -- Smoky Mushroom (secondary type, mid-tone surfaces) - `#A89C84` -- Vintage Linen (alternate backgrounds, chart panels) - `#A56B5E` -- Faded Brick (rare accent, used for high-sentiment data points) - `#CCC0A6` -- Bleached Wheat (chart grid lines, very light surfaces) - *Aurora-light gradient overlay:* a 3-stop muted gradient `#A56B5E` (faded warm) -> `#7E796D` (gray) -> `#9DA89D` (faded teal) used at very low opacity (8-14%) for aurora-band events. Muted strategy: every color is desaturated 35-55% from its pure form, and warm-tinted (vintage). The aurora-light overlays are *barely visible* -- atmospheric rather than decorative. ## Imagery and Motifs **Core visual motifs:** - **Data-viz charts (the entire imagery vocabulary):** No photography. Each entry has one small chart: a sparkline, a heatmap cell, a radial chart, a horizon strip. All charts are SVG with thin Slate Charcoal strokes on Aged Cream backgrounds, with Faded Brick highlights only for "peak" data points. - **Aurora-lights motif (atmospheric):** Subtle horizontal aurora-light gradient bands sweep across the layout at 3-4 designated scroll positions. Each band has muted color stops and uses `mix-blend-mode: multiply` to integrate with the page surface. - **Glitch artifacts (subtle):** A very subtle glitch effect occurs near aurora bands -- 1px chromatic-shift on type adjacent to the bands, a horizontal 1px scan-line band traveling through, all rendered at very low intensity. - **Flowing connector lines:** Thin 0.5px Smoky Mushroom lines connecting one entry's chart to the next entry's date stamp -- creating a visual flow through the year. - **Small date stamps:** Each entry has a precise date stamp using Roman numerals for the month ("21 · IX · MMXXVI"), set in tabular numerals. **Decorative patterns:** - A subtle paper-grain texture (SVG turbulence at 4% opacity) on the Aged Cream background. - Chart background panels have a very faint 16px Bleached Wheat grid (2% opacity). ## Prompts for Implementation **Open with the year's data drawing itself.** First 2800ms: viewport begins all Aged Cream. The wordmark and top rule fade in (opacity 0 -> 1, 400ms). After 600ms, the hero horizon chart begins drawing -- its axis appears first (200ms), then each data point pixel reveals itself left to right (a 1600ms sweep, ease-out). As the chart completes, a single faint aurora-light band sweeps across the chart's negative space (8% opacity, 1200ms). **Glitch pattern (featured -- subtle and atmospheric):** This is the primary motion vocabulary. - Aurora-light band events occur 3-4 times throughout the scroll (triggered at specific scroll positions via IntersectionObserver). Each event: - A horizontal band of aurora gradient sweeps across the viewport over 1200ms (mix-blend-mode: multiply, alpha ramping 0 -> 0.12 -> 0). - Adjacent text gets 1px chromatic-split for 200ms during the sweep (red shifts +1px right, cyan shifts -1px left). - A faint scan-line band (1px Smoky Mushroom at 8% alpha) travels through with the aurora. - Use `prefers-reduced-motion` to disable -- the aurora bands remain but as static low-opacity gradients without sweep motion. **Chart drawing animations:** Each entry's chart "draws" itself on viewport entry: - Axes appear first (200ms each, fade-in). - Data points stroke from left to right (cubic-bezier ease-out, 800ms). - Faded Brick "peak" highlight points pop into place last with a brief scale 0 -> 1.2 -> 1 over 240ms. - Chart titles type themselves character-by-character (40ms/char). **Flowing connector reveal:** As the user scrolls between entries, the 0.5px connector lines from one entry's chart to the next entry's date stamp draw themselves via stroke-dashoffset. This creates a visual sense of *following the year's data* through the journal. **Organic position drift:** Each entry's position is determined by a `getEntryPosition(i)` function that returns coordinates with subtle randomized offsets within bounded ranges -- producing the organic-flow layout. On scroll, entries have very subtle parallax (5-15% scroll velocity offset) to enhance the floating feel. **Aurora-band hover:** When a user hovers over a "peak" data point (Faded Brick), a tiny aurora-light glow expands around it (radial-gradient, 0 -> 48px, alpha 0 -> 0.4 -> 0) over 600ms. **Storytelling beats (opulent-grand, data-as-journal, no CTAs):** 1. The year drawing itself (hero horizon chart). 2. Hero chart settles with first aurora-band event. 3. 12-16 dated entries, each a small chart + italic fragment, in flowing organic positions. 4. 3-4 aurora-band atmospheric events throughout. 5. Footer: italic "the year, observed" with final radial sparkline. **Anti-patterns to avoid:** No CTAs, no signup, no pricing, no testimonials. The site is a data-driven calendar journal, not a service page. ## Uniqueness Notes **Differentiators from other designs in this collection:** 1. **Minimalist aesthetic (3%) with data-viz imagery (4%) as the entire visual language:** No photography, no illustration -- only charts. This commitment is rare; most minimalist designs still include some photography. 2. **Organic-flow layout (4%) at calendar scale:** Most organic-flow layouts are short-form; this one extends across a year of dated entries -- 12-16 organic positions woven together with flowing connectors. 3. **Aurora-lights motif (2%) as atmospheric events rather than decoration:** Aurora bands appear 3-4 times across the scroll, treated as moments rather than ambient texture -- a meaningful pacing device. 4. **Glitch pattern (8%) deployed at *very low intensity* with muted-vintage palette (1%):** Most glitch uses are visually aggressive; this one is so subtle it functions as a kind of aging-paper degradation rather than digital glitch. 5. **Opulent-grand tone (3%) on a minimalist composition:** Opulent-grand is usually expressed through ornament; here it's expressed through *precision* and *grandeur of scale* (a year of data, exquisitely curated). **Chosen seed/style:** aesthetic=minimalist, layout=organic-flow, typography=grotesque-neo, palette=muted-vintage, patterns=glitch, imagery=data-viz, motifs=aurora-lights, tone=opulent-grand. **Avoided overused patterns:** Refused parallax-as-primary (95%), centered/card-grid (95%/91%), mono typography (81%), and mysterious-moody tone (71%) in favor of opulent-restrained calm.