# Design Language for midori.day ## Aesthetics and Tone midori.day is a maximalist almanac of green — a single-page digital herbarium that catalogues forty-eight shades of chlorophyll across a year, told in the **blobitecture** vocabulary of buildings like Future Systems' Selfridges and Kazuyo Sejima's experimental pavilions. The tone is **bold-confident**, unapologetically loud, the visual energy of a botanical garden mid-bloom under stadium floodlights. Inspiration draws from Karim Rashid's softscape, the rave-flyer maximalism of Hassan Rahim, and the wet-pulp neon found in 1990s Japanese rave culture printed on risograph. There is nothing meek about this site: blobs do not whisper, they shout, and the color choices are aggressive on purpose — neon-electric, almost dangerous, the chromatic register of a poisonous frog. Visiting feels like sliding into a wet, alive room where every surface has been chewed soft by something organic and luminous. ## Layout Motifs and Structure The layout is a **masonry** field of 96 entries (organisms, observations, micro-essays) arranged as irregular tiles whose corners and edges have been melted into blob-shapes via SVG `` + `` "goo filter". Tile widths snap to a 6-column underlying grid but heights are free, ranging 240px to 880px, so the masonry breathes. A floating left-side "stem" navigation drips downward as the user scrolls, with five anchor-nodes (Spring, Summer, Late-Summer, Autumn, Hibernal) connected by an animated SVG path that recalculates curvature on scroll velocity — faster scroll = more violent curve. Tiles are not framed; they bleed into each other where their blob-perimeters touch, creating "merge zones" colored by the average hue of the two parents. The first viewport is reserved for a giant centered blob occupying 78vh, lazily morphing through eight control-points using a custom CSS `path()` animation, with the title "midori.day — a year in green" set inside its negative space. ## Typography and Palette **Typography** is anchored in Fraunces (the **playful-rounded** brief), pushed to its softest, most rounded variable axes: Fraunces 144pt Black "Soft" at the absolute extreme of the SOFT axis (100) for the main title and section markers, Fraunces 9pt Light Italic for date stamps and Latin binomial names, and Fraunces 600 at 22px for editorial paragraph copy. A secondary face, Sniglet 800, appears only for the tile-corner ID tags (e.g., "M-042 / Asagao"). Numbers are tabular-figure-set so the day counter doesn't jitter. **Palette** is **neon-electric**, deliberately overstimulating: - `#39FF14` — lab-grown chlorophyll (primary blob, hover state, key data) - `#00E5BB` — bioluminescent algae (secondary blob, link underlines) - `#7AF54F` — toxic lime (tile background, low-density) - `#FF2BD6` — UV-magenta (warning blooms, accent, fox-fire detail) - `#FFE600` — sodium-lamp yellow (page ground, ribbon dividers) - `#0C1A0F` — wet moss black (body text on yellow ground) - `#1F4A2D` — bottle conifer (deep blob shadows) - `#E5FFE0` — pale leaf wash (calm tiles for contrast relief) Body text on `#FFE600` ground uses `#0C1A0F` only; type on `#39FF14` switches to `#1F4A2D`. ## Imagery and Motifs Imagery is built around **organic-blobs** — every "image" on the site is a procedurally-generated blob SVG with internal gradient mesh suggesting a leaf cross-section, a moss colony, or a pond surface. Twelve recurring blob archetypes are reused: *lobed*, *kidney*, *cardioid*, *amoebic*, *droplet*, *rhizome*, *coral*, *fungal*, *thallus*, *sporangium*, *pseudopod*, *blastula*. Each tile picks one archetype and mutates it with a domain-specific seed. **Floral-botanical** motifs appear as hand-drawn ink line-art overlaid on the blobs at 60% opacity: morning glory tendrils, fern crozier curls, dandelion clocks, single-petal magnolia silhouettes. A recurring "midori-stamp" — a circular ink seal reading 緑 in Mincho — appears at the bottom-right of every fifth tile as a punctuation rhythm. No photographs. The visual language stays defiantly illustrated. ## Prompts for Implementation Build a scroll-triggered maximalist almanac. On load, the giant central blob morphs continuously between eight `path()` control-points using CSS animation `morph 14s ease-in-out infinite alternate`; as the user scrolls, the blob deflates from 78vh down to 96px and migrates into the left-side stem nav, becoming the first anchor-node — this is the signature animation. Tiles enter the viewport with a **scroll-triggered** stagger (40ms per tile) using IntersectionObserver: each blob scales from 0.4 to 1.0 with a slight overshoot (cubic-bezier 0.34, 1.56, 0.64, 1.0) and its internal gradient rotates 18°. The "goo filter" must be a single SVG filter defined once and referenced via `filter: url(#goo)` on the masonry container so adjacent blob tiles physically merge at their seams. Scroll velocity is measured and fed into the SVG stem-path's `d` attribute via requestAnimationFrame so the navigation literally bends as the user scrolls hard. Avoid CTA banners, pricing tables, signup walls, stat grids, and any "feature card" pattern — this is a botanical zine, not a product page. The footer is a single full-bleed blob in `#FF2BD6` containing the date "365 / 365 — midori.day" set in Fraunces 144pt Black Soft. ## Uniqueness Notes - **Differentiator 1:** Uses SVG goo-filter to physically merge adjacent masonry tiles at the seams — almost no other design in the registry uses filter-merge at the tile level, only at the icon level. - **Differentiator 2:** Neon-electric palette pushed to a poisonous-frog register (`#39FF14` + `#FF2BD6` + `#FFE600` together) — uncommon next to the registry's saturation of corporate gradients and pastels. - **Differentiator 3:** Imagery is 100% procedurally-generated blobs with botanical line-art overlays — completely sidesteps the 89% photography-saturation noted by frequency.sh. - **Differentiator 4:** Scroll velocity drives navigation path curvature in real time — a kinetic feedback loop rather than a static side-nav. - **Differentiator 5:** Fraunces is pushed all the way to SOFT=100, a typeface setting almost no one uses in production, matching the playful-rounded keyword literally. - Planned seed: aesthetic=blobitecture, layout=masonry, typography=playful-rounded, palette=neon-electric, patterns=scroll-triggered, imagery=organic-blobs, motifs=floral-botanical, tone=bold-confident. - Avoids overused patterns flagged by frequency.sh: `playful` aesthetic (28%), `photography` imagery (89%), `corporate` aesthetic (24%) — none used here.