# Design Language for munj.uk ## Aesthetics and Tone munj.uk embodies the quiet delight of a sun-drenched greenhouse on a spring morning -- the air warm and damp, the light diffused through frosted glass panels, every surface softened by condensation and the gentle pressure of growing things. The aesthetic is **greenhouse-playful**: not the loud, cartoon-inflected playfulness of primary-color UI kits, but the subtler, more grounded playfulness of nature itself -- the way a fern uncurls in a perfect Fibonacci spiral, the way seed pods split open to reveal geometrically improbable arrangements, the way moss creeps across a terracotta pot in patterns that look designed but aren't. The mood is calm-serene at its foundation, but layered with moments of botanical whimsy: unexpected asymmetries, gentle wobbles, shapes that breathe and pulse like living organisms. The visual inspiration draws from three specific sources: (1) the interior photography of Haarkon studio's greenhouse series -- those washed-out, creamy images of plant-filled conservatories where every surface is slightly overexposed and the greens are desaturated toward sage and olive; (2) the botanical illustration tradition of the Kew Gardens archive, with its precise-yet-tender line work depicting cross-sections of flowers, root systems rendered in delicate ink washes, and annotated diagrams of leaf venation patterns; (3) the contemporary organic design language of Olafur Eliasson's installations, where perfect geometric forms are made from natural materials and the boundary between architecture and biology dissolves. The tone is never clinical or sterile -- it is warm milk, not distilled water. Every element should feel like it was grown rather than engineered, discovered rather than designed. ## Layout Motifs and Structure The layout follows a **hero-dominant** paradigm. The hero section consumes the full viewport and functions as the gravitational center of the entire experience -- not merely a banner or header, but the site's primary spatial statement. Everything below the hero exists in its orbit, drawn downward by the scroll but always referencing back to the hero's established visual grammar. **Hero Architecture (100vh):** The hero occupies the full viewport height and width. Its internal structure is deliberately off-center: the primary text element (the domain name "munj.uk" rendered as a living botanical specimen label) sits at approximately 38% from the left edge and 45% from the top -- not centered, but resting at the natural optical center that the eye seeks instinctively. Behind the text, a large-scale botanical illustration (a cross-section of a seed pod, rendered in the creamy-pastel palette) fills roughly 60% of the viewport, positioned so that it bleeds off the right edge by about 15%. The illustration is not a static image but a CSS-composed layered construction: the outer pod shell as one element, the seed arrangement as another, the fine venation lines as SVG paths that draw themselves on load. **Below-Hero Flow:** Content below the hero is organized into **breathing sections** -- viewport-height panels separated not by hard lines or background-color shifts but by generous negative space (minimum 12vh of empty cream between sections). Each section follows a loose, asymmetric two-column structure where one column is always wider (approximately 62/38 ratio), and the wider column alternates sides as the user scrolls. This creates a gentle zigzag reading path without the rigidity of a formal z-pattern. **Section Types:** - **Specimen Panel:** A single botanical illustration dominates, surrounded by annotation-style text in small geometric-sans type, positioned as if labeling parts of the illustration. The text wraps organically around the illustration's silhouette using CSS `shape-outside` with a custom polygon. - **Terrarium Card:** A rounded-rectangle container (border-radius: 2rem) with a subtle frosted-glass effect (`backdrop-filter: blur(8px)` over a soft gradient background) housing a short text passage. The card appears to float above the page surface with a diffused box-shadow using the sage-green accent color at 12% opacity. Multiple terrarium cards can appear in a loose masonry arrangement, but never more than three per viewport. - **Root System Divider:** Between major sections, a decorative SVG illustration of a root system extends across the full viewport width, drawn in a single continuous stroke of desaturated sage (#A8B5A0) at 40% opacity. The roots branch and fork naturally, providing visual rhythm without demanding attention. **Grid System:** The underlying grid is a soft 12-column grid with 2.4rem gutters on desktop (reducing to 1.6rem on tablet, single-column on mobile). Columns are not rigidly adhered to -- elements are allowed to span non-standard column counts (e.g., 4.5 columns, 7.2 columns) to prevent the mechanical regularity that makes grid-based layouts feel sterile. Content never touches the viewport edges; a minimum 4vw margin is maintained on all sides, increasing to 8vw on ultrawide screens. **Navigation:** There is no traditional navigation bar. A small, circular seed-icon (a simplified botanical seed cross-section, 40px diameter, rendered in the terracotta accent color) sits fixed at the top-right corner (24px from edges). On hover, it swells to 56px with a spring-physics easing curve and reveals a radial menu of 3-4 navigation targets arranged in a quarter-circle arc below and to the left, each target labeled with specimen-tag typography. ## Typography and Palette **Typography:** - **Headlines / Display:** "Outfit" (Google Fonts) -- a geometric sans-serif with perfectly circular counters in letters like 'o', 'e', and 'd', and uniform stroke widths that give it a clean, constructed quality while remaining approachable and warm. Used at 3.2rem-7.2rem for section titles and the hero logotype. Weight: 600 (SemiBold) for primary headlines, 300 (Light) for secondary headlines to create contrast through weight rather than size. Set with `letter-spacing: 0.02em` and `line-height: 1.08` for a spacious, breathing rhythm. All headlines are rendered in Warm Charcoal (#3D3830) against cream backgrounds. - **Body / Annotation:** "Plus Jakarta Sans" (Google Fonts) -- a geometric sans-serif with slightly more humanist proportions than Outfit, featuring subtly rounded terminals and open apertures that make it exceptionally legible at small sizes while maintaining the geometric consistency of the overall type system. Used at 1rem-1.125rem (16-18px) for body copy and 0.75rem-0.875rem (12-14px) for botanical annotation labels. Weight: 400 (Regular) for body text, 500 (Medium) for annotation labels. Line-height: 1.72 for body copy (generous, to let the text breathe like the layouts), 1.4 for annotations. Color: Warm Charcoal (#3D3830) at 85% opacity for body, 60% opacity for annotations. - **Accent / Specimen Labels:** "Caveat" (Google Fonts) -- a handwritten-style script with an uneven baseline and variable stroke width that reads like a botanist's field notebook annotations. Used sparingly: only for specimen labels that float near botanical illustrations, for the "collected by" attribution text, and for the small tagline in the hero section. Size: 1.125rem-1.5rem (18-24px). Weight: 400. Color: Terracotta (#C17F59) to distinguish it from the geometric type hierarchy. This font is the one deliberate rule-breaker in the type system -- the human hand interrupting the geometric precision, the way a botanist's handwriting interrupts the precision of a printed field guide. **Palette:** The palette is **creamy-pastel** -- built from the colors found in a sun-bleached botanical watercolor, where pigments have faded to their gentlest possible expression. | Role | Color | Hex | Usage | |------|-------|-----|-------| | Base Cream | Parchment Milk | #F5F0E8 | Primary background, the paper of the field guide | | Warm Cream | Buttermilk | #EDE5D8 | Secondary background, card interiors, hover states | | Sage Green | Greenhouse Glass | #A8B5A0 | Primary accent, illustration strokes, divider lines | | Terracotta | Potting Clay | #C17F59 | Secondary accent, specimen labels, interactive elements | | Warm Charcoal | Compost Dark | #3D3830 | Primary text, headline color | | Blush Pink | Petal Dust | #E8C4B8 | Tertiary accent, blob backgrounds, soft highlights | | Dusty Lavender | Dried Flower | #C5B5C8 | Quaternary accent, subtle shadows, secondary blob fills | | Muted Gold | Pressed Pollen | #D4C48A | Highlight accents, loading skeleton shimmer, active states | **Color Application Rules:** - Backgrounds are always Parchment Milk (#F5F0E8) or Buttermilk (#EDE5D8), never pure white - Text is always Warm Charcoal (#3D3830), never pure black - The sage green (#A8B5A0) and terracotta (#C17F59) never appear adjacent; they are always separated by cream or blush - Organic blob shapes use Petal Dust (#E8C4B8) and Dried Flower (#C5B5C8) at low opacity (15-30%) as background fills - The muted gold (#D4C48A) is reserved exclusively for the skeleton-loading shimmer effect and micro-interaction highlights ## Imagery and Motifs **Botanical Illustrations:** All imagery follows the **botanical-illustration** tradition: precise, hand-rendered depictions of plant anatomy presented as scientific specimens rather than decorative flourishes. The illustration style references the copperplate engravings of 18th-century botanical atlases but softened -- where the originals used sharp, ink-black lines, munj.uk's illustrations use the sage green (#A8B5A0) at varying opacities (40%-80%) to create depth without harshness. Every illustration includes the following layers: 1. **Outer contour:** A single continuous SVG path defining the plant's silhouette, drawn with `stroke-width: 1.5px` and `stroke-linecap: round` 2. **Internal structure:** Venation patterns, cell structures, cross-section details rendered as thinner paths (0.5-1px) at 60% opacity 3. **Fill regions:** Flat color fills using palette colors at low opacity (15-25%) to suggest volume without the heaviness of gradients -- sage green for leaves and stems, blush pink for petals and reproductive structures, dusty lavender for root cross-sections 4. **Annotation marks:** Small leader lines extending from specific botanical features to text labels, rendered in terracotta at 50% opacity **Specific Illustrations (minimum 4):** - **Hero: Seed Pod Cross-Section** -- A large (60vw) cross-sectional view of a legume seed pod showing the internal arrangement of seeds, the pod wall layers, and the vascular bundle. Seeds are arranged in a Fibonacci spiral pattern. - **Section 2: Root System Map** -- A full-width, horizontally-oriented illustration of a root system viewed from above, rendered as a topographic-style map with contour lines showing root depth. Functions as both decoration and section divider. - **Section 3: Leaf Venation Detail** -- A close-up of a dicot leaf's venation pattern, magnified to show the fractal branching structure. This fills one column of the two-column layout while text fills the other. - **Section 4: Flower Bud Stages** -- A sequence of 5 small illustrations showing a flower bud opening over time, arranged horizontally. Each stage is a separate SVG element that animates into view sequentially as the section enters the viewport. **Organic Blob Motifs:** Scattered throughout the layout, organic blob shapes function as background atmosphere -- the visual equivalent of the humidity in a greenhouse. These are not the hard-edged, Memphis-style blobs of typical "playful" web design. Instead, they are soft, amoebic forms with smooth, continuously-curving edges generated using SVG `` elements with cubic Bezier curves. Each blob has the following properties: - **Size:** Ranges from 15vw to 45vw (large enough to be atmospheric, not so large as to dominate) - **Color:** Petal Dust (#E8C4B8) or Dried Flower (#C5B5C8) at 15-25% opacity - **Position:** Partially offscreen, bleeding past viewport edges by 20-40%. Never fully contained within the viewport -- they should feel like they extend beyond the visible space - **Behavior:** On scroll, blobs translate slowly in the opposite direction of scroll at 0.15x scroll speed (a very subtle parallax that reads as ambient movement rather than a deliberate parallax effect). On hover (when the cursor passes over a blob), it deforms slightly -- its control points shift by 3-5% of its size, creating a gentle wobble effect with a 600ms spring-eased transition - **Quantity:** 5-7 blobs total across the full page, placed at irregular intervals. No two blobs share the same hue or size. **Decorative Patterns:** Fine, repeating patterns inspired by botanical print backgrounds appear in specific contexts: - Inside terrarium cards: a faint, repeating pattern of tiny seed cross-sections (4px diameter, sage green at 8% opacity, spaced 32px apart) as a CSS `background-image` using a base64-encoded SVG - As a page-wide background texture: an extremely subtle dot-grain pattern (1px dots, #3D3830 at 3% opacity, randomly distributed at approximately 2% coverage) that gives the cream backgrounds a paper-like tactile quality ## Prompts for Implementation **Full-Screen Narrative Experience:** The site must be experienced as a journey through a botanical specimen collection -- each scroll revealing the next specimen in the cabinet. The opening state is the hero: a full-viewport moment of stillness where the seed-pod illustration assembles itself (SVG paths drawing in over 2.4 seconds, fills fading in 0.6 seconds after paths complete, annotation labels appearing last with a gentle fade-up over 0.4 seconds each, staggered by 0.15 seconds). The hero should hold the viewer for at least 3 seconds before any content below becomes visible or any scroll indicator appears. **Skeleton Loading Pattern:** Before any content renders, the site displays a skeleton-loading state that is itself a designed experience, not merely a placeholder. The skeleton uses the cream palette (#F5F0E8 base with #EDE5D8 skeleton blocks) and features: - Rounded rectangle placeholders (border-radius: 1rem) where text will appear, sized to approximate final content dimensions - A large organic-blob-shaped placeholder where the hero illustration will appear, using a CSS clip-path with the same bezier curves as the final blob shapes - A shimmer animation that sweeps across all skeleton elements simultaneously: a linear-gradient (`90deg, transparent 0%, #D4C48A 50%, transparent 100%`) at 20% opacity, translating from left to right over 1.8 seconds on infinite loop with `ease-in-out` timing - The skeleton dissolves into final content element-by-element (not all at once), with each element's skeleton placeholder scaling down slightly (transform: scale(0.97)) and fading to 0 opacity over 0.3 seconds while the real content scales up from 0.97 to 1.0 and fades in, creating a seamless morph-like transition - Skeleton loading is not just for initial page load -- it is reused whenever new sections scroll into view for the first time, giving each section a micro-loading moment that reinforces the motif **Scroll Behavior:** Scrolling is the primary interaction mode. Use `IntersectionObserver` with a threshold array of [0, 0.1, 0.25, 0.5, 0.75, 1.0] to track section visibility granularly. As sections cross the 25% visibility threshold, trigger: 1. Skeleton-to-content morph transition (first visit only) 2. Botanical illustration SVG path-draw animations (using `stroke-dasharray` and `stroke-dashoffset` animated via CSS transitions, not JavaScript-driven animation frames) 3. Blob wobble activation (blobs in the visible section begin their ambient deformation cycle) 4. Text fade-up: body text paragraphs translate from `translateY(16px)` and `opacity: 0` to their final positions over 0.5 seconds with a cubic-bezier(0.25, 0.46, 0.45, 0.94) easing **Spring Physics for Micro-Interactions:** All interactive elements (the seed-icon navigation, terrarium card hovers, annotation label hovers) use spring-physics easing rather than standard CSS easing curves. Approximate spring physics with `cubic-bezier(0.34, 1.56, 0.64, 1.0)` for overshoot effects on scale and transform properties. The seed-icon navigation button uses a more pronounced spring: `cubic-bezier(0.25, 1.8, 0.5, 1.0)` for its expand-on-hover behavior. **Organic Blob Animation:** Blobs are animated using CSS custom properties and `@keyframes`. Each blob has 4-6 control points defined as CSS custom properties (e.g., `--blob-cp1-x`, `--blob-cp1-y`). A keyframe animation cycles these control points through 3-4 waypoints over 12-20 seconds (each blob at a different duration to prevent synchronization), creating a slow, living breathing motion. The animation uses `ease-in-out` timing and `infinite` iteration. On hover, a separate animation temporarily overrides 2-3 control points, creating the wobble deformation described earlier. **CSS-Composed Botanical Illustrations:** Where possible, botanical illustrations should be implemented as inline SVG rather than image files. This enables: - Path-draw animations on scroll entry - Color theming via CSS custom properties (the same illustration can shift its stroke and fill colors if future dark-mode support is added) - Responsive scaling without quality loss - Integration with the blob deformation system (illustration elements can share the ambient wobble behavior) **AVOID:** CTA-heavy layouts (no "Sign Up Now" buttons, no urgency), pricing blocks, stat-grids, testimonial carousels, cookie banners as visual elements, stock photography, drop shadows harder than 8% opacity, any pure black (#000000) or pure white (#FFFFFF), rigid symmetry in any section, parallax effects faster than 0.2x scroll speed. **Responsive Approach:** On mobile (below 768px), the hero illustration repositions to sit above the text rather than behind it. Two-column sections collapse to single column. Organic blobs reduce in number from 5-7 to 2-3 (removing the smallest ones). Terrarium cards stack vertically with 4vh spacing. The seed-icon navigation moves to bottom-center of the viewport. Annotation-style text repositions from floating positions to inline flow. All animations reduce their duration by 30% and disable the blob hover-wobble effect to respect reduced-motion scenarios. ## Uniqueness Notes **Differentiators from other designs:** 1. **Skeleton-Loading as Design Motif, Not Utility:** While skeleton loading appears at 4% frequency in the portfolio, it is always used as a pure UX utility -- a grey placeholder that disappears when content loads. munj.uk elevates skeleton loading into a first-class design element: the skeleton IS part of the visual experience, with its own palette (the muted gold shimmer), its own shapes (organic blob clip-paths rather than rectangles), and its own choreography (element-by-element morph transitions). The skeleton reappears for each new section on scroll, making it a recurring visual rhythm rather than a one-time loading state. 2. **Botanical-Illustration as Information Architecture:** At 3% frequency, botanical illustration is rare in the portfolio, and where it appears, it is purely decorative. munj.uk uses botanical illustration structurally -- the illustrations are not backgrounds or accents but the primary content containers. Text wraps around them using `shape-outside`, navigation is a seed cross-section, section dividers are root systems, and the hierarchy of information mirrors the hierarchy of a botanical specimen plate (primary subject, detail views, annotation labels). 3. **Handwritten Script as Controlled Disruption:** The Caveat handwriting font is used with extreme restraint -- only for specimen labels and annotations, never for headlines or body copy. This creates a specific tension between the geometric precision of Outfit/Plus Jakarta Sans and the human imperfection of handwriting that no other design in the portfolio achieves. The handwriting is not decorative or playful in the typical web-design sense; it is functional, mimicking the actual role of handwriting in scientific illustration (field notes, specimen tags, margin annotations). 4. **Calm-Serene Tone Without Minimalism:** At 3% frequency, calm-serene tone is rare, and it almost always co-occurs with minimalist aesthetics. munj.uk achieves serenity through abundance rather than absence -- the page is richly filled with botanical illustrations, floating blobs, layered textures, and generous typography, yet the overall experience feels quiet and unhurried because every element moves slowly, every color is muted, and the spacing between elements gives each one room to be perceived individually. 5. **Organic Blob Motion as Ambient Environment:** While organic-blobs appear at 6% frequency in imagery, they are typically static decorative elements. munj.uk's blobs are living environmental elements -- they breathe (slow keyframe animation of control points), respond to proximity (hover deformation), and move with scroll (subtle counter-parallax). They function as the humidity of the greenhouse: invisible when you stop thinking about them, but fundamentally shaping the feel of the space. **Documented Seed/Style:** aesthetic: playful, layout: hero-dominant, typography: geometric-sans, palette: creamy-pastel, patterns: skeleton-loading, imagery: botanical-illustration, motifs: organic-blobs, tone: calm-serene **Avoided Patterns (from frequency analysis):** - centered layout (99% -- used hero-dominant instead at 5%) - scroll-triggered as primary pattern (97% -- used skeleton-loading as primary at 4%, with scroll-triggered as secondary) - mono typography (99% -- used geometric-sans at 8%) - warm palette (100% -- used creamy-pastel at 1%) - minimal imagery (94% -- used botanical-illustration at 3%) - vintage motifs (84% -- used organic-blobs) - friendly tone (98% -- used calm-serene at 3%)